Compare commits
2 commits
5dcd7ac978
...
5d113e1d37
| Author | SHA1 | Date | |
|---|---|---|---|
| 5d113e1d37 | |||
|
1e5ef2be90 |
18 changed files with 737 additions and 223 deletions
|
|
@ -14,6 +14,7 @@ import { useRoomStore } from "@/store/room"
|
|||
import { useYoutube, type YoutubeApi } from "@/lib/youtube"
|
||||
import { Countdown } from "@/components/countdown"
|
||||
import { Avatar } from "@/components/avatar"
|
||||
import { useI18n } from "@/i18n/context"
|
||||
|
||||
const inputClass =
|
||||
"border-input bg-background h-10 w-full rounded-md border px-3 py-2 text-sm focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none disabled:opacity-50"
|
||||
|
|
@ -33,6 +34,7 @@ export function BlindtestView({ snapshot }: { snapshot: RoomSnapshot }) {
|
|||
const voteBlindtest = useRoomStore((s) => s.voteBlindtest)
|
||||
const mediaControl = useRoomStore((s) => s.mediaControl)
|
||||
|
||||
const { t } = useI18n()
|
||||
const track = round?.payload as BlindtestRoundPayload | undefined
|
||||
const { hostRef, ready, api } = useYoutube(track?.youtubeId ?? "")
|
||||
|
||||
|
|
@ -68,7 +70,7 @@ export function BlindtestView({ snapshot }: { snapshot: RoomSnapshot }) {
|
|||
<div className="flex w-full max-w-lg flex-col gap-5">
|
||||
<header className="flex items-center justify-between">
|
||||
<span className="text-muted-foreground text-xs uppercase">
|
||||
Blindtest {snapshot.currentRound + 1} / {snapshot.totalRounds}
|
||||
{t.game.blindtest(snapshot.currentRound + 1, snapshot.totalRounds)}
|
||||
</span>
|
||||
{!showReveal && round && (
|
||||
<Countdown
|
||||
|
|
@ -136,6 +138,7 @@ function DjControls({
|
|||
api: YoutubeApi
|
||||
mediaControl: (action: "play" | "pause" | "seek", positionSec: number) => void
|
||||
}) {
|
||||
const { t } = useI18n()
|
||||
const [pos, setPos] = useState(0)
|
||||
const [dur, setDur] = useState(0)
|
||||
|
||||
|
|
@ -153,7 +156,7 @@ function DjControls({
|
|||
return (
|
||||
<div className="flex flex-col gap-3">
|
||||
<span className="text-muted-foreground text-center text-xs uppercase">
|
||||
Tu es le DJ 🎧 — pilote la lecture (et vote comme les autres)
|
||||
{t.blindtest.djHint}
|
||||
</span>
|
||||
<div className="flex justify-center gap-2">
|
||||
<Button
|
||||
|
|
@ -164,7 +167,7 @@ function DjControls({
|
|||
mediaControl("play", api.time())
|
||||
}}
|
||||
>
|
||||
<Play /> Play
|
||||
<Play /> {t.blindtest.play}
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
|
|
@ -175,7 +178,7 @@ function DjControls({
|
|||
mediaControl("pause", api.time())
|
||||
}}
|
||||
>
|
||||
<Pause /> Pause
|
||||
<Pause /> {t.blindtest.pause}
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
|
|
@ -187,7 +190,7 @@ function DjControls({
|
|||
mediaControl("seek", 0)
|
||||
}}
|
||||
>
|
||||
<Rewind /> Début
|
||||
<Rewind /> {t.blindtest.restart}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-xs tabular-nums">
|
||||
|
|
@ -214,14 +217,15 @@ function DjControls({
|
|||
}
|
||||
|
||||
function MisleadCard({ mode }: { mode: BlindtestMode }) {
|
||||
const { t } = useI18n()
|
||||
return (
|
||||
<div className="border-primary/40 bg-primary/5 flex flex-col items-center gap-2 rounded-xl border p-4 text-center">
|
||||
<span className="text-2xl">🤫</span>
|
||||
<p className="font-heading font-bold">C'est ton titre !</p>
|
||||
<p className="font-heading font-bold">{t.blindtest.yourTrack}</p>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
{mode === "title_artist"
|
||||
? "Tu ne votes pas. Savoure pendant que les autres cherchent."
|
||||
: "Tu ne votes pas — ton but : que personne ne devine que c'est toi qui l'as ajouté. +50 par joueur trompé."}
|
||||
? t.blindtest.yourTrackTitleArtist
|
||||
: t.blindtest.yourTrackWhoAdded}
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
|
|
@ -240,6 +244,7 @@ function VoteForm({
|
|||
disabled: boolean
|
||||
onVote: (answer: BlindtestAnswer) => void
|
||||
}) {
|
||||
const { t } = useI18n()
|
||||
const [title, setTitle] = useState("")
|
||||
const [artist, setArtist] = useState("")
|
||||
const [guessed, setGuessed] = useState<string | null>(null)
|
||||
|
|
@ -270,7 +275,7 @@ function VoteForm({
|
|||
if (disabled) {
|
||||
return (
|
||||
<p className="text-muted-foreground text-center text-xs">
|
||||
Réponse envoyée — en attente des autres
|
||||
{t.game.answerSent}
|
||||
</p>
|
||||
)
|
||||
}
|
||||
|
|
@ -281,13 +286,13 @@ function VoteForm({
|
|||
<>
|
||||
<input
|
||||
className={inputClass}
|
||||
placeholder="Titre"
|
||||
placeholder={t.blindtest.titlePlaceholder}
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
/>
|
||||
<input
|
||||
className={inputClass}
|
||||
placeholder="Artiste"
|
||||
placeholder={t.blindtest.artistPlaceholder}
|
||||
value={artist}
|
||||
onChange={(e) => setArtist(e.target.value)}
|
||||
/>
|
||||
|
|
@ -314,7 +319,7 @@ function VoteForm({
|
|||
</div>
|
||||
)}
|
||||
<Button disabled={!canSubmit} onClick={submit}>
|
||||
Valider ma réponse
|
||||
{t.blindtest.submit}
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
|
|
@ -327,12 +332,13 @@ function RevealCard({
|
|||
truth: BlindtestRevealTruth
|
||||
result?: BlindtestPerPlayerResult[string]
|
||||
}) {
|
||||
const { t } = useI18n()
|
||||
return (
|
||||
<div className="flex flex-col items-center gap-2 text-center">
|
||||
<p className="font-heading text-lg font-bold text-balance">{truth.title}</p>
|
||||
<p className="text-muted-foreground text-sm">{truth.artist}</p>
|
||||
<p className="flex items-center gap-2 text-sm">
|
||||
<span className="text-muted-foreground">Ajouté par</span>
|
||||
<span className="text-muted-foreground">{t.blindtest.revealAddedBy}</span>
|
||||
<Avatar seed={truth.submittedByName} className="size-6" />
|
||||
<span className="font-medium">{truth.submittedByName}</span>
|
||||
</p>
|
||||
|
|
@ -340,7 +346,7 @@ function RevealCard({
|
|||
<p
|
||||
className={`text-sm font-medium ${result.points > 0 ? "text-green-500" : "text-red-500"}`}
|
||||
>
|
||||
{result.points > 0 ? `+${result.points} points 🎉` : "Raté 💥"}
|
||||
{result.points > 0 ? t.blindtest.points(result.points) : t.game.wrong}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,6 +10,11 @@ import type {
|
|||
RoundRecap,
|
||||
} from "@nerdware/shared"
|
||||
import { Button } from "@workspace/ui/components/button"
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipTrigger,
|
||||
} from "@workspace/ui/components/tooltip"
|
||||
|
||||
const SERVER_URL = import.meta.env.VITE_SERVER_URL ?? "http://localhost:3001"
|
||||
const recapImage = (url: string) =>
|
||||
|
|
@ -18,6 +23,7 @@ import { useRoomStore } from "@/store/room"
|
|||
import { Avatar } from "@/components/avatar"
|
||||
import { celebrate } from "@/lib/confetti"
|
||||
import { playVictory } from "@/lib/sound"
|
||||
import { useI18n, type Dict } from "@/i18n/context"
|
||||
|
||||
/** Lien de recherche Spotify (le titre vidéo contient en général artiste + chanson). */
|
||||
function spotifySearch(track: BlindtestTrackInfo): string {
|
||||
|
|
@ -135,6 +141,7 @@ export function GameEndView({ snapshot }: { snapshot: RoomSnapshot }) {
|
|||
const gameRecap = useRoomStore((s) => s.gameRecap)
|
||||
const leaveRoom = useRoomStore((s) => s.leaveRoom)
|
||||
const returnToLobby = useRoomStore((s) => s.returnToLobby)
|
||||
const { t } = useI18n()
|
||||
const isHost = snapshot.hostId === playerId
|
||||
|
||||
// Confettis de victoire (une fois à l'arrivée sur l'écran de fin).
|
||||
|
|
@ -149,12 +156,12 @@ export function GameEndView({ snapshot }: { snapshot: RoomSnapshot }) {
|
|||
|
||||
const [copied, setCopied] = useState(false)
|
||||
async function copyResults() {
|
||||
const lines = ["NerdWare — Résultats", "", "🏆 Classement"]
|
||||
const lines = [t.end.resultsTitle, "", t.end.ranking]
|
||||
ranked.forEach((s, i) =>
|
||||
lines.push(`${i + 1}. ${nameOf(s.playerId)} — ${s.score}`)
|
||||
)
|
||||
if (gameRecap && gameRecap.length > 0) {
|
||||
lines.push("", "Manches")
|
||||
lines.push("", t.end.rounds)
|
||||
gameRecap.forEach((r) =>
|
||||
lines.push(
|
||||
`${r.index + 1}. ${r.type === "blindtest" ? "🎧" : "🧠"} ${r.answer}`
|
||||
|
|
@ -185,11 +192,9 @@ export function GameEndView({ snapshot }: { snapshot: RoomSnapshot }) {
|
|||
<div className="flex w-full flex-col items-center gap-6">
|
||||
<div className="flex w-full max-w-xl flex-col gap-6 text-center">
|
||||
<header>
|
||||
<p className="text-muted-foreground text-xs uppercase">
|
||||
Partie terminée
|
||||
</p>
|
||||
<p className="text-muted-foreground text-xs uppercase">{t.end.over}</p>
|
||||
<h2 className="font-heading text-2xl font-bold">
|
||||
🏆 {first ? nameOf(first.playerId) : "?"} l'emporte !
|
||||
{t.end.winner(first ? nameOf(first.playerId) : "?")}
|
||||
</h2>
|
||||
</header>
|
||||
|
||||
|
|
@ -254,7 +259,7 @@ export function GameEndView({ snapshot }: { snapshot: RoomSnapshot }) {
|
|||
)}
|
||||
|
||||
{gameRecap && gameRecap.length > 0 && (
|
||||
<FunStats recap={gameRecap} snapshot={snapshot} />
|
||||
<FunStats recap={gameRecap} snapshot={snapshot} t={t} />
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
|
@ -268,9 +273,14 @@ export function GameEndView({ snapshot }: { snapshot: RoomSnapshot }) {
|
|||
: "flex w-full max-w-xl flex-col gap-6"
|
||||
}
|
||||
>
|
||||
{hasTracks && <TracksRecap tracks={gameTracks!} />}
|
||||
{hasTracks && <TracksRecap tracks={gameTracks!} t={t} />}
|
||||
{hasRecap && (
|
||||
<RoundsRecap recap={gameRecap!} nameOf={nameOf} playerId={playerId} />
|
||||
<RoundsRecap
|
||||
recap={gameRecap!}
|
||||
nameOf={nameOf}
|
||||
playerId={playerId}
|
||||
t={t}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -278,20 +288,20 @@ export function GameEndView({ snapshot }: { snapshot: RoomSnapshot }) {
|
|||
<div className="flex w-full max-w-sm flex-col gap-2">
|
||||
<Button variant="secondary" className="w-full" onClick={copyResults}>
|
||||
{copied ? <Check className="text-green-500" /> : <ClipboardList />}
|
||||
{copied ? "Copié !" : "Copier les résultats"}
|
||||
{copied ? t.end.copied : t.end.copy}
|
||||
</Button>
|
||||
{isHost ? (
|
||||
<Button className="w-full" onClick={returnToLobby}>
|
||||
Rejouer
|
||||
{t.end.replay}
|
||||
</Button>
|
||||
) : (
|
||||
<p className="text-muted-foreground text-xs">
|
||||
En attente que l'hôte relance une partie…
|
||||
{t.end.waitHostReplay}
|
||||
</p>
|
||||
)}
|
||||
<Link href="/">
|
||||
<Button variant="secondary" className="w-full" onClick={leaveRoom}>
|
||||
Quitter
|
||||
{t.end.leave}
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
|
@ -299,7 +309,7 @@ export function GameEndView({ snapshot }: { snapshot: RoomSnapshot }) {
|
|||
)
|
||||
}
|
||||
|
||||
function TracksRecap({ tracks }: { tracks: BlindtestTrackInfo[] }) {
|
||||
function TracksRecap({ tracks, t }: { tracks: BlindtestTrackInfo[]; t: Dict }) {
|
||||
const [copied, setCopied] = useState(false)
|
||||
|
||||
async function copyPlaylist() {
|
||||
|
|
@ -317,45 +327,52 @@ function TracksRecap({ tracks }: { tracks: BlindtestTrackInfo[] }) {
|
|||
<section className="flex flex-col gap-2 text-left">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-muted-foreground flex items-center gap-1.5 text-sm font-medium">
|
||||
<Music className="size-4" /> Les musiques de la partie
|
||||
<Music className="size-4" /> {t.end.tracksTitle}
|
||||
</h3>
|
||||
<Button size="sm" variant="secondary" onClick={copyPlaylist}>
|
||||
{copied ? <Check className="text-green-500" /> : <ClipboardList />}
|
||||
{copied ? "Copié" : "Playlist"}
|
||||
{copied ? t.roomCode.copied : t.end.playlist}
|
||||
</Button>
|
||||
</div>
|
||||
<ul className="flex flex-col gap-2">
|
||||
{tracks.map((t) => (
|
||||
{tracks.map((track) => (
|
||||
<li
|
||||
key={t.youtubeId}
|
||||
key={track.youtubeId}
|
||||
className="bg-muted/40 flex items-center gap-3 rounded-lg p-2"
|
||||
>
|
||||
<img
|
||||
src={`https://img.youtube.com/vi/${t.youtubeId}/mqdefault.jpg`}
|
||||
src={`https://img.youtube.com/vi/${track.youtubeId}/mqdefault.jpg`}
|
||||
alt=""
|
||||
className="h-10 w-16 shrink-0 rounded object-cover"
|
||||
/>
|
||||
<span className="min-w-0 flex-1">
|
||||
<span className="line-clamp-1 text-xs font-medium">{t.title}</span>
|
||||
<span className="line-clamp-1 text-xs font-medium">
|
||||
{track.title}
|
||||
</span>
|
||||
<span className="text-muted-foreground line-clamp-1 text-[10px]">
|
||||
ajouté par {t.submittedByName}
|
||||
{t.end.addedBy(track.submittedByName)}
|
||||
</span>
|
||||
</span>
|
||||
<a
|
||||
href={spotifySearch(t)}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
title="Chercher sur Spotify"
|
||||
>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<a href={spotifySearch(track)} target="_blank" rel="noreferrer">
|
||||
<Button size="icon-sm" variant="secondary">
|
||||
<SiSpotify color="default" />
|
||||
</Button>
|
||||
</a>
|
||||
<a href={t.url} target="_blank" rel="noreferrer" title="Ouvrir sur YouTube">
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>{t.end.searchSpotify}</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<a href={track.url} target="_blank" rel="noreferrer">
|
||||
<Button size="icon-sm" variant="secondary">
|
||||
<SiYoutube color="default" />
|
||||
</Button>
|
||||
</a>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>{t.end.openYoutube}</TooltipContent>
|
||||
</Tooltip>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
|
@ -376,9 +393,11 @@ const QUIZ_BASE_POINTS = 100
|
|||
function FunStats({
|
||||
recap,
|
||||
snapshot,
|
||||
t,
|
||||
}: {
|
||||
recap: RoundRecap[]
|
||||
snapshot: RoomSnapshot
|
||||
t: Dict
|
||||
}) {
|
||||
const stats = new Map<string, PlayerStat>(
|
||||
snapshot.players.map((p) => [
|
||||
|
|
@ -427,17 +446,17 @@ function FunStats({
|
|||
(p) => total > 0 && stat(p.id).correct === total
|
||||
)
|
||||
if (perfect.length) {
|
||||
awards.push({ emoji: "🎯", label: "Sans-faute", ids: perfect.map((p) => p.id) })
|
||||
awards.push({ emoji: "🎯", label: t.end.awardPerfect, ids: perfect.map((p) => p.id) })
|
||||
}
|
||||
const brains = winners((s) => s.correct)
|
||||
if (brains.length && brains.length < players.length) {
|
||||
awards.push({ emoji: "🧠", label: "Le cerveau", ids: brains.map((p) => p.id) })
|
||||
awards.push({ emoji: "🧠", label: t.end.awardBrain, ids: brains.map((p) => p.id) })
|
||||
}
|
||||
const fastest = winners((s) => s.speed)
|
||||
if (fastest.length && fastest.length < players.length) {
|
||||
awards.push({
|
||||
emoji: "⚡",
|
||||
label: "Le plus rapide",
|
||||
label: t.end.awardFastest,
|
||||
ids: fastest.map((p) => p.id),
|
||||
})
|
||||
}
|
||||
|
|
@ -445,7 +464,7 @@ function FunStats({
|
|||
if (decoy.length) {
|
||||
awards.push({
|
||||
emoji: "🦹",
|
||||
label: "Roi de la tromperie",
|
||||
label: t.end.awardDecoy,
|
||||
ids: decoy.map((p) => p.id),
|
||||
})
|
||||
}
|
||||
|
|
@ -453,7 +472,7 @@ function FunStats({
|
|||
(p) => stat(p.id).answered > 0 && stat(p.id).correct === 0
|
||||
)
|
||||
if (boulets.length && total >= 3) {
|
||||
awards.push({ emoji: "🪨", label: "Le boulet", ids: boulets.map((p) => p.id) })
|
||||
awards.push({ emoji: "🪨", label: t.end.awardBoulet, ids: boulets.map((p) => p.id) })
|
||||
}
|
||||
|
||||
if (awards.length === 0) {
|
||||
|
|
@ -462,7 +481,7 @@ function FunStats({
|
|||
|
||||
return (
|
||||
<section className="flex flex-col gap-2">
|
||||
<h3 className="text-muted-foreground text-sm font-medium">Récompenses</h3>
|
||||
<h3 className="text-muted-foreground text-sm font-medium">{t.end.awards}</h3>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{awards.map((a) => (
|
||||
<div
|
||||
|
|
@ -490,15 +509,17 @@ function RoundsRecap({
|
|||
recap,
|
||||
nameOf,
|
||||
playerId,
|
||||
t,
|
||||
}: {
|
||||
recap: RoundRecap[]
|
||||
nameOf: (id: string) => string
|
||||
playerId: string | null
|
||||
t: Dict
|
||||
}) {
|
||||
return (
|
||||
<details className="rounded-xl border text-left">
|
||||
<summary className="text-muted-foreground flex cursor-pointer items-center gap-1.5 p-3 text-sm font-medium select-none">
|
||||
<ListChecks className="size-4" /> Récapitulatif des manches ({recap.length})
|
||||
<ListChecks className="size-4" /> {t.end.recapTitle(recap.length)}
|
||||
</summary>
|
||||
<ul className="flex flex-col gap-2 p-3 pt-0">
|
||||
{recap.map((r) => {
|
||||
|
|
@ -528,7 +549,10 @@ function RoundsRecap({
|
|||
<div className="min-w-0 flex-1">
|
||||
<p className="text-muted-foreground text-[10px] uppercase">
|
||||
{r.index + 1} ·{" "}
|
||||
{r.category ?? (r.type === "blindtest" ? "Blindtest" : "Quiz")}
|
||||
{r.category ??
|
||||
(r.type === "blindtest"
|
||||
? t.gameTypes.blindtest
|
||||
: t.gameTypes.quiz)}
|
||||
{" · "}
|
||||
<span className="text-green-500">✓ {found}</span>
|
||||
</p>
|
||||
|
|
@ -547,7 +571,7 @@ function RoundsRecap({
|
|||
<ul className="mt-1 flex flex-col gap-0.5">
|
||||
{answers.length === 0 ? (
|
||||
<li className="text-muted-foreground text-[10px]">
|
||||
Aucune réponse
|
||||
{t.end.noAnswer}
|
||||
</li>
|
||||
) : (
|
||||
answers.map((a) => (
|
||||
|
|
@ -564,7 +588,7 @@ function RoundsRecap({
|
|||
}
|
||||
>
|
||||
{nameOf(a.playerId)}
|
||||
{a.playerId === playerId && " (toi)"} :
|
||||
{a.playerId === playerId && t.end.you} :
|
||||
</span>
|
||||
<span
|
||||
className={
|
||||
|
|
|
|||
|
|
@ -18,18 +18,11 @@ import { SiYoutube } from "@icons-pack/react-simple-icons"
|
|||
import { fetchCategories } from "@/lib/categories"
|
||||
import { fetchHistory } from "@/lib/history"
|
||||
import type {
|
||||
BlindtestMode,
|
||||
GameType,
|
||||
MixMode,
|
||||
RoomSnapshot,
|
||||
RoundConfig,
|
||||
} from "@nerdware/shared"
|
||||
|
||||
const MIX_LABELS: Record<MixMode, string> = {
|
||||
quiz: "Quiz",
|
||||
image: "Images",
|
||||
blindtest: "Blindtest",
|
||||
}
|
||||
import { Button } from "@workspace/ui/components/button"
|
||||
import {
|
||||
Tooltip,
|
||||
|
|
@ -38,32 +31,21 @@ import {
|
|||
} from "@workspace/ui/components/tooltip"
|
||||
import { useRoomStore } from "@/store/room"
|
||||
import { Avatar } from "@/components/avatar"
|
||||
|
||||
const BLINDTEST_LOCK_HINT = "3 joueurs dont 2 réels (un bot ne peut pas être DJ)"
|
||||
import { useI18n } from "@/i18n/context"
|
||||
import { errorMessage } from "@/i18n/error"
|
||||
|
||||
const MAX_TRACKS = 10
|
||||
const GAME_TYPES: {
|
||||
value: GameType
|
||||
label: string
|
||||
Icon: LucideIcon
|
||||
needsThree: boolean
|
||||
}[] = [
|
||||
{ value: "mixed", label: "Mixte", Icon: Shuffle, needsThree: false },
|
||||
{ value: "quiz", label: "Quiz", Icon: Brain, needsThree: false },
|
||||
{ value: "image", label: "Images", Icon: ImageIcon, needsThree: false },
|
||||
{ value: "blindtest", label: "Blindtest", Icon: Headphones, needsThree: true },
|
||||
{ value: "mixed", Icon: Shuffle, needsThree: false },
|
||||
{ value: "quiz", Icon: Brain, needsThree: false },
|
||||
{ value: "image", Icon: ImageIcon, needsThree: false },
|
||||
{ value: "blindtest", Icon: Headphones, needsThree: true },
|
||||
]
|
||||
const MODE_LABELS: Record<BlindtestMode, string> = {
|
||||
title_artist: "Titre & artiste",
|
||||
who_added: "Qui l'a ajouté ?",
|
||||
mixed: "Mixte",
|
||||
}
|
||||
const BOT_DIFFICULTIES = ["easy", "normal", "hard"] as const
|
||||
const BOT_DIFF_LABELS: Record<(typeof BOT_DIFFICULTIES)[number], string> = {
|
||||
easy: "Facile",
|
||||
normal: "Normal",
|
||||
hard: "Difficile",
|
||||
}
|
||||
|
||||
const inputClass =
|
||||
"border-input bg-background h-10 w-full rounded-md border px-3 py-2 text-sm focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none disabled:opacity-50"
|
||||
|
|
@ -151,6 +133,7 @@ export function LobbyView({ snapshot }: { snapshot: RoomSnapshot }) {
|
|||
const startGame = useRoomStore((s) => s.startGame)
|
||||
const addBot = useRoomStore((s) => s.addBot)
|
||||
const removeBot = useRoomStore((s) => s.removeBot)
|
||||
const { t, lang } = useI18n()
|
||||
const isHost = snapshot.hostId === playerId
|
||||
const botCount = snapshot.players.filter((p) => p.bot).length
|
||||
const {
|
||||
|
|
@ -241,7 +224,7 @@ export function LobbyView({ snapshot }: { snapshot: RoomSnapshot }) {
|
|||
try {
|
||||
await startGame(rounds)
|
||||
} catch (err) {
|
||||
setError((err as { message?: string }).message ?? "Erreur")
|
||||
setError(errorMessage(t, err))
|
||||
} finally {
|
||||
setBusy(false)
|
||||
}
|
||||
|
|
@ -251,7 +234,7 @@ export function LobbyView({ snapshot }: { snapshot: RoomSnapshot }) {
|
|||
<div className="grid w-full gap-6 md:grid-cols-2 md:items-start">
|
||||
<section className="flex flex-col gap-2">
|
||||
<h2 className="text-muted-foreground text-sm font-medium">
|
||||
Joueurs ({snapshot.players.length})
|
||||
{t.lobby.players(snapshot.players.length)}
|
||||
</h2>
|
||||
<ul className="flex flex-col gap-1">
|
||||
{snapshot.players.map((p) => (
|
||||
|
|
@ -265,12 +248,12 @@ export function LobbyView({ snapshot }: { snapshot: RoomSnapshot }) {
|
|||
<Avatar seed={p.name} className="size-11" />
|
||||
{p.name}
|
||||
{p.id === playerId && (
|
||||
<span className="text-muted-foreground"> (toi)</span>
|
||||
<span className="text-muted-foreground"> {t.common.you}</span>
|
||||
)}
|
||||
</span>
|
||||
<span className="text-muted-foreground text-xs">
|
||||
{p.bot ? "🤖 Bot" : p.id === snapshot.hostId ? "Hôte" : ""}
|
||||
{!p.bot && !p.connected && " · hors ligne"}
|
||||
{p.bot ? t.lobby.bot : p.id === snapshot.hostId ? t.lobby.host : ""}
|
||||
{!p.bot && !p.connected && ` · ${t.lobby.offline}`}
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
|
|
@ -278,7 +261,7 @@ export function LobbyView({ snapshot }: { snapshot: RoomSnapshot }) {
|
|||
{isHost && (
|
||||
<div className="flex items-center justify-between gap-2 pt-1">
|
||||
<span className="text-muted-foreground text-xs">
|
||||
Bots : {botCount}
|
||||
{t.lobby.bots} : {botCount}
|
||||
</span>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
|
|
@ -306,14 +289,14 @@ export function LobbyView({ snapshot }: { snapshot: RoomSnapshot }) {
|
|||
{isHost && (
|
||||
<section className="flex flex-col gap-4 rounded-xl border p-4">
|
||||
<h2 className="text-muted-foreground text-xs font-medium uppercase tracking-wide">
|
||||
Réglages de la partie
|
||||
{t.lobby.settings}
|
||||
</h2>
|
||||
|
||||
{/* Mode de jeu */}
|
||||
<div className="flex flex-col gap-2">
|
||||
<span className="text-sm font-medium">Mode de jeu</span>
|
||||
<span className="text-sm font-medium">{t.lobby.gameMode}</span>
|
||||
<div className="grid grid-cols-4 gap-2">
|
||||
{GAME_TYPES.map(({ value, label, Icon, needsThree }) => {
|
||||
{GAME_TYPES.map(({ value, Icon, needsThree }) => {
|
||||
const locked = needsThree && !blindtestAvailable
|
||||
const active = effectiveType === value
|
||||
const tile = (
|
||||
|
|
@ -331,13 +314,13 @@ export function LobbyView({ snapshot }: { snapshot: RoomSnapshot }) {
|
|||
}`}
|
||||
>
|
||||
<Icon className="size-5" />
|
||||
{label}
|
||||
{t.gameTypes[value]}
|
||||
</button>
|
||||
)
|
||||
return locked ? (
|
||||
<Tooltip key={value}>
|
||||
<TooltipTrigger asChild>{tile}</TooltipTrigger>
|
||||
<TooltipContent>{BLINDTEST_LOCK_HINT}</TooltipContent>
|
||||
<TooltipContent>{t.lobby.blindtestLockHint}</TooltipContent>
|
||||
</Tooltip>
|
||||
) : (
|
||||
tile
|
||||
|
|
@ -346,8 +329,7 @@ export function LobbyView({ snapshot }: { snapshot: RoomSnapshot }) {
|
|||
</div>
|
||||
{!blindtestAvailable && (
|
||||
<p className="text-muted-foreground text-xs">
|
||||
Le blindtest se débloque à 3 joueurs dont 2 réels (un bot ne peut
|
||||
pas être DJ).
|
||||
{t.lobby.blindtestUnlock}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -355,7 +337,7 @@ export function LobbyView({ snapshot }: { snapshot: RoomSnapshot }) {
|
|||
{/* Sous-modes du mixte (toggles) */}
|
||||
{isMixed && (
|
||||
<div className="flex flex-col gap-2">
|
||||
<span className="text-sm font-medium">Sous-modes inclus</span>
|
||||
<span className="text-sm font-medium">{t.lobby.subModes}</span>
|
||||
<div className="flex gap-2">
|
||||
{(["quiz", "image", "blindtest"] as const).map((m) => {
|
||||
const locked = m === "blindtest" && !blindtestAvailable
|
||||
|
|
@ -374,13 +356,13 @@ export function LobbyView({ snapshot }: { snapshot: RoomSnapshot }) {
|
|||
: "border-input hover:bg-muted/60"
|
||||
}`}
|
||||
>
|
||||
{MIX_LABELS[m]}
|
||||
{t.mixModes[m]}
|
||||
</button>
|
||||
)
|
||||
return locked ? (
|
||||
<Tooltip key={m}>
|
||||
<TooltipTrigger asChild>{tile}</TooltipTrigger>
|
||||
<TooltipContent>{BLINDTEST_LOCK_HINT}</TooltipContent>
|
||||
<TooltipContent>{t.lobby.blindtestLockHint}</TooltipContent>
|
||||
</Tooltip>
|
||||
) : (
|
||||
tile
|
||||
|
|
@ -394,7 +376,7 @@ export function LobbyView({ snapshot }: { snapshot: RoomSnapshot }) {
|
|||
{showQuiz && (
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="flex items-center gap-1.5 text-sm font-medium">
|
||||
<Brain className="size-4" /> Questions de quiz
|
||||
<Brain className="size-4" /> {t.lobby.quizCount}
|
||||
</span>
|
||||
<Stepper value={quizCount} min={1} max={20} onChange={setQuizCount} />
|
||||
</div>
|
||||
|
|
@ -405,7 +387,7 @@ export function LobbyView({ snapshot }: { snapshot: RoomSnapshot }) {
|
|||
<div className="flex flex-col gap-1">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="flex items-center gap-1.5 text-sm font-medium">
|
||||
<ImageIcon className="size-4" /> Images à deviner
|
||||
<ImageIcon className="size-4" /> {t.lobby.imageCount}
|
||||
</span>
|
||||
<Stepper
|
||||
value={imageCount}
|
||||
|
|
@ -414,9 +396,7 @@ export function LobbyView({ snapshot }: { snapshot: RoomSnapshot }) {
|
|||
onChange={setImageCount}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-muted-foreground text-xs">
|
||||
Nécessite des questions « Image » créées dans le back-office.
|
||||
</p>
|
||||
<p className="text-muted-foreground text-xs">{t.lobby.imageHint}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
|
@ -424,7 +404,7 @@ export function LobbyView({ snapshot }: { snapshot: RoomSnapshot }) {
|
|||
{(showQuiz || showImage) && allCategories.length > 0 && (
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<span className="flex items-center gap-1.5 text-sm font-medium">
|
||||
<Filter className="size-4" /> Catégories
|
||||
<Filter className="size-4" /> {t.lobby.categories}
|
||||
</span>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
<button
|
||||
|
|
@ -435,7 +415,7 @@ export function LobbyView({ snapshot }: { snapshot: RoomSnapshot }) {
|
|||
: "border-input hover:bg-muted/60"
|
||||
}`}
|
||||
>
|
||||
Toutes
|
||||
{t.lobby.allCategories}
|
||||
</button>
|
||||
{allCategories.map((c) => (
|
||||
<button
|
||||
|
|
@ -457,7 +437,7 @@ export function LobbyView({ snapshot }: { snapshot: RoomSnapshot }) {
|
|||
{/* Niveau des bots (si au moins un bot dans la partie) */}
|
||||
{botCount > 0 && (
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<span className="text-sm font-medium">🤖 Niveau des bots</span>
|
||||
<span className="text-sm font-medium">{t.lobby.botLevel}</span>
|
||||
<div className="flex gap-1">
|
||||
{BOT_DIFFICULTIES.map((d) => (
|
||||
<Button
|
||||
|
|
@ -467,7 +447,7 @@ export function LobbyView({ snapshot }: { snapshot: RoomSnapshot }) {
|
|||
variant={botDifficulty === d ? "default" : "secondary"}
|
||||
onClick={() => updateSettings({ botDifficulty: d })}
|
||||
>
|
||||
{BOT_DIFF_LABELS[d]}
|
||||
{t.botDifficulty[d]}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
|
|
@ -479,7 +459,7 @@ export function LobbyView({ snapshot }: { snapshot: RoomSnapshot }) {
|
|||
<div className="flex flex-col gap-3 border-t pt-3">
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<span className="flex items-center gap-1.5 text-sm font-medium">
|
||||
<Music className="size-4" /> Mode blindtest
|
||||
<Music className="size-4" /> {t.lobby.blindtestMode}
|
||||
</span>
|
||||
<div className="flex gap-1">
|
||||
{(["title_artist", "who_added", "mixed"] as const).map((m) => (
|
||||
|
|
@ -490,14 +470,14 @@ export function LobbyView({ snapshot }: { snapshot: RoomSnapshot }) {
|
|||
variant={blindtestMode === m ? "default" : "secondary"}
|
||||
onClick={() => updateSettings({ blindtestMode: m })}
|
||||
>
|
||||
{MODE_LABELS[m]}
|
||||
{t.blindtestModes[m]}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="flex items-center gap-1.5 text-sm font-medium">
|
||||
<ListMusic className="size-4" /> Titres par joueur
|
||||
<ListMusic className="size-4" /> {t.lobby.tracksPerPlayer}
|
||||
</span>
|
||||
<Stepper
|
||||
value={tracksPerPlayer}
|
||||
|
|
@ -516,19 +496,19 @@ export function LobbyView({ snapshot }: { snapshot: RoomSnapshot }) {
|
|||
{isHost ? (
|
||||
<div className="flex flex-col gap-1">
|
||||
<Button disabled={busy || !canStart} onClick={start}>
|
||||
<Play /> {busy ? "Lancement…" : `Lancer (${rounds.length} manches)`}
|
||||
<Play />{" "}
|
||||
{busy ? t.lobby.launching : t.lobby.launch(rounds.length)}
|
||||
</Button>
|
||||
{showBlindtest && !allSubmitted && (
|
||||
<p className="text-muted-foreground text-center text-xs">
|
||||
En attente que tout le monde ait soumis ses {tracksPerPlayer}{" "}
|
||||
titre(s).
|
||||
{t.lobby.waitTracks(tracksPerPlayer)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-muted-foreground text-center text-xs">
|
||||
En attente du lancement par l'hôte…
|
||||
{showBlindtest && ` (${totalTracks} titres soumis)`}
|
||||
{t.lobby.waitHost}
|
||||
{showBlindtest && t.lobby.tracksSubmitted(totalTracks)}
|
||||
</p>
|
||||
)}
|
||||
|
||||
|
|
@ -537,7 +517,7 @@ export function LobbyView({ snapshot }: { snapshot: RoomSnapshot }) {
|
|||
{history.length > 0 && (
|
||||
<details className="rounded-xl border text-left">
|
||||
<summary className="text-muted-foreground cursor-pointer p-3 text-sm font-medium select-none">
|
||||
Parties précédentes ({history.length})
|
||||
{t.lobby.prevGames(history.length)}
|
||||
</summary>
|
||||
<ul className="flex flex-col gap-2 p-3 pt-0">
|
||||
{history.map((g) => {
|
||||
|
|
@ -545,10 +525,10 @@ export function LobbyView({ snapshot }: { snapshot: RoomSnapshot }) {
|
|||
return (
|
||||
<li key={g.id} className="bg-muted/40 rounded-lg p-2 text-xs">
|
||||
<p className="text-muted-foreground text-[10px] uppercase">
|
||||
{new Date(g.playedAt).toLocaleString("fr-FR", {
|
||||
dateStyle: "short",
|
||||
timeStyle: "short",
|
||||
})}
|
||||
{new Date(g.playedAt).toLocaleString(
|
||||
lang === "fr" ? "fr-FR" : "en-US",
|
||||
{ dateStyle: "short", timeStyle: "short" }
|
||||
)}
|
||||
{" · "}
|
||||
{g.modes.join(", ")}
|
||||
</p>
|
||||
|
|
@ -585,6 +565,7 @@ function TrackSubmission({
|
|||
}) {
|
||||
const submitTrack = useRoomStore((s) => s.submitTrack)
|
||||
const removeTrack = useRoomStore((s) => s.removeTrack)
|
||||
const { t } = useI18n()
|
||||
const [url, setUrl] = useState("")
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
const [feedback, setFeedback] = useState<string | null>(null)
|
||||
|
|
@ -605,7 +586,7 @@ function TrackSubmission({
|
|||
])
|
||||
setUrl("")
|
||||
} else {
|
||||
setFeedback(res.reason ?? "Refusé")
|
||||
setFeedback(res.reason ?? t.lobby.rejected)
|
||||
}
|
||||
setSubmitting(false)
|
||||
}
|
||||
|
|
@ -620,40 +601,48 @@ function TrackSubmission({
|
|||
return (
|
||||
<div className="flex flex-col gap-2">
|
||||
<span className="text-sm font-medium">
|
||||
Tes titres ({myCount}/{tracksPerPlayer})
|
||||
{t.lobby.myTracks(myCount, tracksPerPlayer)}
|
||||
</span>
|
||||
|
||||
{tracks.length > 0 && (
|
||||
<ul className="flex flex-col gap-2">
|
||||
{tracks.map((t) => (
|
||||
{tracks.map((track) => (
|
||||
<li
|
||||
key={t.trackId}
|
||||
key={track.trackId}
|
||||
className="bg-muted/40 flex items-center gap-3 rounded-lg p-2"
|
||||
>
|
||||
<img
|
||||
src={`https://img.youtube.com/vi/${t.youtubeId}/mqdefault.jpg`}
|
||||
src={`https://img.youtube.com/vi/${track.youtubeId}/mqdefault.jpg`}
|
||||
alt=""
|
||||
className="h-10 w-16 shrink-0 rounded object-cover"
|
||||
/>
|
||||
<span className="line-clamp-2 flex-1 text-xs">{t.title}</span>
|
||||
<span className="line-clamp-2 flex-1 text-xs">{track.title}</span>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<a
|
||||
href={`https://www.youtube.com/watch?v=${t.youtubeId}`}
|
||||
href={`https://www.youtube.com/watch?v=${track.youtubeId}`}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
title="Ouvrir sur YouTube"
|
||||
>
|
||||
<Button size="icon-sm" variant="secondary">
|
||||
<SiYoutube color="default" />
|
||||
</Button>
|
||||
</a>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>{t.lobby.openYoutube}</TooltipContent>
|
||||
</Tooltip>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
size="icon-sm"
|
||||
variant="secondary"
|
||||
onClick={() => remove(t.trackId)}
|
||||
title="Supprimer"
|
||||
onClick={() => remove(track.trackId)}
|
||||
>
|
||||
<Trash2 />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>{t.lobby.remove}</TooltipContent>
|
||||
</Tooltip>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
|
@ -663,7 +652,7 @@ function TrackSubmission({
|
|||
<div className="flex gap-2">
|
||||
<input
|
||||
className={inputClass}
|
||||
placeholder="Lien YouTube"
|
||||
placeholder={t.lobby.youtubePlaceholder}
|
||||
value={url}
|
||||
disabled={submitting}
|
||||
onChange={(e) => setUrl(e.target.value)}
|
||||
|
|
@ -674,7 +663,7 @@ function TrackSubmission({
|
|||
disabled={submitting || !url.trim()}
|
||||
onClick={submit}
|
||||
>
|
||||
<SiYoutube color="default" /> Ajouter
|
||||
<SiYoutube color="default" /> {t.lobby.add}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import { Check, Crown } from "lucide-react"
|
|||
import type { RoomSnapshot } from "@nerdware/shared"
|
||||
import { Avatar } from "@/components/avatar"
|
||||
import { celebrateLead } from "@/lib/confetti"
|
||||
import { useI18n } from "@/i18n/context"
|
||||
|
||||
interface PlayerCardsProps {
|
||||
snapshot: RoomSnapshot
|
||||
|
|
@ -21,6 +22,7 @@ export function PlayerCards({
|
|||
showVoteStatus = false,
|
||||
votedIds = [],
|
||||
}: PlayerCardsProps) {
|
||||
const { t } = useI18n()
|
||||
const scoreOf = (id: string) =>
|
||||
snapshot.scores.find((s) => s.playerId === id)?.score ?? 0
|
||||
|
||||
|
|
@ -79,7 +81,9 @@ export function PlayerCards({
|
|||
/>
|
||||
<span className="max-w-24 truncate text-xs font-medium">
|
||||
{p.name}
|
||||
{isMe && <span className="text-muted-foreground"> (toi)</span>}
|
||||
{isMe && (
|
||||
<span className="text-muted-foreground"> {t.common.you}</span>
|
||||
)}
|
||||
</span>
|
||||
|
||||
<motion.span
|
||||
|
|
@ -100,7 +104,7 @@ export function PlayerCards({
|
|||
transition={{ type: "spring", stiffness: 600, damping: 18 }}
|
||||
className="flex items-center gap-0.5 text-[10px] font-medium text-green-500"
|
||||
>
|
||||
<Check className="size-3" /> Prêt
|
||||
<Check className="size-3" /> {t.playerCards.ready}
|
||||
</motion.span>
|
||||
) : (
|
||||
<span className="flex items-center gap-1 text-[10px]">
|
||||
|
|
@ -109,7 +113,9 @@ export function PlayerCards({
|
|||
transition={{ duration: 1.1, repeat: Infinity }}
|
||||
className="bg-muted-foreground size-1.5 rounded-full"
|
||||
/>
|
||||
<span className="text-muted-foreground">en attente</span>
|
||||
<span className="text-muted-foreground">
|
||||
{t.playerCards.waiting}
|
||||
</span>
|
||||
</span>
|
||||
))}
|
||||
</motion.div>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import { useState } from "react"
|
|||
import { Button } from "@workspace/ui/components/button"
|
||||
import { useRoomStore } from "@/store/room"
|
||||
import { Avatar } from "@/components/avatar"
|
||||
import { useI18n } from "@/i18n/context"
|
||||
|
||||
const inputClass =
|
||||
"border-input bg-background h-10 w-full rounded-md border px-3 py-2 text-center text-sm focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none"
|
||||
|
|
@ -9,6 +10,7 @@ const inputClass =
|
|||
/** Choix du pseudo dans la room, avec aperçu de l'avatar en temps réel. */
|
||||
export function PseudoScreen({ code }: { code: string }) {
|
||||
const setName = useRoomStore((s) => s.setName)
|
||||
const { t } = useI18n()
|
||||
const [name, setName_] = useState("")
|
||||
const canSubmit = name.trim().length > 0
|
||||
|
||||
|
|
@ -16,16 +18,16 @@ export function PseudoScreen({ code }: { code: string }) {
|
|||
<div className="flex min-h-svh items-center justify-center p-6">
|
||||
<div className="flex w-full max-w-xs flex-col items-center gap-5">
|
||||
<p className="text-muted-foreground text-xs uppercase">
|
||||
Room {code}
|
||||
{t.pseudo.room(code)}
|
||||
</p>
|
||||
<Avatar
|
||||
seed={name.trim() || "?"}
|
||||
className="size-28 ring-2 ring-primary/30"
|
||||
/>
|
||||
<p className="font-heading text-lg font-bold">Choisis ton pseudo</p>
|
||||
<p className="font-heading text-lg font-bold">{t.pseudo.choose}</p>
|
||||
<input
|
||||
className={inputClass}
|
||||
placeholder="Ton pseudo"
|
||||
placeholder={t.pseudo.placeholder}
|
||||
value={name}
|
||||
maxLength={24}
|
||||
autoFocus
|
||||
|
|
@ -37,7 +39,7 @@ export function PseudoScreen({ code }: { code: string }) {
|
|||
disabled={!canSubmit}
|
||||
onClick={() => setName(name)}
|
||||
>
|
||||
Entrer dans la room
|
||||
{t.pseudo.enter}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import type {
|
|||
import { Button } from "@workspace/ui/components/button"
|
||||
import { useRoomStore } from "@/store/room"
|
||||
import { Countdown } from "@/components/countdown"
|
||||
import { useI18n, type Dict } from "@/i18n/context"
|
||||
|
||||
const inputClass =
|
||||
"border-input bg-background h-10 w-full rounded-md border px-3 py-2 text-sm focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none disabled:opacity-50"
|
||||
|
|
@ -24,11 +25,10 @@ export function QuizView({ snapshot }: { snapshot: RoomSnapshot }) {
|
|||
const playerId = useRoomStore((s) => s.playerId)
|
||||
const vote = useRoomStore((s) => s.vote)
|
||||
const voteText = useRoomStore((s) => s.voteText)
|
||||
const { t } = useI18n()
|
||||
|
||||
if (!round) {
|
||||
return (
|
||||
<p className="text-muted-foreground text-sm">Préparation de la manche…</p>
|
||||
)
|
||||
return <p className="text-muted-foreground text-sm">{t.common.loading}</p>
|
||||
}
|
||||
|
||||
const question = round.payload as QuizQuestionPayload
|
||||
|
|
@ -62,7 +62,7 @@ export function QuizView({ snapshot }: { snapshot: RoomSnapshot }) {
|
|||
<div className="flex w-full max-w-lg flex-col gap-5">
|
||||
<header className="flex items-center justify-between">
|
||||
<span className="text-muted-foreground text-xs uppercase">
|
||||
Question {snapshot.currentRound + 1} / {snapshot.totalRounds}
|
||||
{t.game.question(snapshot.currentRound + 1, snapshot.totalRounds)}
|
||||
{question.category ? ` · ${question.category}` : ""}
|
||||
</span>
|
||||
{!showReveal && (
|
||||
|
|
@ -92,10 +92,7 @@ export function QuizView({ snapshot }: { snapshot: RoomSnapshot }) {
|
|||
)}
|
||||
|
||||
{isText ? (
|
||||
<FreeAnswer
|
||||
disabled={showReveal || hasVoted}
|
||||
onSubmit={voteText}
|
||||
/>
|
||||
<FreeAnswer disabled={showReveal || hasVoted} onSubmit={voteText} t={t} />
|
||||
) : (
|
||||
<div className="flex flex-col gap-2">
|
||||
{(question.choices ?? []).map((choice, index) => (
|
||||
|
|
@ -114,13 +111,13 @@ export function QuizView({ snapshot }: { snapshot: RoomSnapshot }) {
|
|||
{!showReveal &&
|
||||
(hasVoted ? (
|
||||
<p className="text-muted-foreground text-center text-xs">
|
||||
Réponse envoyée — en attente des autres
|
||||
{t.game.answerSent}
|
||||
{voteProgress ? ` (${voteProgress.count}/${voteProgress.total})` : ""}
|
||||
</p>
|
||||
) : (
|
||||
voteProgress && (
|
||||
<p className="text-muted-foreground text-center text-xs">
|
||||
{voteProgress.count}/{voteProgress.total} ont répondu
|
||||
{t.game.answeredCount(voteProgress.count, voteProgress.total)}
|
||||
</p>
|
||||
)
|
||||
))}
|
||||
|
|
@ -129,7 +126,7 @@ export function QuizView({ snapshot }: { snapshot: RoomSnapshot }) {
|
|||
<div className="flex flex-col items-center gap-1">
|
||||
{isText && (
|
||||
<p className="text-sm">
|
||||
<span className="text-muted-foreground">Réponse : </span>
|
||||
<span className="text-muted-foreground">{t.game.answer} </span>
|
||||
<span className="font-medium">{truth?.answer}</span>
|
||||
</p>
|
||||
)}
|
||||
|
|
@ -137,10 +134,10 @@ export function QuizView({ snapshot }: { snapshot: RoomSnapshot }) {
|
|||
className={`text-center text-sm font-medium ${myResult?.correct ? "text-green-500" : "text-red-500"}`}
|
||||
>
|
||||
{myResult?.correct
|
||||
? "Bonne réponse ! 🎉"
|
||||
? t.game.correct
|
||||
: !hasVoted
|
||||
? "Pas de réponse 😴"
|
||||
: "Raté 💥"}
|
||||
? t.game.noAnswer
|
||||
: t.game.wrong}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -193,23 +190,25 @@ function ImageReveal({
|
|||
function FreeAnswer({
|
||||
disabled,
|
||||
onSubmit,
|
||||
t,
|
||||
}: {
|
||||
disabled: boolean
|
||||
onSubmit: (text: string) => void
|
||||
t: Dict
|
||||
}) {
|
||||
const [text, setText] = useState("")
|
||||
return (
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
className={inputClass}
|
||||
placeholder="Ta réponse"
|
||||
placeholder={t.game.yourAnswer}
|
||||
value={text}
|
||||
disabled={disabled}
|
||||
onChange={(e) => setText(e.target.value)}
|
||||
onKeyDown={(e) => e.key === "Enter" && text.trim() && onSubmit(text)}
|
||||
/>
|
||||
<Button disabled={disabled || !text.trim()} onClick={() => onSubmit(text)}>
|
||||
Valider
|
||||
{t.game.validate}
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,11 +1,18 @@
|
|||
import { useState } from "react"
|
||||
import { Check, Copy, Link2 } from "lucide-react"
|
||||
import { Button } from "@workspace/ui/components/button"
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipTrigger,
|
||||
} from "@workspace/ui/components/tooltip"
|
||||
import { useI18n } from "@/i18n/context"
|
||||
|
||||
type Copied = "code" | "link" | null
|
||||
|
||||
/** Code de room copiable + bouton pour copier le lien d'invitation. */
|
||||
export function RoomCode({ code }: { code: string }) {
|
||||
const { t } = useI18n()
|
||||
const [copied, setCopied] = useState<Copied>(null)
|
||||
|
||||
async function copy(what: Copied, text: string) {
|
||||
|
|
@ -22,14 +29,15 @@ export function RoomCode({ code }: { code: string }) {
|
|||
|
||||
return (
|
||||
<div className="flex items-center gap-3">
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<button
|
||||
onClick={() => copy("code", code)}
|
||||
title="Copier le code"
|
||||
className="group flex items-center gap-2 text-left"
|
||||
>
|
||||
<span>
|
||||
<span className="text-muted-foreground text-xs uppercase">
|
||||
Code room
|
||||
{t.roomCode.label}
|
||||
</span>
|
||||
<span className="font-heading block text-2xl font-bold tracking-widest">
|
||||
{code}
|
||||
|
|
@ -41,16 +49,23 @@ export function RoomCode({ code }: { code: string }) {
|
|||
<Copy className="text-muted-foreground group-hover:text-foreground size-4 transition-colors" />
|
||||
)}
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>{t.roomCode.copyCode}</TooltipContent>
|
||||
</Tooltip>
|
||||
|
||||
<Button
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
onClick={() => copy("link", link)}
|
||||
title="Copier le lien d'invitation"
|
||||
>
|
||||
{copied === "link" ? <Check className="text-green-500" /> : <Link2 />}
|
||||
{copied === "link" ? "Copié" : "Lien"}
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button size="sm" variant="secondary" onClick={() => copy("link", link)}>
|
||||
{copied === "link" ? (
|
||||
<Check className="text-green-500" />
|
||||
) : (
|
||||
<Link2 />
|
||||
)}
|
||||
{copied === "link" ? t.roomCode.copied : t.roomCode.link}
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>{t.roomCode.copyLink}</TooltipContent>
|
||||
</Tooltip>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { useEffect, useState } from "react"
|
||||
import { createPortal } from "react-dom"
|
||||
import { AnimatePresence, motion } from "framer-motion"
|
||||
import { useI18n } from "@/i18n/context"
|
||||
|
||||
/** Catégorie visuelle de la transition (image_reveal est distinct du quiz). */
|
||||
export type TransitionKind = "quiz" | "image" | "blindtest"
|
||||
|
|
@ -72,6 +73,7 @@ export function RoundTransition({
|
|||
index: number
|
||||
modeChanged: boolean
|
||||
}) {
|
||||
const { t } = useI18n()
|
||||
const [show, setShow] = useState(true)
|
||||
const theme = THEME[kind]
|
||||
const [media] = useState(() => {
|
||||
|
|
@ -142,7 +144,7 @@ export function RoundTransition({
|
|||
) : (
|
||||
<>
|
||||
<span className="font-heading text-2xl font-black tracking-[0.35em] text-white uppercase drop-shadow">
|
||||
{theme.kind}
|
||||
{t.transition.kind[kind]}
|
||||
</span>
|
||||
<motion.span
|
||||
className={`font-heading text-[26vmin] leading-none font-black ${theme.accent} drop-shadow-[0_5px_0_rgba(0,0,0,0.25)]`}
|
||||
|
|
@ -163,7 +165,7 @@ export function RoundTransition({
|
|||
transition={{ delay: 0.5 }}
|
||||
className="font-heading -rotate-3 text-3xl font-black text-white italic"
|
||||
>
|
||||
PRÊT ?!
|
||||
{t.transition.ready}
|
||||
</motion.span>
|
||||
</motion.div>
|
||||
)}
|
||||
|
|
|
|||
36
apps/web/src/i18n/context.ts
Normal file
36
apps/web/src/i18n/context.ts
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
import { createContext, useContext } from "react"
|
||||
import { fr } from "./fr"
|
||||
|
||||
export type Lang = "fr" | "en"
|
||||
/** Forme du dictionnaire, dérivée du FR (source de vérité). */
|
||||
export type Dict = typeof fr
|
||||
|
||||
export const LANG_KEY = "nerdware-lang"
|
||||
|
||||
export function detectLang(): Lang {
|
||||
try {
|
||||
const stored = localStorage.getItem(LANG_KEY)
|
||||
if (stored === "fr" || stored === "en") {
|
||||
return stored
|
||||
}
|
||||
} catch {
|
||||
// localStorage indisponible : on retombe sur la langue du navigateur
|
||||
}
|
||||
return navigator.language?.toLowerCase().startsWith("fr") ? "fr" : "en"
|
||||
}
|
||||
|
||||
export interface I18nContextValue {
|
||||
lang: Lang
|
||||
t: Dict
|
||||
setLang: (lang: Lang) => void
|
||||
}
|
||||
|
||||
export const I18nContext = createContext<I18nContextValue | null>(null)
|
||||
|
||||
export function useI18n(): I18nContextValue {
|
||||
const ctx = useContext(I18nContext)
|
||||
if (!ctx) {
|
||||
throw new Error("useI18n doit être utilisé dans <I18nProvider>")
|
||||
}
|
||||
return ctx
|
||||
}
|
||||
180
apps/web/src/i18n/en.ts
Normal file
180
apps/web/src/i18n/en.ts
Normal file
|
|
@ -0,0 +1,180 @@
|
|||
// Dictionnaire EN. Doit respecter la forme de `fr` (Dict) — sinon erreur TS.
|
||||
|
||||
import type { Dict } from "./context"
|
||||
|
||||
export const en: Dict = {
|
||||
common: {
|
||||
you: "(you)",
|
||||
back: "Back to home",
|
||||
backShort: "Back",
|
||||
loading: "Loading…",
|
||||
error: "Error",
|
||||
},
|
||||
home: {
|
||||
tagline: "Geek culture party game",
|
||||
create: "Create a room",
|
||||
orJoin: "or join",
|
||||
codePlaceholder: "CODE",
|
||||
join: "Join",
|
||||
connecting: "Connecting to server…",
|
||||
},
|
||||
pseudo: {
|
||||
room: (code: string) => `Room ${code}`,
|
||||
choose: "Choose your nickname",
|
||||
placeholder: "Your nickname",
|
||||
enter: "Enter the room",
|
||||
},
|
||||
joinPage: {
|
||||
connecting: (code: string) => `Joining room ${code}…`,
|
||||
notFound: "Room not found.",
|
||||
},
|
||||
room: {
|
||||
notFound: "Room not found or session lost.",
|
||||
connected: "Connected",
|
||||
disconnected: "Disconnected",
|
||||
leave: "Leave",
|
||||
},
|
||||
roomCode: {
|
||||
label: "Room code",
|
||||
copyCode: "Copy code",
|
||||
copyLink: "Copy invite link",
|
||||
link: "Link",
|
||||
copied: "Copied",
|
||||
},
|
||||
lobby: {
|
||||
players: (n: number) => `Players (${n})`,
|
||||
host: "Host",
|
||||
bot: "🤖 Bot",
|
||||
offline: "offline",
|
||||
bots: "Bots",
|
||||
settings: "Game settings",
|
||||
gameMode: "Game mode",
|
||||
blindtestLockHint: "3 players incl. 2 real ones (a bot can't DJ)",
|
||||
blindtestUnlock:
|
||||
"Blindtest unlocks at 3 players incl. 2 real ones (a bot can't DJ).",
|
||||
subModes: "Included sub-modes",
|
||||
quizCount: "Quiz questions",
|
||||
imageCount: "Images to guess",
|
||||
imageHint: "Requires “Image” questions created in the back-office.",
|
||||
categories: "Categories",
|
||||
allCategories: "All",
|
||||
botLevel: "🤖 Bot difficulty",
|
||||
blindtestMode: "Blindtest mode",
|
||||
tracksPerPlayer: "Tracks per player",
|
||||
launch: (n: number) => `Start (${n} rounds)`,
|
||||
launching: "Starting…",
|
||||
waitTracks: (n: number) =>
|
||||
`Waiting for everyone to submit their ${n} track(s).`,
|
||||
waitHost: "Waiting for the host to start…",
|
||||
tracksSubmitted: (n: number) => ` (${n} tracks submitted)`,
|
||||
prevGames: (n: number) => `Previous games (${n})`,
|
||||
myTracks: (count: number, max: number) => `Your tracks (${count}/${max})`,
|
||||
youtubePlaceholder: "YouTube link",
|
||||
add: "Add",
|
||||
openYoutube: "Open on YouTube",
|
||||
remove: "Remove",
|
||||
rejected: "Rejected",
|
||||
},
|
||||
gameTypes: {
|
||||
mixed: "Mixed",
|
||||
quiz: "Quiz",
|
||||
image: "Images",
|
||||
blindtest: "Blindtest",
|
||||
},
|
||||
mixModes: {
|
||||
quiz: "Quiz",
|
||||
image: "Images",
|
||||
blindtest: "Blindtest",
|
||||
},
|
||||
blindtestModes: {
|
||||
title_artist: "Title & artist",
|
||||
who_added: "Who added it?",
|
||||
mixed: "Mixed",
|
||||
},
|
||||
botDifficulty: {
|
||||
easy: "Easy",
|
||||
normal: "Normal",
|
||||
hard: "Hard",
|
||||
},
|
||||
game: {
|
||||
question: (i: number, n: number) => `Question ${i} / ${n}`,
|
||||
blindtest: (i: number, n: number) => `Blindtest ${i} / ${n}`,
|
||||
answerSent: "Answer sent — waiting for the others",
|
||||
answeredCount: (count: number, total: number) => `${count}/${total} answered`,
|
||||
answer: "Answer:",
|
||||
correct: "Correct! 🎉",
|
||||
noAnswer: "No answer 😴",
|
||||
wrong: "Wrong 💥",
|
||||
yourAnswer: "Your answer",
|
||||
validate: "Submit",
|
||||
},
|
||||
blindtest: {
|
||||
djHint: "You're the DJ 🎧 — control playback (and vote like everyone)",
|
||||
play: "Play",
|
||||
pause: "Pause",
|
||||
restart: "Start",
|
||||
yourTrack: "It's your track!",
|
||||
yourTrackTitleArtist: "You don't vote. Enjoy while the others search.",
|
||||
yourTrackWhoAdded:
|
||||
"You don't vote — your goal: nobody guesses you added it. +50 per fooled player.",
|
||||
titlePlaceholder: "Title",
|
||||
artistPlaceholder: "Artist",
|
||||
whoAdded: "Who added it?",
|
||||
vote: "Vote",
|
||||
pickPlayer: "Pick a player",
|
||||
revealTitle: "Title",
|
||||
revealArtist: "Artist",
|
||||
revealAddedBy: "Added by",
|
||||
points: (n: number) => `+${n} points 🎉`,
|
||||
submit: "Submit my answer",
|
||||
},
|
||||
playerCards: {
|
||||
ready: "Ready",
|
||||
waiting: "waiting",
|
||||
},
|
||||
transition: {
|
||||
kind: {
|
||||
quiz: "Question",
|
||||
image: "Image",
|
||||
blindtest: "Track",
|
||||
},
|
||||
ready: "READY ?!",
|
||||
},
|
||||
end: {
|
||||
over: "Game over",
|
||||
winner: (name: string) => `🏆 ${name} wins!`,
|
||||
copy: "Copy results",
|
||||
copied: "Copied!",
|
||||
replay: "Play again",
|
||||
waitHostReplay: "Waiting for the host to start a new game…",
|
||||
leave: "Leave",
|
||||
resultsTitle: "NerdWare — Results",
|
||||
ranking: "🏆 Ranking",
|
||||
rounds: "Rounds",
|
||||
tracksTitle: "Tracks from the game",
|
||||
playlist: "Playlist",
|
||||
addedBy: (name: string) => `added by ${name}`,
|
||||
searchSpotify: "Search on Spotify",
|
||||
openYoutube: "Open on YouTube",
|
||||
awards: "Awards",
|
||||
awardPerfect: "Flawless",
|
||||
awardBrain: "The brain",
|
||||
awardFastest: "The fastest",
|
||||
awardDecoy: "Master of deception",
|
||||
awardBoulet: "The dud",
|
||||
recapTitle: (n: number) => `Rounds recap (${n})`,
|
||||
noAnswer: "No answer",
|
||||
you: " (you)",
|
||||
},
|
||||
errors: {
|
||||
ROOM_NOT_FOUND: "This room doesn't exist.",
|
||||
ROOM_IN_PROGRESS: "The game has already started.",
|
||||
ALREADY_STARTED: "Game already started.",
|
||||
NO_ROUNDS: "No round configured.",
|
||||
NEED_THREE: "Blindtest needs at least 3 players incl. 2 real ones.",
|
||||
TRACKS_PENDING: "Not all players have submitted their tracks yet.",
|
||||
CODE_EXHAUSTED: "Couldn't generate a room code.",
|
||||
REJOIN_FAILED: "Reconnection failed.",
|
||||
UNKNOWN_MODE: "Round unavailable.",
|
||||
},
|
||||
}
|
||||
10
apps/web/src/i18n/error.ts
Normal file
10
apps/web/src/i18n/error.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import type { Dict } from "./context"
|
||||
|
||||
/** Traduit une erreur serveur via son code, sinon retombe sur son message. */
|
||||
export function errorMessage(t: Dict, err: unknown): string {
|
||||
const e = err as { code?: string; message?: string } | null
|
||||
if (e?.code && e.code in t.errors) {
|
||||
return t.errors[e.code as keyof typeof t.errors]
|
||||
}
|
||||
return e?.message ?? t.common.error
|
||||
}
|
||||
179
apps/web/src/i18n/fr.ts
Normal file
179
apps/web/src/i18n/fr.ts
Normal file
|
|
@ -0,0 +1,179 @@
|
|||
// Dictionnaire FR — source de vérité de la forme du dictionnaire (voir en.ts).
|
||||
|
||||
export const fr = {
|
||||
common: {
|
||||
you: "(toi)",
|
||||
back: "Retour à l'accueil",
|
||||
backShort: "Retour",
|
||||
loading: "Chargement…",
|
||||
error: "Erreur",
|
||||
},
|
||||
home: {
|
||||
tagline: "Party game culture geek",
|
||||
create: "Créer une room",
|
||||
orJoin: "ou rejoindre",
|
||||
codePlaceholder: "CODE",
|
||||
join: "Rejoindre",
|
||||
connecting: "Connexion au serveur…",
|
||||
},
|
||||
pseudo: {
|
||||
room: (code: string) => `Room ${code}`,
|
||||
choose: "Choisis ton pseudo",
|
||||
placeholder: "Ton pseudo",
|
||||
enter: "Entrer dans la room",
|
||||
},
|
||||
joinPage: {
|
||||
connecting: (code: string) => `Connexion à la room ${code}…`,
|
||||
notFound: "Room introuvable.",
|
||||
},
|
||||
room: {
|
||||
notFound: "Room introuvable ou session perdue.",
|
||||
connected: "Connecté",
|
||||
disconnected: "Déconnecté",
|
||||
leave: "Quitter",
|
||||
},
|
||||
roomCode: {
|
||||
label: "Code room",
|
||||
copyCode: "Copier le code",
|
||||
copyLink: "Copier le lien d'invitation",
|
||||
link: "Lien",
|
||||
copied: "Copié",
|
||||
},
|
||||
lobby: {
|
||||
players: (n: number) => `Joueurs (${n})`,
|
||||
host: "Hôte",
|
||||
bot: "🤖 Bot",
|
||||
offline: "hors ligne",
|
||||
bots: "Bots",
|
||||
settings: "Réglages de la partie",
|
||||
gameMode: "Mode de jeu",
|
||||
blindtestLockHint: "3 joueurs dont 2 réels (un bot ne peut pas être DJ)",
|
||||
blindtestUnlock:
|
||||
"Le blindtest se débloque à 3 joueurs dont 2 réels (un bot ne peut pas être DJ).",
|
||||
subModes: "Sous-modes inclus",
|
||||
quizCount: "Questions de quiz",
|
||||
imageCount: "Images à deviner",
|
||||
imageHint: "Nécessite des questions « Image » créées dans le back-office.",
|
||||
categories: "Catégories",
|
||||
allCategories: "Toutes",
|
||||
botLevel: "🤖 Niveau des bots",
|
||||
blindtestMode: "Mode blindtest",
|
||||
tracksPerPlayer: "Titres par joueur",
|
||||
launch: (n: number) => `Lancer (${n} manches)`,
|
||||
launching: "Lancement…",
|
||||
waitTracks: (n: number) =>
|
||||
`En attente que tout le monde ait soumis ses ${n} titre(s).`,
|
||||
waitHost: "En attente du lancement par l'hôte…",
|
||||
tracksSubmitted: (n: number) => ` (${n} titres soumis)`,
|
||||
prevGames: (n: number) => `Parties précédentes (${n})`,
|
||||
myTracks: (count: number, max: number) => `Tes titres (${count}/${max})`,
|
||||
youtubePlaceholder: "Lien YouTube",
|
||||
add: "Ajouter",
|
||||
openYoutube: "Ouvrir sur YouTube",
|
||||
remove: "Supprimer",
|
||||
rejected: "Refusé",
|
||||
},
|
||||
gameTypes: {
|
||||
mixed: "Mixte",
|
||||
quiz: "Quiz",
|
||||
image: "Images",
|
||||
blindtest: "Blindtest",
|
||||
},
|
||||
mixModes: {
|
||||
quiz: "Quiz",
|
||||
image: "Images",
|
||||
blindtest: "Blindtest",
|
||||
},
|
||||
blindtestModes: {
|
||||
title_artist: "Titre & artiste",
|
||||
who_added: "Qui l'a ajouté ?",
|
||||
mixed: "Mixte",
|
||||
},
|
||||
botDifficulty: {
|
||||
easy: "Facile",
|
||||
normal: "Normal",
|
||||
hard: "Difficile",
|
||||
},
|
||||
game: {
|
||||
question: (i: number, n: number) => `Question ${i} / ${n}`,
|
||||
blindtest: (i: number, n: number) => `Blindtest ${i} / ${n}`,
|
||||
answerSent: "Réponse envoyée — en attente des autres",
|
||||
answeredCount: (count: number, total: number) => `${count}/${total} ont répondu`,
|
||||
answer: "Réponse :",
|
||||
correct: "Bonne réponse ! 🎉",
|
||||
noAnswer: "Pas de réponse 😴",
|
||||
wrong: "Raté 💥",
|
||||
yourAnswer: "Ta réponse",
|
||||
validate: "Valider",
|
||||
},
|
||||
blindtest: {
|
||||
djHint: "Tu es le DJ 🎧 — pilote la lecture (et vote comme les autres)",
|
||||
play: "Play",
|
||||
pause: "Pause",
|
||||
restart: "Début",
|
||||
yourTrack: "C'est ton titre !",
|
||||
yourTrackTitleArtist:
|
||||
"Tu ne votes pas. Savoure pendant que les autres cherchent.",
|
||||
yourTrackWhoAdded:
|
||||
"Tu ne votes pas — ton but : que personne ne devine que c'est toi qui l'as ajouté. +50 par joueur trompé.",
|
||||
titlePlaceholder: "Titre",
|
||||
artistPlaceholder: "Artiste",
|
||||
whoAdded: "Qui l'a ajouté ?",
|
||||
vote: "Voter",
|
||||
pickPlayer: "Choisis un joueur",
|
||||
revealTitle: "Titre",
|
||||
revealArtist: "Artiste",
|
||||
revealAddedBy: "Ajouté par",
|
||||
points: (n: number) => `+${n} points 🎉`,
|
||||
submit: "Valider ma réponse",
|
||||
},
|
||||
playerCards: {
|
||||
ready: "Prêt",
|
||||
waiting: "en attente",
|
||||
},
|
||||
transition: {
|
||||
kind: {
|
||||
quiz: "Question",
|
||||
image: "Image",
|
||||
blindtest: "Titre",
|
||||
},
|
||||
ready: "PRÊT ?!",
|
||||
},
|
||||
end: {
|
||||
over: "Partie terminée",
|
||||
winner: (name: string) => `🏆 ${name} l'emporte !`,
|
||||
copy: "Copier les résultats",
|
||||
copied: "Copié !",
|
||||
replay: "Rejouer",
|
||||
waitHostReplay: "En attente que l'hôte relance une partie…",
|
||||
leave: "Quitter",
|
||||
resultsTitle: "NerdWare — Résultats",
|
||||
ranking: "🏆 Classement",
|
||||
rounds: "Manches",
|
||||
tracksTitle: "Les musiques de la partie",
|
||||
playlist: "Playlist",
|
||||
addedBy: (name: string) => `ajouté par ${name}`,
|
||||
searchSpotify: "Chercher sur Spotify",
|
||||
openYoutube: "Ouvrir sur YouTube",
|
||||
awards: "Récompenses",
|
||||
awardPerfect: "Sans-faute",
|
||||
awardBrain: "Le cerveau",
|
||||
awardFastest: "Le plus rapide",
|
||||
awardDecoy: "Roi de la tromperie",
|
||||
awardBoulet: "Le boulet",
|
||||
recapTitle: (n: number) => `Récapitulatif des manches (${n})`,
|
||||
noAnswer: "Aucune réponse",
|
||||
you: " (toi)",
|
||||
},
|
||||
errors: {
|
||||
ROOM_NOT_FOUND: "Cette room n'existe pas.",
|
||||
ROOM_IN_PROGRESS: "La partie a déjà commencé.",
|
||||
ALREADY_STARTED: "Partie déjà lancée.",
|
||||
NO_ROUNDS: "Aucune épreuve configurée.",
|
||||
NEED_THREE: "Le blindtest nécessite au moins 3 joueurs dont 2 réels.",
|
||||
TRACKS_PENDING: "Tous les joueurs n'ont pas encore soumis leurs titres.",
|
||||
CODE_EXHAUSTED: "Impossible de générer un code de room.",
|
||||
REJOIN_FAILED: "Reconnexion impossible.",
|
||||
UNKNOWN_MODE: "Épreuve indisponible.",
|
||||
},
|
||||
}
|
||||
25
apps/web/src/i18n/language-toggle.tsx
Normal file
25
apps/web/src/i18n/language-toggle.tsx
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
import { useI18n, type Lang } from "./context"
|
||||
|
||||
const LANGS: Lang[] = ["fr", "en"]
|
||||
|
||||
/** Petit sélecteur FR / EN. */
|
||||
export function LanguageToggle({ className = "" }: { className?: string }) {
|
||||
const { lang, setLang } = useI18n()
|
||||
return (
|
||||
<div className={`flex gap-1 ${className}`}>
|
||||
{LANGS.map((l) => (
|
||||
<button
|
||||
key={l}
|
||||
onClick={() => setLang(l)}
|
||||
className={`rounded-md px-2 py-1 text-xs font-semibold uppercase transition-colors ${
|
||||
lang === l
|
||||
? "bg-primary/10 text-foreground"
|
||||
: "text-muted-foreground hover:text-foreground"
|
||||
}`}
|
||||
>
|
||||
{l}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
30
apps/web/src/i18n/provider.tsx
Normal file
30
apps/web/src/i18n/provider.tsx
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
import { useState, type ReactNode } from "react"
|
||||
import { fr } from "./fr"
|
||||
import { en } from "./en"
|
||||
import {
|
||||
I18nContext,
|
||||
LANG_KEY,
|
||||
detectLang,
|
||||
type Dict,
|
||||
type Lang,
|
||||
} from "./context"
|
||||
|
||||
export function I18nProvider({ children }: { children: ReactNode }) {
|
||||
const [lang, setLangState] = useState<Lang>(detectLang)
|
||||
const dicts: Record<Lang, Dict> = { fr, en }
|
||||
|
||||
function setLang(next: Lang) {
|
||||
try {
|
||||
localStorage.setItem(LANG_KEY, next)
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
setLangState(next)
|
||||
}
|
||||
|
||||
return (
|
||||
<I18nContext.Provider value={{ lang, t: dicts[lang], setLang }}>
|
||||
{children}
|
||||
</I18nContext.Provider>
|
||||
)
|
||||
}
|
||||
|
|
@ -5,6 +5,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
|
|||
import "@workspace/ui/globals.css"
|
||||
import { App } from "./App.tsx"
|
||||
import { ThemeProvider } from "@/components/theme-provider.tsx"
|
||||
import { I18nProvider } from "@/i18n/provider"
|
||||
|
||||
const queryClient = new QueryClient()
|
||||
|
||||
|
|
@ -12,7 +13,9 @@ createRoot(document.getElementById("root")!).render(
|
|||
<StrictMode>
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<ThemeProvider>
|
||||
<I18nProvider>
|
||||
<App />
|
||||
</I18nProvider>
|
||||
</ThemeProvider>
|
||||
</QueryClientProvider>
|
||||
</StrictMode>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,9 @@ import { motion } from "framer-motion"
|
|||
import { LogIn, Sparkles } from "lucide-react"
|
||||
import { Button } from "@workspace/ui/components/button"
|
||||
import { useRoomStore } from "@/store/room"
|
||||
import { useI18n } from "@/i18n/context"
|
||||
import { errorMessage } from "@/i18n/error"
|
||||
import { LanguageToggle } from "@/i18n/language-toggle"
|
||||
|
||||
const inputClass =
|
||||
"border-input bg-background ring-offset-background focus-visible:ring-ring h-10 w-full rounded-md border px-3 py-2 text-sm focus-visible:ring-2 focus-visible:outline-none disabled:opacity-50"
|
||||
|
|
@ -20,6 +23,7 @@ const FLOATERS = [
|
|||
|
||||
export function HomePage() {
|
||||
const [, navigate] = useLocation()
|
||||
const { t } = useI18n()
|
||||
const createRoom = useRoomStore((s) => s.createRoom)
|
||||
const joinRoom = useRoomStore((s) => s.joinRoom)
|
||||
const connected = useRoomStore((s) => s.connected)
|
||||
|
|
@ -35,7 +39,7 @@ export function HomePage() {
|
|||
const { roomCode } = await createRoom()
|
||||
navigate(`/room/${roomCode}`)
|
||||
} catch (err) {
|
||||
setError((err as { message?: string }).message ?? "Erreur")
|
||||
setError(errorMessage(t, err))
|
||||
} finally {
|
||||
setBusy(false)
|
||||
}
|
||||
|
|
@ -48,7 +52,7 @@ export function HomePage() {
|
|||
const { roomCode } = await joinRoom(code.trim().toUpperCase())
|
||||
navigate(`/room/${roomCode}`)
|
||||
} catch (err) {
|
||||
setError((err as { message?: string }).message ?? "Erreur")
|
||||
setError(errorMessage(t, err))
|
||||
} finally {
|
||||
setBusy(false)
|
||||
}
|
||||
|
|
@ -56,6 +60,7 @@ export function HomePage() {
|
|||
|
||||
return (
|
||||
<div className="relative flex min-h-svh items-center justify-center overflow-hidden p-6">
|
||||
<LanguageToggle className="absolute top-4 right-4 z-10" />
|
||||
{/* Halo animé */}
|
||||
<motion.div
|
||||
aria-hidden
|
||||
|
|
@ -98,7 +103,7 @@ export function HomePage() {
|
|||
NerdWare
|
||||
</motion.h1>
|
||||
<p className="text-muted-foreground mt-1 flex items-center justify-center gap-1 text-sm">
|
||||
<Sparkles className="size-3.5" /> Party game culture geek
|
||||
<Sparkles className="size-3.5" /> {t.home.tagline}
|
||||
</p>
|
||||
</header>
|
||||
|
||||
|
|
@ -109,20 +114,20 @@ export function HomePage() {
|
|||
disabled={!connected || busy}
|
||||
onClick={handleCreate}
|
||||
>
|
||||
<Sparkles /> Créer une room
|
||||
<Sparkles /> {t.home.create}
|
||||
</Button>
|
||||
</motion.div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="bg-border h-px flex-1" />
|
||||
<span className="text-muted-foreground text-xs">ou rejoindre</span>
|
||||
<span className="text-muted-foreground text-xs">{t.home.orJoin}</span>
|
||||
<div className="bg-border h-px flex-1" />
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
className={`${inputClass} text-center text-lg font-bold tracking-[0.3em] uppercase`}
|
||||
placeholder="CODE"
|
||||
placeholder={t.home.codePlaceholder}
|
||||
value={code}
|
||||
maxLength={4}
|
||||
onChange={(e) => setCode(e.target.value)}
|
||||
|
|
@ -133,13 +138,13 @@ export function HomePage() {
|
|||
disabled={!connected || busy || code.trim().length === 0}
|
||||
onClick={handleJoin}
|
||||
>
|
||||
<LogIn /> Rejoindre
|
||||
<LogIn /> {t.home.join}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{!connected && (
|
||||
<p className="text-muted-foreground text-center text-xs">
|
||||
Connexion au serveur…
|
||||
{t.home.connecting}
|
||||
</p>
|
||||
)}
|
||||
{error && (
|
||||
|
|
|
|||
|
|
@ -2,10 +2,13 @@ import { useEffect, useRef, useState } from "react"
|
|||
import { Link, useLocation } from "wouter"
|
||||
import { Button } from "@workspace/ui/components/button"
|
||||
import { useRoomStore } from "@/store/room"
|
||||
import { useI18n } from "@/i18n/context"
|
||||
import { errorMessage } from "@/i18n/error"
|
||||
|
||||
/** Lien d'invitation /join/:code → rejoint la room puis redirige vers le lobby. */
|
||||
export function JoinPage({ code }: { code: string }) {
|
||||
const [, navigate] = useLocation()
|
||||
const { t } = useI18n()
|
||||
const joinRoom = useRoomStore((s) => s.joinRoom)
|
||||
const connected = useRoomStore((s) => s.connected)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
|
@ -18,10 +21,8 @@ export function JoinPage({ code }: { code: string }) {
|
|||
tried.current = true
|
||||
joinRoom(code)
|
||||
.then(({ roomCode }) => navigate(`/room/${roomCode}`, { replace: true }))
|
||||
.catch((err) =>
|
||||
setError((err as { message?: string }).message ?? "Room introuvable.")
|
||||
)
|
||||
}, [connected, code, joinRoom, navigate])
|
||||
.catch((err) => setError(errorMessage(t, err)))
|
||||
}, [connected, code, joinRoom, navigate, t])
|
||||
|
||||
return (
|
||||
<div className="flex min-h-svh flex-col items-center justify-center gap-4 p-6 text-center">
|
||||
|
|
@ -29,12 +30,12 @@ export function JoinPage({ code }: { code: string }) {
|
|||
<>
|
||||
<p className="text-muted-foreground text-sm">{error}</p>
|
||||
<Link href="/">
|
||||
<Button variant="secondary">Retour à l'accueil</Button>
|
||||
<Button variant="secondary">{t.common.back}</Button>
|
||||
</Link>
|
||||
</>
|
||||
) : (
|
||||
<p className="text-muted-foreground text-sm">
|
||||
Connexion à la room {code}…
|
||||
{t.joinPage.connecting(code)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -17,9 +17,12 @@ import { RoomCode } from "@/components/room-code"
|
|||
import { Boom } from "@/components/boom"
|
||||
import { RoundTransition } from "@/components/round-transition"
|
||||
import { PseudoScreen } from "@/components/pseudo-screen"
|
||||
import { useI18n } from "@/i18n/context"
|
||||
import { LanguageToggle } from "@/i18n/language-toggle"
|
||||
|
||||
export function RoomPage({ code }: { code: string }) {
|
||||
const [, navigate] = useLocation()
|
||||
const { t } = useI18n()
|
||||
const snapshot = useRoomStore((s) => s.snapshot)
|
||||
const roomCode = useRoomStore((s) => s.roomCode)
|
||||
const leaveRoom = useRoomStore((s) => s.leaveRoom)
|
||||
|
|
@ -37,11 +40,9 @@ export function RoomPage({ code }: { code: string }) {
|
|||
if (roomCode !== code) {
|
||||
return (
|
||||
<div className="flex min-h-svh flex-col items-center justify-center gap-4 p-6 text-center">
|
||||
<p className="text-muted-foreground text-sm">
|
||||
Room introuvable ou session perdue.
|
||||
</p>
|
||||
<p className="text-muted-foreground text-sm">{t.room.notFound}</p>
|
||||
<Link href="/">
|
||||
<Button variant="secondary">Retour à l'accueil</Button>
|
||||
<Button variant="secondary">{t.common.back}</Button>
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
|
|
@ -56,7 +57,7 @@ export function RoomPage({ code }: { code: string }) {
|
|||
if (!snapshot || snapshot.code !== code) {
|
||||
return (
|
||||
<div className="flex min-h-svh items-center justify-center p-6">
|
||||
<p className="text-muted-foreground text-sm">Chargement…</p>
|
||||
<p className="text-muted-foreground text-sm">{t.common.loading}</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -96,9 +97,10 @@ export function RoomPage({ code }: { code: string }) {
|
|||
/>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
{connected ? "Connecté" : "Déconnecté"}
|
||||
{connected ? t.room.connected : t.room.disconnected}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<LanguageToggle />
|
||||
<Button
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
|
|
@ -107,7 +109,7 @@ export function RoomPage({ code }: { code: string }) {
|
|||
navigate("/")
|
||||
}}
|
||||
>
|
||||
<LogOut /> Quitter
|
||||
<LogOut /> {t.room.leave}
|
||||
</Button>
|
||||
</div>
|
||||
</header>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue