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

Fix

Browse source
This commit is contained in:
Joey Yakimowich-Payne 2026-01-25 09:24:51 -07:00
commit a9155de1bd
No known key found for this signature in database
GPG key ID: 6BFE655FA5ABD1E1
2 changed files with 25 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

24
components/Lobby.tsx
View file

@ -1,7 +1,7 @@
import React, { useState } from 'react';
import { Player } from '../types';
import { motion, AnimatePresence } from 'framer-motion';
import { Sparkles, User, X, Link, Check, QrCode, Crown, LogOut, UserX } from 'lucide-react';
import { Sparkles, User, X, Link, Check, QrCode, Crown, LogOut, UserX, Loader2 } from 'lucide-react';
import { QRCodeSVG } from 'qrcode.react';
import { PlayerAvatar } from './PlayerAvatar';
import toast from 'react-hot-toast';
@ -28,6 +28,12 @@ export const Lobby: React.FC<LobbyProps> = ({ quizTitle, players, gamePin, role,
const currentPlayer = currentPlayerId ? players.find(p => p.id === currentPlayerId) : null;
const [linkCopied, setLinkCopied] = useState(false);
const [isQrModalOpen, setIsQrModalOpen] = useState(false);
const [isStarting, setIsStarting] = useState(false);
const handleStart = () => {
setIsStarting(true);
onStart();
};
const isPresenter = currentPlayerId === presenterId;
const canSelectPresenter = isHost && !hostParticipates && onSetPresenter;
@ -245,11 +251,19 @@ export const Lobby: React.FC<LobbyProps> = ({ quizTitle, players, gamePin, role,
</button>
)}
<button
onClick={onStart}
disabled={realPlayers.length === 0}
className="bg-white text-theme-primary px-8 md:px-16 py-3 md:py-5 rounded-full text-xl md:text-3xl font-black hover:scale-105 active:scale-95 transition-all shadow-[0_8px_0_rgba(0,0,0,0.2)] disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none disabled:translate-y-2"
onClick={handleStart}
disabled={realPlayers.length === 0 || isStarting}
className="bg-white text-theme-primary px-8 md:px-16 py-3 md:py-5 rounded-full text-xl md:text-3xl font-black hover:scale-105 active:scale-95 transition-all shadow-[0_8px_0_rgba(0,0,0,0.2)] disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none disabled:translate-y-2 flex items-center gap-3"
>
Start
{isStarting ? (
<>
<Loader2 size={24} className="animate-spin md:w-8 md:h-8" />
<span className="hidden md:inline">Starting...</span>
<span className="md:hidden">...</span>
</>
) : (
'Start'
)}
</button>
</motion.div>
</>

26
components/RevealScreen.tsx
View file

@ -202,13 +202,13 @@ export const RevealScreen: React.FC<RevealScreenProps> = ({
</motion.div>
</div>
{/* Bottom sheet for incorrect answers - includes button inside */}
{/* Bottom sheet for incorrect answers */}
{!isCorrect && (
<motion.div
initial={{ y: "100%" }}
animate={{ y: 0 }}
transition={{ delay: 0.5, type: 'spring' }}
className="bg-black/30 backdrop-blur-md p-4 md:p-6 z-20 shrink-0"
className={`bg-black/30 backdrop-blur-md p-4 md:p-6 z-20 shrink-0 ${showContinueButton ? 'pb-20 md:pb-24' : ''}`}
>
{selectedOption && selectedOption.reason && (
<div className="mb-3 md:mb-4 pb-3 md:pb-4 border-b border-white/20">
@ -232,31 +232,17 @@ export const RevealScreen: React.FC<RevealScreenProps> = ({
</p>
)}
</div>
{/* Continue button inside bottom sheet for incorrect answers */}
{showContinueButton && (
<motion.button
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.7 }}
onClick={handleContinue}
className="mt-4 w-full bg-gray-900 text-white px-6 py-3 md:py-4 rounded-xl md:rounded-2xl text-base md:text-xl font-black shadow-[0_4px_0_rgba(0,0,0,0.5)] active:shadow-none active:translate-y-[4px] transition-all flex items-center justify-center gap-2 cursor-pointer"
>
Continue to Scoreboard
<ChevronRight className="w-5 h-5 md:w-6 md:h-6" strokeWidth={3} />
</motion.button>
)}
</motion.div>
)}
{/* Continue button for correct answers - fixed at bottom */}
{isCorrect && showContinueButton && (
{/* Continue button - fixed at bottom for both correct and incorrect */}
{showContinueButton && (
<motion.button
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.5 }}
transition={{ delay: isCorrect ? 0.5 : 0.7 }}
onClick={handleContinue}
className="fixed bottom-6 left-1/2 -translate-x-1/2 bg-white text-gray-900 px-6 md:px-8 py-3 md:py-4 rounded-xl md:rounded-2xl text-base md: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 z-30 cursor-pointer"
className="fixed bottom-4 md:bottom-6 left-1/2 -translate-x-1/2 bg-white text-gray-900 px-6 md:px-8 py-3 md:py-4 rounded-xl md:rounded-2xl text-base md: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 z-30 cursor-pointer"
>
Continue to Scoreboard
<ChevronRight className="w-5 h-5 md:w-7 md:h-7" strokeWidth={3} />