1 import React from 'react';
2 import { Helmet } from 'react-helmet';
4 import ZeldaIcon from '../common/ZeldaIcon';
38 const ITEM_CLASSES = {
39 'compass': 'dungeon-item',
40 'map': 'dungeon-item',
41 'big-key': 'dungeon-item',
48 'fighter-sword': 'item',
54 const DoorsTracker = () => {
55 const [state, setState] = React.useState(DUNGEONS.reduce((state, dungeon) => ({
57 [dungeon]: ITEMS.reduce((items, item) => ({
66 const handleItemClick = React.useCallback((dungeon, item) => e => {
71 [item]: !state[dungeon][item],
78 const handleKeysClick = React.useCallback(dungeon => e => {
83 keys: state[dungeon].keys + 1,
90 const handleKeysRightClick = React.useCallback(dungeon => e => {
95 keys: Math.max(state[dungeon].keys - 1, 0),
104 <title>Doors Tracker</title>
105 <meta name="description" content="Doors Tracker" />
107 <div className="doors-tracker d-flex flex-column">
108 {DUNGEONS.map(dungeon =>
109 <div className="d-flex flex-row" key={dungeon}>
111 className={`cell ${state[dungeon].boss ? 'on' : 'off'} dungeon`}
112 onClick={handleItemClick(dungeon, 'boss')}
114 <ZeldaIcon name={`dungeon-${dungeon}`} />
117 className={`cell ${state[dungeon].keys ? 'on' : 'off'} keys`}
118 onClick={handleKeysClick(dungeon)}
119 onContextMenu={handleKeysRightClick(dungeon)}
121 {state[dungeon].keys}
126 `cell ${state[dungeon][item] ? 'on' : 'off'} ${ITEM_CLASSES[item]}`
129 onClick={handleItemClick(dungeon, item)}
131 <ZeldaIcon name={item} />
140 export default DoorsTracker;