From 1a3d040147c19d24b8d02ec8e594eb06b8efc1ff Mon Sep 17 00:00:00 2001
From: Daniel Karbach <daniel.karbach@localhorst.tv>
Date: Wed, 3 Apr 2024 11:21:14 +0200
Subject: [PATCH] tracker items as svg

---
 resources/js/components/common/ZeldaIcon.js   |  16 +-
 resources/js/components/tracker/Items.js      | 250 +++++++++++-------
 resources/js/components/tracker/ToggleIcon.js |  20 +-
 resources/js/components/tracker/index.js      |  23 +-
 resources/sass/tracker.scss                   |  80 +-----
 5 files changed, 210 insertions(+), 179 deletions(-)

diff --git a/resources/js/components/common/ZeldaIcon.js b/resources/js/components/common/ZeldaIcon.js
index 3504dcf..457e6e9 100644
--- a/resources/js/components/common/ZeldaIcon.js
+++ b/resources/js/components/common/ZeldaIcon.js
@@ -141,6 +141,14 @@ const getIconURL = name => {
 	}
 };
 
+const isHalfWidth = name => [
+	'blue-boomerang',
+	'fire-rod',
+	'ice-rod',
+	'hookshot',
+	'red-boomerang',
+].includes(name);
+
 const ZeldaIcon = ({ name, svg, title }) => {
 	const { t } = useTranslation();
 
@@ -153,14 +161,18 @@ const ZeldaIcon = ({ name, svg, title }) => {
 	if (svg) {
 		const clipX = getItemMapX(strippedName);
 		const clipY = getItemMapY(strippedName);
+		const cropX = isHalfWidth(strippedName) ? 0.25 : 0.02;
+		const cropY = 0.02;
+		const cropW = 1 - (2 * cropX);
+		const cropH = 1 - (2 * cropY);
 		return <image
 			href={isOnItemMap(strippedName) ? ITEM_MAP_URL : src}
 			width={ITEM_MAP_WIDTH}
 			height={ITEM_MAP_HEIGHT}
 			x="0"
 			y="0"
-			transform={`translate(-${clipX} -${clipY})`}
-			clipPath={`xywh(${clipX + 0.02} ${clipY + 0.02} 0.96 0.96)`}
+			transform={`translate(-${clipX + 0.5} -${clipY + 0.5})`}
+			clipPath={`xywh(${clipX + cropX} ${clipY + cropY} ${cropW} ${cropH})`}
 		>
 			{realTitle ?
 				<title>{realTitle}</title>
diff --git a/resources/js/components/tracker/Items.js b/resources/js/components/tracker/Items.js
index fb47824..9ec71e0 100644
--- a/resources/js/components/tracker/Items.js
+++ b/resources/js/components/tracker/Items.js
@@ -4,135 +4,189 @@ import ToggleIcon from './ToggleIcon';
 import { BOTTLE_CONTENTS } from '../../helpers/tracker';
 import { useTracker } from '../../hooks/tracker';
 
+const transform = (x, y, s) => `translate(${x} ${y}) scale(${s || 0.85})`;
+
 const Items = () => {
 	const { state } = useTracker();
 
-	return <div className="items">
-		<div className="item">
-			<ToggleIcon controller={ToggleIcon.simpleController} icons={['bow', 'silvers']} />
-		</div>
-		<div className="item">
-			<ToggleIcon
-				className="left"
-				controller={ToggleIcon.simpleController}
-				icons={['blue-boomerang']}
-			/>
-			<ToggleIcon
-				className="right"
-				controller={ToggleIcon.simpleController}
-				icons={['red-boomerang']}
-			/>
-		</div>
-		<div className="item">
-			<ToggleIcon controller={ToggleIcon.simpleController} icons={['hookshot']} />
-		</div>
-		<div className="item">
-			<ToggleIcon controller={ToggleIcon.simpleController} icons={['bomb']} />
-		</div>
-		<div className="item">
-			<ToggleIcon
-				className="bottom-left"
-				controller={ToggleIcon.simpleController}
-				icons={['mushroom']}
-			/>
-			<ToggleIcon
-				className="top-right"
-				controller={ToggleIcon.simpleController}
-				icons={['powder']}
-			/>
-		</div>
-		<div className="item">
-			<ToggleIcon controller={ToggleIcon.simpleController} icons={['fire-rod']} />
-		</div>
-		<div className="item">
-			<ToggleIcon controller={ToggleIcon.simpleController} icons={['ice-rod']} />
-		</div>
-		<div className="item">
-			<ToggleIcon controller={ToggleIcon.medallionController} icons={['bombos']} />
+	return <svg
+		xmlns="http://www.w3.org/2000/svg"
+		className="items"
+		width="5"
+		height="8"
+		viewBox="0 0 5 8"
+		onContextMenu={(e) => {
+			e.preventDefault();
+			e.stopPropagation();
+		}}
+	>
+		<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>
+		<g transform={transform(2.5, 1.5)}>
+			<ToggleIcon controller={ToggleIcon.medallionController} icons={['bombos']} svg />
 			{state['mm-medallion'] === 'bombos' ?
-				<span className="med-display bottom-left">MM</span>
+				<text className="med-display bottom-left">MM</text>
 			: null}
 			{state['tr-medallion'] === 'bombos' ?
-				<span className="med-display bottom-right">TR</span>
+				<text className="med-display bottom-right">TR</text>
 			: null}
-		</div>
-		<div className="item">
-			<ToggleIcon controller={ToggleIcon.medallionController} icons={['ether']} />
+		</g>
+		<g transform={transform(3.5, 1.5)}>
+			<ToggleIcon controller={ToggleIcon.medallionController} icons={['ether']} svg />
 			{state['mm-medallion'] === 'ether' ?
-				<span className="med-display bottom-left">MM</span>
+				<text className="med-display bottom-left">MM</text>
 			: null}
 			{state['tr-medallion'] === 'ether' ?
-				<span className="med-display bottom-right">TR</span>
+				<text className="med-display bottom-right">TR</text>
 			: null}
-		</div>
-		<div className="item">
-			<ToggleIcon controller={ToggleIcon.medallionController} icons={['quake']} />
+		</g>
+		<g transform={transform(4.5, 1.5)}>
+			<ToggleIcon controller={ToggleIcon.medallionController} icons={['quake']} svg />
 			{state['mm-medallion'] === 'quake' ?
-				<span className="med-display bottom-left">MM</span>
+				<text className="med-display bottom-left">MM</text>
 			: null}
 			{state['tr-medallion'] === 'quake' ?
-				<span className="med-display bottom-right">TR</span>
+				<text className="med-display bottom-right">TR</text>
 			: null}
-		</div>
-		<div className="item">
-			<ToggleIcon controller={ToggleIcon.simpleController} icons={['lamp']} />
-		</div>
-		<div className="item">
-			<ToggleIcon controller={ToggleIcon.simpleController} icons={['hammer']} />
-		</div>
-		<div className="item">
-			<ToggleIcon
-				className="bottom-left"
-				controller={ToggleIcon.simpleController}
-				icons={['shovel']}
-			/>
+		</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
-				className="top-right"
-				controller={ToggleIcon.simpleController}
-				icons={['flute', 'duck']}
-			/>
-		</div>
-		<div className="item">
-			<ToggleIcon controller={ToggleIcon.simpleController} icons={['bugnet']} />
-		</div>
-		<div className="item">
-			<ToggleIcon controller={ToggleIcon.simpleController} icons={['book']} />
-		</div>
-		<div className="item">
-			<ToggleIcon
-				className="top-left"
 				controller={ToggleIcon.bottleController('bottle-1')}
 				icons={BOTTLE_CONTENTS}
+				svg
 			/>
+		</g>
+		<g transform={transform(1.5, 5)}>
 			<ToggleIcon
-				className="top-right"
 				controller={ToggleIcon.bottleController('bottle-2')}
 				icons={BOTTLE_CONTENTS}
+				svg
 			/>
+		</g>
+		<g transform={transform(2.5, 5)}>
 			<ToggleIcon
-				className="bottom-left"
 				controller={ToggleIcon.bottleController('bottle-3')}
 				icons={BOTTLE_CONTENTS}
+				svg
 			/>
+		</g>
+		<g transform={transform(3.5, 5)}>
 			<ToggleIcon
-				className="bottom-right"
 				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
 			/>
-		</div>
-		<div className="item">
-			<ToggleIcon controller={ToggleIcon.simpleController} icons={['somaria']} />
-		</div>
-		<div className="item">
-			<ToggleIcon controller={ToggleIcon.simpleController} icons={['byrna']} />
-		</div>
-		<div className="item">
-			<ToggleIcon controller={ToggleIcon.simpleController} icons={['cape']} />
-		</div>
-		<div className="item">
-			<ToggleIcon controller={ToggleIcon.simpleController} icons={['mirror']} />
-		</div>
-	</div>;
+		</g>
+	</svg>;
 };
 
 export default Items;
diff --git a/resources/js/components/tracker/ToggleIcon.js b/resources/js/components/tracker/ToggleIcon.js
index c1a193c..6de9f63 100644
--- 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;
diff --git a/resources/js/components/tracker/index.js b/resources/js/components/tracker/index.js
index ea09a22..31fb964 100644
--- a/resources/js/components/tracker/index.js
+++ b/resources/js/components/tracker/index.js
@@ -1,7 +1,7 @@
 import React from 'react';
+import { Col, Container, Row } from 'react-bootstrap';
 
 import Dungeons from './Dungeons';
-import Equipment from './Equipment';
 import Items from './Items';
 import Map from './Map';
 import Toolbar from './Toolbar';
@@ -9,18 +9,17 @@ import Toolbar from './Toolbar';
 const Tracker = () => {
 	return <div className="tracker">
 		<Toolbar />
-		<div className="d-flex">
-			<div>
-				<div className="inventory">
+		<Container fluid>
+			<Row>
+				<Col sm={3}>
 					<Items />
-					<Equipment />
-				</div>
-				<Dungeons />
-			</div>
-			<div className="flex-fill">
-				<Map />
-			</div>
-		</div>
+					<Dungeons />
+				</Col>
+				<Col sm={9}>
+					<Map />
+				</Col>
+			</Row>
+		</Container>
 	</div>;
 };
 
diff --git a/resources/sass/tracker.scss b/resources/sass/tracker.scss
index 27bd55e..01704b7 100644
--- a/resources/sass/tracker.scss
+++ b/resources/sass/tracker.scss
@@ -60,76 +60,24 @@
 		gap: 1ex;
 		padding: 1ex;
 	}
-	.inventory {
-		font-size: 110%;
-	}
 	.items {
-		display: grid;
-		grid-template-columns: 3em 3em 3em 3em 3em;
-		gap: 1ex;
-		padding: 1ex;
-	}
-	.item {
-		position: relative;
-		width: 3em;
-		height: 3em;
-
-		.bottom-left,
-		.bottom-right,
-		.top-left,
-		.top-right {
-			position: absolute;
-			width: 50%;
-			height: 50%;
-			.zelda-icon {
-				transform: scale(1.4);
-			}
-		}
-		.bottom-left {
-			bottom: 0;
-			left: 0;
-		}
-		.bottom-right {
-			bottom: 0;
-			right: 0;
-		}
-		.top-left {
-			top: 0;
-			left: 0;
-		}
-		.top-right {
-			top: 0;
-			right: 0;
-		}
-
-		.left,
-		.right {
-			position: absolute;
-			width: 50%;
-			height: 100%;
-			overflow: hidden;
-			.zelda-icon {
-				width: 200%;
-				margin-left: -50%;
-			}
-		}
-		.left {
-			left: 0;
-		}
-		.right {
-			right: 0;
-		}
-		.count-display,
+		width: 100%;
+		height: auto;
 		.med-display {
+			font-size: 0.3px;
+			font-weight: bold;
+			fill: white;
+			stroke: black;
+			stroke-width: 0.15px;
+			stroke-linejoin: round;
+			paint-order: stroke fill;
 			pointer-events: none;
-			&.is-zero {
-				display: none;
+			&.bottom-left {
+				transform: translate(-0.5px, 0.4px);
+			}
+			&.bottom-right {
+				transform: translate(0.1px, 0.4px);
 			}
-		}
-		.med-display {
-			height: 30%;
-			font-size: 80%;
-			line-height: 1;
 		}
 	}
 	.tracker-map {
-- 
2.39.2