tracker items as svg

[alttp.git] / resources / js / components / tracker / ToggleIcon.js

diff --git a/resources/js/components/tracker/ToggleIcon.js b/resources/js/components/tracker/ToggleIcon.js
index 3f6af9641c0926acb2bf31b1cd8618e74ffe5c3d..6de9f63632652dea775d0eca42259e5f15d0425d 100644 (file)
--- a/resources/js/components/tracker/ToggleIcon.js
+++ b/resources/js/components/tracker/ToggleIcon.js
@@ -3,19 +3,23 @@ import React from 'react';
 
 import ZeldaIcon from '../common/ZeldaIcon';
 import {
+       addDungeonCheck,
        decrement,
        getDungeonBoss,
+       getDungeonRemainingItems,
        getDungeonPrize,
        hasDungeonBoss,
        hasDungeonPrize,
        highestActive,
        increment,
+       removeDungeonCheck,
        toggleBoolean,
+       toggleBossDefeated,
 } from '../../helpers/tracker';
 import { useTracker } from '../../hooks/tracker';
 
-const ToggleIcon = ({ controller, className, icons }) => {
-       const { state, setState } = useTracker();
+const ToggleIcon = ({ controller, className, icons, svg }) => {
+       const { setManualState, state } = useTracker();
        const activeController = controller || ToggleIcon.nullController;
        const active = activeController.getActive(state, icons);
        const defaultIcon = activeController.getDefault(state, icons);
@@ -28,15 +32,32 @@ const ToggleIcon = ({ controller, className, icons }) => {
        if (className) {
                classNames.push(className);
        }
+       if (svg) {
+               return <g
+                       className={classNames.join(' ')}
+                       onClick={(e) => {
+                               activeController.handlePrimary(state, setManualState, icons);
+                               e.preventDefault();
+                               e.stopPropagation();
+                       }}
+                       onContextMenu={(e) => {
+                               activeController.handleSecondary(state, setManualState, icons);
+                               e.preventDefault();
+                               e.stopPropagation();
+                       }}
+               >
+                       <ZeldaIcon name={active || defaultIcon || icons[0]} svg />
+               </g>;
+       }
        return <span
                className={classNames.join(' ')}
                onClick={(e) => {
-                       activeController.handlePrimary(state, setState, icons);
+                       activeController.handlePrimary(state, setManualState, icons);
                        e.preventDefault();
                        e.stopPropagation();
                }}
                onContextMenu={(e) => {
-                       activeController.handleSecondary(state, setState, icons);
+                       activeController.handleSecondary(state, setManualState, icons);
                        e.preventDefault();
                        e.stopPropagation();
                }}
@@ -93,6 +114,27 @@ const previousString = property => (state, setState, icons) => {
        setState(s => ({ ...s, [property]: previous }));
 };
 
+ToggleIcon.bottleController = ctrl => ({
+       getActive: (state, icons) => state[ctrl] ? icons[state[ctrl] - 1] : null,
+       getDefault: () => 'bottle',
+       handlePrimary: (state, setState, icons) => {
+               if (state[ctrl] === 0) {
+                       // skip over mushroom
+                       setState(s => ({ ...s, [ctrl]: 2 }));
+               } else {
+                       setState(increment(ctrl, icons.length));
+               }
+       },
+       handleSecondary: (state, setState, icons) => {
+               if (state[ctrl] === 2) {
+                       // skip over mushroom
+                       setState(s => ({ ...s, [ctrl]: 0 }));
+               } else {
+                       setState(decrement(ctrl, icons.length));
+               }
+       },
+});
+
 ToggleIcon.countController = max => ({
        getActive: highestActive,
        getDefault: firstIcon,
@@ -110,23 +152,23 @@ ToggleIcon.dungeonBossController = (dungeon) => ({
        handlePrimary: dungeon.bosses.length > 1
                ? nextString(`${dungeon.id}-boss`)
                : (state, setState) => {
-                       setState(toggleBoolean(`${dungeon.id}-boss-defeated`));
+                       setState(toggleBossDefeated(dungeon));
                },
        handleSecondary: dungeon.bosses.length > 1 ?
                previousString(`${dungeon.id}-boss`)
                : (state, setState) => {
-                       setState(toggleBoolean(`${dungeon.id}-boss-defeated`));
+                       setState(toggleBossDefeated(dungeon));
                },
 });
 
-ToggleIcon.dungeonCheckController = (dungeon, max) => ({
-       getActive: (state, icons) => state[`${dungeon.id}-checks`] < max ? icons[1] : null,
+ToggleIcon.dungeonCheckController = (dungeon) => ({
+       getActive: (state, icons) => getDungeonRemainingItems(state, dungeon) ? icons[1] : null,
        getDefault: firstIcon,
        handlePrimary: (state, setState) => {
-               setState(increment(`${dungeon.id}-checks`, max));
+               setState(addDungeonCheck(dungeon));
        },
        handleSecondary: (state, setState) => {
-               setState(decrement(`${dungeon.id}-checks`, max));
+               setState(removeDungeonCheck(dungeon));
        },
 });
 
@@ -201,10 +243,10 @@ ToggleIcon.modulusController = ctrl => ({
        getActive: (state, icons) => icons[(state[ctrl] || 0) % icons.length],
        getDefault: firstIcon,
        handlePrimary: (state, setState, icons) => {
-               setState(increment(icons[0], icons.length));
+               setState(increment(ctrl, icons.length));
        },
        handleSecondary: (state, setState, icons) => {
-               setState(decrement(icons[0], icons.length));
+               setState(decrement(ctrl, icons.length));
        },
 });
 
@@ -244,6 +286,7 @@ ToggleIcon.propTypes = {
                handleSecondary: PropTypes.func,
        }),
        icons: PropTypes.arrayOf(PropTypes.string),
+       svg: PropTypes.bool,
 };
 
 export default ToggleIcon;