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

Stay on reason screen

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

26
components/RevealScreen.tsx
View file

@ -1,6 +1,6 @@
import React, { useEffect, useState } from 'react';
import { motion, useSpring, useTransform } from 'framer-motion';
import { Check, X, Flame, Trophy } from 'lucide-react';
import { Check, X, Flame, ChevronRight } from 'lucide-react';
import { AnswerOption, Player, GameRole } from '../types';
import { SHAPES, COLORS } from '../constants';
import confetti from 'canvas-confetti';
@ -34,6 +34,7 @@ interface RevealScreenProps {
correctOption: AnswerOption;
selectedOption?: AnswerOption | null;
role: GameRole;
onNext?: () => void;
}
export const RevealScreen: React.FC<RevealScreenProps> = ({
@ -43,7 +44,8 @@ export const RevealScreen: React.FC<RevealScreenProps> = ({
streak,
correctOption,
selectedOption,
role
role,
onNext
}) => {
const isHost = role === 'HOST';
@ -59,19 +61,18 @@ export const RevealScreen: React.FC<RevealScreenProps> = ({
}
}, [isCorrect, isHost]);
// -- HOST VIEW --
if (isHost) {
const ShapeIcon = SHAPES[correctOption.shape];
const colorClass = COLORS[correctOption.color];
return (
<div className="flex flex-col items-center justify-center h-screen bg-gray-900 text-white p-8 relative overflow-hidden">
<div className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-10"></div>
<div className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-10 pointer-events-none"></div>
<motion.div
initial={{ opacity: 0, y: -50 }}
animate={{ opacity: 1, y: 0 }}
className="text-4xl font-bold uppercase tracking-widest mb-12 opacity-80"
className="text-4xl font-bold uppercase tracking-widest mb-12 opacity-80 relative z-10"
>
The correct answer is
</motion.div>
@ -80,7 +81,7 @@ export const RevealScreen: React.FC<RevealScreenProps> = ({
initial={{ scale: 0, rotate: -10 }}
animate={{ scale: 1, rotate: 0 }}
transition={{ type: "spring", bounce: 0.5 }}
className={`${colorClass} p-12 rounded-[3rem] shadow-[0_20px_0_rgba(0,0,0,0.3)] flex flex-col items-center max-w-4xl w-full border-8 border-white/20`}
className={`${colorClass} p-12 rounded-[3rem] shadow-[0_20px_0_rgba(0,0,0,0.3)] flex flex-col items-center max-w-4xl w-full border-8 border-white/20 relative z-10`}
>
<div className="bg-black/20 p-6 rounded-full mb-6">
<ShapeIcon size={80} fill="currentColor" />
@ -99,6 +100,19 @@ export const RevealScreen: React.FC<RevealScreenProps> = ({
</motion.p>
)}
</motion.div>
{onNext && (
<motion.button
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.5 }}
onClick={onNext}
className="mt-12 bg-white text-gray-900 px-8 py-4 rounded-2xl text-xl font-black shadow-[0_6px_0_rgba(0,0,0,0.3)] active:shadow-none active:translate-y-[6px] transition-all flex items-center gap-2 hover:bg-gray-100 relative z-10 cursor-pointer"
>
Continue to Scoreboard
<ChevronRight size={28} strokeWidth={3} />
</motion.button>
)}
</div>
);
}