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

Add host name

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

38
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, Loader2 } from 'lucide-react';
import { Sparkles, User, X, Link, Check, QrCode, Crown, LogOut, UserX, Loader2, Pencil } from 'lucide-react';
import { QRCodeSVG } from 'qrcode.react';
import { PlayerAvatar } from './PlayerAvatar';
import toast from 'react-hot-toast';
@ -19,9 +19,11 @@ interface LobbyProps {
onSetPresenter?: (playerId: string | null) => void;
onKickPlayer?: (playerId: string) => void;
onLeaveGame?: () => void;
hostName?: string | null;
onHostNameChange?: (name: string) => void;
}
export const Lobby: React.FC<LobbyProps> = ({ quizTitle, players, gamePin, role, onStart, onEndGame, currentPlayerId, hostParticipates = false, presenterId, onSetPresenter, onKickPlayer, onLeaveGame }) => {
export const Lobby: React.FC<LobbyProps> = ({ quizTitle, players, gamePin, role, onStart, onEndGame, currentPlayerId, hostParticipates = false, presenterId, onSetPresenter, onKickPlayer, onLeaveGame, hostName, onHostNameChange }) => {
const isHost = role === 'HOST';
const hostPlayer = players.find(p => p.id === 'host');
const realPlayers = players.filter(p => p.id !== 'host');
@ -29,11 +31,20 @@ export const Lobby: React.FC<LobbyProps> = ({ quizTitle, players, gamePin, role,
const [linkCopied, setLinkCopied] = useState(false);
const [isQrModalOpen, setIsQrModalOpen] = useState(false);
const [isStarting, setIsStarting] = useState(false);
const [isEditingName, setIsEditingName] = useState(false);
const [editedName, setEditedName] = useState(hostName || 'Host');
const handleStart = () => {
setIsStarting(true);
onStart();
};
const handleNameSubmit = () => {
if (onHostNameChange && editedName.trim()) {
onHostNameChange(editedName.trim());
}
setIsEditingName(false);
};
const isPresenter = currentPlayerId === presenterId;
const canSelectPresenter = isHost && !hostParticipates && onSetPresenter;
@ -192,7 +203,28 @@ export const Lobby: React.FC<LobbyProps> = ({ quizTitle, players, gamePin, role,
className="bg-yellow-400 text-black px-4 md:px-6 py-2 md:py-3 rounded-full font-black text-base md:text-xl shadow-[0_4px_0_rgba(0,0,0,0.2)] flex items-center gap-2 md:gap-3 border-b-4 border-yellow-500"
>
<PlayerAvatar seed={hostPlayer.avatarSeed} size={20} />
{hostPlayer.name}
{isEditingName ? (
<form onSubmit={(e) => { e.preventDefault(); handleNameSubmit(); }} className="flex items-center gap-2">
<input
type="text"
value={editedName}
onChange={(e) => setEditedName(e.target.value)}
onBlur={handleNameSubmit}
autoFocus
maxLength={20}
className="bg-white/80 text-black px-2 py-1 rounded-lg text-base font-bold w-28 outline-none focus:ring-2 focus:ring-yellow-600"
/>
</form>
) : (
<button
onClick={() => { setEditedName(hostPlayer.name); setIsEditingName(true); }}
className="flex items-center gap-1.5 hover:bg-black/10 px-2 py-0.5 rounded-lg transition-colors cursor-pointer"
title="Click to edit name"
>
{hostPlayer.name}
<Pencil size={14} className="opacity-60" />
</button>
)}
<span className="text-xs bg-black/20 px-2 py-0.5 rounded-full">HOST</span>
</motion.div>
)}