Add weather icon inputs to cities on map

web/src/cities/map/MapView.tsx

@@ -5,13 +5,17 @@ import { WindInputs, WindSignals } from "./WindInputs";
 
 import arrowUrl from "../../assets/arrow.webp";
 import { cityCoords } from "../../components/cityCoords";
-import { MapResolution, resolutionProps, ResolutionPropsValue, windProps, WindProps } from "./mapConsts";
-import { drawOnMap } from "./canvasDraw";
+import { MapResolution, resolutionProps, windProps, WindProps } from "./mapConsts";
+import { CityData, drawOnMap } from "./canvasDraw";
+import { IconInputs } from "../../components/weatherIcons/IconInputs";
 
 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 weatherIconsSingal = createSignal<{[key: string]: string;}>({});
+    const [getWeatherIcons] = weatherIconsSingal;
+    
+    let lastCoords: CityData = [];
     const props = resolutionProps[type];
 
     const arrowImg = new Image();
@@ -52,16 +56,18 @@ export const MapView: Component<{ type: MapResolution, data: () => ResultKeyVal[
 
     createEffect(() => {
         const ctx = getCanvas()!.getContext("2d")!;
-        const coordsAndData: [string, {x: number, y: number }, number][] = data()
+        const weatherIcons = getWeatherIcons();
+        const coordsAndData: CityData = data()
             .map(([city, value]) => [
                 city,
                 cityCoords[city as keyof typeof cityCoords],
                 typeof value === "number" ? value : -99,
+                weatherIcons[city],
             ]);
             lastCoords = coordsAndData;
         drawOnMap(
             ctx,
-            [getImg(),arrowImg],
+            [getImg(), arrowImg],
             coordsAndData,
             getWindData(),
             props,
@@ -76,7 +82,12 @@ export const MapView: Component<{ type: MapResolution, data: () => ResultKeyVal[
 
     return (
         <>
-            { props.showWind && <WindInputs signals={windSignals} /> }
+            <div class="grid-1-2">
+                <div>
+                    { props.showWind && <WindInputs signals={windSignals} /> }
+                </div>
+                <div><IconInputs weatherIconsSingal={weatherIconsSingal} /></div>
+            </div>
             <canvas
                 ref={setCanvas}
                 width={props.width+"px"}

web/src/cities/map/canvasDraw.ts

@@ -1,10 +1,13 @@
 import { ResolutionPropsValue, WindProps, windProps } from "./mapConsts";
 import { drawRotatedImage, getAngleFromString } from "./windAngles";
 
+// cityName, {x, y}, weatherValue, icon
+export type CityData = [string, {x: number, y: number }, number, string | undefined][];
+
 export function drawOnMap(
     ctx: CanvasRenderingContext2D,
     imgArr: [HTMLImageElement, HTMLImageElement],
-    coords: [string, {x: number, y: number }, number][],
+    cityData: CityData,
     windData: [string, string, string, boolean, WindProps],
     props: ResolutionPropsValue,
 ): void {
@@ -16,7 +19,7 @@ export function drawOnMap(
 
     // city boxes
     ctx.fillStyle = "#FFFFFF";
-    coords.forEach(([, {x, y}, value]) => {
+    cityData.forEach(([, {x, y}]) => {
         const localX = props.offsetX + x * props.scale;
         const localY = props.offsetY + y * props.scale;
 
@@ -28,17 +31,24 @@ export function drawOnMap(
     ctx.fill();
 
     // weather values
-    ctx.font = `bold ${props.fontSize}px Rubik`;
-    ctx.textAlign = "center";
-    ctx.textBaseline = "middle";
-    coords.forEach(([, {x, y}, value]) => {
+    cityData.forEach(([, {x, y}, value, icon]) => {
         const localX = props.offsetX + x * props.scale;
         const localY = props.offsetY + y * props.scale;
 
+        ctx.font = `bold ${props.fontSize}px Rubik`;
+        ctx.textAlign = "center";
+        ctx.textBaseline = "middle";
         ctx.fillStyle = "#000000";
         const numericValue = roundValues ? Math.round(value) : value;
         const stringValue = numericValue.toString().replace(".", ",");
         ctx.fillText(stringValue, localX, localY);
+
+        if (icon) {
+            ctx.fillStyle = "#FFFFFF";
+            ctx.font = `normal ${props.fontSize * 5}px Daira by LTV grafika`;
+            const iconSize = ctx.measureText(icon);
+            ctx.fillText(icon, localX + props.boxSize/2 + 10 + iconSize.width/2, localY);
+        }
     });
 
     if (!props.showWind) return;

web/src/cities/result/ResultView.tsx

@@ -34,7 +34,6 @@ export const ResultView: Component<{
     return (
         <div>
             <div class="resultTitle">
-                <h3>Result:</h3>
                 <span>
                     {resultViews.map(viewName =>
                         <>