Spaces:

yazdaabdul
/

mount-and-blade

Running

File size: 35,843 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Warlords of the Fantasy Kingdom</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
    <style>
        .hexagon {
            position: relative;
            width: 100px;
            height: 57.74px;
            background-color: #64C7CC;
            margin: 28.87px 0;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .hexagon:before,
        .hexagon:after {
            content: "";
            position: absolute;
            width: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
        }

        .hexagon:before {
            bottom: 100%;
            border-bottom: 28.87px solid #64C7CC;
        }

        .hexagon:after {
            top: 100%;
            width: 0;
            border-top: 28.87px solid #64C7CC;
        }

        .hexagon:hover {
            background-color: #4CAF50;
        }

        .hexagon:hover:before {
            border-bottom-color: #4CAF50;
        }

        .hexagon:hover:after {
            border-top-color: #4CAF50;
        }

        .hex-row {
            display: flex;
            margin-left: -50px;
        }

        .hex-row:nth-child(even) {
            margin-left: 0;
        }

        .hex-grid {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .player1 {
            background-color: #FF5252;
        }

        .player1:before {
            border-bottom-color: #FF5252;
        }

        .player1:after {
            border-top-color: #FF5252;
        }

        .player2 {
            background-color: #536DFE;
        }

        .player2:before {
            border-bottom-color: #536DFE;
        }

        .player2:after {
            border-top-color: #536DFE;
        }

        .neutral {
            background-color: #64C7CC;
        }

        .neutral:before {
            border-bottom-color: #64C7CC;
        }

        .neutral:after {
            border-top-color: #64C7CC;
        }

        .mountain {
            background-color: #795548;
        }

        .mountain:before {
            border-bottom-color: #795548;
        }

        .mountain:after {
            border-top-color: #795548;
        }

        .water {
            background-color: #2196F3;
        }

        .water:before {
            border-bottom-color: #2196F3;
        }

        .water:after {
            border-top-color: #2196F3;
        }

        .forest {
            background-color: #4CAF50;
        }

        .forest:before {
            border-bottom-color: #4CAF50;
        }

        .forest:after {
            border-top-color: #4CAF50;
        }

        .castle {
            position: relative;
            z-index: 2;
        }

        .unit {
            position: absolute;
            z-index: 3;
            font-size: 24px;
            pointer-events: none;
        }

        .selected {
            box-shadow: 0 0 15px gold;
        }

        .movable {
            box-shadow: 0 0 15px #4CAF50;
        }

        .attackable {
            box-shadow: 0 0 15px #FF5252;
        }

        @media (max-width: 768px) {
            .hexagon {
                width: 60px;
                height: 34.64px;
            }

            .hexagon:before,
            .hexagon:after {
                border-left: 30px solid transparent;
                border-right: 30px solid transparent;
            }

            .hexagon:before {
                border-bottom: 17.32px solid #64C7CC;
            }

            .hexagon:after {
                border-top: 17.32px solid #64C7CC;
            }

            .unit {
                font-size: 16px;
            }
        }
    </style>
</head>
<body class="bg-gray-900 text-white">
    <div class="container mx-auto px-4 py-8">
        <header class="text-center mb-8">
            <h1 class="text-4xl font-bold mb-2 text-yellow-400">Warlords of the Fantasy Kingdom</h1>
            <p class="text-xl text-gray-300">A turn-based strategy game for 2 players</p>
        </header>

        <div class="flex flex-col lg:flex-row gap-8">
            <!-- Game Board -->
            <div class="flex-1">
                <div class="hex-grid" id="game-board"></div>
            </div>

            <!-- Game Info Panel -->
            <div class="w-full lg:w-1/4 bg-gray-800 rounded-lg p-6">
                <div class="mb-6">
                    <h2 class="text-2xl font-bold mb-4 text-center">Game Status</h2>
                    <div id="current-player" class="text-xl font-bold mb-2 text-center py-2 rounded"></div>
                    <div class="grid grid-cols-2 gap-4 mb-4">
                        <div class="bg-red-600 p-3 rounded-lg">
                            <h3 class="font-bold">Player 1</h3>
                            <p>Gold: <span id="p1-gold">100</span></p>
                            <p>Territories: <span id="p1-territories">1</span></p>
                        </div>
                        <div class="bg-blue-600 p-3 rounded-lg">
                            <h3 class="font-bold">Player 2</h3>
                            <p>Gold: <span id="p2-gold">100</span></p>
                            <p>Territories: <span id="p2-territories">1</span></p>
                        </div>
                    </div>
                </div>

                <div class="mb-6">
                    <h2 class="text-2xl font-bold mb-4 text-center">Selected Tile</h2>
                    <div id="tile-info" class="bg-gray-700 p-4 rounded-lg">
                        <p>Type: <span id="tile-type">None</span></p>
                        <p>Owner: <span id="tile-owner">None</span></p>
                        <p>Units: <span id="tile-units">0</span></p>
                    </div>
                </div>

                <div class="mb-6">
                    <h2 class="text-2xl font-bold mb-4 text-center">Actions</h2>
                    <div class="grid grid-cols-2 gap-2">
                        <button id="end-turn" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded">
                            End Turn
                        </button>
                        <button id="recruit" class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
                            Recruit (20g)
                        </button>
                        <button id="build-castle" class="bg-yellow-600 hover:bg-yellow-700 text-white font-bold py-2 px-4 rounded">
                            Build Castle (50g)
                        </button>
                        <button id="move-units" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                            Move Units
                        </button>
                    </div>
                </div>

                <div>
                    <h2 class="text-2xl font-bold mb-4 text-center">Game Log</h2>
                    <div id="game-log" class="bg-gray-700 p-4 rounded-lg h-40 overflow-y-auto">
                        <p>Game started! Player 1's turn.</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Help Modal -->
        <div id="help-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
            <div class="bg-gray-800 rounded-lg p-6 max-w-2xl w-full max-h-screen overflow-y-auto">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-2xl font-bold">Game Rules</h2>
                    <button id="close-help" class="text-gray-400 hover:text-white">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="space-y-4">
                    <div>
                        <h3 class="text-xl font-semibold mb-2">Objective</h3>
                        <p>Conquer the entire map by capturing all territories and eliminating your opponent's castles.</p>
                    </div>
                    <div>
                        <h3 class="text-xl font-semibold mb-2">Gameplay</h3>
                        <ul class="list-disc pl-5 space-y-2">
                            <li>Players take turns performing actions</li>
                            <li>Each turn you can move units, recruit new units, or build castles</li>
                            <li>Units can move to adjacent tiles (1 tile per turn)</li>
                            <li>To capture a neutral tile, move at least 1 unit onto it</li>
                            <li>To attack an enemy tile, move more units than the defender has</li>
                            <li>Castles provide defense bonuses and allow recruitment</li>
                        </ul>
                    </div>
                    <div>
                        <h3 class="text-xl font-semibold mb-2">Controls</h3>
                        <ul class="list-disc pl-5 space-y-2">
                            <li>Click on a tile to select it</li>
                            <li>Use the action buttons to perform actions</li>
                            <li>When moving, first select your units, then select destination</li>
                            <li>Click "End Turn" when finished with your actions</li>
                        </ul>
                    </div>
                    <div>
                        <h3 class="text-xl font-semibold mb-2">Tile Types</h3>
                        <div class="grid grid-cols-2 gap-4">
                            <div class="flex items-center">
                                <div class="hexagon neutral w-8 h-4.62 mr-2">
                                    <div class="hexagon:before border-bottom-color: #64C7CC"></div>
                                    <div class="hexagon:after border-top-color: #64C7CC"></div>
                                </div>
                                <span>Neutral Land</span>
                            </div>
                            <div class="flex items-center">
                                <div class="hexagon mountain w-8 h-4.62 mr-2">
                                    <div class="hexagon:before border-bottom-color: #795548"></div>
                                    <div class="hexagon:after border-top-color: #795548"></div>
                                </div>
                                <span>Mountain (Impassable)</span>
                            </div>
                            <div class="flex items-center">
                                <div class="hexagon water w-8 h-4.62 mr-2">
                                    <div class="hexagon:before border-bottom-color: #2196F3"></div>
                                    <div class="hexagon:after border-top-color: #2196F3"></div>
                                </div>
                                <span>Water (Impassable)</span>
                            </div>
                            <div class="flex items-center">
                                <div class="hexagon forest w-8 h-4.62 mr-2">
                                    <div class="hexagon:before border-bottom-color: #4CAF50"></div>
                                    <div class="hexagon:after border-top-color: #4CAF50"></div>
                                </div>
                                <span>Forest (Movement cost 2)</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Game Over Modal -->
        <div id="game-over-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
            <div class="bg-gray-800 rounded-lg p-6 max-w-md w-full">
                <h2 class="text-3xl font-bold mb-4 text-center" id="game-over-title">Victory!</h2>
                <p class="text-xl mb-6 text-center" id="game-over-message"></p>
                <div class="flex justify-center">
                    <button id="play-again" class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-6 rounded">
                        Play Again
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Game state
        const gameState = {
            currentPlayer: 1,
            players: {
                1: { gold: 100, territories: 1, color: 'player1' },
                2: { gold: 100, territories: 1, color: 'player2' }
            },
            map: [],
            selectedTile: null,
            actionMode: null, // 'move', 'recruit', 'build-castle'
            moveOrigin: null,
            mapSize: { rows: 9, cols: 9 },
            terrainTypes: ['neutral', 'mountain', 'water', 'forest'],
            gameOver: false
        };

        // Initialize the game
        function initGame() {
            createMap();
            renderMap();
            updateUI();
            addEventListeners();
            addToGameLog('Game started! Player 1\'s turn.');
        }

        // Create the game map
        function createMap() {
            const { rows, cols } = gameState.mapSize;
            
            for (let row = 0; row < rows; row++) {
                gameState.map[row] = [];
                for (let col = 0; col < cols; col++) {
                    // Determine terrain type (weighted probabilities)
                    let terrainType;
                    const rand = Math.random();
                    if (rand < 0.1) terrainType = 'mountain';
                    else if (rand < 0.2) terrainType = 'water';
                    else if (rand < 0.35) terrainType = 'forest';
                    else terrainType = 'neutral';
                    
                    // Set starting positions for players
                    let owner = null;
                    let units = 0;
                    let castle = false;
                    
                    // Player 1 starting position (top-left)
                    if (row === 1 && col === 1) {
                        owner = 1;
                        units = 5;
                        castle = true;
                    }
                    
                    // Player 2 starting position (bottom-right)
                    if (row === rows - 2 && col === cols - 2) {
                        owner = 2;
                        units = 5;
                        castle = true;
                    }
                    
                    gameState.map[row][col] = {
                        row,
                        col,
                        terrain: terrainType,
                        owner,
                        units,
                        castle
                    };
                }
            }
            
            // Update territory counts
            updateTerritoryCounts();
        }

        // Render the game map
        function renderMap() {
            const gameBoard = document.getElementById('game-board');
            gameBoard.innerHTML = '';
            
            const { rows, cols } = gameState.mapSize;
            
            for (let row = 0; row < rows; row++) {
                const hexRow = document.createElement('div');
                hexRow.className = 'hex-row';
                
                for (let col = 0; col < cols; col++) {
                    const tile = gameState.map[row][col];
                    const hexagon = document.createElement('div');
                    hexagon.className = 'hexagon';
                    
                    // Set terrain class
                    hexagon.classList.add(tile.terrain);
                    
                    // Set owner class if owned
                    if (tile.owner) {
                        hexagon.classList.add(gameState.players[tile.owner].color);
                    }
                    
                    // Add castle if present
                    if (tile.castle) {
                        hexagon.classList.add('castle');
                        const castleIcon = document.createElement('div');
                        castleIcon.className = 'unit';
                        castleIcon.innerHTML = '🏰';
                        hexagon.appendChild(castleIcon);
                    }
                    
                    // Add units if present
                    if (tile.units > 0) {
                        const unitCount = document.createElement('div');
                        unitCount.className = 'unit';
                        unitCount.innerHTML = tile.owner === 1 ? '⚔️' : '🛡️';
                        unitCount.innerHTML += tile.units;
                        hexagon.appendChild(unitCount);
                    }
                    
                    // Add click event
                    hexagon.addEventListener('click', () => handleTileClick(tile));
                    
                    // Set data attributes
                    hexagon.dataset.row = row;
                    hexagon.dataset.col = col;
                    
                    hexRow.appendChild(hexagon);
                }
                
                gameBoard.appendChild(hexRow);
            }
        }

        // Handle tile clicks
        function handleTileClick(tile) {
            // Clear previous selections
            clearHighlights();
            
            // If in move mode and origin is selected
            if (gameState.actionMode === 'move' && gameState.moveOrigin) {
                attemptMove(gameState.moveOrigin, tile);
                return;
            }
            
            // Select the clicked tile
            gameState.selectedTile = tile;
            
            // Highlight selected tile
            const hexagon = document.querySelector(`.hexagon[data-row="${tile.row}"][data-col="${tile.col}"]`);
            if (hexagon) {
                hexagon.classList.add('selected');
            }
            
            // If in move mode and this tile has movable units
            if (gameState.actionMode === 'move' && tile.owner === gameState.currentPlayer && tile.units > 0) {
                gameState.moveOrigin = tile;
                highlightMovableTiles(tile);
            }
            
            // Update tile info panel
            updateTileInfo(tile);
        }

        // Highlight movable tiles from a position
        function highlightMovableTiles(tile) {
            const { row, col } = tile;
            const moves = getAdjacentTiles(row, col);
            
            for (const move of moves) {
                const targetTile = gameState.map[move.row][move.col];
                const hexagon = document.querySelector(`.hexagon[data-row="${move.row}"][data-col="${move.col}"]`);
                
                if (!hexagon) continue;
                
                // Can move to neutral or friendly tiles
                if (targetTile.owner === null || targetTile.owner === gameState.currentPlayer) {
                    hexagon.classList.add('movable');
                }
                // Can attack enemy tiles
                else if (targetTile.owner !== gameState.currentPlayer) {
                    hexagon.classList.add('attackable');
                }
            }
        }

        // Get adjacent tiles (hexagonal grid)
        function getAdjacentTiles(row, col) {
            const { rows, cols } = gameState.mapSize;
            const directions = [
                { dr: -1, dc: 0 },  // up
                { dr: 1, dc: 0 },   // down
                { dr: 0, dc: -1 },  // left
                { dr: 0, dc: 1 },   // right
                { dr: -1, dc: row % 2 === 0 ? -1 : 1 },  // up-left or up-right
                { dr: 1, dc: row % 2 === 0 ? -1 : 1 }    // down-left or down-right
            ];
            
            const adjacent = [];
            
            for (const dir of directions) {
                const newRow = row + dir.dr;
                const newCol = col + dir.dc;
                
                if (newRow >= 0 && newRow < rows && newCol >= 0 && newCol < cols) {
                    const tile = gameState.map[newRow][newCol];
                    
                    // Can't move to mountains or water
                    if (tile.terrain === 'mountain' || tile.terrain === 'water') {
                        continue;
                    }
                    
                    adjacent.push(tile);
                }
            }
            
            return adjacent;
        }

        // Attempt to move units from origin to target
        function attemptMove(origin, target) {
            // Check if target is adjacent
            const adjacentTiles = getAdjacentTiles(origin.row, origin.col);
            if (!adjacentTiles.some(t => t.row === target.row && t.col === target.col)) {
                addToGameLog('Cannot move there - not adjacent!');
                return;
            }
            
            // Check if origin has units
            if (origin.units <= 0) {
                addToGameLog('No units to move!');
                return;
            }
            
            // Check if target is passable
            if (target.terrain === 'mountain' || target.terrain === 'water') {
                addToGameLog('Cannot move to impassable terrain!');
                return;
            }
            
            // Moving to neutral or friendly tile
            if (target.owner === null || target.owner === gameState.currentPlayer) {
                // Move all units
                target.units += origin.units;
                origin.units = 0;
                
                // If neutral, claim it
                if (target.owner === null) {
                    target.owner = gameState.currentPlayer;
                    gameState.players[gameState.currentPlayer].territories++;
                    addToGameLog(`Player ${gameState.currentPlayer} captured new territory!`);
                }
                
                // Update castle ownership if present
                if (target.castle) {
                    target.owner = gameState.currentPlayer;
                }
                
                addToGameLog(`Moved ${origin.units} units to (${target.row}, ${target.col})`);
            }
            // Attacking enemy tile
            else {
                const attackerUnits = origin.units;
                const defenderUnits = target.units;
                const defenderBonus = target.castle ? 2 : 1; // Castle gives defense bonus
                
                // Attacker wins
                if (attackerUnits > defenderUnits * defenderBonus) {
                    const remainingUnits = attackerUnits - defenderUnits;
                    target.owner = gameState.currentPlayer;
                    target.units = remainingUnits;
                    origin.units = 0;
                    
                    // Update territory counts
                    gameState.players[gameState.currentPlayer].territories++;
                    gameState.players[target.owner].territories--;
                    
                    addToGameLog(`Player ${gameState.currentPlayer} conquered enemy territory! ${defenderUnits} defenders defeated.`);
                    
                    // Check if castle was captured
                    if (target.castle) {
                        addToGameLog(`Player ${gameState.currentPlayer} captured an enemy castle!`);
                        
                        // Check for game over (all castles captured)
                        checkGameOver();
                    }
                }
                // Defender wins
                else {
                    const remainingDefenders = defenderUnits - Math.floor(attackerUnits / defenderBonus);
                    target.units = remainingDefenders;
                    origin.units = 0;
                    addToGameLog(`Attack failed! ${attackerUnits} units lost.`);
                }
            }
            
            // Reset move state
            gameState.actionMode = null;
            gameState.moveOrigin = null;
            gameState.selectedTile = target;
            
            // Update UI
            updateUI();
            renderMap();
            updateTileInfo(target);
        }

        // Recruit new units
        function recruitUnits() {
            const tile = gameState.selectedTile;
            
            if (!tile) {
                addToGameLog('Select a tile first!');
                return;
            }
            
            if (tile.owner !== gameState.currentPlayer) {
                addToGameLog('You can only recruit on your own territory!');
                return;
            }
            
            if (!tile.castle) {
                addToGameLog('You need a castle to recruit units!');
                return;
            }
            
            const cost = 20;
            if (gameState.players[gameState.currentPlayer].gold < cost) {
                addToGameLog(`Not enough gold! Need ${cost}g.`);
                return;
            }
            
            // Deduct gold and add units
            gameState.players[gameState.currentPlayer].gold -= cost;
            tile.units += 3;
            
            addToGameLog(`Recruited 3 new units at (${tile.row}, ${tile.col}) for ${cost}g.`);
            
            // Update UI
            updateUI();
            renderMap();
            updateTileInfo(tile);
        }

        // Build a castle
        function buildCastle() {
            const tile = gameState.selectedTile;
            
            if (!tile) {
                addToGameLog('Select a tile first!');
                return;
            }
            
            if (tile.owner !== gameState.currentPlayer) {
                addToGameLog('You can only build on your own territory!');
                return;
            }
            
            if (tile.castle) {
                addToGameLog('This tile already has a castle!');
                return;
            }
            
            const cost = 50;
            if (gameState.players[gameState.currentPlayer].gold < cost) {
                addToGameLog(`Not enough gold! Need ${cost}g.`);
                return;
            }
            
            // Deduct gold and build castle
            gameState.players[gameState.currentPlayer].gold -= cost;
            tile.castle = true;
            
            addToGameLog(`Built a castle at (${tile.row}, ${tile.col}) for ${cost}g.`);
            
            // Update UI
            updateUI();
            renderMap();
            updateTileInfo(tile);
        }

        // End current player's turn
        function endTurn() {
            // Give income based on territories
            const income = gameState.players[gameState.currentPlayer].territories * 10;
            gameState.players[gameState.currentPlayer].gold += income;
            
            addToGameLog(`Player ${gameState.currentPlayer} earned ${income}g from territories.`);
            
            // Switch player
            gameState.currentPlayer = gameState.currentPlayer === 1 ? 2 : 1;
            gameState.actionMode = null;
            gameState.moveOrigin = null;
            gameState.selectedTile = null;
            
            addToGameLog(`Player ${gameState.currentPlayer}'s turn.`);
            
            // Update UI
            updateUI();
            clearHighlights();
        }

        // Check if game is over (all castles of one player captured)
        function checkGameOver() {
            let p1Castles = 0;
            let p2Castles = 0;
            
            for (let row = 0; row < gameState.mapSize.rows; row++) {
                for (let col = 0; col < gameState.mapSize.cols; col++) {
                    const tile = gameState.map[row][col];
                    if (tile.castle) {
                        if (tile.owner === 1) p1Castles++;
                        else if (tile.owner === 2) p2Castles++;
                    }
                }
            }
            
            if (p1Castles === 0 || p2Castles === 0) {
                gameState.gameOver = true;
                const winner = p1Castles === 0 ? 2 : 1;
                
                // Show game over modal
                document.getElementById('game-over-title').textContent = `Player ${winner} Wins!`;
                document.getElementById('game-over-message').textContent = `Player ${winner} has conquered the kingdom!`;
                document.getElementById('game-over-modal').classList.remove('hidden');
            }
        }

        // Update territory counts for both players
        function updateTerritoryCounts() {
            let p1Territories = 0;
            let p2Territories = 0;
            
            for (let row = 0; row < gameState.mapSize.rows; row++) {
                for (let col = 0; col < gameState.mapSize.cols; col++) {
                    const tile = gameState.map[row][col];
                    if (tile.owner === 1) p1Territories++;
                    else if (tile.owner === 2) p2Territories++;
                }
            }
            
            gameState.players[1].territories = p1Territories;
            gameState.players[2].territories = p2Territories;
        }

        // Clear all tile highlights
        function clearHighlights() {
            const highlighted = document.querySelectorAll('.selected, .movable, .attackable');
            highlighted.forEach(el => {
                el.classList.remove('selected', 'movable', 'attackable');
            });
        }

        // Update the UI elements
        function updateUI() {
            // Update current player display
            const currentPlayerEl = document.getElementById('current-player');
            currentPlayerEl.textContent = `Player ${gameState.currentPlayer}'s Turn`;
            currentPlayerEl.className = `text-xl font-bold mb-2 text-center py-2 rounded ${gameState.currentPlayer === 1 ? 'bg-red-600' : 'bg-blue-600'}`;
            
            // Update player stats
            document.getElementById('p1-gold').textContent = gameState.players[1].gold;
            document.getElementById('p1-territories').textContent = gameState.players[1].territories;
            document.getElementById('p2-gold').textContent = gameState.players[2].gold;
            document.getElementById('p2-territories').textContent = gameState.players[2].territories;
            
            // Update action buttons based on mode
            const moveBtn = document.getElementById('move-units');
            if (gameState.actionMode === 'move') {
                moveBtn.textContent = 'Cancel Move';
                moveBtn.className = 'bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded';
            } else {
                moveBtn.textContent = 'Move Units';
                moveBtn.className = 'bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded';
            }
        }

        // Update the tile info panel
        function updateTileInfo(tile) {
            if (!tile) {
                document.getElementById('tile-type').textContent = 'None';
                document.getElementById('tile-owner').textContent = 'None';
                document.getElementById('tile-units').textContent = '0';
                return;
            }
            
            document.getElementById('tile-type').textContent = tile.terrain.charAt(0).toUpperCase() + tile.terrain.slice(1);
            document.getElementById('tile-owner').textContent = tile.owner ? `Player ${tile.owner}` : 'Neutral';
            document.getElementById('tile-units').textContent = tile.units;
            
            if (tile.castle) {
                document.getElementById('tile-type').textContent += ' (Castle)';
            }
        }

        // Add message to game log
        function addToGameLog(message) {
            const gameLog = document.getElementById('game-log');
            const entry = document.createElement('p');
            entry.textContent = message;
            gameLog.appendChild(entry);
            gameLog.scrollTop = gameLog.scrollHeight;
        }

        // Add event listeners
        function addEventListeners() {
            // Action buttons
            document.getElementById('end-turn').addEventListener('click', endTurn);
            document.getElementById('recruit').addEventListener('click', recruitUnits);
            document.getElementById('build-castle').addEventListener('click', buildCastle);
            
            // Move units button toggles move mode
            document.getElementById('move-units').addEventListener('click', () => {
                if (gameState.actionMode === 'move') {
                    gameState.actionMode = null;
                    gameState.moveOrigin = null;
                    clearHighlights();
                } else {
                    gameState.actionMode = 'move';
                    if (gameState.selectedTile && gameState.selectedTile.owner === gameState.currentPlayer && gameState.selectedTile.units > 0) {
                        gameState.moveOrigin = gameState.selectedTile;
                        highlightMovableTiles(gameState.selectedTile);
                    }
                }
                updateUI();
            });
            
            // Help modal
            document.getElementById('close-help').addEventListener('click', () => {
                document.getElementById('help-modal').classList.add('hidden');
            });
            
            // Game over modal
            document.getElementById('play-again').addEventListener('click', () => {
                document.getElementById('game-over-modal').classList.add('hidden');
                resetGame();
            });
        }

        // Reset the game
        function resetGame() {
            gameState.currentPlayer = 1;
            gameState.players = {
                1: { gold: 100, territories: 1, color: 'player1' },
                2: { gold: 100, territories: 1, color: 'player2' }
            };
            gameState.map = [];
            gameState.selectedTile = null;
            gameState.actionMode = null;
            gameState.moveOrigin = null;
            gameState.gameOver = false;
            
            document.getElementById('game-log').innerHTML = '';
            
            createMap();
            renderMap();
            updateUI();
            addToGameLog('New game started! Player 1\'s turn.');
        }

        // Initialize the game when the page loads
        window.addEventListener('DOMContentLoaded', initGame);
    </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=yazdaabdul/mount-and-blade" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>