const { useState, useEffect, useRef, useMemo } = React;
// REPLACE your existing stampSymbol function with this:
function stampSymbol(href, x, y, size, className, rotateDeg = 0, vbW = 20, vbH = 20) {
// We remove 'scale' from the transform and set width/height directly.
const width = size;
const height = size * (vbH / vbW);
return (
);
}
// REPLACE your existing stamp function with this:
function stamp(href, x, y, worldSize, className, rotate = 0) {
const half = worldSize / 2;
return (
);
}
// Safe instantiation
const warEngine = new window.WarEngine();
// ==================================================================================
// HELPER: Coordinate Layer
// ==================================================================================
const CoordinatesLayer = React.memo(({ visible }) => {
if (!visible) return null;
const config = window.WAR_ROOM_CONFIG;
if (!config) return null;
const { mapSize, gridSize } = config.game;
const gridItems = [];
for (let x = 0; x < mapSize; x += gridSize) {
for (let y = 0; y < mapSize; y += gridSize) {
const colIndex = x / gridSize;
const rowIndex = y / gridSize;
const label = config.utils.getGridLabel(colIndex, rowIndex);
gridItems.push({label});
}
}
return {gridItems};
});
// ==================================================================================
// COMPONENT: OPERATOR CONSOLE
// ==================================================================================
const OperatorConsole = ({ currentPhase, setPhase, onClose }) => {
const [teamA, setTeamA] = useState(warEngine.teams.a);
const [teamB, setTeamB] = useState(warEngine.teams.b);
const [customLog, setCustomLog] = useState('');
const handleUpdateConfig = () => {
warEngine.setTeams(teamA, teamB);
};
const triggerLog = (msg) => {
warEngine.triggerEvent('log', msg);
};
const triggerSystemChat = (msg) => {
warEngine.triggerEvent('system_chat', msg);
};
return (
OPERATOR CONSOLE // ADMIN
Phase Override
{['ARCHIVE', 'HYPE', 'LOGIN', 'LIVE'].map(p => (
))}
{currentPhase === 'LIVE' && (
Live Injection
setCustomLog(e.target.value)} className="flex-1 bg-gray-900 border border-gray-700 p-1 text-white" placeholder="Custom Log..." />
)}
);
};
// ==================================================================================
// COMPONENT: CLAN PROFILE
// ==================================================================================
const ClanProfile = ({ clanId, onBack }) => {
const [clanData, setClanData] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
if (!clanId) return;
const url = window.WAR_ROOM_CONFIG.vpsUrl;
fetch(`${url}/api/warroom/clan/${clanId}`)
.then(res => res.json())
.then(data => { setClanData(data); setLoading(false); })
.catch(err => { console.error(err); setLoading(false); });
}, [clanId]);
if (loading) return RETRIVING CLAN DATA...
;
if (!clanData) return Clan profile unavailable.
;
return (
{clanData.name[0]}
{clanData.name}
UPLINK ESTABLISHED: {new Date(clanData.created_at).toLocaleDateString()}
{/* Stats Grid: 1 col mobile, 4 cols desktop */}
{clanData.wins}
Total Victories
{clanData.tier}
Operational Tier
{clanData.prestige}
Prestige Level
{clanData.score}
Power Rating
/// OPERATION HISTORY
{clanData.recentMatches?.length === 0 &&
No operations recorded.
}
{clanData.recentMatches?.map(m => (
{new Date(m.end_time).toLocaleDateString()}
Match #{m.id}
{m.winner === clanData.name ? 'VICTORY' : 'DEFEAT'}
))}
/// CLAN LOGS
{clanData.history?.length === 0 &&
LOGS CLEAR
}
{clanData.history?.map((h, i) => (
{new Date(h.timestamp).toLocaleString()}
{h.event_type}
{h.description}
))}
);
};
// ==================================================================================
// COMPONENT: ARCHIVE HUB (DASHBOARD)
// ==================================================================================
const ArchiveHub = ({ onEnterGatekeeper, currentPhase, leaderboard, pastMatches, onViewClan }) => {
const [selectedMatch, setSelectedMatch] = useState(null);
const [matchDetails, setMatchDetails] = useState(null);
const [selectedClan, setSelectedClan] = useState(null);
const displayMatches = pastMatches || window.WAR_ROOM_CONFIG.pastMatches;
const displayLeaderboard = leaderboard || window.WAR_ROOM_CONFIG.leaderboard;
// Only allow entry if NOT in ARCHIVE phase
const isOperationActive = currentPhase !== 'ARCHIVE';
// Fetch details when match is selected
const handleMatchSelect = (match) => {
setSelectedMatch(match);
const url = window.WAR_ROOM_CONFIG.vpsUrl;
fetch(`${url}/api/warroom/match/${match.id}`)
.then(res => res.json())
.then(data => setMatchDetails(data))
.catch(err => console.error("Telemetry fetch failed", err));
};
const handleCloseModal = () => {
setSelectedMatch(null);
setMatchDetails(null);
setSelectedClan(null);
};
return (
{/* Responsive Grid: 1 col on mobile, 3 cols on lg screens */}
/// ARCHIVED OPERATIONS
{displayMatches.length === 0 &&
No operations recorded yet.
}
{displayMatches.map(match => (
handleMatchSelect(match)} className="bg-[var(--secondary-bg)] border border-[var(--primary-border)] p-4 rounded hover:border-[var(--accent-orange)] hover:translate-y-[-2px] transition-all cursor-pointer group">
OP-ID: {match.id}{match.date}
{match.winner}
VS
{match.loser}
RESULT: {match.score}
))}
/// CLAN RANKINGS
| # | CLAN | WINS | K/D |
|---|
{displayLeaderboard.length === 0 && | No data available. |
}
{displayLeaderboard.map((clan, idx) => (
setSelectedClan(clan)} className="border-b border-[var(--primary-border)] hover:bg-[var(--interactive-bg)] cursor-pointer transition-colors">
| {clan.rank} |
{clan.name} |
{clan.wins} |
{clan.kd} |
))}
{isOperationActive ? 'ACTIVE SIGNAL DETECTED' : 'NO ACTIVE BATTLE SIGNAL'}
{(selectedMatch || selectedClan) && (
e.stopPropagation()}>
{selectedMatch && (
OPERATION REPORT: {selectedMatch.id}
{selectedMatch.winner}
DEFEATED
{selectedMatch.loser}
MAP: {selectedMatch.map}
DATE: {selectedMatch.date}
RESULT: {selectedMatch.score}
{matchDetails && (
Battle Telemetry Logs
{matchDetails.log_data?.map((log, i) =>
[{log.timestamp}]{log.text}
)}
)}
)}
{selectedClan && (
{selectedClan.name[0]}
{selectedClan.name}
)}
)}
);
};
// ==================================================================================
// COMPONENT: HYPE SCREEN (MOBILE FIXES APPLIED)
// ==================================================================================
const HypeScreen = () => {
const [timeLeft, setTimeLeft] = useState('');
const teams = warEngine.teams;
const [targetTime, setTargetTime] = useState(null);
// --- AUDIO STATE ---
const [isMuted, setIsMuted] = useState(false);
const audioRef = useRef(null);
// Helper to safely get name and roster
const getTeamData = (teamData) => {
if (typeof teamData === 'string') return { name: teamData, roster: [] };
if (!teamData) return { name: 'Loading...', roster: [] };
return {
name: teamData.name || 'Unknown',
roster: teamData.roster || []
};
};
const teamA = getTeamData(teams.a);
const teamB = getTeamData(teams.b);
// --- AUDIO LOGIC ---
useEffect(() => {
const tracks = ['audio/WarRoom1.mp3', 'audio/WarRoom2.mp3'];
const selectedTrack = tracks[Math.floor(Math.random() * tracks.length)];
const audio = new Audio(selectedTrack);
audio.volume = 0.4;
audio.loop = true;
audioRef.current = audio;
const playPromise = audio.play();
if (playPromise !== undefined) {
playPromise.catch(() => setIsMuted(true));
}
return () => {
audio.pause();
audio.currentTime = 0;
};
}, []);
const toggleAudio = () => {
if (audioRef.current) {
if (isMuted) {
audioRef.current.play();
audioRef.current.muted = false;
} else {
audioRef.current.muted = true;
}
setIsMuted(!isMuted);
}
};
// --- TIMER LOGIC ---
useEffect(() => {
if(warEngine.startTime) setTargetTime(new Date(warEngine.startTime));
warEngine.on('time_update', (ts) => { if(ts) setTargetTime(new Date(ts)); });
}, []);
useEffect(() => {
if (!targetTime) {
const now = new Date();
const bufferTime = new Date(now.getTime() + 15 * 60000);
const minutes = bufferTime.getMinutes();
const remainder = minutes % 15;
const minutesToAdd = remainder === 0 ? 0 : 15 - remainder;
bufferTime.setMinutes(minutes + minutesToAdd);
bufferTime.setSeconds(0);
setTargetTime(bufferTime);
}
}, [targetTime]);
useEffect(() => {
if(!targetTime) return;
const timer = setInterval(() => {
const now = new Date();
const diff = targetTime - now;
if (diff <= 0) {
setTimeLeft("00:00:00");
} else {
const m = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
const s = Math.floor((diff % (1000 * 60)) / 1000);
setTimeLeft(`${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`);
}
}, 1000);
return () => clearInterval(timer);
}, [targetTime]);
// Roster Table Component
const RosterTable = ({ roster, alignRight }) => (
| Operative |
PWR |
K/D |
{roster.length === 0 && (
| Awaiting Uplink... |
)}
{roster.map((member, i) => (
|
{member.name}
|
{member.power} |
{member.kills}/{member.deaths} ({member.kdr})
|
))}
);
return (
{/* MAIN CONTENT GRID */}
{/* LEFT ROSTER (Team A) - Order 1 on Mobile */}
{/* CENTER (VS & Timer) - Order 2 on Mobile (Between teams) */}
INCOMING
TRANSMISSION
VS
Battle Initialization Sequence
{timeLeft}
{/* RIGHT ROSTER (Team B) - Order 3 on Mobile */}
{/* BOTTOM INFO - Visible on Mobile and Desktop now */}
⚠ ACCESS RESTRICTED
SECURE TERMINAL
Secure uplink will be established automatically when the battle begins.
You will need a valid Access Token to enter the War Room.
How to acquire tokens:
- > Win them in Clan Drop Events (Check #rewards-room in Discord).
- > Receive them instantly when purchasing any VIP Package.
{/* AUDIO CONTROL */}
);
};
// ==================================================================================
// COMPONENT: LOGIN SCREEN
// ==================================================================================
const LoginScreen = ({ onLogin }) => {
const [key, setKey] = useState('');
const [nickname, setNickname] = useState('');
const [status, setStatus] = useState('idle');
const handleSubmit = async (e) => {
e.preventDefault();
if (!key || !nickname) return;
setStatus('loading');
try {
const res = await warEngine.authenticate(key);
setStatus('success');
setTimeout(() => onLogin(key, nickname, res.isAdmin), 500);
} catch (err) {
setStatus('error');
setTimeout(() => setStatus('idle'), 1000);
}
};
return (
WARROOM
Identity Verification
To access the War Room, you need a valid token.
Discord Command:
/warroom token
{status === 'loading' &&
VERIFYING CREDENTIALS...
}
{status === 'error' &&
ACCESS DENIED
}
{status === 'success' &&
ACCESS GRANTED
}
{status === 'idle' &&
ENTER CREDENTIALS
}
)
};
// ==================================================================================
// COMPONENT: LIVE WAR ROOM
// ==================================================================================
const LiveWarRoom = ({ isChatOpen, toggleChat }) => {
const config = window.WAR_ROOM_CONFIG;
if (!config) return null;
const { mapSize, gridSize } = config.game;
const [entities, setEntities] = useState([]);
const [logs, setLogs] = useState([]);
// Default zoom slightly further out for mobile context
const [viewState, setViewState] = useState({ x: -20, y: -20, zoom: mapSize });
const [isDragging, setIsDragging] = useState(false);
const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
const [hoverInfo, setHoverInfo] = useState(null);
const svgRef = useRef(null);
const logContainerRef = useRef(null);
// CAMERA TUNING
const MIN_ZOOM = 8;
const MAX_ZOOM = mapSize * 2.0;
const PAN_PADDING = mapSize * 0.5;
// Touch State Refs
const dragWorldStartRef = useRef(null);
const dragViewStartRef = useRef(null);
const lastTouchDistance = useRef(null);
useEffect(() => {
warEngine.on('tactical_update', setEntities);
warEngine.on('war_log', log => setLogs(prev => [...prev.slice(-49), log]));
// TEMP TEST: show one icon entity
setEntities([{ id: 'test1', x: 40, y: 40, type: 'TEST', status: 'OK', icon: 'icons.entities.player' }]);
}, []);
useEffect(() => {
if (logContainerRef.current) logContainerRef.current.scrollTop = logContainerRef.current.scrollHeight;
}, [logs]);
// Helper: clamp camera so it never goes outside the map bounds
const clampView = (x, y, zoom) => {
const z = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, zoom));
const minX = -PAN_PADDING;
const minY = -PAN_PADDING;
const maxX = mapSize - z + PAN_PADDING;
const maxY = mapSize - z + PAN_PADDING;
const cx = Math.max(minX, Math.min(maxX, x));
const cy = Math.max(minY, Math.min(maxY, y));
return { x: cx, y: cy, zoom: z };
};
// SVG coordinate conversion
const clientToWorld = (clientX, clientY) => {
const svg = svgRef.current;
if (!svg) return { x: 0, y: 0 };
const pt = svg.createSVGPoint();
pt.x = clientX;
pt.y = clientY;
const ctm = svg.getScreenCTM();
if (!ctm) return { x: 0, y: 0 };
const world = pt.matrixTransform(ctm.inverse());
return { x: world.x, y: world.y };
};
// --- MOUSE EVENTS ---
const handleWheel = (e) => {
e.preventDefault();
const zoomFactor = 1.08;
const direction = e.deltaY > 0 ? 1 : -1;
const mouseWorld = clientToWorld(e.clientX, e.clientY);
setViewState(prev => {
const newZoom = direction > 0 ? prev.zoom * zoomFactor : prev.zoom / zoomFactor;
const u = (mouseWorld.x - prev.x) / prev.zoom;
const v = (mouseWorld.y - prev.y) / prev.zoom;
const newX = mouseWorld.x - u * newZoom;
const newY = mouseWorld.y - v * newZoom;
return clampView(newX, newY, newZoom);
});
};
const handleMouseDown = (e) => {
setIsDragging(true);
dragWorldStartRef.current = clientToWorld(e.clientX, e.clientY);
dragViewStartRef.current = { ...viewState };
setDragStart({ x: e.clientX, y: e.clientY });
};
const handleMouseMove = (e) => {
if (hoverInfo) setHoverInfo(prev => ({ ...prev, x: e.clientX, y: e.clientY }));
if (!isDragging) return;
const startWorld = dragWorldStartRef.current;
const startView = dragViewStartRef.current;
if (!startWorld || !startView) return;
const nowWorld = clientToWorld(e.clientX, e.clientY);
const dx = nowWorld.x - startWorld.x;
const dy = nowWorld.y - startWorld.y;
const dragSpeed = 1.0;
const newX = startView.x - dx * dragSpeed;
const newY = startView.y - dy * dragSpeed;
setViewState(prev => clampView(newX, newY, prev.zoom));
};
const handleMouseUp = () => {
setIsDragging(false);
dragWorldStartRef.current = null;
dragViewStartRef.current = null;
};
// --- TOUCH EVENTS ---
const getTouchDistance = (t1, t2) => {
const dx = t1.clientX - t2.clientX;
const dy = t1.clientY - t2.clientY;
return Math.sqrt(dx * dx + dy * dy);
};
const handleTouchStart = (e) => {
if (e.touches.length === 1) {
// Single finger: Pan
setIsDragging(true);
dragWorldStartRef.current = clientToWorld(e.touches[0].clientX, e.touches[0].clientY);
dragViewStartRef.current = { ...viewState };
} else if (e.touches.length === 2) {
// Two fingers: Zoom (stop panning)
setIsDragging(false);
lastTouchDistance.current = getTouchDistance(e.touches[0], e.touches[1]);
}
};
const handleTouchMove = (e) => {
if (e.touches.length === 1 && isDragging) {
// Pan Logic
const startWorld = dragWorldStartRef.current;
const startView = dragViewStartRef.current;
if (!startWorld || !startView) return;
const nowWorld = clientToWorld(e.touches[0].clientX, e.touches[0].clientY);
const dx = nowWorld.x - startWorld.x;
const dy = nowWorld.y - startWorld.y;
setViewState(prev => clampView(startView.x - dx, startView.y - dy, prev.zoom));
}
else if (e.touches.length === 2) {
// Pinch Zoom Logic
const currentDist = getTouchDistance(e.touches[0], e.touches[1]);
if (lastTouchDistance.current) {
const ratio = lastTouchDistance.current / currentDist;
// Calculate center point of the pinch
const centerX = (e.touches[0].clientX + e.touches[1].clientX) / 2;
const centerY = (e.touches[0].clientY + e.touches[1].clientY) / 2;
const centerWorld = clientToWorld(centerX, centerY);
setViewState(prev => {
const newZoom = prev.zoom * ratio;
// Zoom towards the center point
const u = (centerWorld.x - prev.x) / prev.zoom;
const v = (centerWorld.y - prev.y) / prev.zoom;
const newX = centerWorld.x - u * newZoom;
const newY = centerWorld.y - v * newZoom;
return clampView(newX, newY, newZoom);
});
}
lastTouchDistance.current = currentDist;
}
};
const handleTouchEnd = (e) => {
if (e.touches.length === 0) {
setIsDragging(false);
dragWorldStartRef.current = null;
dragViewStartRef.current = null;
lastTouchDistance.current = null;
}
};
return (
{hoverInfo && hoverInfo.data && (
{hoverInfo.data.type}
STATUS: {hoverInfo.data.status}
)}
{/*
LOG CONTAINER:
Changed bottom-6 to bottom-20 for mobile so it's not covered by browser bars.
*/}
e.stopPropagation()} onMouseDown={(e) => e.stopPropagation()} onTouchStart={(e) => e.stopPropagation()}>
Live Feed
{logs.map((log) => (
[{log.timestamp}]
{log.text}
))}
{!isChatOpen && (
)}
);
};
const CommsPanel = ({ onClose }) => {
const [messages, setMessages] = useState([]);
const [input, setInput] = useState("");
const endRef = useRef(null);
useEffect(() => { warEngine.on('comm_message', msg => setMessages(prev => [...prev, msg])); }, []);
useEffect(() => { endRef.current?.scrollIntoView({ behavior: 'smooth' }); }, [messages]);
const handleSubmit = (e) => { e.preventDefault(); if(!input.trim()) return; warEngine.sendChat(input); setInput(""); };
return (
{messages.length === 0 &&
CHANNEL OPEN. NO TRAFFIC.
}
{messages.map((msg, i) => {
const isMe = msg.source === 'web';
const isSystem = msg.source === 'system';
if (isSystem) {
return (
⚠ SYSTEM: {msg.text}
)
}
return (
);
})}
);
};
// ==================================================================================
// MAIN APP CONTROLLER
// ==================================================================================
const WarroomApp = () => {
// STATE
const [configLoaded, setConfigLoaded] = useState(false);
const [currentPhase, setCurrentPhase] = useState('ARCHIVE');
// NEW: View State (DASHBOARD or OPERATION or CLAN_PROFILE)
const [activeView, setActiveView] = useState('DASHBOARD');
const [selectedClanId, setSelectedClanId] = useState(null); // Track which clan profile to show
const [isChatOpen, setIsChatOpen] = useState(false); // Default to closed on mobile
const [showConsole, setShowConsole] = useState(false);
// NEW: Admin State
const [isAdmin, setIsAdmin] = useState(false);
// NEW: Logged In State (Moved to Top)
const [isLoggedIn, setIsLoggedIn] = useState(false);
// NEW: Real Data State
const [leaderboard, setLeaderboard] = useState([]);
const [pastMatches, setPastMatches] = useState([]);
useEffect(() => {
const checkConfig = () => {
if (window.WAR_ROOM_CONFIG) {
// Load initial static config
warEngine.teams = {
a: window.WAR_ROOM_CONFIG.initialState.teamA,
b: window.WAR_ROOM_CONFIG.initialState.teamB
};
setCurrentPhase(window.WAR_ROOM_CONFIG.game.initialPhase);
setConfigLoaded(true);
// --- FETCH REAL DATA FROM BOT API ---
if (window.WAR_ROOM_CONFIG.vpsUrl) {
fetch(`${window.WAR_ROOM_CONFIG.vpsUrl}/api/warroom/data`)
.then(res => res.json())
.then(data => {
if (data.leaderboard) setLeaderboard(data.leaderboard);
if (data.pastMatches) setPastMatches(data.pastMatches);
})
.catch(err => console.error("Failed to fetch War Room data:", err));
}
warEngine.on('phase_change', (newPhase) => {
console.log("Bot commanded phase change:", newPhase);
setCurrentPhase(newPhase);
// Auto-switch to Operation view if battle starts
if (newPhase !== 'ARCHIVE') {
setActiveView('OPERATION');
}
});
// 2. Bot updates team names
warEngine.on('config_update', (teams) => {
// This is handled inside sub-components via engine.teams
});
} else {
setTimeout(checkConfig, 50);
}
};
checkConfig();
}, []);
const handleLogin = (token, nickname, adminStatus) => {
warEngine.connect(token, nickname);
// SET ADMIN STATUS
setIsAdmin(adminStatus);
setIsLoggedIn(true);
setCurrentPhase('LIVE');
};
if (!configLoaded) {
return (
ESTABLISHING UPLINK TO VPS...
);
}
// Determine what to render based on View + Phase
let content = null;
if (activeView === 'CLAN_PROFILE') {
content = setActiveView('DASHBOARD')} />;
} else if (activeView === 'DASHBOARD') {
content = setActiveView('OPERATION')}
leaderboard={leaderboard}
pastMatches={pastMatches}
onViewClan={(id) => { setSelectedClanId(id); setActiveView('CLAN_PROFILE'); }}
/>;
} else {
// OPERATION VIEW
if (currentPhase === 'ARCHIVE') {
content = setActiveView('OPERATION')}
leaderboard={leaderboard}
pastMatches={pastMatches}
onViewClan={(id) => { setSelectedClanId(id); setActiveView('CLAN_PROFILE'); }}
/>;
} else if (currentPhase === 'HYPE') {
content = ;
} else {
// LIVE or LOGIN phase
if (isLoggedIn) {
content = (
setIsChatOpen(true)} />
{/*
RESPONSIVE CHAT SIDEBAR LOGIC:
- Mobile: Fixed overlay (inset-0). Hidden = translate-x-full. Open = translate-x-0.
- Desktop: Static relative. Hidden = w-0. Open = w-[400px].
*/}
);
} else {
content = ;
}
}
}
return (
{/* RESPONSIVE HEADER */}
setActiveView('DASHBOARD')}>
WARROOM
{/* NAVIGATION TABS - Smaller text on mobile */}
{currentPhase !== 'ARCHIVE' && (
)}
{content}
{/* OPERATOR CONSOLE (Locked behind Admin Check) */}
{showConsole && setShowConsole(false)} />}
{/* ONLY SHOW BUTTON IF ADMIN */}
{isAdmin && !showConsole && (
)}
