163 lines
5.4 KiB
HTML
163 lines
5.4 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">
|
|
<!-- Start Screen -->
|
|
<div id="start-screen" class="start-screen">
|
|
<div class="start-panel">
|
|
<h1>HEXO</h1>
|
|
<p class="subtitle">DiceWars Clone</p>
|
|
|
|
<div class="setup-section">
|
|
<h3>Game Setup</h3>
|
|
|
|
<div class="setup-group">
|
|
<label for="player-count">Total Players:</label>
|
|
<select id="player-count">
|
|
<option value="2" selected>2 Players</option>
|
|
<option value="3">3 Players</option>
|
|
<option value="4">4 Players</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="setup-group">
|
|
<label for="map-size">Map Size:</label>
|
|
<select id="map-size">
|
|
<option value="10">Small (10x10)</option>
|
|
<option value="15">Medium (15x15)</option>
|
|
<option value="20" selected>Large (20x20)</option>
|
|
<option value="25">Extra Large (25x25)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="setup-group">
|
|
<label>Player Types:</label>
|
|
<div id="player-types">
|
|
<div class="player-type-row">
|
|
<span>Player 1:</span>
|
|
<select id="player1-type">
|
|
<option value="human">Human</option>
|
|
<option value="ai">AI Bot</option>
|
|
</select>
|
|
</div>
|
|
<div class="player-type-row">
|
|
<span>Player 2:</span>
|
|
<select id="player2-type">
|
|
<option value="human">Human</option>
|
|
<option value="ai" selected>AI Bot</option>
|
|
</select>
|
|
</div>
|
|
<div class="player-type-row" style="display:none;">
|
|
<span>Player 3:</span>
|
|
<select id="player3-type">
|
|
<option value="human">Human</option>
|
|
<option value="ai">AI Bot</option>
|
|
</select>
|
|
</div>
|
|
<div class="player-type-row" style="display:none;">
|
|
<span>Player 4:</span>
|
|
<select id="player4-type">
|
|
<option value="human">Human</option>
|
|
<option value="ai">AI Bot</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="btn btn-primary btn-large" id="start-game-btn">Start Game</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Game Screen -->
|
|
<div id="game-screen" class="game-screen" style="display:none;">
|
|
<!-- 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 id="players-container">
|
|
<!-- Player cards will be inserted here -->
|
|
</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 class="info-item">
|
|
<span>Map Size:</span>
|
|
<span id="map-size-display">20x20</span>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="btn btn-primary" id="end-turn-btn">End Turn</button>
|
|
<button class="btn btn-secondary" id="back-menu-btn">Main Menu</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>
|
|
<button class="btn btn-action" id="cancel-btn" style="width:100%" disabled>Cancel</button>
|
|
</div>
|
|
|
|
<div class="selected-cell-info" id="selected-cell-info">
|
|
<h3>Selected Cell</h3>
|
|
<div class="cell-stats">
|
|
<div class="stat">
|
|
<span class="stat-label">Strength:</span>
|
|
<span class="stat-value" id="cell-strength">-</span>
|
|
</div>
|
|
<div class="stat">
|
|
<span class="stat-label">Dice:</span>
|
|
<span class="stat-value" id="cell-dice">-</span>
|
|
</div>
|
|
</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>
|
|
</div>
|
|
|
|
<script type="module" src="game.js"></script>
|
|
</body>
|
|
</html>
|