GL-142 - indicate localised great circle cardinal direction

Alex Moon · Alex Moon · commit 79994a4b5cc2 · 2022-09-22T11:21:40.000+01:00
diff --git a/src/components/Guesser.tsx b/src/components/Guesser.tsx
@@ -9,6 +9,7 @@ import localeList from "../i18n/messages";
 import { FormattedMessage } from "react-intl";
 import { langNameMap } from "../i18n/locales";
 import { AltNames } from "../lib/alternateNames";
+import {polygonDirection} from "../util/direction";
 const countryData: Country[] = require("../data/country_data.json").features;
 const alternateNames: AltNames = require("../data/alternate_names.json");
 
@@ -99,22 +100,21 @@ export default function Guesser({
     e.preventDefault();
     setError("");
     let guessCountry = runChecks();
+    let guessAnswerCountry = answerCountry;
     if (practiceMode) {
-      const answerCountry = JSON.parse(
+      guessAnswerCountry = JSON.parse(
         localStorage.getItem("practice") as string
       );
-      if (guessCountry && answerCountry) {
-        guessCountry["proximity"] = polygonDistance(
-          guessCountry,
-          answerCountry
-        );
-        setGuesses([...guesses, guessCountry]);
-        setGuessName("");
-        return;
-      }
     }
-    if (guessCountry && answerCountry) {
-      guessCountry["proximity"] = polygonDistance(guessCountry, answerCountry);
+    if (guessCountry && guessAnswerCountry) {
+      guessCountry.proximity = polygonDistance(
+          guessCountry,
+          guessAnswerCountry
+      );
+      guessCountry.direction = polygonDirection(
+          guessCountry,
+          guessAnswerCountry
+      );
       setGuesses([...guesses, guessCountry]);
       setGuessName("");
     }
diff --git a/src/components/List.tsx b/src/components/List.tsx
@@ -1,8 +1,8 @@
 import { SyntheticEvent, useContext, useEffect, useState } from "react";
 import { GlobeMethods } from "react-globe.gl";
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 import { LocaleContext } from "../i18n/LocaleContext";
-import { Country, LanguageName } from "../lib/country";
+import {Country, LanguageName} from "../lib/country";
 import { Locale } from "../lib/locale";
 import { answerName } from "../util/answer";
 import { findCentre, turnGlobe } from "../util/globe";
@@ -95,6 +95,7 @@ export default function List({ guesses, win, globeRef, practiceMode }: Props) {
 
   const [isSortedByDistance, setIsSortedByDistance] = useState(true);
   const guessesToDisplay = isSortedByDistance ? orderedGuesses : guesses;
+  const intl = useIntl();
 
   return (
     <div className="md:ml-10 md:mr-0 py-8 dark:text-white z-30 mb-20">
@@ -152,6 +153,12 @@ export default function List({ guesses, win, globeRef, practiceMode }: Props) {
               off="miles"
             />
           </div>
+          <div className="flex items-center space-x-1">
+            <p>
+              <FormattedMessage id="Game9" />:{" "}
+              {intl.formatMessage({id:closest?.direction})}
+            </p>
+          </div>
           <p>
             <button
               onClick={() => setIsSortedByDistance(!isSortedByDistance)}
diff --git a/src/components/Outline.tsx b/src/components/Outline.tsx
@@ -5,6 +5,7 @@ import { useContext } from "react";
 import { ThemeContext } from "../context/ThemeContext";
 import { getPath } from "../util/svg";
 import { FormattedMessage } from "react-intl";
+import {polygonDirection} from "../util/direction";
 const countryData: Country[] = require("../data/country_data.json").features;
 
 type Props = {
@@ -27,7 +28,14 @@ export default function Outline({ countryName, width }: Props) {
   if (!sampleAnswer)
     throw new Error("Country in Help screen not found in Country Data");
 
-  countryCopy["proximity"] = polygonDistance(countryCopy, sampleAnswer);
+  countryCopy.proximity = polygonDistance(
+      countryCopy,
+      sampleAnswer
+  );
+  countryCopy.direction = polygonDirection(
+      countryCopy,
+      sampleAnswer
+  );
 
   const outline = getPath(countryName);
 
diff --git a/src/i18n/messages/de-DE.ts b/src/i18n/messages/de-DE.ts
@@ -45,6 +45,15 @@ export const German: Messages = {
   Game6: "Das Land wurde schon versucht",
   Game7: "Das geheime Land ist {answer}!",
   Game8: "Nächste Grenze",
+  Game9: "Richtung",
+  N: "Norden",
+  NE: "Nordosten",
+  E: "Osten",
+  SE: "Südosten",
+  S: "Süden",
+  SW: "Südwesten",
+  W: "Westen",
+  NW: "Nordwesten",
   StatsTitle: "Statistiken",
   Stats1: "Letzter Sieg",
   Stats2: "Heutige Versuche",
diff --git a/src/i18n/messages/en-CA.ts b/src/i18n/messages/en-CA.ts
@@ -47,6 +47,15 @@ export const English: Messages = {
   Game6: "Country already guessed",
   Game7: "The Mystery Country is {answer}!",
   Game8: "Closest border",
+  Game9: "Direction",
+  N: "north",
+  NE: "northeast",
+  E: "east",
+  SE: "southeast",
+  S: "south",
+  SW: "southwest",
+  W: "west",
+  NW: "northwest",
   StatsTitle: "Statistics",
   Stats1: "Last win",
   Stats2: "Today's guesses",
diff --git a/src/i18n/messages/es-MX.ts b/src/i18n/messages/es-MX.ts
@@ -42,6 +42,15 @@ export const Spanish: Messages = {
   Game6: "Pais ya adivinado",
   Game7: "¡El País Secreto es {answer}!",
   Game8: "Frontera más cercana",
+  Game9: "Dirección",
+  N: "norte",
+  NE: "noreste",
+  E: "este",
+  SE: "sureste",
+  S: "sur",
+  SW: "suroeste",
+  W: "oeste",
+  NW: "noroeste",
   StatsTitle: "Estadísticas",
   Stats1: "Última victoria	",
   Stats2: "Intentos de hoy",
diff --git a/src/i18n/messages/fr-FR.ts b/src/i18n/messages/fr-FR.ts
@@ -46,6 +46,15 @@ export const French: Messages = {
   Game6: "Pays déjà tenté",
   Game7: "Le pays mystère est: {answer}!",
   Game8: "Frontière la plus proche",
+  Game9: "Direction",
+  N: "nord",
+  NE: "nord-est",
+  E: "est",
+  SE: "sud-este",
+  S: "sud",
+  SW: "sud-oueste",
+  W: "ouest",
+  NW: "nord-ouest",
   StatsTitle: "Statistiques",
   Stats1: "Dernière victoire",
   Stats2: "Tentatives d'aujourd'hui",
diff --git a/src/i18n/messages/hu-HU.ts b/src/i18n/messages/hu-HU.ts
@@ -45,6 +45,15 @@ export const Hungarian: Messages = {
   Game6: "Ezt az országot már próbáltad",
   Game7: "A keresett ország {answer}!",
   Game8: "Legközelebbi határ:",
+  Game9: "Irány:",
+  N: "észak",
+  NE: "észak-kelet",
+  E: "kelet",
+  SE: "dél-kelet",
+  S: "dél",
+  SW: "dél-nyugat",
+  W: "nyugat",
+  NW: "észak-nyugat",
   StatsTitle: "Statisztika",
   Stats1: "Utolsó nyerés",
   Stats2: "Mai próbálkozások",
diff --git a/src/i18n/messages/it_IT.ts b/src/i18n/messages/it_IT.ts
@@ -46,6 +46,15 @@ export const Italian: Messages = {
   Game6: "Paese già provato",
   Game7: "Il paese misterioso è {answer}!",
   Game8: "Confine più vicino",
+  Game9: "Direzione",
+  N: "nord",
+  NE: "nord-est",
+  E: "est",
+  SE: "sud-este",
+  S: "sud",
+  SW: "sud-ovest",
+  W: "ovest",
+  NW: "nord-ovest",
   StatsTitle: "Statistiche",
   Stats1: "Ultima vittoria",
   Stats2: "Tentativi di oggi",
diff --git a/src/i18n/messages/pl-PL.ts b/src/i18n/messages/pl-PL.ts
@@ -41,6 +41,15 @@ export const Polish: Messages = {
   Game6: "Ten kraj już się pojawił",
   Game7: "Tajemniczy Kraj to {answer}!",
   Game8: "Najbliższa granica",
+  Game9: "Kierunek",
+  N: "północ",
+  NE: "północny wschód",
+  E: "wschód",
+  SE: "południowy wschód",
+  S: "południe",
+  SW: "południowy zachód",
+  W: "zachód",
+  NW: "północny zachód",
   StatsTitle: "Statystyki",
   Stats1: "Ostatnie zwycięstwo",
   Stats2: "Dzisiejsze próby",
diff --git a/src/i18n/messages/pt-BR.ts b/src/i18n/messages/pt-BR.ts
@@ -45,6 +45,15 @@ export const Portuguese: Messages = {
   Game6: "Você já chutou este país",
   Game7: "O país misterioso é {answer}!",
   Game8: "Fronteira mais próxima",
+  Game9: "Direção",
+  N: "norte",
+  NE: "nordeste",
+  E: "este",
+  SE: "sudeste",
+  S: "sul",
+  SW: "sudoeste",
+  W: "oeste",
+  NW: "noroeste",
   StatsTitle: "Estatísticas",
   Stats1: "Última vitória",
   Stats2: "Palpites de hoje",
diff --git a/src/i18n/messages/sv-SE.ts b/src/i18n/messages/sv-SE.ts
@@ -41,6 +41,15 @@ export const Swedish: Messages = {
   Game6: "Landet redan gissat",
   Game7: "Mysterielandet är {answer}!",
   Game8: "Närmsta gräns",
+  Game9: "Riktning",
+  N: "nord",
+  NE: "nordost",
+  E: "ost",
+  SE: "sydost",
+  S: "syd",
+  SW: "sydväst",
+  W: "väst",
+  NW: "nordväst",
   StatsTitle: "Statistik",
   Stats1: "Senaste vinst",
   Stats2: "Dagens gissningar",
diff --git a/src/lib/country.d.ts b/src/lib/country.d.ts
@@ -1,6 +1,9 @@
+export type Direction = 'N' | 'NE'| 'E'| 'SE'| 'S'| 'SW'| 'W'| 'NW';
+
 export type Country = {
   type: string;
   proximity: number;
+  direction ?: Direction;
   properties: {
     scalerank: number;
     featurecla: string;
diff --git a/src/lib/locale.d.ts b/src/lib/locale.d.ts
@@ -52,6 +52,15 @@ export type Messages = {
   Game6: string;
   Game7: string;
   Game8: string;
+  Game9: string;
+  N: string;
+  NE: string;
+  E: string;
+  SE: string;
+  S: string;
+  SW: string;
+  W: string;
+  NW: string;
   StatsTitle: string;
   Stats1: string;
   Stats2: string;
diff --git a/src/pages/Game.tsx b/src/pages/Game.tsx
@@ -9,6 +9,7 @@ import { polygonDistance } from "../util/distance";
 import { getColourEmoji } from "../util/colour";
 import { useNavigate, useSearchParams } from "react-router-dom";
 import { FormattedMessage } from "react-intl";
+import {polygonDirection} from "../util/direction";
 
 const Globe = lazy(() => import("../components/Globe"));
 const Guesser = lazy(() => import("../components/Guesser"));
@@ -62,10 +63,14 @@ export default function Game({ reSpin, setShowStats }: Props) {
           return country.properties.NAME === guess;
         });
         if (!foundCountry) throw new Error("Country mapping broken");
-        foundCountry["proximity"] = polygonDistance(
+        foundCountry.proximity = polygonDistance(
           foundCountry,
           answerCountry
         );
+        foundCountry.direction = polygonDirection(
+            foundCountry,
+            answerCountry
+        );
         return foundCountry;
       });
     }
diff --git a/src/util/colour.ts b/src/util/colour.ts
@@ -7,6 +7,7 @@ import {
 } from "d3-scale-chromatic";
 import { Country } from "../lib/country";
 import { polygonDistance } from "./distance";
+import {polygonDirection} from "./direction";
 
 const GREEN_SQUARE = "🟩";
 const ORANGE_SQUARE = "🟧";
@@ -29,7 +30,10 @@ export const getColour = (
   }
   if (guess.properties.NAME === answer.properties.NAME) return "green";
   if (guess.proximity == null) {
-    guess["proximity"] = polygonDistance(guess, answer);
+    guess.proximity = polygonDistance(guess, answer);
+  }
+  if (guess.direction == null) {
+    guess.direction = polygonDirection(guess, answer);
   }
   const gradient = highContrast
     ? interpolateGreys
@@ -46,7 +50,10 @@ export const getColour = (
 export const getColourEmoji = (guess: Country, answer: Country) => {
   if (guess.properties.NAME === answer.properties.NAME) return GREEN_SQUARE;
   if (guess.proximity == null) {
-    guess["proximity"] = polygonDistance(guess, answer);
+    guess.proximity = polygonDistance(guess, answer);
+  }
+  if (guess.direction == null) {
+    guess.direction = polygonDirection(guess, answer);
   }
   const scale = guess.proximity / MAX_DISTANCE;
   if (scale < 0.1) {
diff --git a/src/util/direction.ts b/src/util/direction.ts
@@ -0,0 +1,66 @@
+import * as geometry from "spherical-geometry-js";
+import {Country, Direction} from "../lib/country";
+import {polygonPoints} from "./geometry"
+
+function average(values: number[]) {
+    if (values.length === 0) {
+        return null;
+    }
+
+    let sum = 0;
+    for (let i = 0; i < values.length; i++) {
+        sum += values[i];
+    }
+    return sum / values.length;
+}
+
+// very silly implementation of centroid that's good enough for our purposes
+// suggestion: two libraries that do distance, bearing and centroid:
+// https://turfjs.org
+// https://www.npmjs.com/package/geodesy
+function polygonNaiveCentroid(points: number[][]) {
+    const lat = average(points.map(point => point[0]));
+    const lng = average(points.map(point => point[1]));
+    return [lat, lng] as [number, number];
+}
+
+function calcDirection(centroid1: [number, number], centroid2: [number, number]): Direction {
+    const heading = geometry.computeHeading(centroid1, centroid2);
+    // console.log('heading', heading);
+    if (heading > 157.5 || heading < -157.5) {
+        return 'S';
+    }
+    if (heading < -112.5) {
+        return 'SW';
+    }
+    if (heading < -67.5) {
+        return 'W';
+    }
+    if (heading < -22.5) {
+        return 'NW';
+    }
+    if (heading < 22.5) {
+        return 'N';
+    }
+    if (heading < 67.5) {
+        return 'NE';
+    }
+    if (heading < 112.5) {
+        return 'E';
+    }
+    if (heading < 157.5) {
+        return 'SE';
+    }
+    throw new Error('Could not determine direction, expected -180 < heading < 180, got ' + heading);
+}
+
+export function polygonDirection(country1: Country, country2: Country): Direction {
+    const points1 = polygonPoints(country1);
+    const points2 = polygonPoints(country2);
+    const centroid1 = polygonNaiveCentroid(points1);
+    const centroid2 = polygonNaiveCentroid(points2);
+    // console.log('determining direction from', country1.properties.ADMIN, 'to', country2.properties.ADMIN);
+    const result = calcDirection(centroid1, centroid2);
+    // console.log('direction', result);
+    return result;
+}
diff --git a/src/util/distance.ts b/src/util/distance.ts
diff --git a/src/util/geometry.ts b/src/util/geometry.ts
