Add singleplayer timer feature

Author: codergautam

.claude/settings.local.json

@@ -15,7 +15,8 @@
       "Bash(done)",
       "Bash(find:*)",
       "Bash(cat:*)",
-      "mcp__ide__getDiagnostics"
+      "mcp__ide__getDiagnostics",
+      "Bash(npx next build:*)"
     ],
     "deny": [
       "Bash(git push:*)"

components/gameUI.js

@@ -26,7 +26,7 @@ const MapWidget = dynamic(() => import("../components/Map"), { ssr: false });
 // import RoundOverScreen from "./roundOverScreen";
 const RoundOverScreen = dynamic(() => import("./roundOverScreen"), { ssr: false });
 
-export default function GameUI({ inCoolMathGames, inGameDistribution, miniMapShown, setMiniMapShown, singlePlayerRound, setSinglePlayerRound, showDiscordModal, setShowDiscordModal, inCrazyGames, showPanoOnResult, setShowPanoOnResult, countryGuesserCorrect, setCountryGuesserCorrect, otherOptions, onboarding, setOnboarding, countryGuesser, options, timeOffset, ws, multiplayerState, backBtnPressed, setMultiplayerState, countryStreak, setCountryStreak, loading, setLoading, session, gameOptionsModalShown, setGameOptionsModalShown, latLong, loadLocation, gameOptions, setGameOptions, showAnswer, setShowAnswer, pinPoint, setPinPoint, hintShown, setHintShown, showCountryButtons, setShowCountryButtons }) {
+export default function GameUI({ inCoolMathGames, inGameDistribution, miniMapShown, setMiniMapShown, singlePlayerRound, setSinglePlayerRound, showDiscordModal, setShowDiscordModal, inCrazyGames, showPanoOnResult, setShowPanoOnResult, countryGuesserCorrect, setCountryGuesserCorrect, otherOptions, onboarding, setOnboarding, countryGuesser, options, timeOffset, ws, multiplayerState, backBtnPressed, setMultiplayerState, countryStreak, setCountryStreak, loading, setLoading, session, gameOptionsModalShown, setGameOptionsModalShown, mapModal, latLong, loadLocation, gameOptions, setGameOptions, showAnswer, setShowAnswer, pinPoint, setPinPoint, hintShown, setHintShown, showCountryButtons, setShowCountryButtons }) {
   const { t: text } = useTranslation("common");
   const [showStreakAdBanner, setShowStreakAdBanner] = useState(false);
 
@@ -194,6 +194,7 @@ export default function GameUI({ inCoolMathGames, inGameDistribution, miniMapSho
   const [lostCountryStreak, setLostCountryStreak] = useState(0);
   const [timeToNextMultiplayerEvt, setTimeToNextMultiplayerEvt] = useState(0);
   const [timeToNextRound, setTimeToNextRound] = useState(0); //only for onboarding
+  const [singlePlayerTimeLeft, setSinglePlayerTimeLeft] = useState(0);
   const [mapPinned, setMapPinned] = useState(false);
   // dist between guess & target
   const [km, setKm] = useState(null);
@@ -276,6 +277,78 @@ export default function GameUI({ inCoolMathGames, inGameDistribution, miniMapSho
     }
   }, [onboarding?.nextRoundTime])
 
+  // Singleplayer countdown timer
+  const singlePlayerTimerRef = useRef(null);
+  const pinPointRef = useRef(pinPoint);
+  pinPointRef.current = pinPoint;
+  const modalWasOpenRef = useRef(false);
+  const wasLoadingRef = useRef(loading);
+
+  useEffect(() => {
+    if (singlePlayerTimerRef.current) {
+      clearInterval(singlePlayerTimerRef.current);
+      singlePlayerTimerRef.current = null;
+    }
+
+    const modalOpen = gameOptionsModalShown || mapModal;
+
+    if (!singlePlayerRound || singlePlayerRound.done || !gameOptions.timePerRound || showAnswer || loading || !roundStartTime || modalOpen) {
+      setSinglePlayerTimeLeft(0);
+      if (modalOpen) modalWasOpenRef.current = true;
+      if (loading) wasLoadingRef.current = true;
+      return;
+    }
+
+    // Reset timer when returning from a modal or when loading just finished
+    if (modalWasOpenRef.current || wasLoadingRef.current) {
+      modalWasOpenRef.current = false;
+      wasLoadingRef.current = false;
+      setRoundStartTime(Date.now());
+      return;
+    }
+
+    const deadline = roundStartTime + gameOptions.timePerRound * 1000;
+    singlePlayerTimerRef.current = setInterval(() => {
+      const remaining = Math.max(0, Math.floor((deadline - Date.now()) / 100) / 10);
+      setSinglePlayerTimeLeft(remaining);
+
+      if (remaining <= 0) {
+        clearInterval(singlePlayerTimerRef.current);
+        singlePlayerTimerRef.current = null;
+        if (pinPointRef.current) {
+          // Player placed a pin — submit their guess normally
+          document.querySelector('.guessBtn')?.click();
+        } else {
+          // No pin placed — score 0 points and show answer
+          setShowAnswer(true);
+          setCountryStreak(0);
+          setSinglePlayerRound((prev) => {
+            if (!prev) return prev;
+            return {
+              ...prev,
+              locations: [...prev.locations, {
+                lat: latLong.lat, long: latLong.long,
+                panoId: latLong.panoId || null,
+                guessLat: null, guessLong: null,
+                points: 0,
+                timeTaken: gameOptions.timePerRound,
+                xpEarned: 0
+              }],
+              lastPoint: 0
+            };
+          });
+        }
+      }
+    }, 100);
+
+    return () => {
+      if (singlePlayerTimerRef.current) {
+        clearInterval(singlePlayerTimerRef.current);
+        singlePlayerTimerRef.current = null;
+      }
+    };
+  }, [roundStartTime, singlePlayerRound?.done, gameOptions.timePerRound, showAnswer, loading, gameOptionsModalShown, mapModal])
+
   useEffect(() => {
     if(multiplayerState?.inGame) return;
     if (!latLong) {
@@ -766,34 +839,38 @@ session={session}/>
         }
         }} />
       )}
-      <span className={`timer ${multiplayerState?.gameData?.duel && multiplayerState?.gameData?.public ? 'duel' : ''} ${!multiplayerTimerShown ? '' : 'shown'} ${timeToNextMultiplayerEvt <= 5 && timeToNextMultiplayerEvt > 0 && !showAnswer && !pinPoint && multiplayerState?.gameData?.state === 'guess' ? 'critical' : ''}`}>
-
-{/* Round #{multiplayerState?.gameData?.curRound} / {multiplayerState?.gameData?.rounds} - {timeToNextMultiplayerEvt}s */}
-      {
-multiplayerState?.gameData?.timePerRound === 86400000 &&
-timeToNextMultiplayerEvt > 120
-?
-text("round", {r:multiplayerState?.gameData?.curRound, mr: multiplayerState?.gameData?.rounds})
-
-:
-
-      text("roundTimer", {r:multiplayerState?.gameData?.curRound, mr: multiplayerState?.gameData?.rounds, t: timeToNextMultiplayerEvt.toFixed(1)})}
+      <span className={`timer timer--two-line ${multiplayerState?.gameData?.duel && multiplayerState?.gameData?.public ? 'duel' : ''} ${!multiplayerTimerShown ? '' : 'shown'} ${timeToNextMultiplayerEvt <= 5 && timeToNextMultiplayerEvt > 0 && !showAnswer && !pinPoint && multiplayerState?.gameData?.state === 'guess' ? 'critical' : ''}`}>
+        <span className="timer__round-label">{text("round", {r:multiplayerState?.gameData?.curRound, mr: multiplayerState?.gameData?.rounds})}</span>
+        <span className="timer__main-row">
+          {!(multiplayerState?.gameData?.timePerRound === 86400000 && timeToNextMultiplayerEvt > 120)
+            ? <><span className="timer__countdown">{timeToNextMultiplayerEvt.toFixed(1)}s</span></>
+            : null
+          }
         </span>
-
-        <span className={`timer ${!onboardingTimerShown ? '' : 'shown'} ${timeToNextRound <= 5 && timeToNextRound > 0 && !showAnswer && !pinPoint && onboarding ? 'critical' : ''}`}>
-
-{/* Round #{multiplayerState?.gameData?.curRound} / {multiplayerState?.gameData?.rounds} - {timeToNextMultiplayerEvt}s */}
-      {timeToNextRound ?
-      text("roundTimer", {r:onboarding?.round, mr: 5, t: timeToNextRound.toFixed(1)})
-      : text("round", {r:onboarding?.round, mr: 5})} - <AnimatedCounter value={onboarding?.points || 0} showIncrement={false} /> {text("points")}
-
+      </span>
+
+      <span className={`timer timer--two-line ${!onboardingTimerShown ? '' : 'shown'} ${timeToNextRound <= 5 && timeToNextRound > 0 && !showAnswer && !pinPoint && onboarding ? 'critical' : ''}`}>
+        <span className="timer__round-label">{text("round", {r:onboarding?.round, mr: 5})}</span>
+        <span className="timer__main-row">
+          {timeToNextRound
+            ? <><span className="timer__countdown">{timeToNextRound.toFixed(1)}s</span> &middot; </>
+            : null
+          }
+          <AnimatedCounter value={onboarding?.points || 0} showIncrement={false} /> {text("points")}
         </span>
+      </span>
 
         {
           singlePlayerRound && !singlePlayerRound?.done && (
-            <span className="timer shown">
-              {text("round", {r: singlePlayerRound.round, mr: singlePlayerRound.totalRounds})} - <AnimatedCounter value={singlePlayerRound.locations.reduce((acc, cur) => acc + cur.points, 0)} showIncrement={false} /> {text("points")}
-
+            <span className={`timer timer--two-line shown ${singlePlayerTimeLeft <= 5 && singlePlayerTimeLeft > 0 && gameOptions.timePerRound > 0 && !showAnswer && !pinPoint ? 'critical' : ''}`}>
+              <span className="timer__round-label">{text("round", {r: singlePlayerRound.round, mr: singlePlayerRound.totalRounds})}</span>
+              <span className="timer__main-row">
+                {gameOptions.timePerRound > 0 && !showAnswer && singlePlayerTimeLeft > 0
+                  ? <><span className="timer__countdown">{singlePlayerTimeLeft.toFixed(1)}s</span> &middot; </>
+                  : null
+                }
+                <AnimatedCounter value={singlePlayerRound.locations.reduce((acc, cur) => acc + cur.points, 0)} showIncrement={false} /> {text("points")}
+              </span>
             </span>
           )
         }

components/home.js

@@ -97,7 +97,7 @@ export default function Home({ }) {
     const [latLongKey, setLatLongKey] = useState(0) // Increment to force refresh even with same coords
     const [gameOptionsModalShown, setGameOptionsModalShown] = useState(false);
     // location aka map slug
-    const [gameOptions, setGameOptions] = useState({ location: "all", maxDist: 20000, official: true, countryMap: false, communityMapName: "", extent: null, showRoadName: true }) // rate limit fix: showRoadName true
+    const [gameOptions, setGameOptions] = useState({ location: "all", maxDist: 20000, official: true, countryMap: false, communityMapName: "", extent: null, showRoadName: true, timePerRound: 0 }) // rate limit fix: showRoadName true
     const [showAnswer, setShowAnswer] = useState(false)
 
     const [pinPoint, setPinPoint] = useState(null)
@@ -2938,6 +2938,7 @@ export default function Home({ }) {
                     } : null}
                     showAllCountriesOption={(gameOptionsModalShown && screen === "singleplayer")}
                     showOptions={screen === "singleplayer"}
+                    showTimerOption={screen === "singleplayer"}
                     gameOptions={gameOptions} setGameOptions={setGameOptions} />}
 
                 {settingsModal && <SettingsModal inCrazyGames={inCrazyGames} options={options} setOptions={setOptions} shown={true} onClose={() => setSettingsModal(false)} />}
@@ -2963,7 +2964,7 @@ export default function Home({ }) {
                         inCoolMathGames={inCoolMathGames}
                         inGameDistribution={inGameDistribution}
                         miniMapShown={miniMapShown} setMiniMapShown={setMiniMapShown}
-                        singlePlayerRound={singlePlayerRound} setSinglePlayerRound={setSinglePlayerRound} showDiscordModal={showDiscordModal} setShowDiscordModal={setShowDiscordModal} inCrazyGames={inCrazyGames} showPanoOnResult={showPanoOnResult} setShowPanoOnResult={setShowPanoOnResult} options={options} countryStreak={countryStreak} setCountryStreak={setCountryStreak} hintShown={hintShown} setHintShown={setHintShown} pinPoint={pinPoint} setPinPoint={setPinPoint} showAnswer={showAnswer} setShowAnswer={setShowAnswer} loading={loading} setLoading={setLoading} session={session} gameOptionsModalShown={gameOptionsModalShown} setGameOptionsModalShown={setGameOptionsModalShown} latLong={latLong} loadLocation={loadLocation} gameOptions={gameOptions} setGameOptions={setGameOptions} />
+                        singlePlayerRound={singlePlayerRound} setSinglePlayerRound={setSinglePlayerRound} showDiscordModal={showDiscordModal} setShowDiscordModal={setShowDiscordModal} inCrazyGames={inCrazyGames} showPanoOnResult={showPanoOnResult} setShowPanoOnResult={setShowPanoOnResult} options={options} countryStreak={countryStreak} setCountryStreak={setCountryStreak} hintShown={hintShown} setHintShown={setHintShown} pinPoint={pinPoint} setPinPoint={setPinPoint} showAnswer={showAnswer} setShowAnswer={setShowAnswer} loading={loading} setLoading={setLoading} session={session} gameOptionsModalShown={gameOptionsModalShown} setGameOptionsModalShown={setGameOptionsModalShown} mapModal={mapModal} latLong={latLong} loadLocation={loadLocation} gameOptions={gameOptions} setGameOptions={setGameOptions} />
                 </div>}
 
                 {screen === "onboarding" && (onboarding?.round || onboarding?.completed) && <div className="home__onboarding">

components/maps/mapView.js

@@ -13,6 +13,7 @@ export default function MapView({
     mapModalClosing,
     setGameOptions,
     showOptions,
+    showTimerOption,
     close,
     session,
     text,
@@ -413,6 +414,30 @@ export default function MapView({
         }} />
     </div>
 
+    {showTimerOption && (
+    <div className="map-option-timer">
+        <label htmlFor="enableTimer">{text('enableTimer')}&nbsp;</label>
+        <input id="enableTimer"
+        name="enableTimer"
+        type="checkbox" checked={gameOptions.timePerRound > 0} onChange={(e) => {
+            setGameOptions({ ...gameOptions, timePerRound: e.target.checked ? 30 : 0 })
+        }} />
+        {gameOptions.timePerRound > 0 && (
+            <div className="timer-slider">
+                <input
+                    type="range"
+                    min="10"
+                    max="300"
+                    step="10"
+                    value={gameOptions.timePerRound}
+                    onChange={(e) => setGameOptions({ ...gameOptions, timePerRound: parseInt(e.target.value) })}
+                />
+                <span className="timer-slider-value">{gameOptions.timePerRound}s</span>
+            </div>
+        )}
+    </div>
+    )}
+
                 </div>
             )}
 

components/maps/mapsModal.js

@@ -16,7 +16,7 @@ const initMakeMap = {
     edit: false,
     mapId: "",
 };
-export default function MapsModal({ gameOptions, mapModalClosing, setGameOptions, shown, onClose, session, text, customChooseMapCallback, chosenMap, showAllCountriesOption, showOptions }) {
+export default function MapsModal({ gameOptions, mapModalClosing, setGameOptions, shown, onClose, session, text, customChooseMapCallback, chosenMap, showAllCountriesOption, showOptions, showTimerOption }) {
     const [makeMap, setMakeMap] = useState(initMakeMap);
     const [searchTerm, setSearchTerm] = useState("");
     const [searchResults, setSearchResults] = useState([]);
@@ -96,6 +96,7 @@ export default function MapsModal({ gameOptions, mapModalClosing, setGameOptions
                     <MapView
                     mapModalClosing={mapModalClosing}
                         showOptions={showOptions}
+                        showTimerOption={showTimerOption}
                         showAllCountriesOption={showAllCountriesOption}
                         chosenMap={chosenMap}
                         close={onClose}

public/locales/en/common.json

@@ -94,6 +94,7 @@
   "nm": "No moving",
   "npz": "No panning or zooming",
   "nmpz": "No moving, panning or zooming",
+  "enableTimer": "Timer",
   "showRoadName": "Show Road Labels",
   "settings": "Settings",
   "units": "Units",

styles/globals.scss

@@ -1184,6 +1184,7 @@ h1, h2, h3, span, label {
     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
     margin-right: 10px;
     letter-spacing: 0.025em;
+    font-variant-numeric: tabular-nums;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
@@ -1194,6 +1195,30 @@ h1, h2, h3, span, label {
     z-index: 1001;
 }
 
+.timer--two-line {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    gap: 2px;
+    padding: 8px 20px 12px;
+}
+
+.timer__round-label {
+    font-size: 0.7em;
+    opacity: 0.75;
+    letter-spacing: 0.05em;
+}
+
+.timer__main-row {
+    font-size: 1.1em;
+}
+
+.timer__countdown {
+    display: inline-block;
+    text-align: center;
+}
+
 .timer.duel {
     right: 50%;
     transform: translateX(50%);

styles/mapModal.css

@@ -185,6 +185,7 @@
 /* Game Options */
 .map-options {
   display: flex;
+  flex-wrap: wrap;
   justify-content: center;
   gap: 24px;
   margin-bottom: 32px;
@@ -211,6 +212,41 @@
   accent-color: var(--map-primary);
 }
 
+.map-option-timer {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: white;
+  font-size: 1rem;
+  flex-basis: 100%;
+  justify-content: center;
+}
+
+.map-option-timer input[type="checkbox"] {
+  width: 18px;
+  height: 18px;
+  accent-color: var(--map-primary);
+}
+
+.timer-slider {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.timer-slider input[type="range"] {
+  width: 120px;
+  accent-color: var(--map-primary);
+  cursor: pointer;
+}
+
+.timer-slider-value {
+  min-width: 40px;
+  text-align: center;
+  font-weight: 600;
+  color: white;
+}
+
 /* All Countries Option */
 .all-countries-tile {
   display: flex;