better background image

diff --git a/resources/js/components/tracker/Map.js b/resources/js/components/tracker/Map.js
index 520ad938ab2faaafb61fd3774626af442104aa5b..9c27a3476ff938d7ce4a56be9ae642d67e00c7df 100644 (file)
--- 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 =>