remove some useless svg groups

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

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)}
+               />
        </>;
 };