X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Ftracker%2FMap.js;fp=resources%2Fjs%2Fcomponents%2Ftracker%2FMap.js;h=9c27a3476ff938d7ce4a56be9ae642d67e00c7df;hb=7514794352d72e31689d161a6a7658604ddc1249;hp=520ad938ab2faaafb61fd3774626af442104aa5b;hpb=3603709307e0777958cd18134ad4178cef410d14;p=alttp.git

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 =>