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

Finer granularity points

Browse source
This commit is contained in:
Joey Yakimowich-Payne 2026-01-13 17:03:35 -07:00
commit a7e37024f5
No known key found for this signature in database
GPG key ID: 6BFE655FA5ABD1E1
3 changed files with 16 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

10
components/GameScreen.tsx
View file

@ -27,9 +27,9 @@ export const GameScreen: React.FC<GameScreenProps> = ({
}) => {
const isClient = role === 'CLIENT';
const displayOptions = question?.options || [];
const timeLeftSeconds = Math.ceil(timeLeft / 1000);
// Timer styling logic
const isUrgent = timeLeft < 5 && timeLeft > 0;
const isUrgent = timeLeftSeconds <= 5 && timeLeftSeconds > 0;
const timerBorderColor = isUrgent ? 'border-red-500' : 'border-white';
const timerTextColor = isUrgent ? 'text-red-500' : 'text-theme-primary';
const timerAnimation = isUrgent ? 'animate-ping' : '';
@ -45,9 +45,9 @@ export const GameScreen: React.FC<GameScreenProps> = ({
{/* 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`}>
{timeLeft}
</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>
<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">