Spaces:

Visaras
/

visaras-official

Running

App Files Files Community

Visaras commited on May 12, 2025

Commit

7499073

verified ·

1 Parent(s): a8eb12f

Add 3 files

Browse files

Files changed (3) hide show

README.md +6 -4
index.html +881 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Visaras Official
-emoji: 🏃
-colorFrom: gray
 colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: visaras-official
+emoji: 🐳
+colorFrom: red
 colorTo: purple
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,881 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>2v2 Battle Arena</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        @keyframes pulse {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.05); }
+            100% { transform: scale(1); }
+        }
+        .pulse {
+            animation: pulse 1.5s infinite;
+        }
+        .map-cell {
+            transition: all 0.2s ease;
+        }
+        .map-cell:hover {
+            transform: scale(1.05);
+            box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
+        }
+        .character {
+            transition: all 0.3s ease;
+            z-index: 10;
+        }
+        .character.selected {
+            transform: scale(1.1);
+            filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.8));
+        }
+        .movable {
+            background-color: rgba(100, 200, 255, 0.3);
+        }
+        .attackable {
+            background-color: rgba(255, 100, 100, 0.3);
+        }
+        .health-bar {
+            height: 4px;
+            transition: width 0.3s ease;
+        }
+        .damage-popup {
+            position: absolute;
+            color: red;
+            font-weight: bold;
+            animation: float-up 1s forwards;
+            z-index: 20;
+        }
+        @keyframes float-up {
+            0% { transform: translateY(0); opacity: 1; }
+            100% { transform: translateY(-30px); opacity: 0; }
+        }
+        .ability-icon {
+            transition: all 0.2s ease;
+        }
+        .ability-icon:hover {
+            transform: scale(1.1);
+            filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.7));
+        }
+        .game-container {
+            perspective: 1000px;
+        }
+        .map-container {
+            transform-style: preserve-3d;
+            transform: rotateX(10deg);
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-white min-h-screen">
+    <div class="container mx-auto px-4 py-8">
+        <h1 class="text-4xl font-bold text-center mb-2 text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-600">
+            2v2 Battle Arena
+        </h1>
+        <p class="text-center text-gray-300 mb-8">A strategic turn-based battle game for you and your friends</p>
+        <div class="flex flex-col lg:flex-row gap-8">
+            <!-- Game setup panel -->
+            <div class="bg-gray-800 rounded-lg p-6 lg:w-1/4">
+                <h2 class="text-2xl font-bold mb-4 text-blue-400">Game Setup</h2>
+                <div class="mb-6">
+                    <h3 class="text-lg font-semibold mb-2">Select Team</h3>
+                    <div class="flex gap-4 mb-4">
+                        <button id="team1-btn" class="flex-1 py-2 px-4 bg-blue-600 hover:bg-blue-700 rounded-lg font-medium transition">
+                            Team 1 (Blue)
+                        </button>
+                        <button id="team2-btn" class="flex-1 py-2 px-4 bg-red-600 hover:bg-red-700 rounded-lg font-medium transition">
+                            Team 2 (Red)
+                        </button>
+                    </div>
+                    <div id="team1-players" class="mb-4">
+                        <h4 class="text-sm font-semibold mb-2 text-blue-300">Team 1 Players</h4>
+                        <div class="flex items-center gap-2 mb-2">
+                            <input type="text" placeholder="Player 1" class="bg-gray-700 px-3 py-1 rounded w-full">
+                        </div>
+                        <div class="flex items-center gap-2">
+                            <input type="text" placeholder="Player 2" class="bg-gray-700 px-3 py-1 rounded w-full">
+                        </div>
+                    </div>
+                    <div id="team2-players" class="mb-4">
+                        <h4 class="text-sm font-semibold mb-2 text-red-300">Team 2 Players</h4>
+                        <div class="flex items-center gap-2 mb-2">
+                            <input type="text" placeholder="Player 3" class="bg-gray-700 px-3 py-1 rounded w-full">
+                        </div>
+                        <div class="flex items-center gap-2">
+                            <input type="text" placeholder="Player 4" class="bg-gray-700 px-3 py-1 rounded w-full">
+                        </div>
+                    </div>
+                </div>
+                <div class="mb-6">
+                    <h3 class="text-lg font-semibold mb-2">Select Character</h3>
+                    <div class="grid grid-cols-2 gap-3">
+                        <div class="character-option bg-gray-700 p-3 rounded-lg cursor-pointer hover:bg-gray-600 transition" data-character="warrior">
+                            <div class="flex items-center gap-2">
+                                <i class="fas fa-sword text-yellow-500"></i>
+                                <span>Warrior</span>
+                            </div>
+                            <p class="text-xs text-gray-400 mt-1">High damage, medium health</p>
+                        </div>
+                        <div class="character-option bg-gray-700 p-3 rounded-lg cursor-pointer hover:bg-gray-600 transition" data-character="archer">
+                            <div class="flex items-center gap-2">
+                                <i class="fas fa-bow-arrow text-green-500"></i>
+                                <span>Archer</span>
+                            </div>
+                            <p class="text-xs text-gray-400 mt-1">Ranged attacks, low health</p>
+                        </div>
+                        <div class="character-option bg-gray-700 p-3 rounded-lg cursor-pointer hover:bg-gray-600 transition" data-character="mage">
+                            <div class="flex items-center gap-2">
+                                <i class="fas fa-hat-wizard text-purple-500"></i>
+                                <span>Mage</span>
+                            </div>
+                            <p class="text-xs text-gray-400 mt-1">Area damage, low health</p>
+                        </div>
+                        <div class="character-option bg-gray-700 p-3 rounded-lg cursor-pointer hover:bg-gray-600 transition" data-character="tank">
+                            <div class="flex items-center gap-2">
+                                <i class="fas fa-shield-alt text-blue-500"></i>
+                                <span>Tank</span>
+                            </div>
+                            <p class="text-xs text-gray-400 mt-1">High health, low damage</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="mb-6">
+                    <h3 class="text-lg font-semibold mb-2">Game Status</h3>
+                    <div id="game-status" class="bg-gray-700 p-3 rounded-lg">
+                        <p class="text-center text-gray-400">Setup in progress...</p>
+                    </div>
+                </div>
+                <button id="start-game-btn" class="w-full py-3 bg-green-600 hover:bg-green-700 rounded-lg font-bold transition flex items-center justify-center gap-2">
+                    <i class="fas fa-play"></i>
+                    Start Game
+                </button>
+            </div>
+            <!-- Main game area -->
+            <div class="flex-1">
+                <div class="game-container">
+                    <div class="map-container bg-gray-800 rounded-lg p-4 mb-4">
+                        <div id="game-map" class="grid grid-cols-8 gap-1 mx-auto" style="width: fit-content;"></div>
+                    </div>
+                    <div class="bg-gray-800 rounded-lg p-4">
+                        <div class="flex justify-between items-center mb-4">
+                            <h2 class="text-xl font-bold text-blue-400">Team 1</h2>
+                            <h2 class="text-xl font-bold text-red-400">Team 2</h2>
+                        </div>
+                        <div class="grid grid-cols-2 gap-4 mb-4">
+                            <div id="team1-info" class="bg-blue-900 bg-opacity-30 p-3 rounded-lg">
+                                <h3 class="font-semibold mb-2">Players:</h3>
+                                <ul class="text-sm">
+                                    <li>Player 1 (Warrior)</li>
+                                    <li>Player 2 (Archer)</li>
+                                </ul>
+                            </div>
+                            <div id="team2-info" class="bg-red-900 bg-opacity-30 p-3 rounded-lg">
+                                <h3 class="font-semibold mb-2">Players:</h3>
+                                <ul class="text-sm">
+                                    <li>Player 3 (Mage)</li>
+                                    <li>Player 4 (Tank)</li>
+                                </ul>
+                            </div>
+                        </div>
+                        <div id="turn-indicator" class="bg-gray-700 p-3 rounded-lg mb-4 text-center font-bold text-yellow-400">
+                            Team 1's Turn
+                        </div>
+                        <div id="action-panel" class="bg-gray-700 p-3 rounded-lg">
+                            <h3 class="font-semibold mb-2">Actions</h3>
+                            <div class="flex gap-2 mb-3">
+                                <button id="move-btn" class="px-3 py-1 bg-blue-600 rounded hover:bg-blue-700 transition">
+                                    <i class="fas fa-walking mr-1"></i> Move
+                                </button>
+                                <button id="attack-btn" class="px-3 py-1 bg-red-600 rounded hover:bg-red-700 transition">
+                                    <i class="fas fa-bolt mr-1"></i> Attack
+                                </button>
+                                <button id="end-turn-btn" class="px-3 py-1 bg-gray-600 rounded hover:bg-gray-700 transition">
+                                    <i class="fas fa-flag mr-1"></i> End Turn
+                                </button>
+                            </div>
+                            <div id="abilities" class="grid grid-cols-2 gap-2">
+                                <!-- Abilities will be shown here -->
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Game state
+        const gameState = {
+            currentTeam: 1, // 1 or 2
+            selectedCharacter: null,
+            gameStarted: false,
+            characters: [],
+            mapSize: 8,
+            currentAction: null, // 'move', 'attack', or ability name
+            turnCount: 1
+        };
+        // Character classes
+        const characterClasses = {
+            warrior: {
+                name: "Warrior",
+                icon: "fa-sword",
+                color: "yellow",
+                health: 120,
+                attack: 30,
+                range: 1,
+                move: 3,
+                abilities: [
+                    {
+                        name: "Power Strike",
+                        description: "Deals 50% more damage",
+                        icon: "fa-bolt",
+                        cooldown: 3,
+                        currentCooldown: 0,
+                        action: (character) => {
+                            character.tempAttackBonus = character.attack * 0.5;
+                            return `${character.name} prepares a powerful strike!`;
+                        }
+                    },
+                    {
+                        name: "Taunt",
+                        description: "Forces enemies to attack you next turn",
+                        icon: "fa-bullhorn",
+                        cooldown: 4,
+                        currentCooldown: 0,
+                        action: (character) => {
+                            // This would be implemented in the game logic
+                            return `${character.name} taunts the enemies!`;
+                        }
+                    }
+                ]
+            },
+            archer: {
+                name: "Archer",
+                icon: "fa-bow-arrow",
+                color: "green",
+                health: 80,
+                attack: 25,
+                range: 4,
+                move: 2,
+                abilities: [
+                    {
+                        name: "Precision Shot",
+                        description: "Guaranteed critical hit",
+                        icon: "fa-crosshairs",
+                        cooldown: 3,
+                        currentCooldown: 0,
+                        action: (character) => {
+                            character.tempAttackBonus = character.attack;
+                            return `${character.name} lines up a perfect shot!`;
+                        }
+                    },
+                    {
+                        name: "Multishot",
+                        description: "Attack all enemies in range",
+                        icon: "fa-arrows-to-dot",
+                        cooldown: 4,
+                        currentCooldown: 0,
+                        action: (character) => {
+                            // Would be implemented in attack logic
+                            return `${character.name} fires arrows in all directions!`;
+                        }
+                    }
+                ]
+            },
+            mage: {
+                name: "Mage",
+                icon: "fa-hat-wizard",
+                color: "purple",
+                health: 70,
+                attack: 35,
+                range: 3,
+                move: 2,
+                abilities: [
+                    {
+                        name: "Fireball",
+                        description: "Hits all adjacent enemies",
+                        icon: "fa-fire",
+                        cooldown: 3,
+                        currentCooldown: 0,
+                        action: (character) => {
+                            // Would be implemented in attack logic
+                            return `${character.name} conjures a massive fireball!`;
+                        }
+                    },
+                    {
+                        name: "Teleport",
+                        description: "Move to any empty space",
+                        icon: "fa-person-running",
+                        cooldown: 4,
+                        currentCooldown: 0,
+                        action: (character) => {
+                            // Would be implemented in move logic
+                            return `${character.name} prepares to teleport!`;
+                        }
+                    }
+                ]
+            },
+            tank: {
+                name: "Tank",
+                icon: "fa-shield-alt",
+                color: "blue",
+                health: 150,
+                attack: 15,
+                range: 1,
+                move: 2,
+                abilities: [
+                    {
+                        name: "Shield Bash",
+                        description: "Stuns enemy for 1 turn",
+                        icon: "fa-shield",
+                        cooldown: 3,
+                        currentCooldown: 0,
+                        action: (character) => {
+                            // Would be implemented in attack logic
+                            return `${character.name} prepares to bash with their shield!`;
+                        }
+                    },
+                    {
+                        name: "Fortify",
+                        description: "Reduce damage taken by 50%",
+                        icon: "fa-fort",
+                        cooldown: 4,
+                        currentCooldown: 0,
+                        action: (character) => {
+                            character.tempDefenseBonus = 0.5;
+                            return `${character.name} fortifies their position!`;
+                        }
+                    }
+                ]
+            }
+        };
+        // Initialize the game
+        document.addEventListener('DOMContentLoaded', function() {
+            initializeMap();
+            setupEventListeners();
+            // For demo purposes, we'll auto-setup the game
+            setTimeout(() => {
+                setupDemoGame();
+            }, 500);
+        });
+        function initializeMap() {
+            const map = document.getElementById('game-map');
+            map.innerHTML = '';
+            for (let y = 0; y < gameState.mapSize; y++) {
+                for (let x = 0; x < gameState.mapSize; x++) {
+                    const cell = document.createElement('div');
+                    cell.className = 'map-cell w-12 h-12 bg-gray-700 rounded-sm flex items-center justify-center relative';
+                    cell.dataset.x = x;
+                    cell.dataset.y = y;
+                    // Add some terrain variety for demo
+                    if (Math.random() < 0.1) {
+                        cell.classList.add('bg-gray-600'); // Rock
+                    } else if (Math.random() < 0.15) {
+                        cell.classList.add('bg-green-800'); // Bush
+                    }
+                    cell.addEventListener('click', () => handleMapClick(x, y));
+                    map.appendChild(cell);
+                }
+            }
+        }
+        function setupEventListeners() {
+            // Team selection
+            document.getElementById('team1-btn').addEventListener('click', () => selectTeam(1));
+            document.getElementById('team2-btn').addEventListener('click', () => selectTeam(2));
+            // Character selection
+            document.querySelectorAll('.character-option').forEach(option => {
+                option.addEventListener('click', function() {
+                    selectCharacter(this.dataset.character);
+                });
+            });
+            // Action buttons
+            document.getElementById('move-btn').addEventListener('click', () => setAction('move'));
+            document.getElementById('attack-btn').addEventListener('click', () => setAction('attack'));
+            document.getElementById('end-turn-btn').addEventListener('click', endTurn);
+            // Start game
+            document.getElementById('start-game-btn').addEventListener('click', startGame);
+        }
+        function selectTeam(team) {
+            document.getElementById('team1-btn').classList.remove('bg-blue-700', 'ring-2', 'ring-blue-400');
+            document.getElementById('team2-btn').classList.remove('bg-red-700', 'ring-2', 'ring-red-400');
+            if (team === 1) {
+                document.getElementById('team1-btn').classList.add('bg-blue-700', 'ring-2', 'ring-blue-400');
+            } else {
+                document.getElementById('team2-btn').classList.add('bg-red-700', 'ring-2', 'ring-red-400');
+            }
+            updateGameStatus(`Selected Team ${team}. Now choose a character.`);
+        }
+        function selectCharacter(characterClass) {
+            document.querySelectorAll('.character-option').forEach(option => {
+                option.classList.remove('ring-2', 'ring-yellow-400');
+            });
+            const selectedOption = document.querySelector(`.character-option[data-character="${characterClass}"]`);
+            selectedOption.classList.add('ring-2', 'ring-yellow-400');
+            updateGameStatus(`Selected ${characterClasses[characterClass].name}. Ready to start game!`);
+        }
+        function startGame() {
+            if (gameState.gameStarted) return;
+            gameState.gameStarted = true;
+            updateGameStatus("Game started! Team 1's turn.");
+            document.getElementById('start-game-btn').classList.add('hidden');
+            // For demo purposes, we'll use the demo setup
+            // In a real game, you would place characters based on player selections
+        }
+        function setupDemoGame() {
+            // Clear any existing characters
+            gameState.characters = [];
+            // Create demo characters
+            const characters = [
+                { team: 1, class: 'warrior', x: 1, y: 1, name: "Player 1" },
+                { team: 1, class: 'archer', x: 2, y: 1, name: "Player 2" },
+                { team: 2, class: 'mage', x: 5, y: 6, name: "Player 3" },
+                { team: 2, class: 'tank', x: 6, y: 6, name: "Player 4" }
+            ];
+            characters.forEach(charData => {
+                const charClass = characterClasses[charData.class];
+                const character = {
+                    id: Math.random().toString(36).substr(2, 9),
+                    name: charData.name,
+                    team: charData.team,
+                    class: charData.class,
+                    x: charData.x,
+                    y: charData.y,
+                    maxHealth: charClass.health,
+                    health: charClass.health,
+                    attack: charClass.attack,
+                    range: charClass.range,
+                    move: charClass.move,
+                    abilities: JSON.parse(JSON.stringify(charClass.abilities)), // Deep copy
+                    tempAttackBonus: 0,
+                    tempDefenseBonus: 0,
+                    moved: false,
+                    attacked: false
+                };
+                gameState.characters.push(character);
+            });
+            renderCharacters();
+            updateTeamInfo();
+        }
+        function renderCharacters() {
+            // Clear existing character elements
+            document.querySelectorAll('.character').forEach(el => el.remove());
+            gameState.characters.forEach(character => {
+                const cell = document.querySelector(`.map-cell[data-x="${character.x}"][data-y="${character.y}"]`);
+                if (!cell) return;
+                const charElement = document.createElement('div');
+                charElement.className = `character absolute w-10 h-10 rounded-full flex items-center justify-center text-xl cursor-pointer ${
+                    character.team === 1 ? 'bg-blue-600' : 'bg-red-600'
+                }`;
+                charElement.dataset.id = character.id;
+                charElement.innerHTML = `<i class="fas ${characterClasses[character.class].icon}"></i>`;
+                // Health bar
+                const healthBar = document.createElement('div');
+                healthBar.className = 'absolute bottom-0 left-0 right-0 bg-gray-800 rounded-b-full overflow-hidden';
+                const healthFill = document.createElement('div');
+                healthFill.className = `health-bar ${character.team === 1 ? 'bg-blue-400' : 'bg-red-400'}`;
+                healthFill.style.width = `${(character.health / character.maxHealth) * 100}%`;
+                healthBar.appendChild(healthFill);
+                charElement.appendChild(healthBar);
+                charElement.addEventListener('click', () => selectCharacterOnMap(character.id));
+                cell.appendChild(charElement);
+            });
+        }
+        function selectCharacterOnMap(characterId) {
+            // Deselect all characters
+            document.querySelectorAll('.character').forEach(el => el.classList.remove('selected'));
+            const character = gameState.characters.find(c => c.id === characterId);
+            if (!character) return;
+            // Can only select characters from current team
+            if (character.team !== gameState.currentTeam) {
+                showMessage(`It's Team ${gameState.currentTeam}'s turn!`);
+                return;
+            }
+            // Select the character
+            gameState.selectedCharacter = character;
+            document.querySelector(`.character[data-id="${characterId}"]`).classList.add('selected');
+            // Highlight movable and attackable cells
+            highlightActionCells(character);
+            showMessage(`Selected ${character.name} the ${characterClasses[character.class].name}`);
+        }
+        function highlightActionCells(character) {
+            // Clear previous highlights
+            document.querySelectorAll('.map-cell').forEach(cell => {
+                cell.classList.remove('movable', 'attackable');
+            });
+            if (!character) return;
+            // Highlight movable cells
+            if (!character.moved) {
+                const movableCells = getMovableCells(character.x, character.y, character.move);
+                movableCells.forEach(([x, y]) => {
+                    const cell = document.querySelector(`.map-cell[data-x="${x}"][data-y="${y}"]`);
+                    if (cell && !isCellOccupied(x, y)) {
+                        cell.classList.add('movable');
+                    }
+                });
+            }
+            // Highlight attackable cells
+            if (!character.attacked) {
+                const attackableCells = getAttackableCells(character.x, character.y, character.range);
+                attackableCells.forEach(([x, y]) => {
+                    const cell = document.querySelector(`.map-cell[data-x="${x}"][data-y="${y}"]`);
+                    const target = getCharacterAtPosition(x, y);
+                    if (cell && target && target.team !== character.team) {
+                        cell.classList.add('attackable');
+                    }
+                });
+            }
+        }
+        function getMovableCells(x, y, range) {
+            const cells = [];
+            for (let dx = -range; dx <= range; dx++) {
+                for (let dy = -range; dy <= range; dy++) {
+                    const newX = x + dx;
+                    const newY = y + dy;
+                    // Check if within bounds
+                    if (newX >= 0 && newX < gameState.mapSize && newY >= 0 && newY < gameState.mapSize) {
+                        // Simple movement - can move in any direction within range
+                        // For more complex movement, you'd implement pathfinding
+                        if (Math.abs(dx) + Math.abs(dy) <= range) {
+                            cells.push([newX, newY]);
+                        }
+                    }
+                }
+            }
+            return cells;
+        }
+        function getAttackableCells(x, y, range) {
+            const cells = [];
+            for (let dx = -range; dx <= range; dx++) {
+                for (let dy = -range; dy <= range; dy++) {
+                    const newX = x + dx;
+                    const newY = y + dy;
+                    // Check if within bounds
+                    if (newX >= 0 && newX < gameState.mapSize && newY >= 0 && newY < gameState.mapSize) {
+                        // Different attack patterns could be implemented here
+                        // This is simple radial attack
+                        if (Math.abs(dx) + Math.abs(dy) <= range) {
+                            cells.push([newX, newY]);
+                        }
+                    }
+                }
+            }
+            return cells;
+        }
+        function isCellOccupied(x, y) {
+            return gameState.characters.some(c => c.x === x && c.y === y);
+        }
+        function getCharacterAtPosition(x, y) {
+            return gameState.characters.find(c => c.x === x && c.y === y);
+        }
+        function handleMapClick(x, y) {
+            if (!gameState.gameStarted || !gameState.selectedCharacter) return;
+            const cell = document.querySelector(`.map-cell[data-x="${x}"][data-y="${y}"]`);
+            const character = gameState.selectedCharacter;
+            if (cell.classList.contains('movable') && gameState.currentAction === 'move') {
+                // Move character
+                character.x = x;
+                character.y = y;
+                character.moved = true;
+                showMessage(`${character.name} moved to (${x}, ${y})`);
+                renderCharacters();
+                highlightActionCells(character);
+                // Update abilities that might be affected by position
+                updateAbilitiesPanel();
+            }
+            else if (cell.classList.contains('attackable') && (gameState.currentAction === 'attack' || gameState.currentAction?.startsWith('ability-'))) {
+                // Attack or use ability
+                const target = getCharacterAtPosition(x, y);
+                if (target && target.team !== character.team) {
+                    let damage = character.attack;
+                    let message = `${character.name} attacks ${target.name}!`;
+                    // Check if using an ability
+                    if (gameState.currentAction?.startsWith('ability-')) {
+                        const abilityIndex = parseInt(gameState.currentAction.split('-')[1]);
+                        const ability = character.abilities[abilityIndex];
+                        if (ability.currentCooldown === 0) {
+                            message = ability.action(character);
+                            damage += character.tempAttackBonus || 0;
+                            ability.currentCooldown = ability.cooldown;
+                            // Reset temp bonuses after use
+                            character.tempAttackBonus = 0;
+                        }
+                    }
+                    // Apply damage
+                    const finalDamage = Math.max(1, Math.floor(damage * (1 - (target.tempDefenseBonus || 0))));
+                    target.health -= finalDamage;
+                    target.health = Math.max(0, target.health);
+                    showMessage(`${message} Dealt ${finalDamage} damage!`);
+                    // Show damage popup
+                    showDamagePopup(x, y, finalDamage);
+                    // Check if target died
+                    if (target.health <= 0) {
+                        showMessage(`${target.name} has been defeated!`);
+                        // In a full game, you'd remove the character or mark as dead
+                    }
+                    character.attacked = true;
+                    renderCharacters();
+                    highlightActionCells(character);
+                    updateAbilitiesPanel();
+                }
+            }
+            // Reset action after performing it
+            gameState.currentAction = null;
+        }
+        function showDamagePopup(x, y, amount) {
+            const cell = document.querySelector(`.map-cell[data-x="${x}"][data-y="${y}"]`);
+            if (!cell) return;
+            const popup = document.createElement('div');
+            popup.className = 'damage-popup';
+            popup.textContent = `-${amount}`;
+            cell.appendChild(popup);
+            // Remove after animation
+            setTimeout(() => {
+                popup.remove();
+            }, 1000);
+        }
+        function setAction(action) {
+            if (!gameState.selectedCharacter) {
+                showMessage("Select a character first!");
+                return;
+            }
+            gameState.currentAction = action;
+            showMessage(`Ready to ${action}! Select a target.`);
+        }
+        function updateAbilitiesPanel() {
+            const panel = document.getElementById('abilities');
+            panel.innerHTML = '';
+            if (!gameState.selectedCharacter) return;
+            const character = gameState.selectedCharacter;
+            character.abilities.forEach((ability, index) => {
+                const abilityEl = document.createElement('div');
+                abilityEl.className = `ability-icon bg-gray-600 p-2 rounded cursor-pointer flex flex-col items-center ${
+                    ability.currentCooldown > 0 ? 'opacity-50' : 'hover:bg-gray-500'
+                }`;
+                abilityEl.title = `${ability.name}: ${ability.description}\nCooldown: ${ability.cooldown} turns`;
+                abilityEl.innerHTML = `
+                    <i class="fas ${ability.icon} mb-1"></i>
+                    <span class="text-xs">${ability.name}</span>
+                    ${ability.currentCooldown > 0 ?
+                        `<span class="text-xs text-yellow-400">CD: ${ability.currentCooldown}</span>` : ''}
+                `;
+                if (ability.currentCooldown === 0 && !character.attacked) {
+                    abilityEl.addEventListener('click', () => {
+                        gameState.currentAction = `ability-${index}`;
+                        showMessage(`Using ${ability.name}! Select a target.`);
+                    });
+                }
+                panel.appendChild(abilityEl);
+            });
+        }
+        function endTurn() {
+            // Reset all characters' moved/attacked status for the current team
+            gameState.characters
+                .filter(c => c.team === gameState.currentTeam)
+                .forEach(c => {
+                    c.moved = false;
+                    c.attacked = false;
+                    c.tempAttackBonus = 0;
+                    c.tempDefenseBonus = 0;
+                    // Update ability cooldowns
+                    c.abilities.forEach(ability => {
+                        if (ability.currentCooldown > 0) {
+                            ability.currentCooldown--;
+                        }
+                    });
+                });
+            // Switch teams
+            gameState.currentTeam = gameState.currentTeam === 1 ? 2 : 1;
+            gameState.turnCount++;
+            // Deselect any character
+            gameState.selectedCharacter = null;
+            document.querySelectorAll('.character').forEach(el => el.classList.remove('selected'));
+            // Clear action highlights
+            document.querySelectorAll('.map-cell').forEach(cell => {
+                cell.classList.remove('movable', 'attackable');
+            });
+            // Update UI
+            updateTurnIndicator();
+            showMessage(`Team ${gameState.currentTeam}'s turn!`);
+            // Check for win condition
+            checkWinCondition();
+        }
+        function checkWinCondition() {
+            const team1Alive = gameState.characters.some(c => c.team === 1 && c.health > 0);
+            const team2Alive = gameState.characters.some(c => c.team === 2 && c.health > 0);
+            if (!team1Alive) {
+                endGame(2);
+            } else if (!team2Alive) {
+                endGame(1);
+            }
+        }
+        function endGame(winningTeam) {
+            gameState.gameStarted = false;
+            const message = `Team ${winningTeam} wins the game!`;
+            showMessage(message, true);
+            updateGameStatus(message);
+            document.getElementById('start-game-btn').classList.remove('hidden');
+            document.getElementById('start-game-btn').textContent = 'Play Again';
+        }
+        function updateTurnIndicator() {
+            const indicator = document.getElementById('turn-indicator');
+            indicator.textContent = `Team ${gameState.currentTeam}'s Turn (Round ${gameState.turnCount})`;
+            indicator.className = `bg-gray-700 p-3 rounded-lg mb-4 text-center font-bold ${
+                gameState.currentTeam === 1 ? 'text-blue-400' : 'text-red-400'
+            }`;
+        }
+        function updateTeamInfo() {
+            const team1Chars = gameState.characters.filter(c => c.team === 1);
+            const team2Chars = gameState.characters.filter(c => c.team === 2);
+            document.getElementById('team1-info').innerHTML = `
+                <h3 class="font-semibold mb-2">Players:</h3>
+                <ul class="text-sm">
+                    ${team1Chars.map(c => `<li>${c.name} (${characterClasses[c.class].name}) - HP: ${c.health}/${c.maxHealth}</li>`).join('')}
+                </ul>
+            `;
+            document.getElementById('team2-info').innerHTML = `
+                <h3 class="font-semibold mb-2">Players:</h3>
+                <ul class="text-sm">
+                    ${team2Chars.map(c => `<li>${c.name} (${characterClasses[c.class].name}) - HP: ${c.health}/${c.maxHealth}</li>`).join('')}
+                </ul>
+            `;
+        }
+        function updateGameStatus(message) {
+            document.getElementById('game-status').innerHTML = `
+                <p class="text-center">${message}</p>
+            `;
+        }
+        function showMessage(message, isImportant = false) {
+            const messageEl = document.createElement('div');
+            messageEl.className = `fixed bottom-4 right-4 bg-gray-800 px-4 py-2 rounded-lg shadow-lg ${
+                isImportant ? 'border-2 border-yellow-400 pulse' : ''
+            }`;
+            messageEl.textContent = message;
+            document.body.appendChild(messageEl);
+            setTimeout(() => {
+                messageEl.remove();
+            }, 3000);
+        }
+    </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=Visaras/visaras-official" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@


1	+ Create a 2v2 game with characters and a map that I can play with my friends