#31, #55 - Add pixel-based country highlighting and variant image gen…

…eration

app/components/Board.tsx

@@ -19,6 +19,7 @@ import { drawPixel, drawPixelBuffer, drawPixelRgbaBuffer, drawImageData, paintCa
 import {CanvasGlobeProps} from "./Globe";
 import useFancyCanvas from "./hooks/useFancyCanvas";
 import {Baseboard} from "../constants/Baseboard";
+import useImage from "./hooks/useImage";
 // import Tooltip from './TrackingTooltip.js';
 
 
@@ -181,6 +182,9 @@ const Board = (props: CanvasGlobeProps) => {
     const [flashBackImage, setFlashbackImage] = usePreloadedImage(System.FLASHBACK_BOARD_PATH);
     const [coloringBaseboardImage, setColoringBaseboardImage] = usePreloadedImage(System.COLORING_BASEBOARD_PATH);
 
+    const highlightFileName = (props.activeCountry == null || props.activeCountry == "" ? "empty" : props.activeCountry) + ".png";
+    const territoryHighlightImage = useImage(System.HIGHLIGHTS_FOLDER + highlightFileName);
+
     const drawBoard = (ctx: CanvasRenderingContext2D, frameCount: number) => {
         drawPixelRgbaBuffer(ctx, tilesRgba, width);
     }
@@ -190,14 +194,19 @@ const Board = (props: CanvasGlobeProps) => {
     const drawColoringBaseboard = (ctx: CanvasRenderingContext2D, frameCount: number) => {
         fillCanvasWithImage(ctx, coloringBaseboardImage, width, height);
     }
+    const drawHighlight = (ctx: CanvasRenderingContext2D, frameCount: number) => {
+        if (territoryHighlightImage != null) {
+            fillCanvasWithImage(ctx, territoryHighlightImage, width, height);
+        }
+    }
 
     let layers = [];
     if (activeBaseboard == Baseboard.FLASHBACK) {
-        layers = [drawFlashback];
+        layers = [drawFlashback, drawHighlight];
     } else if (activeBaseboard == Baseboard.COLORING) {
-        layers = [drawColoringBaseboard];
+        layers = [drawColoringBaseboard, drawHighlight];
     } else {
-        layers = [drawBoard];
+        layers = [drawBoard, drawHighlight];
     }
 
     const canvasRef = useFancyCanvas(layers);

app/components/CountryCard.tsx

@@ -68,13 +68,22 @@ export default function MediaCard(props) {
       </CardActionArea>
       <CardActions>
         <Button size="small" color="primary" onClick={() => {
-                var nextCountry = props.label;
-                /*
-                if (props.activeCountry === props.label) {
-                    nextCountry = "noCountrySelected";
-                }
-                */
-                props.setActiveCountry(nextCountry)
+            // console.log("props = ");
+            // console.log(props);
+            // alert('clicked');
+            // var nextCountry = props.label;
+            let nextCountry = props.country.wikidataid;
+            /*
+            if (props.activeCountry === props.label) {
+                nextCountry = "noCountrySelected";
+            }
+            */
+            // to avoid using unnecessary rerenders, imma gonna try to move this logic to setActiveCountry maybe?
+            // console.log(["nextCountry", nextCountry, "props.activeCountry", props.activeCountry]);
+            // if (nextCountry == props.activeCountry) {
+            //     nextCountry = ""; // or null
+            // }
+            props.setActiveCountry(nextCountry);
             }}>
           Show
         </Button>

app/components/Globe.tsx

@@ -14,6 +14,7 @@ import {drawPixelRgbaBuffer, fillCanvasWithImage} from '../utils/draw';
 import useFancyCanvas from "./hooks/useFancyCanvas";
 import {Baseboard} from "../constants/Baseboard";
 import {COLORING_BASEBOARD_PATH} from "../constants/system";
+import useImage from "./hooks/useImage";
 
 // THREE.WebGLRenderer._useLegacyLights = true;
 // THREE.WebGLRendererParameters;
@@ -134,6 +135,18 @@ function CanvasGlobe(props: CanvasGlobeProps) {
     const [flashBackImage, setFlashbackImage] = usePreloadedImage(System.FLASHBACK_BOARD_PATH);
     const [coloringBaseboardImage, setColoringBaseboardImage] = usePreloadedImage(System.COLORING_BASEBOARD_PATH);
 
+    const highlightFileName = (props.activeCountry == null || props.activeCountry == "" ? "empty" : props.activeCountry) + ".png";
+    // const highlightFileName = (props.activeCountry == null || props.activeCountry == "" ? "Q16" : props.activeCountry) + ".png";
+    // console.log(["highlightFileName", highlightFileName]);
+    // const [territoryHighlightImage, setTerritoryHighlightImage] = usePreloadedImage(System.CANADA_HIGHLIGHT_PATH);
+    // wait is the functions input just the initial value? I think it's probably like just not done loading, when click it
+    // TODO: figure out the above problem
+    //- const [territoryHighlightImage, setTerritoryHighlightImage] = usePreloadedImage(System.HIGHLIGHTS_FOLDER + highlightFileName);
+    // const [territoryHighlightImage, setTerritoryHighlightImage] = usePreloadedImage(System.HIGHLIGHTS_FOLDER + "Q16.png");
+    const territoryHighlightImage = useImage(System.HIGHLIGHTS_FOLDER + highlightFileName);
+
+    // console.log(["System.CANADA_HIGHLIGHT_PATH", System.CANADA_HIGHLIGHT_PATH]);
+
     const drawBoard = (ctx: CanvasRenderingContext2D, frameCount: number) => {
         drawPixelRgbaBuffer(ctx, tilesRgba, width);
     }
@@ -143,14 +156,19 @@ function CanvasGlobe(props: CanvasGlobeProps) {
     const drawColoringBaseboard = (ctx: CanvasRenderingContext2D, frameCount: number) => {
         fillCanvasWithImage(ctx, coloringBaseboardImage, width, height);
     }
+    const drawHighlight = (ctx: CanvasRenderingContext2D, frameCount: number) => {
+        if (territoryHighlightImage != null) {
+            fillCanvasWithImage(ctx, territoryHighlightImage, width, height);
+        }
+    }
 
     let layers = [];
     if (activeBaseboard == Baseboard.FLASHBACK) {
-        layers = [drawFlashback];
+        layers = [drawFlashback, drawHighlight];
     } else if (activeBaseboard == Baseboard.COLORING) {
-        layers = [drawColoringBaseboard];
+        layers = [drawColoringBaseboard, drawHighlight];
     } else {
-        layers = [drawBoard];
+        layers = [drawBoard, drawHighlight];
     }
 
     // const options = {
@@ -339,7 +357,7 @@ function CanvasGlobe(props: CanvasGlobeProps) {
 
         const directionalLight = globeEl.current.lights().find(obj3d => obj3d.type === 'DirectionalLight');
         directionalLight.intensity = 0.03 * Math.PI;
-    }, [props.viewFlashback, props.tiles, props.activeBaseboard]);
+    }, [territoryHighlightImage, props.viewFlashback, props.tiles, props.activeBaseboard]);
     // React.useEffect(() => {
     //     texture.needsUpdate = true;
     // }, [props.viewFlashback, props.tiles]);
@@ -498,6 +516,8 @@ function CanvasGlobe(props: CanvasGlobeProps) {
         fetch('/assets/ne_110m_admin_0_countries.geojson').then(res => res.json()).then(setCountries);
     }, []);
     */
+
+    // this right here really needs to be renamed
     const [activeCountry, setActiveCountry] = React.useState([]);
 
     React.useEffect(() => {
@@ -509,6 +529,12 @@ function CanvasGlobe(props: CanvasGlobeProps) {
         if (props.activeCountry == null || props.activeCountry == "") {
             return;
         }
+        // console.debug("props.activeCountry = ");
+        // console.debug(props.activeCountry);
+
+        // --- probably don't need to fetch the geojson anymore hopefully --- //
+        return;
+
         API.fetchTerritoryGeojsonFromName(props.activeCountry).then(res => {
             console.log("fetched country = ");
             console.log(res);

app/components/hooks/useImage.ts

@@ -0,0 +1,29 @@
+import { useState, useEffect } from 'react';
+
+function useImage(imagePath: string): HTMLImageElement | null {
+    const [image, setImage] = useState<HTMLImageElement | null>(null);
+
+    useEffect(() => {
+        if (!imagePath) {
+            setImage(null);
+            return;
+        }
+
+        const img = new Image();
+        img.src = imagePath;
+
+        const handleLoad = () => {
+            setImage(img);
+        };
+
+        img.onload = handleLoad;
+
+        return () => {
+            img.onload = null; // Cleanup to avoid memory leaks
+        };
+    }, [imagePath]);
+
+    return image;
+}
+
+export default useImage;

app/components/hooks/usePreloadedImage.ts

@@ -3,14 +3,14 @@ import React, { useState, useEffect, useRef } from 'react';
 export default function usePreloadedImage(path: string): [HTMLImageElement, any] {
     const [image, setImage] = useState<HTMLImageElement>(new Image());
     useEffect(() => {
-        // console.log("image loading");
         // image.src = "../../assets/pixel-countries-mid-res.png";
         image.src = path;
         image.onload = () => {
             //- console.log("image " + path + " loaded"); // uncomment this to view base 64 encoding
             // console.log(image);
         };
         setImage(image);
-    }, []); // TODO: should probably update this to change when the "path" parameter changes
+    }, []); // TODO: should probably update this to change when the "path" parameter changes // nah nvm I shouldn't
+    // }, [path]);
     return [image, setImage];
 }

app/constants/system.js

@@ -15,3 +15,13 @@ import FLASHBACK_BOARD from '../assets/pixel-countries-mid-res.png';
 export const FLASHBACK_BOARD_PATH = FLASHBACK_BOARD;
 import COLORING_BASEBOARD from '../assets/COLORING.png';
 export const COLORING_BASEBOARD_PATH = COLORING_BASEBOARD;
+
+// import HIGHLIGHTS_FOLDER from '../assets/highlights/';
+// export const CANADA_HIGHLIGHT = HIGHLIGHTS_FOLDER + CANADA_HIGHLIGHT;
+
+// import CANADA_HIGHLIGHT from '../assets/highlights/Q16.png';
+// export const CANADA_HIGHLIGHT_PATH = CANADA_HIGHLIGHT;
+
+// TODO: this probably won't work during npm run build, so fix it
+export const CANADA_HIGHLIGHT_PATH = '../assets/highlights/Q16.png';
+export const HIGHLIGHTS_FOLDER = '../assets/highlights/';

app/reducers/index.ts

@@ -137,7 +137,13 @@ const rootSlice = createSlice({
             return { ...state, mouseDown: action.payload };
         },
         setActiveCountry(state: BaseState, action) {
-            return { ...state, board: {...state.board, activeCountry: action.payload} };
+            // extra logic to allow toggle behavior
+            // TODO: maybe just move this to the CountryCard actually so like the CountryCard also shows if that country is active or not
+            let nextCountry = action.payload;
+            if (state.board.activeCountry == action.payload) {
+                nextCountry = "";
+            }
+            return { ...state, board: {...state.board, activeCountry: nextCountry} };
         },
         setBrushColor(state: BaseState, action) {
             return { ...state, brushColor: action.payload };