Add difficulty levels

src/App.css

@@ -105,5 +105,33 @@ body {
   position: absolute;
   top: 0;
   left: 0;
-  padding: 30px;
+  right: 0;
+  display: grid;
+  grid-auto-flow: column;
+  padding-left: 20px;
+  padding-right: 20px;
+  color: black;
+  h1 {
+    margin: 0;
+    margin-top: 5px;
+    font-size: 24px;
+  }
+  & > div:first-child {
+    text-align: left;
+    align-self: center;
+  }
+  & > div:last-child {
+    text-align: right;
+    align-self: center;
+  }
+}
+
+.modal--intro {
+  label {
+    display: block;
+    margin-bottom: 5px;
+  }
+  button {
+    margin-top: 15px;
+  }
 }

src/App.tsx

@@ -16,13 +16,24 @@ const countriesArray = land.features;
 
 const sortedCountries = weightedShuffle(Object.entries(weights));
 
-const countries = sortedCountries.map(([countryCode]) => {
+const rawCountries = sortedCountries.map(([countryCode]) => {
   return countriesArray.find((item) => item.properties.isocode === countryCode);
 });
 
-const initialRotation = geoCentroid(countries[0]);
+const initialRotation = geoCentroid(rawCountries[0]);
 
-const numCountries = sortedCountries.length;
+const countriesByDifficulty = {
+  easy: rawCountries.filter(
+    (countryItem) => weights[countryItem.properties.isocode] >= 0.8,
+  ),
+  medium: rawCountries.filter(
+    (countryItem) => weights[countryItem.properties.isocode] >= 0.5,
+  ),
+  hard: rawCountries.filter(
+    (countryItem) => weights[countryItem.properties.isocode] >= 0.3,
+  ),
+  veryHard: [...rawCountries],
+};
 
 export default function App() {
   const [correctGuesses, setCorrectGuesses] = useState(0);
@@ -31,6 +42,7 @@ export default function App() {
   const [countryIndex, setCountryIndex] = useState(0);
   const [showAnswer, setShowAnswer] = useState<string | null>(null);
   const [showGameOver, setShowGameOver] = useState<boolean | null>(null);
+  const [countries, setCountries] = useState(countriesByDifficulty.hard);
   const [rotation, setRotation] = useState([
     -initialRotation[0],
     -initialRotation[1],
@@ -39,7 +51,7 @@ export default function App() {
   const country = countries[countryIndex];
 
   const updateSelectedCountry = useCallback(() => {
-    if (countryIndex + 1 < numCountries) {
+    if (countryIndex + 1 < countries.length) {
       const newIndex = countryIndex + 1;
       setCountryIndex(newIndex);
       const newRotation = geoCentroid(countries[newIndex]);
@@ -66,8 +78,11 @@ export default function App() {
     }
   }
 
-  function onStart() {
+  function onStart(difficulty) {
     setShowGameOver(false);
+    setCountries(countriesByDifficulty[difficulty]);
+    const newRotation = geoCentroid(countriesByDifficulty[difficulty][0]);
+    setRotation([-newRotation[0], -newRotation[1]]);
   }
 
   useLayoutEffect(() => {
@@ -84,14 +99,17 @@ export default function App() {
       />
       <div className="ui">
         <div>
-          Round: {countryIndex + 1}/{numCountries}
+          Round: {countryIndex + 1}/{countries.length}
         </div>
         <div>
+          <h1>Country Guesser</h1>
           <Timer gameRunning={showGameOver === false} />
         </div>
-        <div>Streak: {streak}</div>
-        <div>Correct: {correctGuesses}</div>
-        <div>Incorrect: {incorrectGuesses}</div>
+        <div>
+          <div>Streak: {streak}</div>
+          <div>Correct: {correctGuesses}</div>
+          <div>Incorrect: {incorrectGuesses}</div>
+        </div>
       </div>
       <div className="overlay">
         {showGameOver ? (

src/IntroModal.tsx

@@ -1,24 +1,49 @@
 import NiceModal, { useModal } from '@ebay/nice-modal-react';
 import { Dialog } from '@reach/dialog';
+import { weights } from './weights';
+import { useState } from 'react';
+
+const weightValues = Object.values(weights);
+const easyCountries = weightValues.filter((weight) => weight >= 0.8).length;
+const mediumCountries = weightValues.filter((weight) => weight >= 0.5).length;
+const hardCountries = weightValues.filter((weight) => weight >= 0.3).length;
+const veryHardCountries = weightValues.length;
 
 export const IntroModal = NiceModal.create(({ onStart }) => {
   const modal = useModal();
 
-  function startGame() {
-    onStart();
+  function startGame(event) {
+    event.preventDefault();
+    const data = new FormData(event.target);
+    onStart(data.get('difficulty'));
     modal.hide();
   }
 
   return (
     <Dialog isOpen={modal.visible} onDismiss={modal.hide}>
-      <div className="modal modal--intro">
+      <form className="modal modal--intro" onSubmit={startGame}>
         <h1>Country Guesser</h1>
         <h2>How to play</h2>
         <p>Type the name of the country highlighted.</p>
-        <button type="button" onClick={startGame}>
-          Start
-        </button>
-      </div>
+        <h2>Select difficulty</h2>
+        <label>
+          <input type="radio" name="difficulty" value="easy" /> American (
+          {easyCountries} countries)
+        </label>
+        <label>
+          <input type="radio" name="difficulty" value="medium" /> Tourist (
+          {mediumCountries} countries)
+        </label>
+        <label>
+          <input type="radio" name="difficulty" value="hard" defaultChecked />{' '}
+          GeoGuessr enjoyer ({hardCountries} countries)
+        </label>
+        <label>
+          <input type="radio" name="difficulty" value="veryHard" /> Ultra
+          violence ({veryHardCountries} countries)
+        </label>
+        <button type="submit">Start</button>
+      </form>
     </Dialog>
   );
 });

src/weights.tsx

@@ -53,7 +53,6 @@ export const weights = {
 
   AE: 0.8,
   EE: 0.8,
-  BH: 0.8,
   SA: 0.8,
   HR: 0.8,
   CO: 0.8,
@@ -120,7 +119,6 @@ export const weights = {
   UZ: 0.5,
   DM: 0.5,
   IQ: 0.5,
-  BZ: 0.5,
   CV: 0.5,
   GH: 0.5,
   MM: 0.5,
@@ -129,7 +127,9 @@ export const weights = {
   PK: 0.5,
   NG: 0.5,
   SD: 0.5,
+  BH: 0.5,
 
+  BZ: 0.4,
   BB: 0.4,
   BA: 0.4,
   PW: 0.4,