- {contentType === 'image' && contentPosition !== 'background'
- ? imageBlock(illustrationImage)
- : null}
- {contentType === 'video' && contentPosition !== 'background'
- ? videoBlock(illustrationVideo)
- : null}
-
-
-
-
This is a React.js/Node.js app generated by the Flatlogic Web App Generator
-
For guides and documentation please check
- your local README.md and the Flatlogic documentation
+
+
+
+
+
osu! higher lower
+
Minimal, fast, anti-cheat by default.
-
+
+
-
-
+
+
+
+ 2 lives • hidden mixed mode • osu! assets only
+
+
+ A competitive browser game built around osu! beatmap popularity.
+
+
+ Each round shows two beatmap cards. The backend picks the metric,
+ keeps every number hidden until you answer, and resolves the guess
+ instantly so the pace never drops.
+
+
+
+
+
+
+ {rules.map((rule) => (
+
+ {rule}
+
+ ))}
+
+
+
+
+ {heroCovers.map((cover, index) => (
+
+
+
+ {index === 0 ? 'live round' : 'osu! cover'}
+
+
+
+
+ {index === 0 ? 'Hidden metric' : 'Minimal card surface'}
+
+
+ {index === 0 ? 'Mode stays server-side until you commit.' : 'Beatmap art does the heavy lifting.'}
+
+
+
+
+
+
+ ))}
+
+
+
+
+
+
How it plays
+
A thin, honest game loop.
+
+ Start a run, survive as many hidden comparisons as you can, review
+ the reveal, then jump straight into the next round. The admin UI is
+ still available for inspecting beatmaps, mappers, artists, sessions,
+ and logs without rebuilding any generic CRUD.
+
+
+ {modes.map((mode) => (
+
+
+ {mode.name}
+
+
{mode.description}
+
+ ))}
+
+
+
+ Built for instant rounds, clean visuals, and server-side fairness.
+
+
+
-
© 2026 {title} . All rights reserved
-
- Privacy Policy
-
-
+
+
);
}
-Starter.getLayout = function getLayout(page: ReactElement) {
+HomePage.getLayout = function getLayout(page: ReactElement) {
return
{page} ;
};
-
diff --git a/frontend/src/pages/play/[gameSessionId].tsx b/frontend/src/pages/play/[gameSessionId].tsx
new file mode 100644
index 0000000..ce3edaa
--- /dev/null
+++ b/frontend/src/pages/play/[gameSessionId].tsx
@@ -0,0 +1,388 @@
+import axios from 'axios';
+import Head from 'next/head';
+import { useRouter } from 'next/router';
+import React, { ReactElement, useCallback, useEffect, useMemo, useState } from 'react';
+
+import BaseButton from '../../components/BaseButton';
+import LoadingSpinner from '../../components/LoadingSpinner';
+import SectionMain from '../../components/SectionMain';
+import { getPageTitle } from '../../config';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+
+type ModeSetting = 'beatmap' | 'mapper' | 'artist' | 'mixed';
+type TimerProfile = 'normal' | 'insane';
+type RoundResult = 'pending' | 'correct' | 'wrong' | 'timeout';
+
+type SessionSummary = {
+ id: string;
+ sessionKey: string;
+ status: string;
+ modeSetting: ModeSetting;
+ timerProfile: TimerProfile;
+ startingLives: number;
+ livesRemaining: number;
+ currentStreak: number;
+ bestStreak: number;
+ startedAt: string;
+ endedAt: string | null;
+ totalRounds: number;
+ correctAnswers: number;
+ wrongAnswers: number;
+ timeoutCount: number;
+ suspiciousRounds: number;
+};
+
+type RoundCard = {
+ id: string;
+ beatmapId: number;
+ title: string;
+ version: string;
+ artistName: string;
+ mapperName: string;
+ mapperAvatarUrl: string;
+ backgroundImageUrl: string;
+ status: string;
+};
+
+type RoundDetail = {
+ id: string;
+ roundIndex: number;
+ result: RoundResult;
+ playerChoice: 'a' | 'b' | 'none';
+ correctChoice: 'a' | 'b';
+ resolvedMode: 'beatmap' | 'mapper' | 'artist';
+ comparedLabel: string;
+ timeLimitSeconds: number;
+ presentedAt: string;
+ answeredAt: string | null;
+ isSuspectedCheat: boolean;
+ suspicionReason: string | null;
+ cards: {
+ a: RoundCard;
+ b: RoundCard;
+ };
+ values: {
+ a: number;
+ b: number;
+ };
+};
+
+type SessionDetailPayload = {
+ session: SessionSummary;
+ rounds: RoundDetail[];
+};
+
+const dateFormatter = new Intl.DateTimeFormat('en-US', {
+ month: 'short',
+ day: 'numeric',
+ hour: 'numeric',
+ minute: '2-digit',
+});
+
+const numberFormatter = new Intl.NumberFormat('en-US');
+
+function formatModeLabel(value: ModeSetting) {
+ return value.charAt(0).toUpperCase() + value.slice(1);
+}
+
+function formatTimerLabel(value: TimerProfile) {
+ return value === 'insane' ? 'Insane · 6s' : 'Normal · 8s';
+}
+
+function extractErrorMessage(error: unknown) {
+ if (axios.isAxiosError(error)) {
+ if (typeof error.response?.data === 'string') {
+ return error.response.data;
+ }
+ }
+
+ if (error instanceof Error) {
+ return error.message;
+ }
+
+ return 'Unable to load the session details.';
+}
+
+function getResultBadge(result: RoundResult) {
+ if (result === 'correct') {
+ return 'border-emerald-200 bg-emerald-50 text-emerald-900 dark:border-emerald-900/50 dark:bg-emerald-950/30 dark:text-emerald-200';
+ }
+
+ if (result === 'timeout') {
+ return 'border-amber-200 bg-amber-50 text-amber-900 dark:border-amber-900/50 dark:bg-amber-950/30 dark:text-amber-200';
+ }
+
+ if (result === 'wrong') {
+ return 'border-rose-200 bg-rose-50 text-rose-900 dark:border-rose-900/50 dark:bg-rose-950/30 dark:text-rose-200';
+ }
+
+ return 'border-slate-200 bg-slate-50 text-slate-800 dark:border-dark-700 dark:bg-dark-800 dark:text-slate-200';
+}
+
+export default function SessionDetailPage() {
+ const router = useRouter();
+ const sessionId = useMemo(() => {
+ if (typeof router.query.gameSessionId === 'string') {
+ return router.query.gameSessionId;
+ }
+
+ return '';
+ }, [router.query.gameSessionId]);
+ const [payload, setPayload] = useState
(null);
+ const [isLoading, setIsLoading] = useState(true);
+ const [errorMessage, setErrorMessage] = useState('');
+
+ const fetchSessionDetails = useCallback(async () => {
+ if (!sessionId) {
+ return;
+ }
+
+ setIsLoading(true);
+
+ try {
+ const { data } = await axios.get(`/gameplay/sessions/${sessionId}`);
+
+ setPayload(data);
+ setErrorMessage('');
+ } catch (error: unknown) {
+ console.error('Failed to load Osu Higher Lower session details:', error);
+ setErrorMessage(extractErrorMessage(error));
+ } finally {
+ setIsLoading(false);
+ }
+ }, [sessionId]);
+
+ useEffect(() => {
+ void fetchSessionDetails();
+ }, [fetchSessionDetails]);
+
+ return (
+ <>
+
+ {getPageTitle('Session details')}
+
+
+
+
+
+
+
Round review
+
+ Session details
+
+
+ Inspect every reveal from the run: the resolved metric, the hidden values,
+ your guess, and any suspicious-late answers flagged by the backend.
+
+
+
+
+
+
+ {errorMessage ? (
+
+ {errorMessage}
+
+ ) : null}
+
+ {isLoading ? (
+
+
+ ) : payload ? (
+ <>
+
+
+
Mode
+
+ {formatModeLabel(payload.session.modeSetting)}
+
+
+ {formatTimerLabel(payload.session.timerProfile)}
+
+
+
Score
+
+ {payload.session.correctAnswers}
+
+
+ correct rounds
+
+
+
Best streak
+
+ {payload.session.bestStreak}
+
+
+ highest uninterrupted run
+
+
+
Rounds
+
+ {payload.session.totalRounds}
+
+
+ finished comparisons
+
+
+
Started
+
+ {dateFormatter.format(new Date(payload.session.startedAt))}
+
+
+ {payload.session.endedAt
+ ? `ended ${dateFormatter.format(new Date(payload.session.endedAt))}`
+ : 'still in progress'}
+
+
+
+
+
+
+
Round log
+
+ {payload.rounds.length} revealed rounds
+
+
+ {payload.session.suspiciousRounds ? (
+
+ {payload.session.suspiciousRounds} suspicious answer
+ {payload.session.suspiciousRounds === 1 ? '' : 's'}
+
+ ) : null}
+
+ {payload.rounds.map((round) => (
+
+
+
+
+ Round {round.roundIndex}
+
+
+ {round.comparedLabel}
+
+
+ Presented {dateFormatter.format(new Date(round.presentedAt))}
+ {round.answeredAt
+ ? ` · answered ${dateFormatter.format(new Date(round.answeredAt))}`
+ : ''}
+
+
+
+
+ {round.result}
+
+
+ picked {round.playerChoice.toUpperCase()}
+
+
+ correct {round.correctChoice.toUpperCase()}
+
+
+
+ {(['a', 'b'] as const).map((choice) => {
+ const card = round.cards[choice];
+ const value = round.values[choice];
+ const isWinner = round.correctChoice === choice;
+
+ return (
+
+
+
+
+
+ {choice}
+
+
+ {isWinner ? 'higher value' : card.status}
+
+
+
+
Artist
+
{card.artistName}
+
{card.title}
+
{card.version}
+
+
+
+
+
+
Mapper
+
{card.mapperName}
+
+
+
+
+ {round.comparedLabel}
+
+
+ {numberFormatter.format(value)}
+
+
+
+
+
+
+ );
+ })}
+
+ {round.suspicionReason}
+
+ ) : null}
+
+ ))}
+
+
+ ) : (
+
+ No session detail available yet.
+
+ )}
+
+
+ );
+}
+
+SessionDetailPage.getLayout = function getLayout(page: ReactElement) {
+ return {page} ;
+};
diff --git a/frontend/src/pages/play/index.tsx b/frontend/src/pages/play/index.tsx
new file mode 100644
index 0000000..2b383e9
--- /dev/null
+++ b/frontend/src/pages/play/index.tsx
@@ -0,0 +1,1014 @@
+import axios from 'axios';
+import Head from 'next/head';
+import Link from 'next/link';
+import React, {
+ ReactElement,
+ useCallback,
+ useEffect,
+ useMemo,
+ useRef,
+ useState,
+} from 'react';
+
+import BaseButton from '../../components/BaseButton';
+import LoadingSpinner from '../../components/LoadingSpinner';
+import SectionMain from '../../components/SectionMain';
+import { getPageTitle } from '../../config';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import { useAppSelector } from '../../stores/hooks';
+
+type ModeSetting = 'beatmap' | 'mapper' | 'artist' | 'mixed';
+type TimerProfile = 'normal' | 'insane';
+type PlayerChoice = 'a' | 'b' | 'none';
+type RoundResult = 'correct' | 'wrong' | 'timeout';
+
+type BeatmapCard = {
+ id: string;
+ beatmapId: number;
+ title: string;
+ version: string;
+ artistName: string;
+ mapperName: string;
+ mapperAvatarUrl: string;
+ backgroundImageUrl: string;
+ status: string;
+};
+
+type ActiveGamePayload = {
+ session: {
+ id: string;
+ sessionKey: string;
+ status: string;
+ modeSetting: ModeSetting;
+ timerProfile: TimerProfile;
+ livesRemaining: number;
+ startingLives: number;
+ currentStreak: number;
+ bestStreak: number;
+ startedAt: string;
+ };
+ round: {
+ id: string;
+ index: number;
+ timeLimitSeconds: number;
+ presentedAt: string;
+ endsAt: string;
+ cards: {
+ a: BeatmapCard;
+ b: BeatmapCard;
+ };
+ };
+};
+
+type SessionSummary = {
+ id: string;
+ sessionKey: string;
+ status: string;
+ modeSetting: ModeSetting;
+ timerProfile: TimerProfile;
+ startingLives: number;
+ livesRemaining: number;
+ currentStreak: number;
+ bestStreak: number;
+ startedAt: string;
+ endedAt: string | null;
+ totalRounds: number;
+ correctAnswers: number;
+ wrongAnswers: number;
+ timeoutCount: number;
+ suspiciousRounds: number;
+};
+
+type LeaderboardRow = {
+ id: string;
+ playerName: string;
+ scoreValue: number;
+ bestStreak: number;
+ gamesPlayed: number;
+ modeSetting: ModeSetting;
+ timerProfile: TimerProfile;
+ recordedAt: string;
+};
+
+type OverviewPayload = {
+ activeSession: ActiveGamePayload | null;
+ recentSessions: SessionSummary[];
+ leaderboard: LeaderboardRow[];
+ dataset: {
+ beatmapCount: number;
+ lastSyncedAt: string | null;
+ };
+};
+
+type ResolutionPayload = {
+ roundId: string;
+ roundIndex: number;
+ result: RoundResult;
+ playerChoice: PlayerChoice;
+ correctChoice: 'a' | 'b';
+ resolvedMode: 'beatmap' | 'mapper' | 'artist';
+ comparedLabel: string;
+ values: {
+ a: number;
+ b: number;
+ };
+ cards: {
+ a: BeatmapCard;
+ b: BeatmapCard;
+ };
+};
+
+type AnswerPayload = {
+ resolution: ResolutionPayload;
+ sessionSummary: SessionSummary;
+ nextRound: ActiveGamePayload | null;
+};
+
+const modeOptions: { value: ModeSetting; label: string; description: string }[] = [
+ {
+ value: 'mixed',
+ label: 'Mixed',
+ description: 'Backend chooses the metric per round and hides it until after you answer.',
+ },
+ {
+ value: 'beatmap',
+ label: 'Beatmap',
+ description: 'Pure beatmap playcount comparisons only.',
+ },
+ {
+ value: 'mapper',
+ label: 'Mapper',
+ description: 'Compare total ranked + loved plays by mapper.',
+ },
+ {
+ value: 'artist',
+ label: 'Artist',
+ description: 'Compare total ranked + loved plays by artist.',
+ },
+];
+
+const timerOptions: { value: TimerProfile; label: string; description: string }[] = [
+ {
+ value: 'normal',
+ label: 'Normal · 8s',
+ description: 'Gives you a fair read on the art, title, artist, and mapper before the guess.',
+ },
+ {
+ value: 'insane',
+ label: 'Insane · 6s',
+ description: 'Still fast, but less punishing when the cards need a split-second longer.',
+ },
+];
+
+const dateFormatter = new Intl.DateTimeFormat('en-US', {
+ month: 'short',
+ day: 'numeric',
+ hour: 'numeric',
+ minute: '2-digit',
+});
+
+const numberFormatter = new Intl.NumberFormat('en-US');
+const CARD_VALUE_COUNTUP_MS = 900;
+const NEXT_ROUND_DELAY_MS = 1150;
+
+function formatModeLabel(value: ModeSetting) {
+ return value.charAt(0).toUpperCase() + value.slice(1);
+}
+
+function formatTimerLabel(value: TimerProfile) {
+ return value === 'insane' ? 'Insane · 6s' : 'Normal · 8s';
+}
+
+function extractErrorMessage(error: unknown) {
+ if (axios.isAxiosError(error)) {
+ if (typeof error.response?.data === 'string') {
+ return error.response.data;
+ }
+
+ if (
+ error.response?.data &&
+ typeof error.response.data === 'object' &&
+ 'message' in error.response.data &&
+ typeof error.response.data.message === 'string'
+ ) {
+ return error.response.data.message;
+ }
+ }
+
+ if (error instanceof Error) {
+ return error.message;
+ }
+
+ return 'Something went wrong while talking to the gameplay API.';
+}
+
+function getResolutionCopy(resolution: ResolutionPayload) {
+ if (resolution.result === 'correct') {
+ return 'Correct';
+ }
+
+ if (resolution.result === 'timeout') {
+ return 'Timeout';
+ }
+
+ return 'Wrong';
+}
+
+function getResolutionDetailCopy(resolution: ResolutionPayload) {
+ if (resolution.result === 'correct') {
+ return 'The higher total is highlighted in green on the winning card.';
+ }
+
+ if (resolution.result === 'timeout') {
+ return 'Time ran out. The winning card is still revealed in green.';
+ }
+
+ return 'Your miss is marked in red while the higher total stays green.';
+}
+
+function getResultStyles(result: RoundResult) {
+ if (result === 'correct') {
+ return 'border-emerald-200 bg-emerald-50 text-emerald-900 dark:border-emerald-900/50 dark:bg-emerald-950/30 dark:text-emerald-200';
+ }
+
+ if (result === 'timeout') {
+ return 'border-amber-200 bg-amber-50 text-amber-900 dark:border-amber-900/50 dark:bg-amber-950/30 dark:text-amber-200';
+ }
+
+ return 'border-rose-200 bg-rose-50 text-rose-900 dark:border-rose-900/50 dark:bg-rose-950/30 dark:text-rose-200';
+}
+
+function buildCardButtonClasses(
+ disabled: boolean,
+ tone: 'neutral' | 'winner' | 'wrong',
+ revealActive: boolean,
+) {
+ const toneClasses =
+ tone === 'winner'
+ ? 'border-emerald-400/80 shadow-[0_20px_60px_rgba(16,185,129,0.16)]'
+ : tone === 'wrong'
+ ? 'border-rose-400/80 shadow-[0_20px_60px_rgba(244,63,94,0.14)]'
+ : 'border-slate-200 dark:border-dark-700';
+
+ return [
+ 'group relative overflow-hidden rounded-[1.75rem] border bg-slate-950 text-left transition duration-150',
+ toneClasses,
+ disabled
+ ? revealActive
+ ? 'cursor-not-allowed'
+ : 'cursor-not-allowed opacity-75'
+ : 'hover:-translate-y-0.5 hover:shadow-[0_18px_60px_rgba(15,23,42,0.22)] focus:outline-none focus:ring-2 focus:ring-[#ff66aa] focus:ring-offset-2 dark:focus:ring-offset-dark-900',
+ ].join(' ');
+}
+
+export default function PlayPage() {
+ const { currentUser } = useAppSelector((state) => state.auth);
+ const [overview, setOverview] = useState(null);
+ const [activeGame, setActiveGame] = useState(null);
+ const [lastCompletedSession, setLastCompletedSession] = useState(null);
+ const [resolution, setResolution] = useState(null);
+ const [modeSetting, setModeSetting] = useState('mixed');
+ const [timerProfile, setTimerProfile] = useState('normal');
+ const [isLoadingOverview, setIsLoadingOverview] = useState(true);
+ const [isStarting, setIsStarting] = useState(false);
+ const [isSubmitting, setIsSubmitting] = useState(false);
+ const [errorMessage, setErrorMessage] = useState('');
+ const [timeRemainingMs, setTimeRemainingMs] = useState(0);
+ const [animatedValues, setAnimatedValues] = useState<{ a: number; b: number }>({
+ a: 0,
+ b: 0,
+ });
+ const revealTimerRef = useRef | null>(null);
+ const valueAnimationFrameRef = useRef(null);
+ const submissionLockRef = useRef(false);
+
+ const fetchOverview = useCallback(async () => {
+ setIsLoadingOverview(true);
+
+ try {
+ const { data } = await axios.get('/gameplay/overview');
+
+ setOverview(data);
+ setActiveGame(data.activeSession);
+ setErrorMessage('');
+ } catch (error: unknown) {
+ console.error('Failed to load Osu Higher Lower overview:', error);
+ setErrorMessage(extractErrorMessage(error));
+ } finally {
+ setIsLoadingOverview(false);
+ }
+ }, []);
+
+ useEffect(() => {
+ void fetchOverview();
+ }, [fetchOverview]);
+
+ useEffect(() => {
+ return () => {
+ if (revealTimerRef.current) {
+ window.clearTimeout(revealTimerRef.current);
+ }
+
+ if (valueAnimationFrameRef.current) {
+ window.cancelAnimationFrame(valueAnimationFrameRef.current);
+ }
+ };
+ }, []);
+
+ useEffect(() => {
+ if (valueAnimationFrameRef.current) {
+ window.cancelAnimationFrame(valueAnimationFrameRef.current);
+ valueAnimationFrameRef.current = null;
+ }
+
+ if (!resolution) {
+ setAnimatedValues({ a: 0, b: 0 });
+ return undefined;
+ }
+
+ const startedAt = window.performance.now();
+ const targetValues = resolution.values;
+
+ setAnimatedValues({ a: 0, b: 0 });
+
+ const animateValues = (timestamp: number) => {
+ const progress = Math.min((timestamp - startedAt) / CARD_VALUE_COUNTUP_MS, 1);
+ const easedProgress = 1 - (1 - progress) ** 3;
+
+ setAnimatedValues({
+ a: Math.round(targetValues.a * easedProgress),
+ b: Math.round(targetValues.b * easedProgress),
+ });
+
+ if (progress < 1) {
+ valueAnimationFrameRef.current = window.requestAnimationFrame(animateValues);
+ return;
+ }
+
+ valueAnimationFrameRef.current = null;
+ };
+
+ valueAnimationFrameRef.current = window.requestAnimationFrame(animateValues);
+
+ return () => {
+ if (valueAnimationFrameRef.current) {
+ window.cancelAnimationFrame(valueAnimationFrameRef.current);
+ valueAnimationFrameRef.current = null;
+ }
+ };
+ }, [resolution]);
+
+ const handleRoundAnswer = useCallback(
+ async (choice: PlayerChoice) => {
+ if (!activeGame || submissionLockRef.current || isSubmitting) {
+ return;
+ }
+
+ submissionLockRef.current = true;
+ setIsSubmitting(true);
+
+ try {
+ const { data } = await axios.post('/gameplay/answer', {
+ sessionId: activeGame.session.id,
+ choice,
+ });
+
+ setResolution(data.resolution);
+ setLastCompletedSession(data.sessionSummary);
+
+ if (data.nextRound) {
+ if (revealTimerRef.current) {
+ window.clearTimeout(revealTimerRef.current);
+ }
+
+ revealTimerRef.current = window.setTimeout(() => {
+ setActiveGame(data.nextRound);
+ setResolution(null);
+ setIsSubmitting(false);
+ submissionLockRef.current = false;
+ }, NEXT_ROUND_DELAY_MS);
+ } else {
+ setActiveGame(null);
+ setIsSubmitting(false);
+ submissionLockRef.current = false;
+ await fetchOverview();
+ }
+ } catch (error: unknown) {
+ console.error('Failed to submit Osu Higher Lower answer:', error);
+ setErrorMessage(extractErrorMessage(error));
+ setIsSubmitting(false);
+ submissionLockRef.current = false;
+ }
+ },
+ [activeGame, fetchOverview, isSubmitting],
+ );
+
+ useEffect(() => {
+ if (!activeGame) {
+ setTimeRemainingMs(0);
+ return undefined;
+ }
+
+ const syncRemainingTime = () => {
+ const remaining = Math.max(
+ new Date(activeGame.round.endsAt).getTime() - Date.now(),
+ 0,
+ );
+
+ setTimeRemainingMs(remaining);
+
+ if (remaining === 0 && !submissionLockRef.current && !isSubmitting) {
+ void handleRoundAnswer('none');
+ }
+ };
+
+ syncRemainingTime();
+
+ const interval = window.setInterval(syncRemainingTime, 100);
+
+ return () => {
+ window.clearInterval(interval);
+ };
+ }, [activeGame, handleRoundAnswer, isSubmitting]);
+
+ const handleStartSession = useCallback(async () => {
+ setIsStarting(true);
+ setResolution(null);
+ setLastCompletedSession(null);
+ setErrorMessage('');
+
+ try {
+ const { data } = await axios.post('/gameplay/start', {
+ modeSetting,
+ timerProfile,
+ });
+
+ setActiveGame(data);
+ setOverview((currentOverview) =>
+ currentOverview
+ ? {
+ ...currentOverview,
+ activeSession: data,
+ }
+ : currentOverview,
+ );
+ } catch (error: unknown) {
+ console.error('Failed to start Osu Higher Lower session:', error);
+ setErrorMessage(extractErrorMessage(error));
+ } finally {
+ submissionLockRef.current = false;
+ setIsStarting(false);
+ }
+ }, [modeSetting, timerProfile]);
+
+ const timerProgress = useMemo(() => {
+ if (!activeGame) {
+ return 0;
+ }
+
+ const fullDuration = activeGame.round.timeLimitSeconds * 1000;
+
+ if (!fullDuration) {
+ return 0;
+ }
+
+ return Math.max(Math.min((timeRemainingMs / fullDuration) * 100, 100), 0);
+ }, [activeGame, timeRemainingMs]);
+
+ const playerName = useMemo(() => {
+ const fullName = [currentUser?.firstName, currentUser?.lastName]
+ .filter(Boolean)
+ .join(' ')
+ .trim();
+
+ return fullName || currentUser?.email?.split('@')[0] || 'Player';
+ }, [currentUser]);
+
+ return (
+ <>
+
+ {getPageTitle('Play Osu Higher Lower')}
+
+
+
+
+
+
+
Playable MVP slice
+
+ Osu Higher Lower
+
+
+ Pick the higher hidden stat, protect your two lives, and keep the
+ streak alive. Mixed mode keeps the metric server-side until your
+ answer lands so the frontend never sees the truth early.
+
+
+
+ {overview?.dataset.beatmapCount ?? 0} active beatmaps
+
+
+ osu!standard only
+
+
+ Ranked + Loved only
+
+
+ 2 lives per run
+
+
+
+
+
+
Player
+
{playerName}
+
+ Recent runs and round reveals are attached to your signed-in session.
+
+
+
+
Dataset sync
+
+ {overview?.dataset.lastSyncedAt
+ ? dateFormatter.format(new Date(overview.dataset.lastSyncedAt))
+ : 'Waiting'}
+
+
+ Precomputed mapper and artist totals are stored ahead of gameplay.
+
+
+
+
+
+ {errorMessage ? (
+
+ {errorMessage}
+
+ ) : null}
+
+ {isLoadingOverview && !overview ? (
+
+
+ ) : (
+
+
+
+
+
+
+ {activeGame ? 'Run in progress' : 'Start a run'}
+
+
+ {activeGame ? 'Continue from your current round.' : 'Choose a mode and timer.'}
+
+
+
+ {activeGame
+ ? `${activeGame.session.livesRemaining}/${activeGame.session.startingLives} lives`
+ : '2 lives'}
+
+
+
+
Mode
+
+ {modeOptions.map((option) => {
+ const isSelected = modeSetting === option.value;
+
+ return (
+
setModeSetting(option.value)}
+ >
+
+
{option.label}
+ {isSelected ? (
+
+ selected
+
+ ) : null}
+
+ {option.description}
+
+
+ );
+ })}
+
+
+
+
+
Timer
+
+ {timerOptions.map((option) => {
+ const isSelected = timerProfile === option.value;
+
+ return (
+
setTimerProfile(option.value)}
+ >
+ {option.label}
+
+ {option.description}
+
+
+ );
+ })}
+
+
+
+ void handleStartSession()}
+ />
+ {activeGame ? (
+
+ Starting over abandons the current run and deals a new round instantly.
+
+ ) : null}
+
+
+
+
+
+
+
Leaderboard
+
Best runs so far
+
+
+ {overview?.leaderboard.length ? (
+ overview.leaderboard.map((entry, index) => (
+
+
+
+ {index + 1}. {entry.playerName}
+
+
+ {formatModeLabel(entry.modeSetting)} · {formatTimerLabel(entry.timerProfile)}
+
+
+
+
+ {entry.scoreValue}
+
+
+ best streak {entry.bestStreak} · {entry.gamesPlayed} games
+
+
+
+ ))
+ ) : (
+
+ No leaderboard entries yet. Finish a run and the board will populate.
+
+ )}
+
+
+
+
+
+
+
+
Live board
+
+ {activeGame ? `Round ${activeGame.round.index}` : 'Ready when you are'}
+
+
+ {activeGame
+ ? activeGame.session.modeSetting === 'mixed'
+ ? 'Mixed mode keeps the current metric hidden until you answer.'
+ : `${formatModeLabel(activeGame.session.modeSetting)} mode is active for this run.`
+ : 'Start a run to deal two beatmaps and begin the timer.'}
+
+
+ {activeGame ? (
+
+
+ {activeGame.session.livesRemaining}/{activeGame.session.startingLives} lives
+
+
+ streak {activeGame.session.currentStreak}
+
+
+ {formatTimerLabel(activeGame.session.timerProfile)}
+
+
+ ) : null}
+
+
+
+
Reveal
+
+ {getResolutionCopy(resolution)} · {resolution.comparedLabel}
+
+
+
{getResolutionDetailCopy(resolution)}
+
+
+ {resolution ? 'Locking next round…' : 'Timer'}
+ {(timeRemainingMs / 1000).toFixed(1)}s
+
+
+
+
+
+ {(['a', 'b'] as const).map((choice, index) => {
+ const card = activeGame.round.cards[choice];
+ const isDisabled = isSubmitting || isStarting;
+ const isWinningCard = resolution?.correctChoice === choice;
+ const isWrongSelection =
+ resolution?.result === 'wrong' && resolution.playerChoice === choice;
+ const cardTone = isWrongSelection
+ ? 'wrong'
+ : isWinningCard
+ ? 'winner'
+ : 'neutral';
+ const statsBoxClasses = isWinningCard
+ ? 'border-emerald-300/50 bg-emerald-500/20 text-emerald-50'
+ : isWrongSelection
+ ? 'border-rose-300/45 bg-rose-500/18 text-rose-50'
+ : 'border-white/15 bg-black/40 text-white';
+ const revealOverlayClasses = isWinningCard
+ ? 'bg-emerald-500/16'
+ : isWrongSelection
+ ? 'bg-rose-500/14'
+ : 'bg-transparent';
+ const revealPill = resolution
+ ? isWinningCard
+ ? 'Higher'
+ : 'Lower'
+ : 'Hidden';
+ const revealHint = resolution ? 'Running total' : 'Choose the higher';
+
+ return (
+
+ {index === 1 ? (
+
+ ) : null}
+ void handleRoundAnswer(choice)}
+ >
+
+
+
+
+
+ {choice}
+
+
+ {card.status}
+
+
+
+
Artist
+
{card.artistName}
+
+ {card.title}
+
+
{card.version}
+
+
+ {resolution ? resolution.comparedLabel : 'Hidden plays'}
+
+
+ {resolution ? numberFormatter.format(animatedValues[choice]) : '???'}
+
+
+
+ {revealPill}
+
+
+ {revealHint}
+
+
+
+
+
+
+
+
+
Mapper
+
{card.mapperName}
+
+
+
+
+
+ );
+ })}
+
+
+ Choose a mode, hit start, and the backend will deal a hidden comparison round immediately.
+
+ )}
+
+
+ {lastCompletedSession && !activeGame ? (
+
+ Latest result
+ Run finished
+
+
+
Score
+
+ {lastCompletedSession.correctAnswers}
+
+
+
+
Best streak
+
+ {lastCompletedSession.bestStreak}
+
+
+
+
Mode
+
+ {formatModeLabel(lastCompletedSession.modeSetting)}
+
+
+
+
Timer
+
+ {formatTimerLabel(lastCompletedSession.timerProfile)}
+
+
+
+ void handleStartSession()}
+ />
+
+
+ ) : null}
+
+
+
+
+
Recent sessions
+
Your run history
+
+ {overview?.recentSessions.length ? (
+
+ {overview.recentSessions.length} recent runs
+
+ ) : null}
+
+ {overview?.recentSessions.length ? (
+ overview.recentSessions.map((session) => (
+
+
+
+ {formatModeLabel(session.modeSetting)} · {formatTimerLabel(session.timerProfile)}
+
+
+ {session.endedAt
+ ? dateFormatter.format(new Date(session.endedAt))
+ : dateFormatter.format(new Date(session.startedAt))}
+
+
+
+
+
Score
+
+ {session.correctAnswers}
+
+
+
+
Best streak
+
+ {session.bestStreak}
+
+
+
+
Rounds
+
+ {session.totalRounds}
+
+
+
+
Review
+
+ Open details
+
+
+
+
+ ))
+ ) : (
+
+ You have not finished any Osu Higher Lower sessions yet.
+
+ )}
+
+
+
+ )}
+
+
+ );
+}
+
+PlayPage.getLayout = function getLayout(page: ReactElement) {
+ return {page} ;
+};
+