X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Ftracker%2FItems.js;h=9ec71e00223f6dbc5d670c357009144b1f32b78f;hb=1a3d040147c19d24b8d02ec8e594eb06b8efc1ff;hp=2e83565fbc07eb7e79573723b204d1ee9743794c;hpb=3213c82ad2dd75e313d15423e25653596c7ce278;p=alttp.git

diff --git a/resources/js/components/tracker/Items.js b/resources/js/components/tracker/Items.js
index 2e83565..9ec71e0 100644
--- a/resources/js/components/tracker/Items.js
+++ b/resources/js/components/tracker/Items.js
@@ -1,120 +1,192 @@
 import React from 'react';
 
-import CountDisplay from './CountDisplay';
 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">
+		</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="bottom-left"
-				controller={ToggleIcon.simpleController}
-				icons={['shovel']}
+				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
-				className="top-right"
 				controller={ToggleIcon.simpleController}
-				icons={['flute', 'duck']}
+				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={['bugnet']} />
-		</div>
-		<div className="item">
-			<ToggleIcon controller={ToggleIcon.simpleController} icons={['book']} />
-		</div>
-		<div className="item">
-			<ToggleIcon controller={ToggleIcon.countController(4)} icons={['bottle']} />
-			<CountDisplay className="bottom-right" count={state.bottle || 0} />
-		</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;