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

Add multi-player support (2-4 players) and AI bots

Browse Source
This commit is contained in:
sokol
2026-02-21 18:33:11 +03:00
parent dbe71dbda6
commit 62bd946509
4 changed files with 566 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

304
public/game.js
View File

@@ -1,20 +1,32 @@
/**
* Hexo Game UI - Canvas Rendering and Interactions
* Supports 2-4 players with AI bots
*/
import { HexMap, CELL_TYPES } from './map.js';
import { AIBot } from './ai-bot.js';
// Game constants
const HEX_SIZE = 18;
const MAP_SIZE = 20;
const ANIMATION_DURATION = 300;
// Player colors
const PLAYER_COLORS = {
1: '#4ecca3',
2: '#e94560',
3: '#f9ed69',
4: '#a8e6cf'
};
// Colors
const COLORS = {
blocked: '#2a2a4a',
empty: '#3a5a6a',
player1: '#4ecca3',
player2: '#e94560',
player3: '#f9ed69',
player4: '#a8e6cf',
highlight: 'rgba(255, 255, 255, 0.3)',
selected: 'rgba(233, 69, 96, 0.6)',
target: 'rgba(78, 204, 163, 0.5)',
@@ -36,8 +48,12 @@ class GameUI {
this.selectedCell = null;
this.currentTarget = null;
this.currentPlayer = 1;
this.gamePhase = 'movement'; // movement, supply, gameover
this.playerCount = 2;
this.playerTypes = {}; // 1: 'human', 2: 'ai', etc.
this.aiBots = {};
this.gamePhase = 'movement';
this.hasMoved = false;
this.isAIThinking = false;
this.offsetX = 0;
this.offsetY = 0;
@@ -46,48 +62,129 @@ class GameUI {
}
init() {
this.setupStartScreen();
this.setupEventListeners();
}
setupStartScreen() {
const playerCountSelect = document.getElementById('player-count');
const playerTypeRows = document.querySelectorAll('.player-type-row');
playerCountSelect.addEventListener('change', (e) => {
const count = parseInt(e.target.value);
playerTypeRows.forEach((row, index) => {
row.style.display = index < count ? 'flex' : 'none';
});
});
document.getElementById('start-game-btn').addEventListener('click', () => {
this.startGame();
});
document.getElementById('back-menu-btn').addEventListener('click', () => {
this.showStartScreen();
});
}
showStartScreen() {
document.getElementById('start-screen').style.display = 'flex';
document.getElementById('game-screen').style.display = 'none';
}
startGame() {
// Get settings
this.playerCount = parseInt(document.getElementById('player-count').value);
for (let i = 1; i <= this.playerCount; i++) {
const typeSelect = document.getElementById(`player${i}-type`);
this.playerTypes[i] = typeSelect.value;
if (this.playerTypes[i] === 'ai') {
this.aiBots[i] = new AIBot(i, this.map, this);
}
}
// Show game screen
document.getElementById('start-screen').style.display = 'none';
document.getElementById('game-screen').style.display = 'flex';
this.newGame();
console.log('Game initialized');
}
newGame() {
this.map = new HexMap(MAP_SIZE);
console.log('Map created, cells:', this.map.cells.size);
this.selectedCell = null;
this.currentTarget = null;
this.currentPlayer = 1;
this.gamePhase = 'movement';
this.hasMoved = false;
this.isAIThinking = false;
// Initialize starting positions
// Initialize starting positions for all players
this.initializePlayers();
this.centerMap();
this.render();
this.createPlayerCards();
this.updateUI();
this.log('New game started! Player 1\'s turn.');
this.log(`New game started with ${this.playerCount} players!`);
// Start first player's turn (AI if needed)
this.checkAndRunAITurn();
}
createPlayerCards() {
const container = document.getElementById('players-container');
container.innerHTML = '';
for (let i = 1; i <= this.playerCount; i++) {
const card = document.createElement('div');
card.className = `player-card player-${i}${i === 1 ? ' active' : ''}${this.playerTypes[i] === 'ai' ? ' ai-controlled' : ''}`;
card.id = `player${i}-card`;
card.innerHTML = `
<h3>Player ${i}${this.playerTypes[i] === 'ai' ? ' (AI)' : ''}</h3>
<div class="player-stats">
<div class="stat">
<span class="stat-label">Cells:</span>
<span class="stat-value" id="player${i}-cells">0</span>
</div>
<div class="stat">
<span class="stat-label">Supply:</span>
<span class="stat-value" id="player${i}-supply">0</span>
</div>
<div class="stat">
<span class="stat-label">Strength:</span>
<span class="stat-value" id="player${i}-strength">0</span>
</div>
</div>
`;
container.appendChild(card);
}
}
initializePlayers() {
// Get random empty cells for each player
const emptyCells = this.map.getEmptyCells();
// Shuffle and pick starting positions
const shuffled = emptyCells.sort(() => Math.random() - 0.5);
// Player 1 starting position (top-left area)
const p1Cell = shuffled.find(c => c.q < 8 && c.r < 8);
if (p1Cell) {
this.map.setOwner(p1Cell.q, p1Cell.r, 1);
p1Cell.setStrength(8); // Starting strength
}
// Place starting units for each player
const positions = [
{ q: 2, r: 2 }, // Player 1 - top area
{ q: MAP_SIZE - 3, r: MAP_SIZE - 3 }, // Player 2 - bottom area
{ q: 2, r: MAP_SIZE - 3 }, // Player 3
{ q: MAP_SIZE - 3, r: 2 } // Player 4
];
// Player 2 starting position (bottom-right area)
const p2Cell = shuffled.find(c => c.q > 10 && c.r > 10 && c.type === CELL_TYPES.EMPTY);
if (p2Cell) {
this.map.setOwner(p2Cell.q, p2Cell.r, 2);
p2Cell.setStrength(8);
for (let i = 1; i <= this.playerCount; i++) {
const pos = positions[i - 1] || shuffled[i];
if (pos) {
const cell = this.map.getCell(pos.q, pos.r);
if (cell && cell.isPassable()) {
this.map.setOwner(pos.q, pos.r, i);
cell.setStrength(8);
}
}
}
}
@@ -96,7 +193,6 @@ class GameUI {
const canvasHeight = this.canvas.height;
const sqrt3 = Math.sqrt(3);
// Map dimensions for pointy-top hex grid
const mapWidth = HEX_SIZE * sqrt3 * (MAP_SIZE + MAP_SIZE/2);
const mapHeight = HEX_SIZE * 1.5 * (MAP_SIZE - 1) + HEX_SIZE * 2;
@@ -109,21 +205,13 @@ class GameUI {
this.canvas.addEventListener('mousemove', (e) => this.handleMouseMove(e));
document.getElementById('end-turn-btn').addEventListener('click', () => this.endTurn());
document.getElementById('new-game-btn').addEventListener('click', () => this.newGame());
document.getElementById('cancel-btn').addEventListener('click', () => this.cancelSelection());
}
hexToPixel(q, r) {
// Pointy-top hex grid with proper adjacency
// For pointy-top: width = sqrt(3) * size, height = 2 * size
// Horizontal spacing = width = sqrt(3) * size
// Vertical spacing = 3/4 * height = 1.5 * size
const sqrt3 = Math.sqrt(3);
// Convert axial to pixel coordinates for pointy-top hex
const x = this.offsetX + HEX_SIZE * sqrt3 * (q + r/2);
const y = this.offsetY + HEX_SIZE * 1.5 * r;
return { x, y };
}
@@ -144,16 +232,6 @@ class GameUI {
return null;
}
/**
* Get neighboring cells for pointy-top hex grid
* Directions for pointy-top hex in axial coordinates:
* - north-east: (+1, -1)
* - north-west: (0, -1)
* - west: (-1, 0)
* - south-west: (-1, +1)
* - south-east: (0, +1)
* - east: (+1, 0)
*/
getValidTargets(q, r) {
const directions = [
[+1, -1], // north-east
@@ -180,14 +258,11 @@ class GameUI {
drawHex(q, r, fillStyle, strokeStyle = COLORS.stroke, lineWidth = 2) {
const { x, y } = this.hexToPixel(q, r);
const size = HEX_SIZE * 0.98;
// Draw pointy-top hexagon - size matches grid spacing
const size = HEX_SIZE * 0.98; // Almost full size for tight fit
// Pointy-top hexagon vertices (flat sides left/right)
const vertices = [];
for (let i = 0; i < 6; i++) {
const angle = Math.PI / 6 + (Math.PI / 3) * i; // Start at 30 degrees
const angle = Math.PI / 6 + (Math.PI / 3) * i;
vertices.push({
x: x + size * Math.cos(angle),
y: y + size * Math.sin(angle)
@@ -215,14 +290,12 @@ class GameUI {
const { x, y } = this.hexToPixel(cell.q, cell.r);
const strength = cell.getStrength();
// Draw strength number
this.ctx.fillStyle = COLORS.text;
this.ctx.font = 'bold 11px Arial';
this.ctx.textAlign = 'center';
this.ctx.textBaseline = 'middle';
this.ctx.fillText(strength.toString(), x, y - 3);
// Draw dice count indicator (small dots)
if (cell.dice.length > 1) {
const dotY = y + 8;
for (let i = 0; i < Math.min(cell.dice.length, 5); i++) {
@@ -238,9 +311,7 @@ class GameUI {
if (!cell.isOwned()) return;
const { x, y } = this.hexToPixel(cell.q, cell.r);
const ownerColor = cell.getOwner() === 1 ? COLORS.player1 : COLORS.player2;
// Draw border matching the hexagon shape
const ownerColor = PLAYER_COLORS[cell.getOwner()] || COLORS.player1;
const size = HEX_SIZE * 0.98 - 3;
const vertices = [];
@@ -264,13 +335,11 @@ class GameUI {
}
render() {
// Clear canvas
this.ctx.fillStyle = COLORS.stroke;
this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
if (!this.map) return;
// Draw all cells
for (let r = 0; r < MAP_SIZE; r++) {
for (let q = 0; q < MAP_SIZE; q++) {
const cell = this.map.getCell(q, r);
@@ -282,11 +351,14 @@ class GameUI {
color = COLORS.player1;
} else if (cell.type === CELL_TYPES.PLAYER2) {
color = COLORS.player2;
} else if (cell.type === CELL_TYPES.PLAYER3) {
color = COLORS.player3;
} else if (cell.type === CELL_TYPES.PLAYER4) {
color = COLORS.player4;
} else {
color = COLORS.empty;
}
// Apply transparency for non-owned cells
if (!cell.isOwned()) {
color = this.hexToRgba(color, 0.6);
}
@@ -297,25 +369,23 @@ class GameUI {
}
}
// Draw selection highlight
if (this.selectedCell) {
this.drawHex(
this.selectedCell.q,
this.selectedCell.r,
this.selectedCell.q,
this.selectedCell.r,
COLORS.selected,
COLORS.text,
3
);
// Highlight valid targets (not blocked, not own)
const targets = this.getValidTargets(this.selectedCell.q, this.selectedCell.r);
for (const target of targets) {
if (target.getOwner() !== this.currentPlayer) {
this.drawHex(
target.q,
target.r,
target.q,
target.r,
COLORS.target,
COLORS.player1,
PLAYER_COLORS[this.currentPlayer] || COLORS.player1,
2
);
}
@@ -332,6 +402,7 @@ class GameUI {
handleClick(e) {
if (this.gamePhase !== 'movement') return;
if (this.playerTypes[this.currentPlayer] === 'ai') return;
const rect = this.canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
@@ -343,29 +414,22 @@ class GameUI {
const cell = this.map.getCell(hexPos.q, hexPos.r);
if (!cell || !cell.isPassable()) return;
// Handle cell selection
if (this.selectedCell === null) {
// Select own cell with strength > 1
if (cell.getOwner() === this.currentPlayer && cell.getStrength() > 1) {
this.selectedCell = cell;
this.instruction = `Select target cell or cancel`;
this.updateUI();
this.render();
}
} else {
// Check if clicking on same cell - deselect
if (cell === this.selectedCell) {
this.cancelSelection();
return;
}
// Check if valid target using isometric-aware adjacency
const targets = this.getValidTargets(this.selectedCell.q, this.selectedCell.r);
const isValidTarget = targets.some(n => n.q === cell.q && n.r === cell.r);
// Cannot move to own cells - only attack enemy or capture empty
if (cell.getOwner() === this.currentPlayer) {
// Select different own cell instead
if (cell.getStrength() > 1) {
this.selectedCell = cell;
this.updateUI();
@@ -384,53 +448,48 @@ class GameUI {
}
handleMouseMove(e) {
// Could add hover effects here
// Hover effects could be added here
}
executeAttack() {
if (!this.selectedCell || !this.currentTarget) return;
const attacker = this.selectedCell;
const defender = this.currentTarget;
const attackStrength = attacker.getStrength() - 1;
if (defender.type === CELL_TYPES.EMPTY || defender.getOwner() !== this.currentPlayer) {
// Attack empty or enemy cell
let defenseStrength = defender.getStrength();
if (defenseStrength > 0) {
// Combat! Roll dice
const attackRoll = Math.floor(Math.random() * attackStrength) + 1;
const defenseRoll = Math.floor(Math.random() * defenseStrength) + 1;
this.log(`Attack: ${attackStrength} vs ${defenseStrength} | Roll: ${attackRoll} vs ${defenseRoll}`);
this.log(`P${this.currentPlayer} Attack: ${attackStrength} vs ${defenseStrength} | Roll: ${attackRoll} vs ${defenseRoll}`);
if (attackRoll > defenseRoll) {
// Attacker wins
const remainingStrength = attackRoll - 1;
attacker.setStrength(1);
if (remainingStrength > 0) {
defender.setStrength(remainingStrength);
this.map.setOwner(defender.q, defender.r, this.currentPlayer);
this.log(`Victory! Captured cell with strength ${remainingStrength}`, 'victory');
this.log(`Victory! Captured with strength ${remainingStrength}`, 'victory');
}
} else {
// Defender wins - attacker loses all but 1 die
const remainingDefense = defenseRoll - attackRoll;
defender.setStrength(Math.max(1, remainingDefense));
attacker.setStrength(1); // Attacker reduced to 1
this.log(`Attack repelled! Attacker reduced to 1, Defender has ${Math.max(1, remainingDefense)} strength`, 'defeat');
attacker.setStrength(1);
this.log(`Attack repelled! Defender has ${Math.max(1, remainingDefense)}`, 'defeat');
}
} else {
// Move to empty cell - transfer attackStrength (original - 1)
attacker.setStrength(1);
defender.setStrength(attackStrength);
this.map.setOwner(defender.q, defender.r, this.currentPlayer);
this.log(`Moved to empty cell with strength ${attackStrength}`);
this.log(`Captured empty cell with strength ${attackStrength}`);
}
}
this.hasMoved = true;
this.cancelSelection();
this.render();
@@ -444,48 +503,58 @@ class GameUI {
this.render();
}
endTurn() {
async endTurn() {
if (this.gamePhase !== 'movement') return;
if (this.isAIThinking) return;
// Apply supply
const supply = this.map.calculateSupply(this.currentPlayer);
this.distributeSupply(supply);
this.log(`Player ${this.currentPlayer} received ${supply} supply`);
// Switch player
this.currentPlayer = this.currentPlayer === 1 ? 2 : 1;
// Next player
this.currentPlayer = (this.currentPlayer % this.playerCount) + 1;
this.hasMoved = false;
this.cancelSelection();
this.updateUI();
this.render();
this.log(`Player ${this.currentPlayer}'s turn`);
// Check if next player is AI
this.checkAndRunAITurn();
}
checkAndRunAITurn() {
if (this.playerTypes[this.currentPlayer] === 'ai' && this.aiBots[this.currentPlayer]) {
this.isAIThinking = true;
this.updateUI();
// Run AI turn
this.aiBots[this.currentPlayer].playTurn().then(() => {
this.isAIThinking = false;
// AI will call endTurn() when done
});
}
}
distributeSupply(supply) {
const playerCells = this.map.getPlayerCells(this.currentPlayer);
// Find cells that can receive more dice
const eligibleCells = playerCells.filter(cell => !cell.isMaxStrength());
if (eligibleCells.length === 0 || supply === 0) return;
// Distribute supply one by one to random eligible cells
let remainingSupply = supply;
while (remainingSupply > 0 && eligibleCells.length > 0) {
// Pick random cell
const randomCell = eligibleCells[Math.floor(Math.random() * eligibleCells.length)];
const currentStrength = randomCell.getStrength();
if (currentStrength < 48) {
// Add 1 strength to this cell
randomCell.setStrength(currentStrength + 1);
remainingSupply--;
}
// Remove cell from eligible if it's now at max strength
if (randomCell.isMaxStrength()) {
eligibleCells.splice(eligibleCells.indexOf(randomCell), 1);
}
@@ -493,29 +562,32 @@ class GameUI {
}
updateUI() {
// Update current player stats
const currentCells = this.map.getPlayerCells(this.currentPlayer);
const currentStrength = currentCells.reduce((sum, c) => sum + c.getStrength(), 0);
const currentSupply = this.map.calculateSupply(this.currentPlayer);
// Update all player cards
for (let i = 1; i <= this.playerCount; i++) {
const playerCells = this.map.getPlayerCells(i);
const playerStrength = playerCells.reduce((sum, c) => sum + c.getStrength(), 0);
const playerSupply = this.map.calculateSupply(i);
document.getElementById(`player${i}-cells`).textContent = playerCells.length;
document.getElementById(`player${i}-supply`).textContent = playerSupply;
document.getElementById(`player${i}-strength`).textContent = playerStrength;
const card = document.getElementById(`player${i}-card`);
card.classList.toggle('active', i === this.currentPlayer);
}
// Update player 1 card (only player for now)
document.getElementById('player1-cells').textContent = currentCells.length;
document.getElementById('player1-supply').textContent = currentSupply;
document.getElementById('player1-strength').textContent = currentStrength;
// Update game info
document.getElementById('current-turn').textContent = this.currentPlayer;
document.getElementById('game-phase').textContent = this.gamePhase;
// Update instruction
const instruction = document.getElementById('action-instruction');
if (this.selectedCell) {
instruction.textContent = `Select target to attack (strength: ${this.selectedCell.getStrength()})`;
instruction.textContent = `Select target (strength: ${this.selectedCell.getStrength()})`;
} else if (this.playerTypes[this.currentPlayer] === 'ai') {
instruction.textContent = 'AI is thinking...';
} else {
instruction.textContent = 'Select a cell with dice to move';
}
// Update selected cell info - always show with placeholder if nothing selected
const cellInfo = document.getElementById('selected-cell-info');
cellInfo.style.display = 'block';
@@ -527,38 +599,24 @@ class GameUI {
document.getElementById('cell-dice').textContent = '-';
}
// Update buttons
const cancelBtn = document.getElementById('cancel-btn');
const endTurnBtn = document.getElementById('end-turn-btn');
cancelBtn.disabled = !this.selectedCell;
// End turn is always enabled
endTurnBtn.disabled = false;
cancelBtn.disabled = !this.selectedCell || this.playerTypes[this.currentPlayer] === 'ai';
endTurnBtn.disabled = this.playerTypes[this.currentPlayer] === 'ai';
}
log(message, type = '') {
const logContainer = document.getElementById('battle-log');
const entry = document.createElement('div');
entry.className = `log-entry ${type}`;
entry.textContent = `[Turn ${this.currentPlayer}] ${message}`;
entry.textContent = `[P${this.currentPlayer}] ${message}`;
logContainer.insertBefore(entry, logContainer.firstChild);
// Keep only last 50 entries
while (logContainer.children.length > 50) {
logContainer.removeChild(logContainer.lastChild);
}
}
showMessage(message) {
const overlay = document.getElementById('message-overlay');
const messageEl = document.getElementById('overlay-message');
messageEl.textContent = message;
overlay.classList.add('visible');
setTimeout(() => {
overlay.classList.remove('visible');
}, 2000);
}
}
// Initialize game when DOM is ready