X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;ds=inline;f=resources%2Fjs%2Fcomponents%2Ftracker%2FCanvas.js;fp=resources%2Fjs%2Fcomponents%2Ftracker%2FCanvas.js;h=392f2a7dc63f35ca27af8bfc71476e96d9eecae3;hb=90922f8595a8d4fd7780a0b137eed66eaf7d6c49;hp=0000000000000000000000000000000000000000;hpb=103371b7fdc3b11e1a937d46474819ab0a5425fb;p=alttp.git

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;