improve hints and country spec display

silentDjay · Mar 3, 2024 · 6f2e53f · 6f2e53f
1 parent a9d7ff3
commit 6f2e53f
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 68 deletions.
diff --git a/src/components/CountrySpecsList.tsx b/src/components/CountrySpecsList.tsx
@@ -4,6 +4,15 @@ import { CountryArea } from "./CountryArea";
 import { getBorderCountryList } from "../utils";
 import { Country } from "../types";
 
+export const CountrySpec: React.FC<{
+  label: string;
+  data: string | JSX.Element;
+}> = ({ label, data }) => (
+  <div style={{ marginTop: ".5rem" }}>
+    &#10147; {label}: <b>{data}</b>
+  </div>
+);
+
 export const CountrySpecsList: React.FC<{ countryMetadata: Country }> = ({
   countryMetadata,
 }) => (
@@ -13,51 +22,45 @@ export const CountrySpecsList: React.FC<{ countryMetadata: Country }> = ({
       alt={`flag of ${countryMetadata.name.common}`}
       src={countryMetadata.flags.svg}
     />
-    <div style={{ marginTop: "1rem" }}>
-      &#10147; Official Name: <b>{countryMetadata.name.official}</b>
-    </div>
-    <div>
-      &#10147; Population:{" "}
-      <b>{Intl.NumberFormat().format(countryMetadata.population)}</b>
-    </div>
-    <div>
-      &#10147; Area:{" "}
-      <b>
-        <CountryArea area={countryMetadata.area} />
-      </b>
-    </div>
-    <div>
-      &#10147; Capital City: <b>{countryMetadata.capital.join(", ")}</b>
-    </div>
-    <div>
-      &#10147; Currencies:{" "}
-      <b>
-        {Object.values(countryMetadata.currencies)
+    <CountrySpec label="Official Name" data={countryMetadata.name.official} />
+    <CountrySpec
+      label="Population"
+      data={Intl.NumberFormat().format(countryMetadata.population)}
+    />
+    <CountrySpec
+      label="Area"
+      data={<CountryArea area={countryMetadata.area} />}
+    />
+    <CountrySpec
+      label={
+        countryMetadata.capital.length > 1 ? "Capital Cities" : "Capital City"
+      }
+      data={countryMetadata.capital.join(", ") || "N/A"}
+    />
+    <CountrySpec
+      label="Currencies"
+      data={
+        Object.values(countryMetadata.currencies)
           .map((currency) => `${currency.name} (${currency.symbol})`)
-          .join(", ")}
-      </b>
-    </div>
-    <div>
-      &#10147; Official Languages:{" "}
-      <b>
-        {Object.values(countryMetadata.languages)
+          .join(", ") || "N/A"
+      }
+    />
+    <CountrySpec
+      label="Official Languages"
+      data={
+        Object.values(countryMetadata.languages)
           .map((language) => language)
-          .join(", ")}
-      </b>
-    </div>
-    <div>
-      &#10147; Borders:{" "}
-      <b>
-        {!!countryMetadata.borders.length
-          ? getBorderCountryList(countryMetadata.borders)
-          : "None"}
-      </b>
-    </div>
-    <div>
-      &#10147; Demonym: <b>{countryMetadata.demonyms.eng.f}</b>
-    </div>
-    <div>
-      &#10147; Drives on the: <b>{countryMetadata.car.side}</b>
-    </div>
+          .join(", ") || "N/A"
+      }
+    />
+    <CountrySpec
+      label="Borders"
+      data={getBorderCountryList(countryMetadata.borders) || "None"}
+    />
+    <CountrySpec
+      label="Demonym"
+      data={countryMetadata.demonyms.eng.f || "N/A"}
+    />
+    <CountrySpec label="Drives on the" data={countryMetadata.car.side} />
   </div>
 );
diff --git a/src/components/modals/GameplayModal.tsx b/src/components/modals/GameplayModal.tsx
@@ -6,7 +6,6 @@ import { CountryArea } from "../CountryArea";
 import {
   getCountryDataFromCca2Code,
   getBorderCountryList,
-  getCountryHemispheres,
   getFlagEmoji,
   getShareText,
 } from "../../utils";
@@ -117,32 +116,44 @@ export const GameplayModal: React.FC<GameplayModalProps> = ({
           style={{ fontSize: "125%" }}
           onClick={onRevealHint}
           className="pure-button pure-button-primary"
-          disabled={revealedHintCount === 5}
+          disabled={revealedHintCount === 6}
         >
           Show Another Hint
         </button>
         <div className="country-spec-list">
           <div>
-            &#10147; has an area of{" "}
-            <CountryArea area={targetCountryData.area} />
-            <span> ({getRelativeCountrySize(targetCountryData.area)})</span>
+            &#10147;{" "}
+            {`${
+              targetCountryData.latlng[0] > 0 ? "North" : "South"
+            } of the Equator`}
           </div>
           {revealedHintCount > 1 && (
-            <div>
-              &#10147; in the {getCountryHemispheres(targetCountryData.latlng)}{" "}
-              Hemispheres
-            </div>
+            <>
+              <div>
+                &#10147;{" "}
+                {`${
+                  targetCountryData.latlng[1] > 0 ? "East" : "West"
+                } of the Prime Meridian`}
+              </div>
+            </>
           )}
           {revealedHintCount > 2 && (
             <div>&#10147; located in {targetCountryData.subregion}</div>
           )}
           {revealedHintCount > 3 && (
             <div>
-              &#10147;{" "}
-              {targetCountryData.landlocked ? "landlocked" : "not landlocked"}
+              &#10147; has an area of{" "}
+              <CountryArea area={targetCountryData.area} />
+              <span> ({getRelativeCountrySize(targetCountryData.area)})</span>
             </div>
           )}
           {revealedHintCount > 4 && (
+            <div>
+              &#10147;{" "}
+              {targetCountryData.landlocked ? "landlocked" : "has a coastline"}
+            </div>
+          )}
+          {revealedHintCount > 5 && (
             <div>
               &#10147;{" "}
               {!!targetCountryData.borders.length

diff --git a/src/data/countryData.ts b/src/data/countryData.ts
@@ -2851,7 +2851,7 @@ export const countryData: Country[] = [
     cca2: "NL",
     cca3: "NLD",
     currencies: { EUR: { name: "Euro", symbol: "€" } },
-    capital: ["Amsterdam"],
+    capital: ["Amsterdam", "The Hague"],
     subregion: "Western Europe",
     languages: { nld: "Dutch" },
     latlng: [52.5, 5.75],
@@ -4543,7 +4543,7 @@ export const countryData: Country[] = [
     currencies: {
       XOF: { name: "West African CFA franc", symbol: "Fr" },
     },
-    capital: ["Porto-Novo"],
+    capital: ["Cotonou", "Porto-Novo"],
     subregion: "Western Africa",
     languages: { fra: "French" },
     latlng: [9.5, 2.25],
@@ -4643,7 +4643,7 @@ export const countryData: Country[] = [
     cca2: "BO",
     cca3: "BOL",
     currencies: { BOB: { name: "Bolivian boliviano", symbol: "Bs." } },
-    capital: ["Sucre"],
+    capital: ["La Paz", "Sucre"],
     subregion: "South America",
     languages: {
       aym: "Aymara",
@@ -6088,7 +6088,7 @@ export const countryData: Country[] = [
     cca2: "LK",
     cca3: "LKA",
     currencies: { LKR: { name: "Sri Lankan rupee", symbol: "Rs  රු" } },
-    capital: ["Sri Jayawardenepura Kotte"],
+    capital: ["Colombo", "Sri Jayawardenepura Kotte"],
     subregion: "Southern Asia",
     languages: { sin: "Sinhala", tam: "Tamil" },
     latlng: [7.0, 81.0],
@@ -6555,7 +6555,7 @@ export const countryData: Country[] = [
       SZL: { name: "Swazi lilangeni", symbol: "L" },
       ZAR: { name: "South African rand", symbol: "R" },
     },
-    capital: ["Mbabane"],
+    capital: ["Lobamba", "Mbabane"],
     subregion: "Southern Africa",
     languages: { eng: "English", ssw: "Swazi" },
     latlng: [-26.5, 31.5],
@@ -7401,7 +7401,7 @@ export const countryData: Country[] = [
     cca2: "MY",
     cca3: "MYS",
     currencies: { MYR: { name: "Malaysian ringgit", symbol: "RM" } },
-    capital: ["Kuala Lumpur"],
+    capital: ["Kuala Lumpur", "Putrajaya"],
     subregion: "South-Eastern Asia",
     languages: { eng: "English", msa: "Malay" },
     latlng: [2.5, 112.5],

diff --git a/src/index.css b/src/index.css
@@ -60,7 +60,7 @@ body {
 }
 
 .backdrop {
-  background-color: rgba(0, 0, 0, 0.6);
+  background-color: rgba(0, 0, 0, 0.65);
   color: white;
   position: fixed;
   left: 0;

diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -309,12 +309,6 @@ export const getClickDistanceFromTarget = (
   return 12742 * Math.asin(Math.sqrt(a)); // 2 * R; R = 6371 km
 };
 
-export const getCountryHemispheres = (latlng: Coordinates) => {
-  return `${latlng[0] > 0 ? "Northern" : "Southern"} and ${
-    latlng[1] > 0 ? "Eastern" : "Western"
-  }`;
-};
-
 export const getShareText = (
   clickStatus: ClickStatus,
   targetCountryName: string,