Add map 3840x1440

web/src/cities/map/MapView.tsx

@@ -4,14 +4,33 @@ import { ResultKeyVal } from "../../consts";
 import { drawRotatedImage, getAngleFromString } from "./windAngles";
 import { WindInputs, WindSignals } from "./WindInputs";
 
-import mapUrl from "../../assets/map_1920x1080.webp";
+import map_1920x1080 from "../../assets/map_1920x1080.webp";
+import map_3840x1440 from "../../assets/map_3840x1440.webp";
 import arrowUrl from "../../assets/arrow.webp";
 import { cityCoords } from "../../components/cityCoords";
 
-export const MapView: Component<{ data: () => ResultKeyVal[] }> = ({ data }) => {
+type MapResolution = "map_1920x1080" | "map_3840x1440";
+
+type ResolutionPropsValue = {
+    offsetX: number;
+    offsetY: number;
+    width: number;
+    height: number;
+    scale: number;
+    showWind: boolean;
+    map: string;
+};
+
+const resolutionProps: Record<string, ResolutionPropsValue> = {
+    "map_1920x1080": { offsetX: 90, offsetY: 120, width: 1920, height: 1080, scale: 1.35, showWind: true, map: map_1920x1080 },
+    "map_3840x1440": { offsetX: 800, offsetY: 120, width: 3840, height: 1440, scale: 2.2, showWind: false, map: map_3840x1440 },
+}
+
+export const MapView: Component<{ type: MapResolution, data: () => ResultKeyVal[] }> = ({ type, data }) => {
     const [getCanvas, setCanvas] = createSignal<HTMLCanvasElement>();
     const [getImg, setImg] = createSignal(new Image());
     let lastCoords: [string, {x: number, y: number }, number][] = [];
+    const props = resolutionProps[type];
 
     const arrowImg = new Image();
     arrowImg.src = arrowUrl;
@@ -42,9 +61,10 @@ export const MapView: Component<{ data: () => ResultKeyVal[] }> = ({ data }) =>
                 [img, arrowImg],
                 lastCoords,
                 getWindData(),
+                props,
             );
         };
-        img.src = mapUrl;
+        img.src = props.map;
     });
 
     createEffect(() => {
@@ -61,13 +81,14 @@ export const MapView: Component<{ data: () => ResultKeyVal[] }> = ({ data }) =>
             [getImg(),arrowImg],
             coordsAndData,
             getWindData(),
+            props,
         );
     });
 
     return (
         <>
             <WindInputs signals={windSignals} />
-            <canvas ref={setCanvas} width="1920px" height="1080px" />
+            <canvas ref={setCanvas} width={props.width+"px"} height={props.height+"px"} />
         </>
     );
 }
@@ -77,11 +98,9 @@ function drawOnMap(
     imgArr: [HTMLImageElement, HTMLImageElement],
     coords: [string, {x: number, y: number }, number][],
     windData: [string, string, string, boolean],
+    props: ResolutionPropsValue,
 ): void {
     const boxSize = 80;
-    const offsetX = 90;
-    const offsetY = 120;
-    const scale = 1.35;
 
     const [windDirection, windSpeed, windGusts, roundValues] = windData;
     const [bgImg, arrowImg] = imgArr;
@@ -92,8 +111,8 @@ function drawOnMap(
     // city boxes
     ctx.fillStyle = "#FFFFFF";
     coords.forEach(([, {x, y}, value]) => {
-        const localX = offsetX + x * scale;
-        const localY = offsetY + y * scale;
+        const localX = props.offsetX + x * props.scale;
+        const localY = props.offsetY + y * props.scale;
 
         ctx.beginPath();
         ctx.fillStyle = "#FFFFFF";
@@ -107,8 +126,8 @@ function drawOnMap(
     ctx.textAlign = "center";
     ctx.textBaseline = "middle";
     coords.forEach(([, {x, y}, value]) => {
-        const localX = offsetX + x * scale;
-        const localY = offsetY + y * scale;
+        const localX = props.offsetX + x * props.scale;
+        const localY = props.offsetY + y * props.scale;
 
         ctx.fillStyle = "#000000";
         const numericValue = roundValues ? Math.round(value) : value;
@@ -116,6 +135,8 @@ function drawOnMap(
         ctx.fillText(stringValue, localX, localY);
     });
 
+    if (!props.showWind) return;
+
     // wind values
     ctx.font = "bold 45px Rubik";
     ctx.textAlign = "left";

web/src/cities/result/Result.tsx

@@ -1,4 +1,4 @@
-import { Component, createSignal, Resource } from "solid-js";
+import { Component, createSignal, Resource, Show } from "solid-js";
 
 import "../../css/Result.css"
 import { ResultKeyVal, resultOrder, ResultOrderKeys } from "../../consts";
@@ -11,7 +11,7 @@ export const Result: Component<{
     result: Resource<QueryResult>
 }> = ({ result: resultResource }) => {
     const [getOrderKey, setOrderKey] = createSignal<ResultOrderKeys>("A -> Z");
-    type ResultView = "text" | "map";
+    type ResultView = "text" | "map_1920x1080" | "map_3840x1440";
     const [getResultView, setResultView] = createSignal<ResultView>("text");
 
     const cityData = () =>
@@ -34,8 +34,15 @@ export const Result: Component<{
                     <input
                         type="button"
                         class="secondary"
-                        value="map"
-                        onClick={() => setResultView("map")}
+                        value="map 1920x1080"
+                        onClick={() => setResultView("map_1920x1080")}
+                    />
+                    &nbsp; | &nbsp;
+                    <input
+                        type="button"
+                        class="secondary"
+                        value="map 3840x1440"
+                        onClick={() => setResultView("map_3840x1440")}
                     />
                 </span>
                 <span style={{ visibility: getResultView() === "text" ? "visible" : "hidden" }}>
@@ -43,15 +50,20 @@ export const Result: Component<{
                 </span>
             </div>
             <div class={getResultView() === "text" ? "result-container" : ""}>
-                { getResultView() === "text"
-                    ? cityData().map(([city, data]) =>
-                        <CityResult
-                            city={city}
-                            query={resultResource()!.query}
-                            result={data}
-                        />)
-                    : <MapView data={cityData} />
-                }
+                <Show when={getResultView() === "text"}>
+                    {cityData().map(([city, data]) =>
+                    <CityResult
+                        city={city}
+                        query={resultResource()!.query}
+                        result={data}
+                    />)}
+                </Show>
+                <Show when={getResultView() === "map_1920x1080"}>
+                    <MapView type="map_1920x1080" data={cityData} />
+                </Show>
+                <Show when={getResultView() === "map_3840x1440"}>
+                    <MapView type="map_3840x1440" data={cityData} />
+                </Show>
             </div>
         </div>
     );