crystal switches in door tracker

diff --git a/resources/js/components/common/ZeldaIcon.js b/resources/js/components/common/ZeldaIcon.js
index c5da0b554cbc242322ea3f8c2ab0a2510c50a23f..067dfbc2e986e4de3a5a3e37a835a29d72cb1cad 100644 (file)
--- a/resources/js/components/common/ZeldaIcon.js
+++ b/resources/js/components/common/ZeldaIcon.js
@@ -74,6 +74,10 @@ const getIconURL = name => {
                case 'dungeon-tr':
                case 'dungeon-tt':
                        return `/dungeon/${name.substr(8)}.png`;
+               case 'crystal-switch':
+               case 'crystal-switch-blue':
+               case 'crystal-switch-red':
+                       return `/icon/${name}.png`;
                default:
                        return '';
        }

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={

diff --git a/resources/sass/doors.scss b/resources/sass/doors.scss
index 61eee2e8b4e18f2f1ba05517f4516abfb56f62e4..3cd3a8c099f5cb60cc3e284e324f9775f6fcf53d 100644 (file)
--- a/resources/sass/doors.scss
+++ b/resources/sass/doors.scss
@@ -11,6 +11,9 @@
                &.off {
                        opacity: .3;
                }
+               &.cswitch {
+                       background: #505050;
+               }
                &.dungeon {
                        background: #b3700b;
                }