<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animals at War - Game</title>
<link rel="stylesheet" href="/static/css/style.css">
<script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
</head>
<body>
<div id="game-container" class="container">
<div id="status-bar">
<div id="player-info">
<span id="my-nickname"></span> | <span id="opponent-nickname">Connecting...</span>
</div>
<div id="turn-info">Waiting for players...</div>
</div>
<div id="game-board">
<!-- Grid will be generated by JS -->
</div>
<div id="controls">
<button id="btn-end-turn" class="btn btn-primary" disabled>End Turn</button>
</div>
<div id="error-msg" class="error"></div>
</div>
<script>
const urlParams = new URLSearchParams(window.location.search);
const room_id = "{{ room_id }}";
const socket = io();
const nicknameInput = document.getElementById('my-nickname');
const opponentNickname = document.getElementById('opponent-nickname');
const turnInfo = document.getElementById('turn-info');
const errorMsg = document.getElementById('error-msg');
const board = document.getElementById('game-board');
// Reconnection logic
const playerToken = localStorage.getItem('player_token');
const savedNickname = prompt("Enter your nickname to join/reconnect:") || "Guest";
localStorage.setItem('nickname', savedNickname);
// Initialize connection
socket.on('connect', () => {
console.log("Connected to server");
if (playerToken && room_id) {
// Attempt to rejoin existing room
socket.emit('join_game', {
room_id: room_id,
player_token: playerToken,
nickname: savedNickname
});
} else {
// First time joining via link (if token not in localStorage)
// In a real app, the link would contain the token
// For this demo, we'll try to join as a new player if no token exists
socket.emit('join_game', {
room_id: room_id, // Note: backend uses room_id
nickname: savedNickname
});
}
});
socket.on('game_joined', (data) => {
console.log("Joined room:", data.room_id);
// Initialize board...
});
socket.on('player_joined', (data) => {
opponentNickname.innerText = data.nickname;
});
socket.on('error', (data) => {
errorMsg.innerText = data.message;
});
// Placeholder for board generation
for (let i = 0; i < 100; i++) {
const cell = document.createElement('div');
cell.className = 'cell';
board.appendChild(cell);
}
</script>
</body>
</html>
