import React from 'react';
+import { Helmet } from 'react-helmet';
import ZeldaIcon from '../common/ZeldaIcon';
'flippers': 'item',
};
+const nextCSwitch = cur => {
+ switch (cur) {
+ case 'blue':
+ return 'red';
+ case 'red':
+ return '';
+ default:
+ return 'blue';
+ }
+};
+
+const prevCSwitch = cur => nextCSwitch(nextCSwitch(cur));
+
const DoorsTracker = () => {
const [state, setState] = React.useState(DUNGEONS.reduce((state, dungeon) => ({
...state,
[item]: false,
}), {
boss: true,
+ cswitch: '',
keys: 1,
}),
}), {}));
e.stopPropagation();
});
+ const handleCSwitchClick = React.useCallback(dungeon => e => {
+ setState(state => ({
+ ...state,
+ [dungeon]: {
+ ...state[dungeon],
+ cswitch: nextCSwitch(state[dungeon].cswitch),
+ },
+ }));
+ e.preventDefault();
+ e.stopPropagation();
+ });
+
+ const handleCSwitchRightClick = React.useCallback(dungeon => e => {
+ setState(state => ({
+ ...state,
+ [dungeon]: {
+ ...state[dungeon],
+ cswitch: prevCSwitch(state[dungeon].cswitch),
+ },
+ }));
+ e.preventDefault();
+ e.stopPropagation();
+ });
+
const handleKeysClick = React.useCallback(dungeon => e => {
setState(state => ({
...state,
e.stopPropagation();
});
- return <div className="doors-tracker d-flex flex-column">
- {DUNGEONS.map(dungeon =>
- <div className="d-flex flex-row" key={dungeon}>
- <div
- className={`cell ${state[dungeon].boss ? 'on' : 'off'} dungeon`}
- onClick={handleItemClick(dungeon, 'boss')}
- >
- <ZeldaIcon name={`dungeon-${dungeon}`} />
- </div>
- <div
- className={`cell ${state[dungeon].keys ? 'on' : 'off'} keys`}
- onClick={handleKeysClick(dungeon)}
- onContextMenu={handleKeysRightClick(dungeon)}
- >
- {state[dungeon].keys}
- </div>
- {ITEMS.map(item =>
+ return <>
+ <Helmet>
+ <title>Doors Tracker</title>
+ <meta name="description" content="Doors Tracker" />
+ </Helmet>
+ <div className="doors-tracker d-flex flex-column">
+ {DUNGEONS.map(dungeon =>
+ <div className="d-flex flex-row" key={dungeon}>
+ <div
+ className={`cell ${state[dungeon].boss ? 'on' : 'off'} dungeon`}
+ onClick={handleItemClick(dungeon, 'boss')}
+ >
+ <ZeldaIcon name={`dungeon-${dungeon}`} />
+ </div>
<div
- className={
- `cell ${state[dungeon][item] ? 'on' : 'off'} ${ITEM_CLASSES[item]}`
- }
- key={item}
- onClick={handleItemClick(dungeon, item)}
+ className={`cell ${state[dungeon].keys ? 'on' : 'off'} keys`}
+ onClick={handleKeysClick(dungeon)}
+ onContextMenu={handleKeysRightClick(dungeon)}
>
- <ZeldaIcon name={item} />
+ {state[dungeon].keys}
</div>
- )}
- </div>
- )}
- </div>;
+ <div
+ className={`cell ${state[dungeon].cswitch ? 'on' : 'off'} cswitch`}
+ onClick={handleCSwitchClick(dungeon)}
+ onContextMenu={handleCSwitchRightClick(dungeon)}
+ >
+ <ZeldaIcon name={state[dungeon].cswitch
+ ? `crystal-switch-${state[dungeon].cswitch}`
+ : 'crystal-switch'
+ } />
+ </div>
+ {ITEMS.map(item =>
+ <div
+ className={
+ `cell ${state[dungeon][item] ? 'on' : 'off'} ${ITEM_CLASSES[item]}`
+ }
+ key={item}
+ onClick={handleItemClick(dungeon, item)}
+ >
+ <ZeldaIcon name={item} />
+ </div>
+ )}
+ </div>
+ )}
+ </div>
+ </>;
};
export default DoorsTracker;