110 lines
3.5 KiB
HTML
110 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>HEXO - DiceWars Clone</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<div class="game-container">
|
|
<!-- Header -->
|
|
<header class="game-header">
|
|
<h1>HEXO</h1>
|
|
<p class="subtitle">DiceWars Clone</p>
|
|
</header>
|
|
|
|
<!-- Game Area -->
|
|
<div class="game-area">
|
|
<!-- Left Panel - Player Info -->
|
|
<aside class="side-panel left-panel">
|
|
<div class="player-card player-1 active" id="player1-card">
|
|
<h3>Player 1</h3>
|
|
<div class="player-stats">
|
|
<div class="stat">
|
|
<span class="stat-label">Cells:</span>
|
|
<span class="stat-value" id="player1-cells">0</span>
|
|
</div>
|
|
<div class="stat">
|
|
<span class="stat-label">Supply:</span>
|
|
<span class="stat-value" id="player1-supply">0</span>
|
|
</div>
|
|
<div class="stat">
|
|
<span class="stat-label">Total Strength:</span>
|
|
<span class="stat-value" id="player1-strength">0</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="player-card player-2" id="player2-card">
|
|
<h3>Player 2</h3>
|
|
<div class="player-stats">
|
|
<div class="stat">
|
|
<span class="stat-label">Cells:</span>
|
|
<span class="stat-value" id="player2-cells">0</span>
|
|
</div>
|
|
<div class="stat">
|
|
<span class="stat-label">Supply:</span>
|
|
<span class="stat-value" id="player2-supply">0</span>
|
|
</div>
|
|
<div class="stat">
|
|
<span class="stat-label">Total Strength:</span>
|
|
<span class="stat-value" id="player2-strength">0</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="game-info">
|
|
<h3>Game Info</h3>
|
|
<div class="info-item">
|
|
<span>Turn:</span>
|
|
<span id="current-turn">1</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span>Phase:</span>
|
|
<span id="game-phase">Movement</span>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="btn btn-primary" id="end-turn-btn">End Turn</button>
|
|
<button class="btn btn-secondary" id="new-game-btn">New Game</button>
|
|
</aside>
|
|
|
|
<!-- Canvas -->
|
|
<main class="canvas-container">
|
|
<canvas id="game-canvas" width="800" height="800"></canvas>
|
|
<div class="canvas-overlay" id="message-overlay">
|
|
<span id="overlay-message"></span>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Right Panel - Actions & Log -->
|
|
<aside class="side-panel right-panel">
|
|
<div class="actions-panel">
|
|
<h3>Actions</h3>
|
|
<p class="instruction" id="action-instruction">Select a cell to move</p>
|
|
<div class="action-buttons">
|
|
<button class="btn btn-action" id="attack-btn" disabled>Attack</button>
|
|
<button class="btn btn-action" id="cancel-btn" disabled>Cancel</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="battle-log">
|
|
<h3>Battle Log</h3>
|
|
<div class="log-entries" id="battle-log">
|
|
<div class="log-entry">Game started...</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<footer class="game-footer">
|
|
<p>Click on your cell with dice, then click adjacent cell to attack</p>
|
|
</footer>
|
|
</div>
|
|
|
|
<script type="module" src="game.js"></script>
|
|
</body>
|
|
</html>
|