From: Daniel Karbach <daniel.karbach@localhorst.tv>
Date: Thu, 4 Apr 2024 17:42:45 +0000 (+0200)
Subject: tracker layout
X-Git-Url: https://git.localhorst.tv/?a=commitdiff_plain;h=90922f8595a8d4fd7780a0b137eed66eaf7d6c49;p=alttp.git

tracker layout
---

diff --git a/resources/js/components/tracker/Canvas.js b/resources/js/components/tracker/Canvas.js
new file mode 100644
index 0000000..392f2a7
--- /dev/null
+++ b/resources/js/components/tracker/Canvas.js
@@ -0,0 +1,83 @@
+import React from 'react';
+
+import Dungeons from './Dungeons';
+import Items from './Items';
+import Map from './Map';
+import { shouldShowDungeonItem } from '../../helpers/tracker';
+import { useTracker } from '../../hooks/tracker';
+
+const LAYOUTS = {
+	defaultHorizontal: {
+		width: 100,
+		height: 60,
+		itemsTransform: 'translate(1 1) scale(22)',
+		dungeonColumns: 4,
+		dungeonsTransform: 'translate(1 39) scale(98)',
+		mapTransform: 'translate(24 0) scale(76)',
+	},
+	defaultVertical: {
+		width: 100,
+		height: 100,
+		itemsTransform: 'translate(10 1) scale(30)',
+		dungeonColumns: 2,
+		dungeonsTransform: 'translate(1 51) scale(48)',
+		mapTransform: 'translate(50 0) scale(50)',
+	},
+	manyDungeonItemsVertical: {
+		width: 80,
+		height: 100,
+		itemsTransform: 'translate(1 1) scale(27)',
+		dungeonColumns: 1,
+		dungeonsTransform: 'translate(1 48) scale(24)',
+		mapTransform: 'translate(30 0) scale(50)',
+	},
+};
+
+const Canvas = () => {
+	const { config } = useTracker();
+
+	const layout = React.useMemo(() => {
+		if (config.mapLayout === 'vertical') {
+			let count = 0;
+			if (shouldShowDungeonItem(config, 'Map')) {
+				++count;
+			}
+			if (shouldShowDungeonItem(config, 'Compass')) {
+				++count;
+			}
+			if (shouldShowDungeonItem(config, 'Small')) {
+				++count;
+			}
+			if (shouldShowDungeonItem(config, 'Big')) {
+				++count;
+			}
+			return count > 2 ? LAYOUTS.manyDungeonItemsVertical : LAYOUTS.defaultVertical;
+		} else {
+			return LAYOUTS.defaultHorizontal;
+		}
+	}, [config]);
+
+	return <svg
+		xmlns="http://www.w3.org/2000/svg"
+		className="canvas"
+		width={layout.width}
+		height={layout.height}
+		viewBox={`0 0 ${layout.width} ${layout.height}`}
+		onContextMenu={(e) => {
+			e.preventDefault();
+			e.stopPropagation();
+		}}
+	>
+		<g className="items" transform={layout.itemsTransform}>
+			<Items />
+		</g>
+		<g className="dungeons" transform={layout.dungeonsTransform}>
+			<Dungeons columns={layout.dungeonColumns} />
+		</g>
+		<g className="tracker-map" transform={layout.mapTransform}>
+			<Map />
+		</g>
+	</svg>;
+};
+
+export default Canvas;
diff --git a/resources/js/components/tracker/Dungeons.js b/resources/js/components/tracker/Dungeons.js
index 4890bbb..9c6e122 100644
--- a/resources/js/components/tracker/Dungeons.js
+++ b/resources/js/components/tracker/Dungeons.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 
 import CountDisplay from './CountDisplay';
@@ -10,7 +11,7 @@ import {
 } from '../../helpers/tracker';
 import { useTracker } from '../../hooks/tracker';
 
