75 lines
No EOL
3.1 KiB
HTML
75 lines
No EOL
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Grid Battle Game</title>
|
|
<link rel="stylesheet" href="/style.css">
|
|
</head>
|
|
<body>
|
|
<div class="game-container">
|
|
<header class="game-header">
|
|
<h1>Grid Battle</h1>
|
|
<div class="game-status">
|
|
<span id="status-text">Initializing...</span>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="game-board-container">
|
|
<div id="game-grid" class="game-grid">
|
|
<!-- Grid cells will be generated by JavaScript -->
|
|
</div>
|
|
</main>
|
|
|
|
<aside class="game-controls">
|
|
<div class="player-info">
|
|
<h3>Player Info</h3>
|
|
<div id="player-name">Not connected</div>
|
|
</div>
|
|
|
|
<div class="turn-controls">
|
|
<h3>Movement</h3>
|
|
<div class="compass-grid move-compass">
|
|
<div class="compass-empty"></div>
|
|
<button class="move-btn compass-north" data-direction="north">↑</button>
|
|
<div class="compass-empty"></div>
|
|
<button class="move-btn compass-west" data-direction="west">←</button>
|
|
<div class="compass-center">MOVE</div>
|
|
<button class="move-btn compass-east" data-direction="east">→</button>
|
|
<div class="compass-empty"></div>
|
|
<button class="move-btn compass-south" data-direction="south">↓</button>
|
|
<div class="compass-empty"></div>
|
|
</div>
|
|
|
|
<h3>Shooting</h3>
|
|
<div class="compass-grid shoot-compass">
|
|
<div class="compass-empty"></div>
|
|
<button class="shoot-btn compass-north" data-direction="north">🔫</button>
|
|
<div class="compass-empty"></div>
|
|
<button class="shoot-btn compass-west" data-direction="west">🔫</button>
|
|
<div class="compass-center">SHOOT</div>
|
|
<button class="shoot-btn compass-east" data-direction="east">🔫</button>
|
|
<div class="compass-empty"></div>
|
|
<button class="shoot-btn compass-south" data-direction="south">🔫</button>
|
|
<div class="compass-empty"></div>
|
|
</div>
|
|
|
|
<div class="turn-management">
|
|
<button id="undo-action" class="undo-btn" disabled>↶ Undo Last</button>
|
|
<button id="submit-turn" class="submit-btn" disabled>Submit Turn</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="game-info">
|
|
<h3>Game Info</h3>
|
|
<div id="moves-remaining">Moves: 0/4</div>
|
|
<div id="shot-available">Shot: Available</div>
|
|
<div id="actions-queued">Actions: 0</div>
|
|
<div id="turn-timer">Turn Timer: --</div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
|
|
<script src="/multiplayer-game.js"></script>
|
|
</body>
|
|
</html> |