jyapayne/kaboot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update UI

Browse source
This commit is contained in:
Joey Yakimowich-Payne 2026-01-13 11:28:39 -07:00
commit 2aafe8fce9
No known key found for this signature in database
GPG key ID: DDF6AF5B21B407D4
4 changed files with 119 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

83
components/Scoreboard.tsx
View file

@ -3,6 +3,7 @@ import { Player } from '../types';
import { motion } from 'framer-motion';
import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer, Cell, LabelList } from 'recharts';
import { Loader2 } from 'lucide-react';
import { PlayerAvatar } from './PlayerAvatar';
interface ScoreboardProps {
players: Player[];
@ -24,39 +25,57 @@ export const Scoreboard: React.FC<ScoreboardProps> = ({ players, onNext, isHost,
<h1 className="text-5xl font-black text-white font-display drop-shadow-md">Scoreboard</h1>
</header>
<div className="flex-1 bg-white rounded-[3rem] shadow-[0_20px_0_rgba(0,0,0,0.2)] p-12 flex flex-col text-gray-900 max-w-6xl w-full mx-auto relative z-10 border-8 border-white/50">
<ResponsiveContainer width="100%" height="100%">
<BarChart
data={sortedPlayers}
layout="vertical"
margin={{ top: 20, right: 120, left: 20, bottom: 5 }}
>
<XAxis type="number" hide />
<YAxis
type="category"
dataKey="displayName"
tick={{ fontSize: 24, fontWeight: 800, fill: '#333', fontFamily: 'Fredoka' }}
width={200}
tickLine={false}
axisLine={false}
/>
<Bar dataKey="score" radius={[0, 20, 20, 0]} barSize={50} animationDuration={1500}>
{sortedPlayers.map((entry, index) => (
<Cell
key={`cell-${index}`}
fill={entry.color}
className="filter drop-shadow-md"
<div className="flex-1 bg-white rounded-[3rem] shadow-[0_20px_0_rgba(0,0,0,0.2)] p-12 flex text-gray-900 max-w-6xl w-full mx-auto relative z-10 border-8 border-white/50">
<div className="flex flex-col justify-around py-4 pr-4">
{sortedPlayers.map((player) => (
<div key={player.id} className="flex items-center gap-3 h-[50px]">
<PlayerAvatar seed={player.avatarSeed} size={24} />
<span className="font-black text-xl font-display whitespace-nowrap">{player.displayName}</span>
</div>
))}
</div>
<div className="flex-1">
<ResponsiveContainer width="100%" height="100%">
<BarChart
data={sortedPlayers}
layout="vertical"
margin={{ top: 20, right: 100, left: 0, bottom: 5 }}
>
<XAxis type="number" hide />
<YAxis type="category" dataKey="displayName" hide />
<Bar dataKey="score" radius={[0, 20, 20, 0]} barSize={50} animationDuration={1500}>
{sortedPlayers.map((entry, index) => (
<Cell
key={`cell-${index}`}
fill={entry.color}
className="filter drop-shadow-md"
/>
))}
<LabelList
dataKey="score"
position="right"
offset={15}
content={({ x, y, width, value, index }) => {
const player = sortedPlayers[index as number];
return (
<text
x={(x as number) + (width as number) + 15}
y={y as number}
dy={35}
fill={player?.color || 'var(--theme-primary)'}
fontSize={24}
fontWeight={900}
fontFamily="Fredoka"
>
{value}
</text>
);
}}
/>
))}
<LabelList
dataKey="score"
position="right"
offset={15}
style={{ fontSize: '24px', fontWeight: '900', fill: 'var(--theme-primary)', fontFamily: 'Fredoka' }}
/>
</Bar>
</BarChart>
</ResponsiveContainer>
</Bar>
</BarChart>
</ResponsiveContainer>
</div>
</div>
<div className="mt-8 flex justify-end max-w-6xl w-full mx-auto">