-const Dungeons = () => {
+const Dungeons = ({ columns }) => {
 	const { config, dungeons, state } = useTracker();
 
 	const layout = React.useMemo(() => {
@@ -21,65 +22,86 @@ const Dungeons = () => {
 		const countX = shouldShowDungeonItem(config, 'Big') ? bigX + 1 : bigX;
 		const bossX = countX + 1;
 		const prizeX = bossX + 1;
-		const dungeonWidth = prizeX + 1;
-		const width = (4 * dungeonWidth) + 2;
+		const dungeonWidth = Math.max(5, prizeX + 1);
+		const width = (columns * dungeonWidth) + Math.max(0, columns - 1);
 		const height = 4;
-		const viewBox = `0 0 ${width} ${height}`;
+
+		const transform = (col, row) =>
+			`scale(${1 / width}) translate(${
+				(col * dungeonWidth) + 0.5 + (col ? col - (columns > 3 ? 1 : 0) : 0)
+			} ${row + 0.5})`;
+
+		const transforms = {
+			tag: '',
+			map: `translate(${mapX} 0) scale(0.9)`,
+			compass: `translate(${compassX} 0) scale(0.9)`,
+			small: `translate(${smallX} 0) scale(0.9)`,
+			big: `translate(${bigX} 0) scale(0.9)`,
+			checks: `translate(${countX} 0) scale(0.9)`,
+			boss: `translate(${bossX} 0)`,
+			prize: `translate(${prizeX} 0)`,
+			hc: transform(0, 0),
+			ct: transform(0, 1),
+			gt: transform(0, 2),
+			gtBoss1: `translate(${bossX - 2} 1)`,
+			gtBoss2: `translate(${bossX - 1} 1)`,
+			gtBoss3: `translate(${bossX} 1)`,
+		};
+
+		if (columns === 1) {
+			transforms.ep = transform(0, 4);
+			transforms.dp = transform(0, 5);
+			transforms.th = transform(0, 6);
+			transforms.pd = transform(0, 8);
+			transforms.sp = transform(0, 9);
+			transforms.sw = transform(0, 10);
+			transforms.tt = transform(0, 11);
+			transforms.ip = transform(0, 12);
+			transforms.mm = transform(0, 13);
+			transforms.tr = transform(0, 14);
+		} else if (columns === 2) {
+			transforms.ep = transform(0, 4);
+			transforms.dp = transform(0, 5);
+			transforms.th = transform(0, 6);
+			transforms.pd = transform(1, 0);
+			transforms.sp = transform(1, 1);
+			transforms.sw = transform(1, 2);
+			transforms.tt = transform(1, 3);
+			transforms.ip = transform(1, 4);
+			transforms.mm = transform(1, 5);
+			transforms.tr = transform(1, 6);
+		} else {
+			transforms.ep = transform(1, 0);
+			transforms.dp = transform(1, 1);
+			transforms.th = transform(1, 2);
+			transforms.pd = transform(2, 0);
+			transforms.sp = transform(2, 1);
+			transforms.sw = transform(2, 2);
+			transforms.tt = transform(2, 3);
+			transforms.ip = transform(3, 0);
+			transforms.mm = transform(3, 1);
+			transforms.tr = transform(3, 2);
+		}
+
 		return {
 			width,
 			height,
-			viewBox,
-			transform: {
-				tag: '',
-				map: `translate(${mapX} 0) scale(0.9)`,
-				compass: `translate(${compassX} 0) scale(0.9)`,
-				small: `translate(${smallX} 0) scale(0.9)`,
-				big: `translate(${bigX} 0) scale(0.9)`,
-				checks: `translate(${countX} 0) scale(0.9)`,
-				boss: `translate(${bossX} 0)`,
-				prize: `translate(${prizeX} 0)`,
-				hc: 'translate(0.5, 0.5)',
-				ct: 'translate(0.5, 1.5)',
-				gt: 'translate(0.5, 2.5)',
-				gtBoss1: `translate(${bossX - 2} 1)`,
-				gtBoss2: `translate(${bossX - 1} 1)`,
-				gtBoss3: `translate(${bossX} 1)`,
-				ep: `translate(${dungeonWidth + 0.5}, 0.5)`,
-				dp: `translate(${dungeonWidth + 0.5}, 1.5)`,
-				th: `translate(${dungeonWidth + 0.5}, 2.5)`,
-				pd: `translate(${(2 * dungeonWidth) + 1.5}, 0.5)`,
-				sp: `translate(${(2 * dungeonWidth) + 1.5}, 1.5)`,
-				sw: `translate(${(2 * dungeonWidth) + 1.5}, 2.5)`,
-				tt: `translate(${(2 * dungeonWidth) + 1.5}, 3.5)`,
-				ip: `translate(${(3 * dungeonWidth) + 2.5}, 0.5)`,
-				mm: `translate(${(3 * dungeonWidth) + 2.5}, 1.5)`,
-				tr: `translate(${(3 * dungeonWidth) + 2.5}, 2.5)`,
-			},
+			transforms,
 		};
 	}, [config, dungeons]);
 
-	return <svg
-		xmlns="http://www.w3.org/2000/svg"
-		className="dungeons"
-		width={layout.width}
-		height={layout.height}
-		viewBox={layout.viewBox}
-		onContextMenu={(e) => {
-			e.preventDefault();
-			e.stopPropagation();
-		}}
-	>
+	return <>
 		{dungeons.map(dungeon =>
 			<g
 				className={`dungeon dungeon-${dungeon.id}`}
 				key={dungeon.id}
-				transform={layout.transform[dungeon.id]}
+				transform={layout.transforms[dungeon.id]}
 			>
-				<g transform={layout.transform.tag}>
+				<g transform={layout.transforms.tag}>
 					<text className="dungeon-tag">{dungeon.id.toUpperCase()}</text>
 				</g>
 				{shouldShowDungeonItem(config, 'Map') ?
-					<g transform={layout.transform.map}>
+					<g transform={layout.transforms.map}>
 						<ToggleIcon
 							controller={ToggleIcon.dungeonController(dungeon)}
 							icons={['map']}
@@ -88,7 +110,7 @@ const Dungeons = () => {
 					</g>
 				: null}
 				{shouldShowDungeonItem(config, 'Compass') ?
-					<g transform={layout.transform.compass}>
+					<g transform={layout.transforms.compass}>
 						<ToggleIcon
 							controller={ToggleIcon.dungeonController(dungeon)}
 							icons={['compass']}
@@ -97,7 +119,7 @@ const Dungeons = () => {
 					</g>
 				: null}
 				{shouldShowDungeonItem(config, 'Small') ?
-					<g transform={layout.transform.small}>
+					<g transform={layout.transforms.small}>
 						<ToggleIcon
 							controller={ToggleIcon.dungeonCountController(dungeon, dungeon.sk)}
 							icons={['small-key']}
@@ -110,7 +132,7 @@ const Dungeons = () => {
 					</g>
 				: null}
 				{shouldShowDungeonItem(config, 'Big') ?
-					<g transform={layout.transform.big}>
+					<g transform={layout.transforms.big}>
 						<ToggleIcon
 							controller={ToggleIcon.dungeonController(dungeon)}
 							icons={['big-key']}
@@ -118,7 +140,7 @@ const Dungeons = () => {
 						/>
 					</g>
 				: null}
-				<g transform={layout.transform.checks}>
+				<g transform={layout.transforms.checks}>
 					<ToggleIcon
 						controller={ToggleIcon.dungeonCheckController(dungeon)}
 						icons={['open-chest', 'chest']}
@@ -127,7 +149,7 @@ const Dungeons = () => {
 					<CountDisplay count={getDungeonRemainingItems(state, dungeon)} />
 				</g>
 				{dungeon.boss ?
-					<g transform={layout.transform.boss}>
+					<g transform={layout.transforms.boss}>
 						<ToggleIcon
 							controller={ToggleIcon.dungeonBossController(dungeon)}
 							icons={dungeon.bosses}
@@ -136,7 +158,7 @@ const Dungeons = () => {
 					</g>
 				: null}
 				{dungeon.prize ?
-					<g transform={layout.transform.prize}>
+					<g transform={layout.transforms.prize}>
 						<ToggleIcon
 							controller={ToggleIcon.dungeonPrizeController(dungeon)}
 							icons={[
@@ -150,21 +172,21 @@ const Dungeons = () => {
 					</g>
 				: null}
 				{dungeon.id === 'gt' && config.bossShuffle ? <>
-					<g transform={layout.transform.gtBoss1}>
+					<g transform={layout.transforms.gtBoss1}>
 						<ToggleIcon
 							controller={ToggleIcon.gtBossController('bot')}
 							icons={BOSSES}
 							svg
 						/>
 					</g>
-					<g transform={layout.transform.gtBoss2}>
+					<g transform={layout.transforms.gtBoss2}>
 						<ToggleIcon
 							controller={ToggleIcon.gtBossController('mid')}
 							icons={BOSSES}
 							svg
 						/>
 					</g>
-					<g transform={layout.transform.gtBoss3}>
+					<g transform={layout.transforms.gtBoss3}>
 						<ToggleIcon
 							controller={ToggleIcon.gtBossController('top')}
 							icons={BOSSES}
@@ -174,7 +196,15 @@ const Dungeons = () => {
 				</> : null}
 			</g>
 		)}
-	</svg>;
+	</>;
+};
+
+Dungeons.propTypes = {
+	columns: PropTypes.number,
+};
+
+Dungeons.defaultProps = {
+	columns: 4,
 };
 
 export default Dungeons;
diff --git a/resources/js/components/tracker/Items.js b/resources/js/components/tracker/Items.js
index 9ec71e0..2a9c01a 100644
--- a/resources/js/components/tracker/Items.js
+++ b/resources/js/components/tracker/Items.js
@@ -4,22 +4,12 @@ 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 transform = (x, y, s) => `translate(${x * 0.2} ${y * 0.2}) scale(${(s || 0.85) * 0.2})`;
 
 const Items = () => {
 	const { state } = useTracker();
 
-	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();
-		}}
-	>
+	return <>
 		<g transform={transform(0.5, 0.5)}>
 			<ToggleIcon controller={ToggleIcon.simpleController} icons={['bow', 'silvers']} svg />
 		</g>
@@ -186,7 +176,7 @@ const Items = () => {
 				svg
 			/>
 		</g>
-	</svg>;
+	</>;
 };
 
 export default Items;
diff --git a/resources/js/components/tracker/Map/Overworld.js b/resources/js/components/tracker/Map/Overworld.js
index 66433e5..f899593 100644
--- a/resources/js/components/tracker/Map/Overworld.js
+++ b/resources/js/components/tracker/Map/Overworld.js
@@ -836,34 +836,18 @@ const Overworld = () => {
 	const layout = React.useMemo(() => {
 		if (config.mapLayout === 'vertical') {
 			return {
-				width: 1,
-				height: 2,
-				viewBox: '0 0 1 2',
 				lwTransform: '',
 				dwTransform: 'translate(0 1)',
 			};
 		} else {
 			return {
-				width: 2,
-				height: 1,
-				viewBox: '0 0 2 1',
-				lwTransform: '',
-				dwTransform: 'translate(1 0)',
+				lwTransform: 'scale(0.5)',
+				dwTransform: 'scale(0.5) translate(1 0)',
 			};
 		}
 	}, [config]);
 
-	return <svg
-		xmlns="http://www.w3.org/2000/svg"
-		className="canvas"
-		width={layout.width}
-		height={layout.height}
-		viewBox={layout.viewBox}
-		onContextMenu={(e) => {
-			e.preventDefault();
-			e.stopPropagation();
-		}}
-	>
+	return <>
 		<g className="light-world" transform={layout.lwTransform}>
 			<g className="background">
 				{makeBackground('lw_files', 10)}
@@ -890,7 +874,7 @@ const Overworld = () => {
 				)}
 			</g>
 		</g>
-	</svg>;
+	</>;
 };
 
 export default Overworld;
diff --git a/resources/js/components/tracker/Map/index.js b/resources/js/components/tracker/Map/index.js
index 65dcbd3..246403c 100644
--- a/resources/js/components/tracker/Map/index.js
+++ b/resources/js/components/tracker/Map/index.js
@@ -3,9 +3,9 @@ import React from 'react';
 import Overworld from './Overworld';
 
 const Map = () => {
-	return <div className="tracker-map">
+	return <>
 		<Overworld />
-	</div>;
+	</>;
 };
 
 export default Map;
diff --git a/resources/js/components/tracker/index.js b/resources/js/components/tracker/index.js
index 7b16b40..68f7972 100644
--- a/resources/js/components/tracker/index.js
+++ b/resources/js/components/tracker/index.js
@@ -1,27 +1,12 @@
 import React from 'react';
-import { Col, Container, Row } from 'react-bootstrap';
 
-import Dungeons from './Dungeons';
-import Items from './Items';
-import Map from './Map';
+import Canvas from './Canvas';
 import Toolbar from './Toolbar';
 
 const Tracker = () => {
 	return <div className="tracker">
 		<Toolbar />
-		<Container fluid>
-			<Row>
-				<Col sm={3}>
-					<Items />
-				</Col>
-				<Col sm={9}>
-					<Map />
-				</Col>
-			</Row>
-			<div className="mt-2">
-				<Dungeons />
-			</div>
-		</Container>
+		<Canvas />
 	</div>;
 };
 
diff --git a/resources/js/helpers/tracker.js b/resources/js/helpers/tracker.js
index 06513cc..c4b685c 100644
--- a/resources/js/helpers/tracker.js
+++ b/resources/js/helpers/tracker.js
@@ -1619,7 +1619,7 @@ export const shouldShowDungeonItem = (config, which) => {
 		case 'always':
 			return true;
 		case 'situational':
-			return wild;
+			return wild || (which === 'Compass' && config.bossShuffle);
 		case 'never':
 			return false;
 	}
diff --git a/resources/sass/tracker.scss b/resources/sass/tracker.scss
index ca20b63..cf6cb6d 100644
--- a/resources/sass/tracker.scss
+++ b/resources/sass/tracker.scss
@@ -1,12 +1,21 @@
 .tracker {
+	display: flex;
+	flex-direction: column;
+	height: 100vh;
+	align-items: stretch;
+	justify-content: flex-start;
+
 	.auto-tracking {
 		.custom-toggle {
 			vertical-align: middle;
 		}
 	}
-	.dungeons {
+	.canvas {
 		width: 100%;
 		height: auto;
+		max-height: 100%;
+	}
+	.dungeons {
 		.count-display,
 		.dungeon-tag {
 			font-size: 0.5px;
@@ -32,8 +41,6 @@
 		}
 	}
 	.items {
-		width: 100%;
-		height: auto;
 		.med-display {
 			font-size: 0.3px;
 			font-weight: bold;
@@ -52,58 +59,54 @@
 		}
 	}
 	.tracker-map {
-		.canvas {
-			width: 100%;
-			height: auto;
-			.location {
+		.location {
+			.box {
+				width: 0.04px;
+				height: 0.04px;
+				transform: translate(-0.02px, -0.02px);
+				fill: #0d0;
+				stroke: black;
+				stroke-width: 1px;
+				vector-effect: non-scaling-stroke;
+			}
+			.text {
+				fill: black;
+				font-size: 0.02px;
+				font-weight: bold;
+				text-anchor: middle;
+				dominant-baseline: middle;
+				pointer-events: none;
+				user-select: none;
+			}
+			&.status-cleared {
 				.box {
-					width: 0.04px;
-					height: 0.04px;
-					transform: translate(-0.02px, -0.02px);
-					fill: #0d0;
-					stroke: black;
-					stroke-width: 1px;
-					vector-effect: non-scaling-stroke;
-				}
-				.text {
-					fill: black;
-					font-size: 0.02px;
-					font-weight: bold;
-					text-anchor: middle;
-					dominant-baseline: middle;
-					pointer-events: none;
-					user-select: none;
+					fill: grey;
+					opacity: 0.4;
 				}
-				&.status-cleared {
-					.box {
-						fill: grey;
-						opacity: 0.4;
-					}
+			}
+			&.status-partial {
+				.box {
+					fill: yellow;
 				}
-				&.status-partial {
-					.box {
-						fill: yellow;
-					}
+			}
+			&.status-unavailable {
+				.box {
+					fill: red;
 				}
-				&.status-unavailable {
-					.box {
-						fill: red;
-					}
+			}
+			&.size-lg {
+				.box {
+					width: 0.08px;
+					height: 0.08px;
+					transform: translate(-0.04px, -0.04px);
 				}
-				&.size-lg {
-					.box {
-						width: 0.08px;
-						height: 0.08px;
-						transform: translate(-0.04px, -0.04px);
-					}
-					.text {
-						font-size: 0.04px;
-					}
+				.text {
+					font-size: 0.04px;
 				}
-				&.clickable {
-					.box:hover {
-						stroke: white;
-					}
+			}
+			&.clickable {
+				.box:hover {
+					stroke: white;
 				}
 			}
 		}