remove some useless svg groups

diff --git a/resources/js/components/common/ZeldaIcon.js b/resources/js/components/common/ZeldaIcon.js
index 457e6e91ba177c933dcb92cfe3bf39486f376a22..18b13eb20664134032a24ce47bff5e2b4f7702ad 100644 (file)
--- a/resources/js/components/common/ZeldaIcon.js
+++ b/resources/js/components/common/ZeldaIcon.js
@@ -169,9 +169,8 @@ const ZeldaIcon = ({ name, svg, title }) => {
                        href={isOnItemMap(strippedName) ? ITEM_MAP_URL : src}
                        width={ITEM_MAP_WIDTH}
                        height={ITEM_MAP_HEIGHT}
-                       x="0"
-                       y="0"
-                       transform={`translate(-${clipX + 0.5} -${clipY + 0.5})`}
+                       x={`-${clipX + 0.5}`}
+                       y={`-${clipY + 0.5}`}
                        clipPath={`xywh(${clipX + cropX} ${clipY + cropY} ${cropW} ${cropH})`}
                >
                        {realTitle ?

diff --git a/resources/js/components/tracker/Canvas.js b/resources/js/components/tracker/Canvas.js
index fab194219c7d56ec9dee81d34c27b5cce9a2c340..1258776809c000152abb72187398cf62e46f6b3b 100644 (file)
--- a/resources/js/components/tracker/Canvas.js
+++ b/resources/js/components/tracker/Canvas.js
@@ -147,19 +147,16 @@ const Canvas = () => {
                </g>
                <g className="pins">
                        {pins.map(pin =>
-                               <g
+                               <ToggleIcon
                                        key={pin.id}
+                                       className={`map-pin map-pin-${pin.id}`}
+                                       controller={ToggleIcon.pinController(pin, removePin)}
+                                       icons={[pin.icon]}
+                                       svg
                                        transform={
                                                `translate(${pin.x * layout.width} ${pin.y * layout.height}) scale(3)`
                                        }
-                               >
-                                       <ToggleIcon
-                                               className={`map-pin map-pin-${pin.id}`}
-                                               controller={ToggleIcon.pinController(pin, removePin)}
-                                               icons={[pin.icon]}
-                                               svg
-                                       />
-                               </g>
+                               />
                        )}
                </g>
                {dragging ?

diff --git a/resources/js/components/tracker/Dungeons.js b/resources/js/components/tracker/Dungeons.js
index 9c6e122f382f6792bae71f5e7fd99febe4da5900..c6ed5c2fe7991a41c1d6fbeebfbe8c9bd5ac224d 100644 (file)
--- a/resources/js/components/tracker/Dungeons.js
+++ b/resources/js/components/tracker/Dungeons.js
@@ -32,7 +32,7 @@ const Dungeons = ({ columns }) => {
                        } ${row + 0.5})`;
 
                const transforms = {
-                       tag: '',
+                       tag: null,
                        map: `translate(${mapX} 0) scale(0.9)`,
                        compass: `translate(${compassX} 0) scale(0.9)`,
                        small: `translate(${smallX} 0) scale(0.9)`,
@@ -101,22 +101,20 @@ const Dungeons = ({ columns }) => {
                                        <text className="dungeon-tag">{dungeon.id.toUpperCase()}</text>
                                </g>
                                {shouldShowDungeonItem(config, 'Map') ?
-                                       <g transform={layout.transforms.map}>
-                                               <ToggleIcon
-                                                       controller={ToggleIcon.dungeonController(dungeon)}
-                                                       icons={['map']}
-                                                       svg
-                                               />
-                                       </g>
+                                       <ToggleIcon
+                                               controller={ToggleIcon.dungeonController(dungeon)}
+                                               icons={['map']}
+                                               svg
+                                               transform={layout.transforms.map}
+                                       />
                                : null}
                                {shouldShowDungeonItem(config, 'Compass') ?
-                                       <g transform={layout.transforms.compass}>
-                                               <ToggleIcon
-                                                       controller={ToggleIcon.dungeonController(dungeon)}
-                                                       icons={['compass']}
-                                                       svg
-                                               />
-                                       </g>
+                                       <ToggleIcon
+                                               controller={ToggleIcon.dungeonController(dungeon)}
+                                               icons={['compass']}
+                                               svg
+                                               transform={layout.transforms.compass}
+                                       />
                                : null}
                                {shouldShowDungeonItem(config, 'Small') ?
                                        <g transform={layout.transforms.small}>
@@ -132,13 +130,12 @@ const Dungeons = ({ columns }) => {
                                        </g>
                                : null}
                                {shouldShowDungeonItem(config, 'Big') ?
-                                       <g transform={layout.transforms.big}>
-                                               <ToggleIcon
-                                                       controller={ToggleIcon.dungeonController(dungeon)}
-                                                       icons={['big-key']}
-                                                       svg
-                                               />
-                                       </g>
+                                       <ToggleIcon
+                                               controller={ToggleIcon.dungeonController(dungeon)}
+                                               icons={['big-key']}
+                                               svg
+                                               transform={layout.transforms.big}
+                                       />
                                : null}
                                <g transform={layout.transforms.checks}>
                                        <ToggleIcon
@@ -149,50 +146,45 @@ const Dungeons = ({ columns }) => {
                                        <CountDisplay count={getDungeonRemainingItems(state, dungeon)} />
                                </g>
                                {dungeon.boss ?
-                                       <g transform={layout.transforms.boss}>
-                                               <ToggleIcon
-                                                       controller={ToggleIcon.dungeonBossController(dungeon)}
-                                                       icons={dungeon.bosses}
-                                                       svg
-                                               />
-                                       </g>
+                                       <ToggleIcon
+                                               controller={ToggleIcon.dungeonBossController(dungeon)}
+                                               icons={dungeon.bosses}
+                                               svg
+                                               transform={layout.transforms.boss}
+                                       />
                                : null}
                                {dungeon.prize ?
-                                       <g transform={layout.transforms.prize}>
-                                               <ToggleIcon
-                                                       controller={ToggleIcon.dungeonPrizeController(dungeon)}
-                                                       icons={[
-                                                               'crystal',
-                                                               'red-crystal',
-                                                               'green-pendant',
-                                                               'red-pendant',
-                                                       ]}
-                                                       svg
-                                               />
-                                       </g>
+                                       <ToggleIcon
+                                               controller={ToggleIcon.dungeonPrizeController(dungeon)}
+                                               icons={[
+                                                       'crystal',
+                                                       'red-crystal',
+                                                       'green-pendant',
+                                                       'red-pendant',
+                                               ]}
+                                               svg
+                                               transform={layout.transforms.prize}
+                                       />
                                : null}
                                {dungeon.id === 'gt' && config.bossShuffle ? <>
-                                       <g transform={layout.transforms.gtBoss1}>
-                                               <ToggleIcon
-                                                       controller={ToggleIcon.gtBossController('bot')}
-                                                       icons={BOSSES}
-                                                       svg
-                                               />
-                                       </g>
-                                       <g transform={layout.transforms.gtBoss2}>
-                                               <ToggleIcon
-                                                       controller={ToggleIcon.gtBossController('mid')}
-                                                       icons={BOSSES}
-                                                       svg
-                                               />
-                                       </g>
-                                       <g transform={layout.transforms.gtBoss3}>
-                                               <ToggleIcon
-                                                       controller={ToggleIcon.gtBossController('top')}
-                                                       icons={BOSSES}
-                                                       svg
-                                               />
-                                       </g>
+                                       <ToggleIcon
+                                               controller={ToggleIcon.gtBossController('bot')}
+                                               icons={BOSSES}
+                                               svg
+                                               transform={layout.transforms.gtBoss1}
+                                       />
+                                       <ToggleIcon
+                                               controller={ToggleIcon.gtBossController('mid')}
+                                               icons={BOSSES}
+                                               svg
+                                               transform={layout.transforms.gtBoss2}
+                                       />
+                                       <ToggleIcon
+                                               controller={ToggleIcon.gtBossController('top')}
+                                               icons={BOSSES}
+                                               svg
+                                               transform={layout.transforms.gtBoss3}
+                                       />
                                </> : null}
                        </g>
                )}

diff --git a/resources/js/components/tracker/Items.js b/resources/js/components/tracker/Items.js
index 2a9c01a0affdc6620cc0615bc2eb57a49b0cf1a1..e991d0bcc6d2aee11070e4a972d21a489a8a807a 100644 (file)
--- a/resources/js/components/tracker/Items.js
+++ b/resources/js/components/tracker/Items.js
@@ -10,30 +10,54 @@ const Items = () => {
        const { state } = useTracker();
 
        return <>
-               <g transform={transform(0.5, 0.5)}>
-                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['bow', 'silvers']} svg />
-               </g>
-               <g transform={transform(1.35, 0.5)}>
-                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['blue-boomerang']} svg />
-               </g>
-               <g transform={transform(1.85, 0.5)}>
-                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['red-boomerang']} svg />
-               </g>
-               <g transform={transform(2.5, 0.5)}>
-                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['hookshot']} svg />
-               </g>
-               <g transform={transform(3.5, 0.5)}>
-                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['bomb']} svg />
-               </g>
-               <g transform={transform(4.5, 0.5)}>
-                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['powder']} svg />
-               </g>
-               <g transform={transform(0.5, 1.5)}>
-                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['fire-rod']} svg />
-               </g>
-               <g transform={transform(1.5, 1.5)}>
-                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['ice-rod']} svg />
-               </g>
+               <ToggleIcon
+                       controller={ToggleIcon.simpleController}
+                       icons={['bow', 'silvers']}
+                       svg
+                       transform={transform(0.5, 0.5)}
+               />
+               <ToggleIcon
+                       controller={ToggleIcon.simpleController}
+                       icons={['blue-boomerang']}
+                       svg
+                       transform={transform(1.35, 0.5)}
+               />
+               <ToggleIcon
+                       controller={ToggleIcon.simpleController}
+                       icons={['red-boomerang']}
+                       svg
+                       transform={transform(1.85, 0.5)}
+               />
+               <ToggleIcon
+                       controller={ToggleIcon.simpleController}
+                       icons={['hookshot']}
+                       svg
+                       transform={transform(2.5, 0.5)}
+               />
+               <ToggleIcon
+                       controller={ToggleIcon.simpleController}
+                       icons={['bomb']}
+                       svg
+                       transform={transform(3.5, 0.5)}
+               />
+               <ToggleIcon
+                       controller={ToggleIcon.simpleController}
+                       icons={['powder']}
+                       svg
+                       transform={transform(4.5, 0.5)}
+               />
+               <ToggleIcon
+                       controller={ToggleIcon.simpleController}
+                       icons={['fire-rod']}
+                       svg
+                       transform={transform(0.5, 1.5)}
+               />
+               <ToggleIcon
+                       controller={ToggleIcon.simpleController}
+                       icons={['ice-rod']}
+                       svg
+                       transform={transform(1.5, 1.5)}
+               />
                <g transform={transform(2.5, 1.5)}>
                        <ToggleIcon controller={ToggleIcon.medallionController} icons={['bombos']} svg />
                        {state['mm-medallion'] === 'bombos' ?
@@ -61,121 +85,156 @@ const Items = () => {
                                <text className="med-display bottom-right">TR</text>
                        : null}
                </g>
-               <g transform={transform(0.5, 2.5)}>
-                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['lamp']} svg />
-               </g>
-               <g transform={transform(1.5, 2.5)}>
-                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['hammer']} svg />
-               </g>
-               <g transform={transform(2.5, 2.5)}>
-                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['flute']} svg />
-               </g>
-               <g transform={transform(2.75, 2.75, 0.5)}>
-                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['duck']} svg />
-               </g>
-               <g transform={transform(3.5, 2.5)}>
-                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['bugnet']} svg />
-               </g>
-               <g transform={transform(4.5, 2.5)}>
-                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['book']} svg />
-               </g>
-               <g transform={transform(0.5, 3.5)}>
-                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['shovel']} svg />
-               </g>
-               <g transform={transform(1.5, 3.5)}>
-                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['somaria']} svg />
-               </g>
-               <g transform={transform(2.5, 3.5)}>
-                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['byrna']} svg />
-               </g>
-               <g transform={transform(3.5, 3.5)}>
-                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['cape']} svg />
-               </g>
-               <g transform={transform(4.5, 3.5)}>
-                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['mirror']} svg />
-               </g>
-               <g transform={transform(0.5, 5)}>
-                       <ToggleIcon
-                               controller={ToggleIcon.bottleController('bottle-1')}
-                               icons={BOTTLE_CONTENTS}
-                               svg
-                       />
-               </g>
-               <g transform={transform(1.5, 5)}>
-                       <ToggleIcon
-                               controller={ToggleIcon.bottleController('bottle-2')}
-                               icons={BOTTLE_CONTENTS}
-                               svg
-                       />
-               </g>
-               <g transform={transform(2.5, 5)}>
-                       <ToggleIcon
-                               controller={ToggleIcon.bottleController('bottle-3')}
-                               icons={BOTTLE_CONTENTS}
-                               svg
-                       />
-               </g>
-               <g transform={transform(3.5, 5)}>
-                       <ToggleIcon
-                               controller={ToggleIcon.bottleController('bottle-4')}
-                               icons={BOTTLE_CONTENTS}
-                               svg
-                       />
-               </g>
-               <g transform={transform(4.5, 5)}>
-                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['mushroom']} svg />
-               </g>
-               <g transform={transform(0.5, 6.5)}>
-                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['boots']} svg />
-               </g>
-               <g transform={transform(1.5, 6.5)}>
-                       <ToggleIcon
-                               controller={ToggleIcon.progressiveController('lift', 0, 2)}
-                               icons={['glove', 'mitts']}
-                               svg
-                       />
-               </g>
-               <g transform={transform(2.5, 6.5)}>
-                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['flippers']} svg />
-               </g>
-               <g transform={transform(3.5, 6.5)}>
-                       <ToggleIcon controller={ToggleIcon.simpleController} icons={['moonpearl']} svg />
-               </g>
-               <g transform={transform(4.5, 6.5)}>
-                       <ToggleIcon
-                               controller={ToggleIcon.simpleController}
-                               icons={['half-magic', 'quarter-magic']}
-                               svg
-                       />
-               </g>
-               <g transform={transform(0.5, 7.5)}>
-                       <ToggleIcon
-                               controller={ToggleIcon.progressiveController('sword', 0, 4)}
-                               icons={['sword-1', 'sword-2', 'sword-3', 'sword-4']}
-                               svg
-                       />
-               </g>
-               <g transform={transform(1.5, 7.5)}>
-                       <ToggleIcon
-                               controller={ToggleIcon.progressiveController('shield', 0, 3)}
-                               icons={['fighter-shield', 'fire-shield', 'mirror-shield']}
-                               svg
-                       />
-               </g>
-               <g transform={transform(2.5, 7.5)}>
-                       <ToggleIcon
-                               controller={ToggleIcon.progressiveController('mail', 1, 3)}
-                               icons={['green-mail', 'blue-mail', 'red-mail']}
-                               svg
-                       />
-               </g>
-               <g transform={transform(3.5, 7.5)}>
-                       <ToggleIcon
-                               controller={ToggleIcon.modulusController('heart-piece')}
-                               icons={['heart-0', 'heart-1', 'heart-2', 'heart-3']}
-                               svg
-                       />
-               </g>
+               <ToggleIcon
+                       controller={ToggleIcon.simpleController}
+                       icons={['lamp']}
+                       svg
+                       transform={transform(0.5, 2.5)}
+               />
+               <ToggleIcon
+                       controller={ToggleIcon.simpleController}
+                       icons={['hammer']}
+                       svg
+                       transform={transform(1.5, 2.5)}
+               />
+               <ToggleIcon
+                       controller={ToggleIcon.simpleController}
+                       icons={['flute']}
+                       svg
+                       transform={transform(2.5, 2.5)}
+               />
+               <ToggleIcon
+                       controller={ToggleIcon.simpleController}
+                       icons={['duck']}
+                       svg
+                       transform={transform(2.75, 2.75, 0.5)}
+               />
+               <ToggleIcon
+                       controller={ToggleIcon.simpleController}
+                       icons={['bugnet']}
+                       svg
+                       transform={transform(3.5, 2.5)}
+               />
+               <ToggleIcon
+                       controller={ToggleIcon.simpleController}
+                       icons={['book']}
+                       svg
+                       transform={transform(4.5, 2.5)}
+               />
+               <ToggleIcon
+                       controller={ToggleIcon.simpleController}
+                       icons={['shovel']}
+                       svg
+                       transform={transform(0.5, 3.5)}
+               />
+               <ToggleIcon
+                       controller={ToggleIcon.simpleController}
+                       icons={['somaria']}
+                       svg
+                       transform={transform(1.5, 3.5)}
+               />
+               <ToggleIcon
+                       controller={ToggleIcon.simpleController}
+                       icons={['byrna']}
+                       svg
+                       transform={transform(2.5, 3.5)}
+               />
+               <ToggleIcon
+                       controller={ToggleIcon.simpleController}
+                       icons={['cape']}
+                       svg
+                       transform={transform(3.5, 3.5)}
+               />
+               <ToggleIcon
+                       controller={ToggleIcon.simpleController}
+                       icons={['mirror']}
+                       svg
+                       transform={transform(4.5, 3.5)}
+               />
+               <ToggleIcon
+                       controller={ToggleIcon.bottleController('bottle-1')}
+                       icons={BOTTLE_CONTENTS}
+                       svg
+                       transform={transform(0.5, 5)}
+               />
+               <ToggleIcon
+                       controller={ToggleIcon.bottleController('bottle-2')}
+                       icons={BOTTLE_CONTENTS}
+                       svg
+                       transform={transform(1.5, 5)}
+               />
+               <ToggleIcon
+                       controller={ToggleIcon.bottleController('bottle-3')}
+                       icons={BOTTLE_CONTENTS}
+                       svg
+                       transform={transform(2.5, 5)}
+               />
+               <ToggleIcon
+                       controller={ToggleIcon.bottleController('bottle-4')}
+                       icons={BOTTLE_CONTENTS}
+                       svg
+                       transform={transform(3.5, 5)}
+               />
+               <ToggleIcon
+                       controller={ToggleIcon.simpleController}
+                       icons={['mushroom']}
+                       svg
+                       transform={transform(4.5, 5)}
+               />
+               <ToggleIcon
+                       controller={ToggleIcon.simpleController}
+                       icons={['boots']}
+                       svg
+                       transform={transform(0.5, 6.5)}
+               />
+               <ToggleIcon
+                       controller={ToggleIcon.progressiveController('lift', 0, 2)}
+                       icons={['glove', 'mitts']}
+                       svg
+                       transform={transform(1.5, 6.5)}
+               />
+               <ToggleIcon
+                       controller={ToggleIcon.simpleController}
+                       icons={['flippers']}
+                       svg
+                       transform={transform(2.5, 6.5)}
+               />
+               <ToggleIcon
+                       controller={ToggleIcon.simpleController}
+                       icons={['moonpearl']}
+                       svg
+                       transform={transform(3.5, 6.5)}
+               />
+               <ToggleIcon
+                       controller={ToggleIcon.simpleController}
+                       icons={['half-magic', 'quarter-magic']}
+                       svg
+                       transform={transform(4.5, 6.5)}
+               />
+               <ToggleIcon
+                       controller={ToggleIcon.progressiveController('sword', 0, 4)}
+                       icons={['sword-1', 'sword-2', 'sword-3', 'sword-4']}
+                       svg
+                       transform={transform(0.5, 7.5)}
+               />
+               <ToggleIcon
+                       controller={ToggleIcon.progressiveController('shield', 0, 3)}
+                       icons={['fighter-shield', 'fire-shield', 'mirror-shield']}
+                       svg
+                       transform={transform(1.5, 7.5)}
+               />
+               <ToggleIcon
+                       controller={ToggleIcon.progressiveController('mail', 1, 3)}
+                       icons={['green-mail', 'blue-mail', 'red-mail']}
+                       svg
+                       transform={transform(2.5, 7.5)}
+               />
+               <ToggleIcon
+                       controller={ToggleIcon.modulusController('heart-piece')}
+                       icons={['heart-0', 'heart-1', 'heart-2', 'heart-3']}
+                       svg
+                       transform={transform(3.5, 7.5)}
+               />
        </>;
 };
 

diff --git a/resources/js/components/tracker/ToggleIcon.js b/resources/js/components/tracker/ToggleIcon.js
index 0d8afa4068440afcd962fe3d5fe9c971506d2f32..6dee8180f7be7bfdb3a80dc5819c26b68776f1ee 100644 (file)
--- a/resources/js/components/tracker/ToggleIcon.js
+++ b/resources/js/components/tracker/ToggleIcon.js
@@ -19,7 +19,7 @@ import {
 } from '../../helpers/tracker';
 import { useTracker } from '../../hooks/tracker';
 
-const ToggleIcon = ({ controller, className, icons, svg }) => {
+const ToggleIcon = ({ controller, className, icons, svg, transform }) => {
        const { setManualState, state } = useTracker();
        const activeController = controller || ToggleIcon.nullController;
        const active = activeController.getActive(state, icons);
@@ -48,6 +48,7 @@ const ToggleIcon = ({ controller, className, icons, svg }) => {
                                e.preventDefault();
                                e.stopPropagation();
                        }}
+                       transform={transform}
                >
                        <ZeldaIcon name={icon} svg />
                </g>;
@@ -304,6 +305,7 @@ ToggleIcon.propTypes = {
        }),
        icons: PropTypes.arrayOf(PropTypes.string),
        svg: PropTypes.bool,
+       transform: PropTypes.string,
 };
 
 export default ToggleIcon;