option to invert event filter

[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 a6c6acefac93032d00c22c79e9c0ab7310a0bf50..abd3c054d5da2db1d42acd1ee1fa136a9b728fc3 100644 (file)
--- a/resources/js/components/pages/DoorsTracker.js
+++ b/resources/js/components/pages/DoorsTracker.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 
 import ZeldaIcon from '../common/ZeldaIcon';
 
@@ -50,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,
@@ -58,6 +72,7 @@ const DoorsTracker = () => {
                        [item]: false,
                }), {
                        boss: true,
+                       cswitch: '',
                        keys: 1,
                }),
        }), {}));
@@ -74,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,
@@ -98,36 +137,52 @@ const DoorsTracker = () => {
                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;