Added Easy mode

src/App.jsx

@@ -3,15 +3,19 @@ import { GameContext } from "./context.js"
 import { Map } from "./Map.jsx"
 import names from "./names.json"
 import ConfettiExplosion from "react-confetti-explosion"
+import ModeSelector from "./components/ModeSelector.jsx"
 
 const MAX_COUNTRIES = 197
 const TIME = 15 * 60
 
+var mode = 0 // let 0 be easy mode and 1 be hard mode
+
 export const App = () => {
     const [completedCountries, setCompletedCountries] = useState([])
     const [countdown, setCountdown] = useState(TIME)
     const [started, setStarted] = useState(false)
     const [ended, setEnded] = useState(false)
+    const [mode, setMode] = useState("Normal") // useSate for the mode
     useEffect(() => {
         if (started && !ended) {
             const interval = setInterval(() => {
@@ -27,21 +31,42 @@ export const App = () => {
         }
     }, [started, ended])
 
+    const toggleMode = () => {
+        if (mode == "Easy") {
+            setMode("Normal")
+        }
+        if (mode == "Normal") {
+            setMode("Easy")
+        }else{setMode("Normal")}
+        console.log(mode)
+    }
+
     const onInput = e => {
         const value = e.target.value.toLowerCase().trim()
         const code = names[value]
         if (code && !completedCountries.includes(code)) {
             setCompletedCountries([...completedCountries, code])
             e.target.value = ""
             if (completedCountries.length + 1 >= MAX_COUNTRIES) setEnded(true)
+        } else if (mode == "Easy") {
+            var enteredValue = e.target.value
+            for (const [key, value] of Object.entries(names)) {
+                if (enteredValue == value) {
+                    setCompletedCountries([...completedCountries, value])
+                    e.target.value = ""
+                    if (completedCountries.length + 1 >= MAX_COUNTRIES) setEnded(true)
+                }
+
+            }   
+
         }
         if (!started) setStarted(true)
     }
-
     return (
         <GameContext.Provider value={{ completedCountries }}>
             <div className="max-w-7xl mx-auto text-4xl px-8">
-                <div className="flex flex-grow justify-between mt-12 mb-4">
+                <ModeSelector toggleMode = {toggleMode} mode={mode}/>
+                    <div className="flex flex-grow justify-between mt-12 mb-4">
                     <p className="w-48 text-neutral-400">{formatTime(countdown)}</p>
 
                     {!ended ? (
@@ -64,7 +89,7 @@ export const App = () => {
             <div className="flex justify-center absolute bottom-4 w-full">
                 <a href="https://discord.gg/acvYQnGvKQ" className="bg-neutral-700 rounded-full text-neutral-400 text-sm py-1 px-4">Join the Discord community</a>
             </div>
-        </GameContext.Provider>
+        </GameContext.Provider >
     )
 }
 

src/components/ModeSelector.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+function modeSelector(props) {
+  return (
+    <div>
+      <button onClick={props.toggleMode} className= {"mode-button button-mode-"+props.mode}>{props.mode}</button>
+    </div>
+  )
+}
+
+export default modeSelector

src/index.css

@@ -1,3 +1,30 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+@font-face {
+    font-family: Robot-font;
+    src: url(../Assets/RobotoMono-VariableFont_wght.ttf);
+  }
+
+.mode-button{
+    position: relative;
+    width: 10%;
+    height: 2%;
+    top: 10px;
+    font-family: Robot-font;
+    padding: 5px;
+    font-size: x-large;
+    border-radius: 20px;
+    color: white;
+    font-weight: 900;
+    transition: 500ms linear;
+}
+
+.button-mode-Easy{
+    background-color: rgb(0, 255, 0);
+}
+
+.button-mode-Normal{
+    background-color: #fbbf24;
+}