From 31131fc56ecc52ba5ce8aa9854755b22620a7139 Mon Sep 17 00:00:00 2001
From: Daniel Karbach <daniel.karbach@localhorst.tv>
Date: Fri, 5 Apr 2024 18:07:39 +0200
Subject: [PATCH] remove some useless svg groups

---
 resources/js/components/common/ZeldaIcon.js   |   5 +-
 resources/js/components/tracker/Canvas.js     |  15 +-
 resources/js/components/tracker/Dungeons.js   | 116 +++---
 resources/js/components/tracker/Items.js      | 337 ++++++++++--------
 resources/js/components/tracker/ToggleIcon.js |   4 +-
 5 files changed, 263 insertions(+), 214 deletions(-)

diff --git a/resources/js/components/common/ZeldaIcon.js b/resources/js/components/common/ZeldaIcon.js
index 457e6e9..18b13eb 100644
--- 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 fab1942..1258776 100644
--- 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 9c6e122..c6ed5c2 100644
--- 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 2a9c01a..e991d0b 100644
--- 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 0d8afa4..6dee818 100644
--- 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;
-- 
2.39.2