ssa/hexo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement hexagonal map and isometric game UI

Browse Source
This commit is contained in:
sokol
2026-02-21 17:23:09 +03:00
parent afd48af0b8
commit 25385de4d4
11 changed files with 2146 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
public/index.html Normal file
View File

@@ -0,0 +1,109 @@
<!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>