From 7514794352d72e31689d161a6a7658604ddc1249 Mon Sep 17 00:00:00 2001
From: Daniel Karbach <daniel.karbach@localhorst.tv>
Date: Mon, 25 Mar 2024 11:55:33 +0100
Subject: [PATCH] better background image

---
 resources/js/components/tracker/Map.js | 77 +++++++-------------------
 1 file changed, 21 insertions(+), 56 deletions(-)

diff --git a/resources/js/components/tracker/Map.js b/resources/js/components/tracker/Map.js
index 520ad93..9c27a34 100644
--- a/resources/js/components/tracker/Map.js
+++ b/resources/js/components/tracker/Map.js
@@ -657,6 +657,25 @@ Location.propTypes = {
 	size: PropTypes.string,
 };
 
+const makeBackground = (src, level) => {
+	const amount = Math.pow(2, Math.max(0, level - 8));
+	const size = 1 / amount;
+	const tiles = [];
+	for (let y = 0; y < amount; ++y) {
+		for (let x = 0; x < amount; ++x) {
+			tiles.push(<image
+				key={`${x}-${y}`}
+				x={x * size}
+				y={y * size}
+				width={size * 1.002}
+				height={size * 1.002}
+				href={`/media/alttp/map/${src}/${level}/${x}_${y}.png`}
+			/>);
+		}
+	}
+	return tiles;
+};
+
 const Map = () => {
 	const { dungeons, setState, state } = useTracker();
 
@@ -764,34 +783,7 @@ const Map = () => {
 		>
 			<g className="light-world">
 				<g className="background">
-					<image
-						x="0"
-						y="0"
-						width="0.5"
-						height="0.5"
-						href="/media/alttp/map/lw_files/9/0_0.png"
-					/>
-					<image
-						x="0.5"
-						y="0"
-						width="0.5"
-						height="0.5"
-						href="/media/alttp/map/lw_files/9/1_0.png"
-					/>
-					<image
-						x="0"
-						y="0.5"
-						width="0.5"
-						height="0.5"
-						href="/media/alttp/map/lw_files/9/0_1.png"
-					/>
-					<image
-						x="0.5"
-						y="0.5"
-						width="0.5"
-						height="0.5"
-						href="/media/alttp/map/lw_files/9/1_1.png"
-					/>
+					{makeBackground('lw_files', 10)}
 				</g>
 				<g className="locations">
 					{lwLocations.map(l =>
@@ -804,34 +796,7 @@ const Map = () => {
 			</g>
 			<g className="dark-world" transform="translate(1 0)">
 				<g className="background">
-					<image
-						x="0"
-						y="0"
-						width="0.5"
-						height="0.5"
-						href="/media/alttp/map/dw_files/9/0_0.png"
-					/>
-					<image
-						x="0.5"
-						y="0"
-						width="0.5"
-						height="0.5"
-						href="/media/alttp/map/dw_files/9/1_0.png"
-					/>
-					<image
-						x="0"
-						y="0.5"
-						width="0.5"
-						height="0.5"
-						href="/media/alttp/map/dw_files/9/0_1.png"
-					/>
-					<image
-						x="0.5"
-						y="0.5"
-						width="0.5"
-						height="0.5"
-						href="/media/alttp/map/dw_files/9/1_1.png"
-					/>
+					{makeBackground('dw_files', 10)}
 				</g>
 				<g className="locations">
 					{dwLocations.map(l =>
-- 
2.39.2