remove some useless svg groups

[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 3966506d2b2b815868b5553bbdce64287af992ff..6dee8180f7be7bfdb3a80dc5819c26b68776f1ee 100644 (file)
--- a/resources/js/components/tracker/ToggleIcon.js
+++ b/resources/js/components/tracker/ToggleIcon.js
@@ -8,6 +8,7 @@ import {
        getDungeonBoss,
        getDungeonRemainingItems,
        getDungeonPrize,
+       getGTBoss,
        hasDungeonBoss,
        hasDungeonPrize,
        highestActive,
@@ -18,11 +19,12 @@ import {
 } from '../../helpers/tracker';
 import { useTracker } from '../../hooks/tracker';
 
-const ToggleIcon = ({ controller, className, icons }) => {
+const ToggleIcon = ({ controller, className, icons, svg, transform }) => {
        const { setManualState, state } = useTracker();
        const activeController = controller || ToggleIcon.nullController;
        const active = activeController.getActive(state, icons);
        const defaultIcon = activeController.getDefault(state, icons);
+       const icon = active || defaultIcon || icons[0];
        const classNames = ['toggle-icon'];
        if (active) {
                classNames.push('active');
@@ -32,6 +34,25 @@ const ToggleIcon = ({ controller, className, icons }) => {
        if (className) {
                classNames.push(className);
        }
+       if (svg) {
+               return <g
+                       className={classNames.join(' ')}
+                       data-icon={icon}
+                       onClick={(e) => {
+                               activeController.handlePrimary(state, setManualState, icons);
+                               e.preventDefault();
+                               e.stopPropagation();
+                       }}
+                       onContextMenu={(e) => {
+                               activeController.handleSecondary(state, setManualState, icons);
+                               e.preventDefault();
+                               e.stopPropagation();
+                       }}
+                       transform={transform}
+               >
+                       <ZeldaIcon name={icon} svg />
+               </g>;
+       }
        return <span
                className={classNames.join(' ')}
                onClick={(e) => {
@@ -97,6 +118,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,
@@ -163,6 +205,13 @@ ToggleIcon.dungeonPrizeController = (dungeon) => ({
        handleSecondary: previousString(`${dungeon.id}-prize`),
 });
 
+ToggleIcon.gtBossController = (which) => ({
+       getActive: (state) => getGTBoss(state, which),
+       getDefault: (state) => getGTBoss(state, which),
+       handlePrimary: nextString(`gt-${which}-boss`),
+       handleSecondary: previousString(`gt-${which}-boss`),
+});
+
 ToggleIcon.medallionController = {
        getActive: highestActive,
        getDefault: firstIcon,
@@ -219,6 +268,13 @@ ToggleIcon.nullController = {
        handleSecondary: doNothing,
 };
 
+ToggleIcon.pinController = (pin, removePin) => ({
+       getActive: firstIcon,
+       getDefault: firstIcon,
+       handlePrimary: doNothing,
+       handleSecondary: () => removePin(pin),
+});
+
 ToggleIcon.simpleController = {
        getActive: highestActive,
        getDefault: firstIcon,
@@ -248,6 +304,8 @@ ToggleIcon.propTypes = {
                handleSecondary: PropTypes.func,
        }),
        icons: PropTypes.arrayOf(PropTypes.string),
+       svg: PropTypes.bool,
+       transform: PropTypes.string,
 };
 
 export default ToggleIcon;