Refactor ScoreLabel to StatusLabel

Author: Minimuino

src/assets/locales/en/translation.json

@@ -20,7 +20,7 @@
     "hit": "Correct guess!",
     "miss": "{{distance}} km from the actual location"
   },
-  "scorelabel": {
+  "statuslabel": {
     "totalDistance": "{{distance}} km of accumulated error"
   },
   "gameovermodal": {

src/assets/locales/gl/translation.json

@@ -20,7 +20,7 @@
     "hit": "Localización correcta!",
     "miss": "A {{distance}} km da localización correcta"
   },
-  "scorelabel": {
+  "statuslabel": {
     "totalDistance": "{{distance}} km de erro acumulado"
   },
   "gameovermodal": {

src/components/GuessLocationQuiz.tsx

@@ -11,14 +11,14 @@ import { LngLat, type MapLayerMouseEvent } from "maplibre-gl";
 import { useMemo, useRef, useState } from "react";
 import { useTranslation } from 'react-i18next';
 import Map, { Layer, Marker, Source, type MapRef, type StyleSpecification } from "react-map-gl/maplibre";
-import DistanceLabel from "../components/DistanceLabel";
-import GameOverModal from "../components/GameOverModal";
-import QuestionLabel from "../components/QuestionLabel";
-import ScoreLabel from "../components/ScoreLabel";
 import { Mode } from "../enums";
 import { shuffle } from "../utils/ArrayUtils";
 import { clampLat, clampLng, getDistanceToCurrentFeature } from "../utils/MapUtils";
+import DistanceLabel from "./DistanceLabel";
+import GameOverModal from "./GameOverModal";
 import { hoverLineLayerStyle, hoverPointLayerStyle, hoverPolygonLayerStyle, outlinePolygonLayerStyle } from "./mapstyle";
+import QuestionLabel from "./QuestionLabel";
+import StatusLabel from "./StatusLabel";
 import styles from "./styles.module.css";
 
 import mapstylejson from "../assets/main-map-style.json";
@@ -134,16 +134,20 @@ export default function GuessLocationQuiz({ data, datasetName, onResetGame }: Pr
           </>
         )}
       </Map>
-      <div className="absolute bottom-[90%] sm:bottom-[15%] left-50 sm:left-[10%]">
+      <div className="absolute bottom-[85%] sm:bottom-[15%] left-50 sm:left-[10%]">
         <QuestionLabel
           textToDisplay={features[features.length - 1]?.properties?.name as string}
           disabled={userGuess != null}
         />
+        <StatusLabel
+          current={data.features.length - features.length + 1}
+          total={data.features.length}
+        />
       </div>
       {userGuess && (
         <div className="absolute bottom-[6%] sm:bottom-[10%] flex flex-col items-center gap-2 text-2xl pointer-events-none">
           <DistanceLabel distance={currentDistanceKm} />
-          <ScoreLabel
+          <StatusLabel
             distance={totalDistanceKm + currentDistanceKm}
           />
           <button className={styles.quizbutton}

src/components/StandardQuiz.tsx

@@ -15,7 +15,7 @@ import GameOverModal from "./GameOverModal";
 import MapView from "./MapView";
 import QuestionHistory, { type QuestionHistoryEntry } from "./QuestionHistory";
 import QuestionLabel from "./QuestionLabel";
-import ScoreLabel from "./ScoreLabel";
+import StatusLabel from "./StatusLabel";
 import TextInput from "./TextInput";
 
 interface Props {
@@ -89,8 +89,8 @@ export default function StandardQuiz({ data, mode, datasetName, onResetGame }: P
           <QuestionLabel
             textToDisplay={data.features.find(feature => feature.id === featureIds[featureIds.length - 1])?.properties?.name as string}
           />
-          <ScoreLabel
-            score={rightGuessFeatureIds.length}
+          <StatusLabel
+            current={data.features.length - featureIds.length + 1}
             total={data.features.length}
           />
         </div>

src/components/ScoreLabel.tsx renamed to src/components/StatusLabel.tsx

@@ -8,27 +8,27 @@
 import { useTranslation } from 'react-i18next';
 
 interface Props {
-  score?: number;
+  current?: number;
   total?: number;
   distance?: number;
 };
 
-export default function ScoreLabel({ score, total, distance }: Props) {
+export default function StatusLabel({ current, total, distance }: Props) {
   const { t } = useTranslation();
   return (
     <div>
       {distance != null && (
         <label
           className="flex items-center justify-center text-base sm:text-lg h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44 font-[family-name:var(--font-geist-mono)]"
         >
-          {t("scorelabel.totalDistance", { distance: distance.toFixed(2) })}
+          {t("statuslabel.totalDistance", { distance: distance.toFixed(2) })}
         </label>
       )}
-      {score != null && total && (
+      {current != null && total && (
         <label
           className="flex items-center justify-center text-base sm:text-lg h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44 font-[family-name:var(--font-geist-mono)]"
         >
-          {String(score) + "/" + String(total)}
+          {String(current) + "/" + String(total)}
         </label>
       )}
     </div>