remove some useless svg groups

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

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>
                )}