diff --git a/App.tsx b/App.tsx index 0eff1fd..7834e11 100644 --- a/App.tsx +++ b/App.tsx @@ -105,7 +105,8 @@ function App() { sendAdvance, kickPlayer, leaveGame, - connectedPlayerIds + connectedPlayerIds, + setHostName } = useGame(defaultConfig); const handleSaveQuiz = async () => { @@ -240,6 +241,8 @@ function App() { onSetPresenter={setPresenterPlayer} onKickPlayer={role === 'HOST' ? kickPlayer : undefined} onLeaveGame={role === 'CLIENT' ? leaveGame : undefined} + hostName={currentPlayerName} + onHostNameChange={role === 'HOST' ? setHostName : undefined} /> {auth.isAuthenticated && pendingQuizToSave && ( void; onKickPlayer?: (playerId: string) => void; onLeaveGame?: () => void; + hostName?: string | null; + onHostNameChange?: (name: string) => void; } -export const Lobby: React.FC = ({ quizTitle, players, gamePin, role, onStart, onEndGame, currentPlayerId, hostParticipates = false, presenterId, onSetPresenter, onKickPlayer, onLeaveGame }) => { +export const Lobby: React.FC = ({ 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 = ({ 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 = ({ 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" > - {hostPlayer.name} + {isEditingName ? ( +
{ e.preventDefault(); handleNameSubmit(); }} className="flex items-center gap-2"> + 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" + /> +
+ ) : ( + + )} HOST )} diff --git a/hooks/useGame.ts b/hooks/useGame.ts index aaebab7..5d4fc9d 100644 --- a/hooks/useGame.ts +++ b/hooks/useGame.ts @@ -1732,10 +1732,21 @@ export const useGame = (defaultGameConfig?: GameConfig) => { hostConnectionRef.current.send({ type: 'ADVANCE', payload: { action } }); }; + const setHostName = (name: string) => { + if (role !== 'HOST') return; + const trimmedName = name.trim() || 'Host'; + setCurrentPlayerName(trimmedName); + const updatedPlayers = playersRef.current.map(p => + p.id === 'host' ? { ...p, name: trimmedName } : p + ); + playersRef.current = updatedPlayers; + setPlayers(updatedPlayers); + }; + return { role, gameState, quiz, players, currentQuestionIndex, timeLeft, error, gamePin, hasAnswered, lastPointsEarned, lastAnswerCorrect, currentCorrectShape, selectedOption, currentPlayerScore, currentStreak, currentPlayerId, gameConfig, pendingQuizToSave, dismissSavePrompt, sourceQuizId, isReconnecting, currentPlayerName, presenterId, connectedPlayerIds, startQuizGen, startManualCreation, cancelCreation, finalizeManualQuiz, loadSavedQuiz, joinGame, startGame: startHostGame, handleAnswer, nextQuestion, showScoreboard, - updateQuizFromEditor, startGameFromEditor, backFromEditor, endGame, attemptReconnect, goHomeFromDisconnected, resumeGame, setPresenterPlayer, sendAdvance, kickPlayer, leaveGame + updateQuizFromEditor, startGameFromEditor, backFromEditor, endGame, attemptReconnect, goHomeFromDisconnected, resumeGame, setPresenterPlayer, sendAdvance, kickPlayer, leaveGame, setHostName }; };