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

Fix UI jank a bit

Browse source
This commit is contained in:
Joey Yakimowich-Payne 2026-01-14 21:47:40 -07:00
commit 3d6081823c
No known key found for this signature in database
GPG key ID: 6BFE655FA5ABD1E1
18 changed files with 193 additions and 87 deletions
Download patch file Download diff file Expand all files Collapse all files

23
components/GameScreen.tsx
View file

@ -40,35 +40,34 @@ export const GameScreen: React.FC<GameScreenProps> = ({
return (
<div className="flex flex-col h-screen max-h-screen overflow-hidden relative">
{/* Header */}
<div className="flex justify-between items-center p-4 md:p-6">
<div className="bg-white/20 backdrop-blur-md px-6 py-2 rounded-2xl font-black text-xl shadow-sm border-2 border-white/10">
<div className="flex justify-between items-center p-2 md:p-6 shrink-0">
<div className="bg-white/20 backdrop-blur-md px-3 md:px-6 py-1 md:py-2 rounded-xl md:rounded-2xl font-black text-sm md:text-xl shadow-sm border-2 border-white/10">
{currentQuestionIndex + 1} / {totalQuestions}
</div>
{/* Whimsical Timer */}
<div className="relative">
<div className="absolute inset-0 bg-white/20 rounded-full blur-xl animate-pulse"></div>
<div className={`bg-white ${timerTextColor} rounded-full w-20 h-20 flex items-center justify-center text-4xl font-black shadow-[0_6px_0_rgba(0,0,0,0.2)] border-4 ${timerBorderColor} ${timerAnimation} relative z-10 transition-colors duration-300`}>
{timeLeftSeconds}
</div>
<div className="absolute inset-0 bg-white/20 rounded-full blur-xl animate-pulse"></div>
<div className={`bg-white ${timerTextColor} rounded-full w-14 h-14 md:w-20 md:h-20 flex items-center justify-center text-2xl md:text-4xl font-black shadow-[0_6px_0_rgba(0,0,0,0.2)] border-4 ${timerBorderColor} ${timerAnimation} relative z-10 transition-colors duration-300`}>
{timeLeftSeconds}
</div>
</div>
<div className="bg-white/20 backdrop-blur-md px-6 py-2 rounded-2xl font-black text-xl shadow-sm border-2 border-white/10">
<div className="bg-white/20 backdrop-blur-md px-3 md:px-6 py-1 md:py-2 rounded-xl md:rounded-2xl font-black text-sm md:text-xl shadow-sm border-2 border-white/10">
{isClient ? 'Player' : isSpectator ? 'Spectator' : 'Host'}
</div>
</div>
{/* Question Area */}
<div className="flex-1 flex flex-col items-center justify-center p-4 md:p-8 text-center relative z-10">
<div className="shrink-0 flex flex-col items-center justify-center p-2 md:p-8 text-center relative z-10">
{question && (
<motion.div
key={question.id}
initial={{ y: 20, opacity: 0, scale: 0.95 }}
animate={{ y: 0, opacity: 1, scale: 1 }}
transition={{ duration: 0.3, ease: "easeOut" }}
className="bg-white text-black p-8 md:p-12 rounded-[2rem] shadow-[0_12px_0_rgba(0,0,0,0.1)] max-w-5xl w-full border-b-8 border-gray-200"
className="bg-white text-black p-4 md:p-12 rounded-2xl md:rounded-[2rem] shadow-[0_12px_0_rgba(0,0,0,0.1)] max-w-5xl w-full border-b-4 md:border-b-8 border-gray-200"
>
<h2 className="text-2xl md:text-5xl font-black text-[#333] font-display leading-tight">
<h2 className="text-lg md:text-5xl font-black text-[#333] font-display leading-tight">
{question.text}
</h2>
</motion.div>
@ -76,7 +75,7 @@ export const GameScreen: React.FC<GameScreenProps> = ({
</div>
{/* Answer Grid */}
<div className="grid grid-cols-2 gap-3 md:gap-6 p-3 md:p-6 h-1/2 md:h-[45vh] pb-8 md:pb-12">
<div className="grid grid-cols-2 gap-2 md:gap-6 p-2 md:p-6 flex-1 min-h-0">
{displayOptions.map((option, idx) => {
const ShapeIcon = SHAPES[option.shape];
const colorClass = COLORS[option.color];