diff --git a/src/app/components/HomeClient.tsx b/src/app/components/HomeClient.tsx
index cb0f60f..bf3dcb5 100644
--- a/src/app/components/HomeClient.tsx
+++ b/src/app/components/HomeClient.tsx
@@ -17,7 +17,7 @@ import LanguageMenu from "./LanguageMenu";
import LogoutButton from "./LogoutButton";
import RestartButton from "./RestartButton";
import Score from "./Score";
-import Timer from "./Timer";
+import Timer, { formatTime } from "./Timer";
export default function HomeClient({ session }: { session: Session }) {
const [input, setInput] = useState("");
@@ -51,6 +51,7 @@ export default function HomeClient({ session }: { session: Session }) {
}, []);
const correctMatchesCount = useMemo(() => matches.filter((m) => m.correct).length, [matches]);
+ const goalReached = correctMatchesCount >= goalAmount;
const elapsedSeconds = () => Math.floor((Date.now() - startedAtRef.current) / 1000);
@@ -181,10 +182,15 @@ export default function HomeClient({ session }: { session: Session }) {
setErrorMessage("");
}}
onSubmit={handleSubmit}
- disabled={correctMatchesCount === goalAmount}
+ disabled={goalReached}
loading={loading}
/>
+ {goalReached && (
+
+ {t.goalReached.replace("{count}", String(goalAmount)).replace("{time}", formatTime(timer))}
+
+ )}
{errorMessage && {errorMessage}
}
{matches.length > 0 && (
<>
diff --git a/src/app/components/Timer.tsx b/src/app/components/Timer.tsx
index a3b0161..60064b8 100644
--- a/src/app/components/Timer.tsx
+++ b/src/app/components/Timer.tsx
@@ -5,27 +5,25 @@ interface TimerProps {
timer: number;
}
-const Timer: React.FC = ({ timer }) => {
- const formatTime = (seconds: number): string => {
- const hours = Math.floor(seconds / 3600);
- const minutes = Math.floor((seconds % 3600) / 60);
- const remainingSeconds = seconds % 60;
+const padZero = (num: number): string => String(num).padStart(2, "0");
- const padZero = (num: number): string => String(num).padStart(2, "0");
+export const formatTime = (seconds: number): string => {
+ const hours = Math.floor(seconds / 3600);
+ const minutes = Math.floor((seconds % 3600) / 60);
+ const remainingSeconds = seconds % 60;
- if (hours > 0) {
- return `${padZero(hours)}:${padZero(minutes)}:${padZero(remainingSeconds)}`;
- }
+ if (hours > 0) {
+ return `${padZero(hours)}:${padZero(minutes)}:${padZero(remainingSeconds)}`;
+ }
- return `${padZero(minutes)}:${padZero(remainingSeconds)}`;
- };
-
- return (
-
-
- {formatTime(timer)}
-
- );
+ return `${padZero(minutes)}:${padZero(remainingSeconds)}`;
};
+const Timer: React.FC = ({ timer }) => (
+
+
+ {formatTime(timer)}
+
+);
+
export default Timer;
diff --git a/src/app/translations.ts b/src/app/translations.ts
index 427f29c..58e8e63 100644
--- a/src/app/translations.ts
+++ b/src/app/translations.ts
@@ -22,6 +22,7 @@ export const translations = {
tryAgain: "Try logging in again",
notPayingMember: "not a paying member",
goalSelectorLabel: "Number of gamers to name:",
+ goalReached: "You named {count} UiO Gamers in {time}!",
guessFailed: "Something went wrong. Please try again.",
sessionExpired: "Your session has expired. Reload the page to log in again.",
},
@@ -47,6 +48,7 @@ export const translations = {
tryAgain: "Logg på igjen",
notPayingMember: "ikke betalende medlem",
goalSelectorLabel: "Velg antall som må navngis:",
+ goalReached: "Du navnga {count} UiO-Gamere på {time}!",
guessFailed: "Noe gikk galt. Prøv igjen.",
sessionExpired: "Økten din har utløpt. Last inn siden på nytt for å logge inn igjen.",
},