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.", },