crystal switches in door tracker

[alttp.git] / resources / js / components / pages / DoorsTracker.js

diff --git a/resources/js/components/pages/DoorsTracker.js b/resources/js/components/pages/DoorsTracker.js
index ae96530740170d53ecca35f6d0d6b522d223299b..abd3c054d5da2db1d42acd1ee1fa136a9b728fc3 100644 (file)
--- a/resources/js/components/pages/DoorsTracker.js
+++ b/resources/js/components/pages/DoorsTracker.js
@@ -51,6 +51,19 @@ const ITEM_CLASSES = {
        '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,
@@ -59,6 +72,7 @@ const DoorsTracker = () => {
                        [item]: false,
                }), {
                        boss: true,
+                       cswitch: '',
                        keys: 1,
                }),
        }), {}));
@@ -75,6 +89,30 @@ const DoorsTracker = () => {
                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,
@@ -120,6 +158,16 @@ const DoorsTracker = () => {
                                        >
                                                {state[dungeon].keys}
                                        </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={