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 c1a193c209f9540457cc7d223a6c9f54f7734430..6de9f63632652dea775d0eca42259e5f15d0425d 100644 (file)
--- a/resources/js/components/tracker/ToggleIcon.js
+++ b/resources/js/components/tracker/ToggleIcon.js
@@ -18,7 +18,7 @@ import {
 } from '../../helpers/tracker';
 import { useTracker } from '../../hooks/tracker';
 
-const ToggleIcon = ({ controller, className, icons }) => {
+const ToggleIcon = ({ controller, className, icons, svg }) => {
        const { setManualState, state } = useTracker();
        const activeController = controller || ToggleIcon.nullController;
        const active = activeController.getActive(state, icons);
@@ -32,6 +32,23 @@ 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) => {
@@ -269,6 +286,7 @@ ToggleIcon.propTypes = {
                handleSecondary: PropTypes.func,
        }),
        icons: PropTypes.arrayOf(PropTypes.string),
+       svg: PropTypes.bool,
 };
 
 export default ToggleIcon;