release/0.1.0 #18
5 changed files with 139 additions and 31 deletions
|
|
@ -178,6 +178,8 @@ export function GameEndView({ snapshot }: { snapshot: RoomSnapshot }) {
|
|||
|
||||
const [first, second, third] = ranked
|
||||
const rest = ranked.slice(3)
|
||||
const hasTracks = !!gameTracks && gameTracks.length > 0
|
||||
const hasRecap = !!gameRecap && gameRecap.length > 0
|
||||
|
||||
return (
|
||||
<div className="flex w-full flex-col items-center gap-6">
|
||||
|
|
@ -256,15 +258,19 @@ export function GameEndView({ snapshot }: { snapshot: RoomSnapshot }) {
|
|||
)}
|
||||
</div>
|
||||
|
||||
{/* Détails (musiques + récap) côte à côte sur desktop. */}
|
||||
{((gameTracks && gameTracks.length > 0) ||
|
||||
(gameRecap && gameRecap.length > 0)) && (
|
||||
<div className="grid w-full gap-6 md:grid-cols-2 md:items-start">
|
||||
{gameTracks && gameTracks.length > 0 && (
|
||||
<TracksRecap tracks={gameTracks} />
|
||||
)}
|
||||
{gameRecap && gameRecap.length > 0 && (
|
||||
<RoundsRecap recap={gameRecap} nameOf={nameOf} playerId={playerId} />
|
||||
{/* Détails : musiques + récap côte à côte sur desktop s'il y a les deux,
|
||||
sinon une seule colonne centrée (sinon le récap se calait à gauche). */}
|
||||
{(hasTracks || hasRecap) && (
|
||||
<div
|
||||
className={
|
||||
hasTracks && hasRecap
|
||||
? "grid w-full gap-6 md:grid-cols-2 md:items-start"
|
||||
: "flex w-full max-w-xl flex-col gap-6"
|
||||
}
|
||||
>
|
||||
{hasTracks && <TracksRecap tracks={gameTracks!} />}
|
||||
{hasRecap && (
|
||||
<RoundsRecap recap={gameRecap!} nameOf={nameOf} playerId={playerId} />
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -31,9 +31,16 @@ const MIX_LABELS: Record<MixMode, string> = {
|
|||
blindtest: "Blindtest",
|
||||
}
|
||||
import { Button } from "@workspace/ui/components/button"
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipTrigger,
|
||||
} 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)"
|
||||
|
||||
const MAX_TRACKS = 10
|
||||
const GAME_TYPES: {
|
||||
value: GameType
|
||||
|
|
@ -309,13 +316,15 @@ export function LobbyView({ snapshot }: { snapshot: RoomSnapshot }) {
|
|||
{GAME_TYPES.map(({ value, label, Icon, needsThree }) => {
|
||||
const locked = needsThree && !blindtestAvailable
|
||||
const active = effectiveType === value
|
||||
return (
|
||||
const tile = (
|
||||
<button
|
||||
key={value}
|
||||
disabled={locked}
|
||||
title={locked ? "3 joueurs dont 2 réels" : undefined}
|
||||
onClick={() => updateSettings({ gameType: value })}
|
||||
className={`flex flex-col items-center gap-1.5 rounded-lg border p-2.5 text-xs font-medium transition-colors disabled:opacity-40 ${
|
||||
aria-disabled={locked}
|
||||
onClick={() => {
|
||||
if (locked) return
|
||||
updateSettings({ gameType: value })
|
||||
}}
|
||||
className={`flex flex-col items-center gap-1.5 rounded-lg border p-2.5 text-xs font-medium transition-colors aria-disabled:cursor-not-allowed aria-disabled:opacity-40 ${
|
||||
active
|
||||
? "border-primary bg-primary/10"
|
||||
: "border-input hover:bg-muted/60"
|
||||
|
|
@ -325,6 +334,14 @@ export function LobbyView({ snapshot }: { snapshot: RoomSnapshot }) {
|
|||
{label}
|
||||
</button>
|
||||
)
|
||||
return locked ? (
|
||||
<Tooltip key={value}>
|
||||
<TooltipTrigger asChild>{tile}</TooltipTrigger>
|
||||
<TooltipContent>{BLINDTEST_LOCK_HINT}</TooltipContent>
|
||||
</Tooltip>
|
||||
) : (
|
||||
tile
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
{!blindtestAvailable && (
|
||||
|
|
@ -343,13 +360,15 @@ export function LobbyView({ snapshot }: { snapshot: RoomSnapshot }) {
|
|||
{(["quiz", "image", "blindtest"] as const).map((m) => {
|
||||
const locked = m === "blindtest" && !blindtestAvailable
|
||||
const on = mixedModes.includes(m) && !locked
|
||||
return (
|
||||
const tile = (
|
||||
<button
|
||||
key={m}
|
||||
disabled={locked}
|
||||
title={locked ? "3 joueurs dont 2 réels" : undefined}
|
||||
onClick={() => toggleMix(m)}
|
||||
className={`flex-1 rounded-lg border px-2 py-1.5 text-xs font-medium transition-colors disabled:opacity-40 ${
|
||||
aria-disabled={locked}
|
||||
onClick={() => {
|
||||
if (locked) return
|
||||
toggleMix(m)
|
||||
}}
|
||||
className={`flex-1 rounded-lg border px-2 py-1.5 text-xs font-medium transition-colors aria-disabled:cursor-not-allowed aria-disabled:opacity-40 ${
|
||||
on
|
||||
? "border-primary bg-primary/10"
|
||||
: "border-input hover:bg-muted/60"
|
||||
|
|
@ -358,6 +377,14 @@ export function LobbyView({ snapshot }: { snapshot: RoomSnapshot }) {
|
|||
{MIX_LABELS[m]}
|
||||
</button>
|
||||
)
|
||||
return locked ? (
|
||||
<Tooltip key={m}>
|
||||
<TooltipTrigger asChild>{tile}</TooltipTrigger>
|
||||
<TooltipContent>{BLINDTEST_LOCK_HINT}</TooltipContent>
|
||||
</Tooltip>
|
||||
) : (
|
||||
tile
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,11 @@ import { Link } from "wouter"
|
|||
import { Eye, EyeOff, Trash2, Upload } from "lucide-react"
|
||||
import type { QuizFormat } from "@nerdware/shared"
|
||||
import { Button } from "@workspace/ui/components/button"
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipTrigger,
|
||||
} from "@workspace/ui/components/tooltip"
|
||||
import {
|
||||
adminApi,
|
||||
assetUrl,
|
||||
|
|
@ -187,14 +192,14 @@ function QuestionRow({
|
|||
</p>
|
||||
)}
|
||||
</div>
|
||||
<Button
|
||||
size="icon-sm"
|
||||
variant="secondary"
|
||||
onClick={onToggle}
|
||||
title={q.active ? "Désactiver" : "Activer"}
|
||||
>
|
||||
{q.active ? <Eye /> : <EyeOff />}
|
||||
</Button>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button size="icon-sm" variant="secondary" onClick={onToggle}>
|
||||
{q.active ? <Eye /> : <EyeOff />}
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>{q.active ? "Désactiver" : "Activer"}</TooltipContent>
|
||||
</Tooltip>
|
||||
<Button
|
||||
size="icon-sm"
|
||||
variant="secondary"
|
||||
|
|
|
|||
|
|
@ -2,6 +2,11 @@ import { Link, useLocation } from "wouter"
|
|||
import { AnimatePresence, motion } from "framer-motion"
|
||||
import { LogOut } from "lucide-react"
|
||||
import { Button } from "@workspace/ui/components/button"
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipTrigger,
|
||||
} from "@workspace/ui/components/tooltip"
|
||||
import { useRoomStore } from "@/store/room"
|
||||
import { LobbyView } from "@/components/lobby-view"
|
||||
import { QuizView } from "@/components/quiz-view"
|
||||
|
|
@ -84,10 +89,16 @@ export function RoomPage({ code }: { code: string }) {
|
|||
<header className="flex items-center justify-between">
|
||||
<RoomCode code={snapshot.code} />
|
||||
<div className="flex items-center gap-3">
|
||||
<span
|
||||
className={`size-2.5 rounded-full ${connected ? "bg-green-500" : "bg-red-500"}`}
|
||||
title={connected ? "Connecté" : "Déconnecté"}
|
||||
/>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<span
|
||||
className={`size-2.5 rounded-full ${connected ? "bg-green-500" : "bg-red-500"}`}
|
||||
/>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
{connected ? "Connecté" : "Déconnecté"}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
|
|
|
|||
59
packages/ui/src/components/tooltip.tsx
Normal file
59
packages/ui/src/components/tooltip.tsx
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
import * as React from "react"
|
||||
import { Tooltip as TooltipPrimitive } from "radix-ui"
|
||||
|
||||
import { cn } from "@workspace/ui/lib/utils"
|
||||
|
||||
function TooltipProvider({
|
||||
delayDuration = 0,
|
||||
...props
|
||||
}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
|
||||
return (
|
||||
<TooltipPrimitive.Provider
|
||||
data-slot="tooltip-provider"
|
||||
delayDuration={delayDuration}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function Tooltip({
|
||||
...props
|
||||
}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
|
||||
return (
|
||||
<TooltipProvider>
|
||||
<TooltipPrimitive.Root data-slot="tooltip" {...props} />
|
||||
</TooltipProvider>
|
||||
)
|
||||
}
|
||||
|
||||
function TooltipTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
|
||||
return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
|
||||
}
|
||||
|
||||
function TooltipContent({
|
||||
className,
|
||||
sideOffset = 0,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
|
||||
return (
|
||||
<TooltipPrimitive.Portal>
|
||||
<TooltipPrimitive.Content
|
||||
data-slot="tooltip-content"
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
|
||||
</TooltipPrimitive.Content>
|
||||
</TooltipPrimitive.Portal>
|
||||
)
|
||||
}
|
||||
|
||||
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
|
||||
Loading…
Add table
Reference in a new issue