+
+
+ {/* Header */}
+
+ {status === 'processing' &&
}
+ {status === 'success' &&
}
+ {status === 'error' &&
}
+
+
+
+ {status === 'error' ? t('progressOverlay.operationFailed') : title}
+
+ {status === 'processing' && (
+
+
{t('progressOverlay.processing')} {progress !== undefined ? `${Math.round(progress)}%` : ''}
+ {progress !== undefined && (
+
+ )}
+
+ )}
+ {status === 'success' &&
+
{t('progressOverlay.complete')}
}
+ {status === 'error' &&
+
{error || t('progressOverlay.unknownError')}
}
+
+
+
+ {/* Content Area */}
+
+ {children ? (
+
+ {children}
+
+ ) : (
+
+
+ {logs.map((log, index) => (
+
+ {'>'}
+
+ {log}
+
+
+ ))}
+ {status === 'processing' && (
+
+ {'>'}
+ _
+
+ )}
+
+
+
+ )}
+
+
+ {/* Footer - Show OK button for success or error */}
+ {(status === 'success' || status === 'error') && (
+
+
+
+ )}
+
+
+ );
+};
diff --git a/src/dashboard/src/components/ui/RoleIcon.tsx b/src/dashboard/src/components/ui/RoleIcon.tsx
new file mode 100644
index 0000000..5a0871c
--- /dev/null
+++ b/src/dashboard/src/components/ui/RoleIcon.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import {Eye, Moon, Shield, Swords, Users, Zap} from 'lucide-react';
+import {Role} from '@/types';
+
+export const RoleIcon = ({role}: { role: Role }) => {
+ switch (role) {
+ case 'WEREWOLF':
+ return
;
+ case 'SEER':
+ return
;
+ case 'WITCH':
+ return
;
+ case 'HUNTER':
+ return
;
+ case 'GUARD':
+ return
;
+ case 'VILLAGER':
+ return
;
+ default:
+ return
;
+ }
+};
diff --git a/src/dashboard/src/components/ui/ThemeToggle.tsx b/src/dashboard/src/components/ui/ThemeToggle.tsx
new file mode 100644
index 0000000..fdb42f6
--- /dev/null
+++ b/src/dashboard/src/components/ui/ThemeToggle.tsx
@@ -0,0 +1,22 @@
+import {Moon, Sun} from 'lucide-react';
+import {useTheme} from '@/lib/ThemeProvider';
+import {useTranslation} from '@/lib/i18n';
+
+export const ThemeToggle: React.FC = () => {
+ const {theme, toggleTheme} = useTheme();
+ const {t} = useTranslation();
+
+ return (
+
+ );
+};
diff --git a/src/dashboard/src/features/auth/components/AccessDenied.tsx b/src/dashboard/src/features/auth/components/AccessDenied.tsx
new file mode 100644
index 0000000..935fd80
--- /dev/null
+++ b/src/dashboard/src/features/auth/components/AccessDenied.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import {ArrowLeft, ShieldAlert} from 'lucide-react';
+import {useNavigate} from 'react-router-dom';
+import {useTranslation} from '@/lib/i18n';
+
+export const AccessDenied: React.FC = () => {
+ const {t} = useTranslation();
+ const navigate = useNavigate();
+
+ return (
+
+
+
+
+
+
+ {t('accessDenied.title')}
+
+
+ {t('accessDenied.message')}
+
+
+
+
+ {t('accessDenied.suggestion')}
+
+
+
+
+
+ );
+};
diff --git a/src/dashboard/src/features/auth/components/AuthCallback.tsx b/src/dashboard/src/features/auth/components/AuthCallback.tsx
new file mode 100644
index 0000000..f1f6b66
--- /dev/null
+++ b/src/dashboard/src/features/auth/components/AuthCallback.tsx
@@ -0,0 +1,44 @@
+import {useEffect} from 'react';
+import {useNavigate} from 'react-router-dom';
+import {Loader2} from 'lucide-react';
+import {useAuth} from '@/features/auth/contexts/AuthContext';
+import {useTranslation} from '@/lib/i18n';
+
+export const AuthCallback = () => {
+ const navigate = useNavigate();
+ const {checkAuth} = useAuth();
+ const {t} = useTranslation();
+
+ useEffect(() => {
+ const handleCallback = async () => {
+ // Wait for a moment to let cookies settle
+ await new Promise(resolve => setTimeout(resolve, 500));
+
+ // Re-check auth to get the new session
+ await checkAuth();
+
+ // Get the guild ID from the URL parameters
+ const params = new URLSearchParams(window.location.search);
+ const guildId = params.get('guild_id');
+
+ if (guildId) {
+ // Redirect to the server dashboard
+ navigate(`/server/${guildId}`);
+ } else {
+ // If no guild ID, redirect to server selector
+ navigate('/');
+ }
+ };
+
+ handleCallback();
+ }, [navigate, checkAuth]);
+
+ return (
+
+
+
+
{t('auth.loggingIn')}
+
+
+ );
+};
diff --git a/src/dashboard/src/features/auth/components/LoginScreen.tsx b/src/dashboard/src/features/auth/components/LoginScreen.tsx
new file mode 100644
index 0000000..0f28bf1
--- /dev/null
+++ b/src/dashboard/src/features/auth/components/LoginScreen.tsx
@@ -0,0 +1,51 @@
+import {Moon} from 'lucide-react';
+import {useTranslation} from '@/lib/i18n';
+
+interface LoginScreenProps {
+ onLogin: () => void;
+}
+
+export const LoginScreen: React.FC
= ({onLogin}) => {
+ const {t} = useTranslation();
+
+ return (
+
+ {/* Background Effects */}
+
+
+
+
+
+
+
+
{t('login.title')}
+
{t('login.subtitle')}
+
+
+
+
+
+ {t('login.restriction')}
+
+
+
+
+
+
+
+
+
+
+
+ {t('auth.sessionExpiredTitle') || "Session Expired"}
+
+
+
+ {t('auth.sessionExpiredMessage') || "Your session has expired. Please log in again."}
+
+
+
+
+
+
+
navigate(`/server/${guildId}/settings`)}
+ onDashboardClick={() => navigate(`/server/${guildId}`)}
+ onSpectatorClick={() => navigate(`/server/${guildId}/spectator`)}
+ onSpeechClick={() => navigate(`/server/${guildId}/speech`)}
+ onSwitchServer={() => navigate('/')}
+ onToggleSpectatorMode={toggleSpectatorSimulation}
+ isSpectatorMode={isSpectatorSimulation}
+ isConnected={isConnected}
+ />
+
+
+
+
+
+ {isGuildReady ? (
+ <>
+
+
+
+
+
+ {t('players.title')}
+ ({gameState.players.filter(p => p.isAlive).length} {t('players.alive')})
+
+
+
+
+ {gameState.players.map(player => (
+
+ ))}
+
+
+ ) : (
+
+
+
+
{t('serverSelector.switching')}
+
+
+ )}
+
+
+
+
+
+ )}
+
+ )}
+
+ {showSettings && setShowSettings(false)}/>}
+
+ {editingPlayerId && editingPlayer && guildId && (
+ setEditingPlayerId(null)}
+ doubleIdentities={gameState.doubleIdentities}
+ availableRoles={gameState.availableRoles || []}
+ />
+ )}
+
+ {deathConfirmPlayerId && guildId && (
+ p.id === deathConfirmPlayerId)!}
+ guildId={guildId}
+ onClose={() => setDeathConfirmPlayerId(null)}
+ />
+ )}
+
+ setOverlayState(prev => ({...prev, visible: false}))}
+ />
+
+
+ p.isAlive).length}
+ endTime={undefined}
+ players={gameState.players}
+ title={t('vote.expelVote')}
+ />
+
+
+ {showTimerModal && (
+ setShowTimerModal(false)}
+ onStart={handleTimerStart}
+ />
+ )}
+
+ {
+ setShowSessionExpired(false);
+ window.location.href = '/api/auth/login';
+ }}
+ />
+
+ {playerSelectModal.visible && (
+ setPlayerSelectModal({
+ ...playerSelectModal,
+ visible: false,
+ customPlayers: undefined
+ })}
+ onSelect={handlePlayerSelect}
+ filter={(p) => {
+ if (!p.userId) return false;
+ if (playerSelectModal.type === 'ASSIGN_JUDGE') return !p.isJudge;
+ if (playerSelectModal.type === 'DEMOTE_JUDGE') return !!p.isJudge;
+ if (playerSelectModal.type === 'FORCE_POLICE') return p.isAlive;
+ return true;
+ }}
+ />
+ )}
+
+
+
+
+
+
+ {t('actions.kill')}
+
+
+
+
+
+
+
+ {player.avatar ?
: '👤'}
+
+
+
{player.name}
+
+ {player.roles.join(', ') || t('roles.unknown')}
+
+
+
+
+
+
{t('players.killConfirmation', 'Are you sure you want to kill this player?')}
+
+
+
+ setLastWords(e.target.checked)}
+ className="w-4 h-4 text-red-600 rounded border-slate-300 focus:ring-red-500"
+ />
+
+
+
+
+
+
+
+
+
+
+
+
{t('gameHeader.currentPhase')}
+
+ {phase === 'DAY' ? :
+ }
+ {t(`phases.${phase}`)} {dayCount > 0 && `#${dayCount}`}
+
+
+
+ {currentSpeaker && (
+ <>
+
+
+
+ {t('messages.speaking')}
+
+
+ {currentSpeaker.name}
+ {speech?.endTime && (
+
+ {(() => {
+ const seconds = Math.max(0, Math.ceil((speech.endTime - Date.now()) / 1000));
+ return `${Math.floor(seconds / 60).toString().padStart(2, '0')}:${String(seconds % 60).padStart(2, '0')}`;
+ })()}
+
+ )}
+
+
+
+ )}
+
+
+
+
+
{t('gameHeader.timer')}
+
+ {Math.floor(timerSeconds / 60)}:{String(timerSeconds % 60).padStart(2, '0')}
+
+
+
+ {!readonly && (
+ phase === 'LOBBY' ? (
+
+ ) : (
+ <>
+
+
+
+ )
+ )}
+
+
+
+ {t('gameLog.title')}
+
+
+
+
+ {logs.map(log => (
+
+
{log.timestamp}
+
+ {log.type === 'alert' &&
}
+ {log.message}
+
+
+ ))}
+
+
+ {/* Admin Actions */}
+ {!readonly && (
+
+
+
+ {/* Game Flow */}
+
+
{t('globalCommands.gameFlow')}
+
+
+
+
+
+
+
+ {/* Voice & Timer */}
+
+
{t('globalCommands.voiceTimer')}
+
+
+
+
+
+
+
+ {/* Admin & Roles */}
+
+
{t('globalCommands.adminRoles')}
+
+
+
+
+
+
+
+
+
+ )}
+
+
+
+ );
+ }
+
+ return (
+ <>
+
+ {/* General Settings */}
+
+
+ {t('settings.general')}
+
+
+
+
+ {t('settings.muteAfterSpeech')}
+
+ {t('settings.muteAfterSpeechDesc')}
+
+
+
+ {(saving || justSaved) && (
+
+ {saving ? (
+
+ ) : (
+
+ )}
+
+ )}
+
+
+
+
+
+
+ {t('settings.doubleIdentities')}
+
+ {t('settings.doubleIdentitiesDesc')}
+
+
+
+ {(saving || justSaved) && (
+
+ {saving ? (
+
+ ) : (
+
+ )}
+
+ )}
+
+
+
+
+
+ {/* Player Count Settings */}
+
+
+ {t('settings.playerCount')}
+
+
+
+
+
setPlayerCount(parseInt(e.target.value) || 0)}
+ className="w-full bg-slate-100 dark:bg-slate-800 border-none rounded-lg px-4 py-2 text-slate-900 dark:text-slate-200 focus:ring-2 focus:ring-indigo-500"
+ />
+
+ {t('settings.playerCountDesc')}
+
+
+
+
+
+
+ {/* Roles Settings */}
+
+
+
+ {t('roles.title')}
+ {t('messages.totalCount')}: {roles.length}
+
+
+
+
+ {/* Add Role Control */}
+
+
+ setSelectedRole(e.target.value)}
+ list="role-suggestions"
+ className="w-full bg-slate-100 dark:bg-slate-800 border-none rounded-lg px-4 py-2 text-slate-900 dark:text-slate-200 focus:ring-2 focus:ring-indigo-500"
+ placeholder={t('messages.selectOrEnterRole')}
+ disabled={updatingRoles}
+ />
+
+
+
+
+
+ {/* Roles List */}
+
+ {Object.entries(roleCounts).sort((a, b) => b[1] - a[1]).map(([role, count]) => (
+
+
+
+
+
+ {count}
+
+
+
+
+ ))}
+
+ {roles.length === 0 && (
+
+
+ {t('messages.noRolesConfigured')}
+
+ )}
+
+
+
+
+ {/* Header */}
+
+
{t('sidebar.gameSettings')}
+
+
+
+ {/* Content */}
+
+
+
+ {/* Backend URL */}
+
+
+
setBackendUrl(e.target.value)}
+ placeholder={t('settingsModal.urlPlaceholder')}
+ className="w-full px-4 py-2 bg-slate-100 dark:bg-slate-950 border border-slate-300 dark:border-slate-700 rounded-lg text-slate-900 dark:text-slate-100 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+ />
+
+ {t('settingsModal.urlHint')}
+
+
+
+ {/* Test Connection */}
+
+
+
+ {testResult === 'success' && (
+
+
+ {t('settingsModal.connectionSuccess')}
+
+ )}
+
+ {testResult === 'error' && (
+
+
+
{t('settingsModal.connectionFailed')}
+
+ )}
+
+
+
+ {/* Footer */}
+
+
+
+
+
+
+
+
+
+
+ {t('timer.title') || 'Start Timer'}
+
+
+
+
+
+ {/* Custom Input */}
+
+
+
+ setMinutes(Math.max(0, parseInt(e.target.value) || 0))}
+ className="w-20 text-center text-2xl font-bold bg-slate-100 dark:bg-slate-950 border border-slate-300 dark:border-slate-700 rounded-lg py-2 focus:ring-2 focus:ring-indigo-500 outline-none"
+ />
+
+
:
+
+
+ setSeconds(Math.max(0, parseInt(e.target.value) || 0))}
+ className="w-20 text-center text-2xl font-bold bg-slate-100 dark:bg-slate-950 border border-slate-300 dark:border-slate-700 rounded-lg py-2 focus:ring-2 focus:ring-indigo-500 outline-none"
+ />
+
+
+
+ {/* Presets */}
+
+ {presets.map(s => (
+
+ ))}
+
+
+
+
+
+
+ {/* Timer and Header */}
+
+
{title || t('vote.progress')}
+
+
+
+ {Math.floor(timeLeft / 60).toString().padStart(2, '0')}:{String(timeLeft % 60).padStart(2, '0')}
+
+
+
+
+ {/* Progress Bar */}
+ {totalVoters && (
+
+
+ {t('vote.total')}
+ {totalVotes} / {totalVoters}
+
+
+
+ )}
+
+ {/* Candidates Grid */}
+
+ {candidates.map((candidate) => {
+ const player = players.find(p => p.id === candidate.id);
+ return (
+
+ {/* Candidate Info */}
+
+
+
+
{player?.name || `Candidate ${candidate.id}`}
+
+ {candidate.voters.length} {t('vote.count')}
+
+
+
+
+ {/* Voters List */}
+
+ {candidate.voters.length > 0 ? (
+ candidate.voters.map(voterId => {
+ // Try to find voter by userId (assuming voterId is userId string)
+ // The backend sends userId as string for voters.
+ // Player.userId is key.
+ const voter = players.find(p => p.userId === voterId);
+ return (
+
+
+
+ {voter?.name || 'Unknown'}
+
+
+ );
+ })
+ ) : (
+
{t('vote.noVotes')}
+ )}
+
+
+ );
+ })}
+
+
+ {/* Not Voted List (Optional, maybe for future) */}
+ {totalVoters && (totalVotes < totalVoters) && (
+
+ {t('vote.waiting', {count: String(totalVoters - totalVotes)})}
+
+ )}
+
+
+ {/* Header */}
+
+
+
+ {player.avatar ? (
+
+ ) : (
+
+
+
+ )}
+ {player.isSheriff && (
+
+
+
+ )}
+ {player.isJinBaoBao && (
+
+
+
+ )}
+
+ {/* Unlock Icon - Persistent if unlocked and has multiple roles */}
+ {player.roles.length > 1 && !player.rolePositionLocked && (
+
+
+
+ )}
+
+ {/* Lock Animation Icon - Transient */}
+ {showLock && (
+
+
+
+ )}
+
+
+
+
{player.name}
+ {player.avatar && player.username && (
+
@{player.username}
+ )}
+
+
+
+ {!player.avatar && (
+
+ {t('messages.unassigned')}
+
+ )}
+ {player.roles && player.roles.length > 0 && player.roles.map((role, index) => {
+ // Check if this specific role instance is dead
+ const roleName = role;
+ const previousOccurrences = player.roles.slice(0, index).filter(r => r === roleName).length;
+ const deadOccurrences = player.deadRoles ? player.deadRoles.filter(r => r === roleName).length : 0;
+ const isDeadRole = previousOccurrences < deadOccurrences;
+
+ return (
+ !readonly && isDeadRole ? onAction(player.id, `revive_role:${role}`) : undefined}
+ className={`text-[10px] uppercase tracking-wider font-bold px-1.5 py-0.5 rounded border ${swapAnim[index] || ''}
+ ${isDeadRole ? 'line-through opacity-60 decoration-2 decoration-slate-500' : ''}
+ ${!readonly && isDeadRole ? 'cursor-pointer hover:opacity-100 hover:decoration-red-500 hover:text-red-600 transition-all' : ''}
+ ${role.includes('狼') ? 'bg-red-100 dark:bg-red-900/30 border-red-300 dark:border-red-800 text-red-700 dark:text-red-300' :
+ role.includes('平民') ? 'bg-emerald-100 dark:bg-emerald-900/30 border-emerald-300 dark:border-emerald-800 text-emerald-700 dark:text-emerald-300' :
+ 'bg-indigo-100 dark:bg-indigo-900/30 border-indigo-300 dark:border-indigo-800 text-indigo-700 dark:text-indigo-300'
+ }`}
+ title={!readonly && isDeadRole ? t('players.reviveRole', {role}) : undefined}
+ >
+ {player.roles.length > 1 && `${index + 1}. `}{role}
+
+ );
+ })}
+
+ {!readonly && player.roles.length > 1 && !player.rolePositionLocked && (
+
+ )}
+ {!player.isAlive &&
{t('players.dead')}}
+
+
+
+
+ {player.isProtected &&
}
+ {player.isPoisoned &&
}
+ {player.isSilenced &&
}
+
+
+
+
+ {/* Actions (Admin) */}
+ {!readonly && (
+
+ {player.isAlive ? (
+
+ ) : (
+
+ )}
+
+
+ )}
+
+
+
+
+ {player.avatar ?
+ : '👤'}
+ {t('players.edit')} - {player.name}
+
+
+
+
+
+ {/* Role Editing Section */}
+
+
+
+
+ {t('roles.title' as any)}
+
+
+
+
+
+
+
+
+
+ {isDoubleIdentity && (
+
+
+
+
+ )}
+
+ {isDoubleIdentity && (
+
+
+
+
+
+
+ )}
+
+
+
+
+
+ {/* Police Badge Transfer Section */}
+ {player.isSheriff ? (
+
+
+
+ {t('status.sheriff')}
+
+
+
+ {t('players.transferPoliceDescription', 'Transfer the police badge to another alive player.')}
+
+
+
+
+
+
+
+
+ ) : null}
+
+
+
+
+
+
+ {title}
+
+
+
+
+
+
+
+ setSearch(e.target.value)}
+ className="w-full pl-9 pr-4 py-2 bg-slate-100 dark:bg-slate-950 border border-slate-300 dark:border-slate-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
+ />
+
+
+
+
+ {filteredPlayers.length === 0 ? (
+
+ {t('search.noResults')}
+
+ ) : (
+ filteredPlayers.map(p => (
+
+ ))
+ )}
+
+
+
+ {/* Background Effects */}
+
+
+
+
+
+
+
+
{t('serverSelector.title')}
+
{t('serverSelector.subtitle')}
+
+
+ {loading && (
+
+
+
{t('serverSelector.loading')}
+
+ )}
+
+ {error && (
+
+
{error}
+
+
+ )}
+
+ {!loading && !error && sessions.length === 0 && (
+
+
+
{t('serverSelector.noSessions')}
+
+ {t('serverSelector.noSessionsHint')}
+
+
+ )}
+
+ {!loading && !error && sessions.length > 0 && (
+
+ {sessions.map((session) => (
+
+ ))}
+
+ )}
+
+
+
+
+
+
+
+
{t('spectator.title')}
+
{t('spectator.subtitle')}
+
+
+
+ {/* Wolves Status */}
+ }
+ color="red"
+ current={stats.wolves - stats.deadWolves}
+ total={stats.wolves}
+ description={t('spectator.wolvesLeftDesc')}
+ />
+
+ {/* Good Faction Status */}
+ {doubleIdentities ? (
+ <>
+ }
+ color="yellow"
+ current={stats.gods - stats.deadGods}
+ total={stats.gods}
+ description={t('spectator.godsLeftDesc')}
+ />
+ }
+ color="pink"
+ current={stats.jinBaoBaos - stats.deadJinBaoBaos}
+ total={stats.jinBaoBaos}
+ description={t('spectator.jbbLeftDesc')}
+ />
+
+ ) : (
+ <>
+ }
+ color="yellow"
+ current={stats.gods - stats.deadGods}
+ total={stats.gods}
+ description={t('spectator.godsLeftDesc')}
+ />
+ }
+ color="emerald"
+ current={stats.villagers - stats.deadVillagers}
+ total={stats.villagers}
+ description={t('spectator.villagersLeftDesc')}
+ />
+
+ )}
+
+
+
+
{t('spectator.winConditions')}
+
+ - {t('spectator.goodWinCondition')}
+ - {doubleIdentities ? t('spectator.wolfWinConditionDouble') : t('spectator.wolfWinConditionNormal')}
+
+
+
+ {/* Read-only Player Grid */}
+
+
+
+ {t('players.title')} ({players.filter(p => p.isAlive).length} {t('players.alive')})
+
+
+ {players.map(player => (
+
{
+ }}
+ readonly={true}
+ />
+ ))}
+
+
+
+
+
+
+
+
+ {icon}
+
+
+
{title}
+
{description}
+
+
+
+ {current}/{total}
+
+
+
+
+
+ {t('messages.progress')}
+ {Math.round(percentage)}%
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{player.name}
+ {t('speechManager.speaking')}
+
+
+
+
+
+ {Math.floor(timeLeft / 60).toString().padStart(2, '0')}:{String(timeLeft % 60).padStart(2, '0')}
+
+
+
+ {!readonly && (
+
+
+
+
+ )}
+
+
+
+
+
+
{t('sidebar.speechManager')}
+
+ {readonly ? t('speechManager.noActiveSpeech') : t('speechManager.noActiveSpeechJudge')}
+
+ {!readonly && (
+
+
+
+
+ )}
+
+
+ !c.quit)}
+ totalVoters={players.filter(p => p.isAlive && !police.candidates.some(c => c.id === String(p.id))).length}
+ endTime={stageEndTime}
+ players={players}
+ title={t('vote.policeElection')}
+ />
+
+
+
+
+
+ {isUnenrollment ? t('speechManager.policeUnenrollment') : t('speechManager.policeEnrollment')}
+
+ {timerSeconds > 0 && (
+
+
+ {Math.floor(timerSeconds / 60).toString().padStart(2, '0')}:{String(timerSeconds % 60).padStart(2, '0')}
+
+ )}
+
+
+
+
+
+ {police?.allowEnroll ? : }
+ {t('speechManager.allowEnroll')}: {police?.allowEnroll ? 'YES' : 'NO'}
+
+
+
+
+ {police?.allowUnEnroll ? : }
+ {t('speechManager.allowUnEnroll')}: {police?.allowUnEnroll ? 'YES' : 'NO'}
+
+
+
+
+
+
{t('speechManager.candidates')}
+ {police?.candidates && police.candidates.length > 0 ? (
+
+ {police.candidates.map(candidate => {
+ const p = players.find(x => x.id === candidate.id);
+ return (
+
+
+
{p?.name || `Player ${candidate.id}`}
+
+ );
+ })}
+
+ ) : (
+
{t('speechManager.noCandidates')}
+ )}
+
+
+
+
+
+
+
+
+
{t('speechManager.activeSpeech')}
+
{t('speechManager.autoProcess')}
+
+
+
+
+
+
+ {isPoliceSelecting ? (
+
+
+
+
+
+
+
{t('speechManager.waitingForPolice')}
+
{t('speechManager.waitingForPoliceSub')}
+
+
+
+
+ {!readonly && (
+
+
{t('speechManager.judgeOverride')}
+
+
+
+ )}
+
+ ) : (
+ <>
+ {/* Current Speaker Node */}
+ {/* Speaker Area with Swiping Animation */}
+
+ {exitingSpeaker && (
+
+
+
+ )}
+
+ {renderedSpeaker ? (
+
+
+
+ ) : (
+ !exitingSpeaker &&
+
{t('speechManager.preparing')}
+ )}
+
+
+ {/* Interrupt Votes */}
+ {speech?.interruptVotes && speech.interruptVotes.length > 0 && (
+
+
+
+ {t('speechManager.interruptVote')} ({speech.interruptVotes.length} / {Math.floor(players.filter(p => p.isAlive).length / 2) + 1})
+
+
+ {speech.interruptVotes.map(voterId => {
+ const voter = players.find(p => String(p.userId) === String(voterId));
+ return (
+
+ {voter?.avatar &&
+
}
+
{voter?.name || voterId}
+
+ );
+ })}
+
+
+ )}
+
+ {/* Queue */}
+
+ {nextPlayers && nextPlayers.map((player, idx) => (
+
+ {idx > 0 && (
+
+ )}
+
+
+
+ {idx + 1}
+
+
+
+
{player.name}
+
+
+
{t('speechManager.waiting')}
+
+
+ ))}
+
+
+ {nextPlayers && nextPlayers.length === 0 && currentSpeaker && (
+
{t('speechManager.noMoreSpeakers')}
+ )}
+
+ )}
+
+