Spaces:

AramTM
/

armgame

Running

App Files Files Community

AramTM commited on Jul 18, 2025

Commit

2276d3c

verified ·

1 Parent(s): d328a2f

Start invite 3 web games - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +452 -19

README.md CHANGED Viewed

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

 ---
+title: armgame
+emoji: 🐳
+colorFrom: purple
+colorTo: red
 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,452 @@
-<!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>3 Fun Web Games</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>
+        /* Custom styles for the snake game */
+        #snakeCanvas {
+            border: 2px solid #4b5563;
+            border-radius: 0.5rem;
+            background-color: #1f2937;
+        }
+        /* Game card hover effect */
+        .game-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+        }
+        /* Memory card flip animation */
+        .memory-card {
+            perspective: 1000px;
+        }
+        .memory-card-inner {
+            transition: transform 0.6s;
+            transform-style: preserve-3d;
+        }
+        .memory-card.flipped .memory-card-inner {
+            transform: rotateY(180deg);
+        }
+        .memory-card-front, .memory-card-back {
+            backface-visibility: hidden;
+            position: absolute;
+            width: 100%;
+            height: 100%;
+        }
+        .memory-card-back {
+            transform: rotateY(180deg);
+        }
+        /* Tic-tac-toe cell hover */
+        .ttt-cell:hover:not(.occupied) {
+            background-color: #e5e7eb;
+        }
+    </style>
+</head>
+<body class="bg-gray-100 min-h-screen">
+    <div class="container mx-auto px-4 py-8">
+        <header class="text-center mb-12">
+            <h1 class="text-4xl md:text-5xl font-bold text-indigo-700 mb-4">Fun Web Games</h1>
+            <p class="text-lg text-gray-600 max-w-2xl mx-auto">Three classic games to challenge your skills and memory!</p>
+        </header>
+        <!-- Game Selection Tabs -->
+        <div class="flex justify-center mb-8">
+            <div class="inline-flex rounded-md shadow-sm" role="group">
+                <button onclick="showGame('tic-tac-toe')" class="px-4 py-2 text-sm font-medium rounded-l-lg bg-indigo-600 text-white hover:bg-indigo-700 focus:z-10 focus:ring-2 focus:ring-indigo-500">
+                    <i class="fas fa-times mr-2"></i>Tic-Tac-Toe
+                </button>
+                <button onclick="showGame('memory')" class="px-4 py-2 text-sm font-medium bg-indigo-100 text-indigo-700 hover:bg-indigo-200 focus:z-10 focus:ring-2 focus:ring-indigo-500">
+                    <i class="fas fa-brain mr-2"></i>Memory Game
+                </button>
+                <button onclick="showGame('snake')" class="px-4 py-2 text-sm font-medium rounded-r-lg bg-indigo-100 text-indigo-700 hover:bg-indigo-200 focus:z-10 focus:ring-2 focus:ring-indigo-500">
+                    <i class="fas fa-snake mr-2"></i>Snake
+                </button>
+            </div>
+        </div>
+        <!-- Game Containers -->
+        <div class="space-y-12">
+            <!-- Tic-Tac-Toe Game -->
+            <div id="tic-tac-toe" class="game-container bg-white rounded-xl shadow-lg p-6 max-w-md mx-auto">
+                <div class="flex justify-between items-center mb-6">
+                    <h2 class="text-2xl font-bold text-indigo-700">Tic-Tac-Toe</h2>
+                    <button onclick="resetTicTacToe()" class="px-3 py-1 bg-indigo-100 text-indigo-700 rounded hover:bg-indigo-200 transition">
+                        <i class="fas fa-redo mr-1"></i> Reset
+                    </button>
+                </div>
+                <div class="text-center mb-4">
+                    <p id="ttt-status" class="text-lg font-medium">Player X's turn</p>
+                </div>
+                <div class="grid grid-cols-3 gap-2 mb-4">
+                    <!-- Tic-Tac-Toe cells will be generated by JavaScript -->
+                </div>
+                <div class="text-center">
+                    <p class="text-sm text-gray-500">X wins: <span id="x-wins">0</span> | O wins: <span id="o-wins">0</span> | Draws: <span id="draws">0</span></p>
+                </div>
+            </div>
+            <!-- Memory Game -->
+            <div id="memory" class="game-container hidden bg-white rounded-xl shadow-lg p-6 max-w-2xl mx-auto">
+                <div class="flex justify-between items-center mb-6">
+                    <h2 class="text-2xl font-bold text-indigo-700">Memory Card Game</h2>
+                    <div class="flex items-center space-x-4">
+                        <span class="text-gray-700">Moves: <span id="moves">0</span></span>
+                        <span class="text-gray-700">Pairs: <span id="pairs">0</span>/8</span>
+                        <button onclick="resetMemoryGame()" class="px-3 py-1 bg-indigo-100 text-indigo-700 rounded hover:bg-indigo-200 transition">
+                            <i class="fas fa-redo mr-1"></i> Reset
+                        </button>
+                    </div>
+                </div>
+                <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
+                    <!-- Memory cards will be generated by JavaScript -->
+                </div>
+            </div>
+            <!-- Snake Game -->
+            <div id="snake" class="game-container hidden bg-white rounded-xl shadow-lg p-6 max-w-md mx-auto">
+                <div class="flex justify-between items-center mb-6">
+                    <h2 class="text-2xl font-bold text-indigo-700">Snake Game</h2>
+                    <div class="flex items-center space-x-4">
+                        <span class="text-gray-700">Score: <span id="score">0</span></span>
+                        <button onclick="resetSnakeGame()" class="px-3 py-1 bg-indigo-100 text-indigo-700 rounded hover:bg-indigo-200 transition">
+                            <i class="fas fa-redo mr-1"></i> Reset
+                        </button>
+                    </div>
+                </div>
+                <canvas id="snakeCanvas" width="400" height="400"></canvas>
+                <div class="mt-4 text-center text-sm text-gray-500">
+                    <p>Use arrow keys or WASD to control the snake</p>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Show the selected game and hide others
+        function showGame(gameId) {
+            document.querySelectorAll('.game-container').forEach(el => {
+                el.classList.add('hidden');
+            });
+            document.getElementById(gameId).classList.remove('hidden');
+            // Update tab styling
+            document.querySelectorAll('[role="group"] button').forEach(btn => {
+                btn.classList.remove('bg-indigo-600', 'text-white');
+                btn.classList.add('bg-indigo-100', 'text-indigo-700');
+            });
+            event.currentTarget.classList.remove('bg-indigo-100', 'text-indigo-700');
+            event.currentTarget.classList.add('bg-indigo-600', 'text-white');
+            // If showing snake game, focus the canvas
+            if (gameId === 'snake') {
+                document.getElementById('snakeCanvas').focus();
+            }
+        }
+        // Initialize with Tic-Tac-Toe visible
+        document.addEventListener('DOMContentLoaded', function() {
+            showGame('tic-tac-toe');
+            initTicTacToe();
+            initMemoryGame();
+            initSnakeGame();
+        });
+        // ==================== TIC-TAC-TOE GAME ====================
+        let currentPlayer = 'X';
+        let gameState = ['', '', '', '', '', '', '', '', ''];
+        let gameActive = true;
+        let xWins = 0;
+        let oWins = 0;
+        let draws = 0;
+        const winningConditions = [
+            [0, 1, 2], [3, 4, 5], [6, 7, 8], // rows
+            [0, 3, 6], [1, 4, 7], [2, 5, 8], // columns
+            [0, 4, 8], [2, 4, 6]             // diagonals
+        ];
+        function initTicTacToe() {
+            const board = document.querySelector('#tic-tac-toe .grid');
+            board.innerHTML = '';
+            for (let i = 0; i < 9; i++) {
+                const cell = document.createElement('div');
+                cell.classList.add('ttt-cell', 'h-24', 'flex', 'items-center', 'justify-center', 'text-4xl', 'font-bold', 'border-2', 'border-gray-300', 'cursor-pointer', 'transition');
+                cell.setAttribute('data-index', i);
+                cell.addEventListener('click', handleCellClick);
+                board.appendChild(cell);
+            }
+            resetTicTacToe();
+        }
+        function handleCellClick() {
+            const clickedCell = event.target;
+            const clickedCellIndex = parseInt(clickedCell.getAttribute('data-index'));
+            if (gameState[clickedCellIndex] !== '' || !gameActive) return;
+            gameState[clickedCellIndex] = currentPlayer;
+            clickedCell.textContent = currentPlayer;
+            clickedCell.classList.add('occupied');
+            checkResult();
+        }
+        function checkResult() {
+            let roundWon = false;
+            for (let i = 0; i < winningConditions.length; i++) {
+                const [a, b, c] = winningConditions[i];
+                if (gameState[a] === '' || gameState[b] === '' || gameState[c] === '') continue;
+                if (gameState[a] === gameState[b] && gameState[b] === gameState[c]) {
+                    roundWon = true;
+                    break;
+                }
+            }
+            if (roundWon) {
+                document.getElementById('ttt-status').textContent = `Player ${currentPlayer} wins!`;
+                gameActive = false;
+                if (currentPlayer === 'X') {
+                    xWins++;
+                    document.getElementById('x-wins').textContent = xWins;
+                } else {
+                    oWins++;
+                    document.getElementById('o-wins').textContent = oWins;
+                }
+                return;
+            }
+            const roundDraw = !gameState.includes('');
+            if (roundDraw) {
+                document.getElementById('ttt-status').textContent = 'Game ended in a draw!';
+                gameActive = false;
+                draws++;
+                document.getElementById('draws').textContent = draws;
+                return;
+            }
+            currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
+            document.getElementById('ttt-status').textContent = `Player ${currentPlayer}'s turn`;
+        }
+        function resetTicTacToe() {
+            currentPlayer = 'X';
+            gameState = ['', '', '', '', '', '', '', '', ''];
+            gameActive = true;
+            document.getElementById('ttt-status').textContent = `Player ${currentPlayer}'s turn`;
+            document.querySelectorAll('.ttt-cell').forEach(cell => {
+                cell.textContent = '';
+                cell.classList.remove('occupied', 'bg-green-100');
+            });
+        }
+        // ==================== MEMORY GAME ====================
+        const memoryCards = [
+            'fa-cat', 'fa-dog', 'fa-horse', 'fa-fish',
+            'fa-dragon', 'fa-kiwi-bird', 'fa-spider', 'fa-frog',
+            'fa-cat', 'fa-dog', 'fa-horse', 'fa-fish',
+            'fa-dragon', 'fa-kiwi-bird', 'fa-spider', 'fa-frog'
+        ];
+        let hasFlippedCard = false;
+        let lockBoard = false;
+        let firstCard, secondCard;
+        let moves = 0;
+        let pairsFound = 0;
+        function initMemoryGame() {
+            const board = document.querySelector('#memory .grid');
+            board.innerHTML = '';
+            // Shuffle cards
+            const shuffledCards = [...memoryCards].sort(() => 0.5 - Math.random());
+            shuffledCards.forEach((card, index) => {
+                const cardElement = document.createElement('div');
+                cardElement.classList.add('memory-card', 'h-24', 'cursor-pointer');
+                cardElement.setAttribute('data-card', card);
+                cardElement.setAttribute('data-index', index);
+                const cardInner = document.createElement('div');
+                cardInner.classList.add('memory-card-inner', 'relative', 'w-full', 'h-full');
+                const cardFront = document.createElement('div');
+                cardFront.classList.add('memory-card-front', 'bg-indigo-600', 'rounded-lg', 'flex', 'items-center', 'justify-center');
+                const cardBack = document.createElement('div');
+                cardBack.classList.add('memory-card-back', 'bg-white', 'border-2', 'border-indigo-300', 'rounded-lg', 'flex', 'items-center', 'justify-center');
+                const icon = document.createElement('i');
+                icon.classList.add('fas', card, 'text-3xl', 'text-indigo-700');
+                cardBack.appendChild(icon);
+                cardInner.appendChild(cardFront);
+                cardInner.appendChild(cardBack);
+                cardElement.appendChild(cardInner);
+                cardElement.addEventListener('click', flipCard);
+                board.appendChild(cardElement);
+            });
+            resetMemoryGame();
+        }
+        function flipCard() {
+            if (lockBoard) return;
+            if (this === firstCard) return;
+            this.classList.add('flipped');
+            if (!hasFlippedCard) {
+                hasFlippedCard = true;
+                firstCard = this;
+                return;
+            }
+            secondCard = this;
+            moves++;
+            document.getElementById('moves').textContent = moves;
+            checkForMatch();
+        }
+        function checkForMatch() {
+            const isMatch = firstCard.getAttribute('data-card') === secondCard.getAttribute('data-card');
+            if (isMatch) {
+                disableCards();
+                pairsFound++;
+                document.getElementById('pairs').textContent = pairsFound;
+                if (pairsFound === 8) {
+                    setTimeout(() => {
+                        alert(`Congratulations! You won in ${moves} moves!`);
+                    }, 500);
+                }
+            } else {
+                unflipCards();
+            }
+        }
+        function disableCards() {
+            firstCard.removeEventListener('click', flipCard);
+            secondCard.removeEventListener('click', flipCard);
+            resetBoard();
+        }
+        function unflipCards() {
+            lockBoard = true;
+            setTimeout(() => {
+                firstCard.classList.remove('flipped');
+                secondCard.classList.remove('flipped');
+                resetBoard();
+            }, 1000);
+        }
+        function resetBoard() {
+            [hasFlippedCard, lockBoard] = [false, false];
+            [firstCard, secondCard] = [null, null];
+        }
+        function resetMemoryGame() {
+            document.querySelectorAll('.memory-card').forEach(card => {
+                card.classList.remove('flipped');
+                card.addEventListener('click', flipCard);
+            });
+            moves = 0;
+            pairsFound = 0;
+            document.getElementById('moves').textContent = '0';
+            document.getElementById('pairs').textContent = '0';
+            setTimeout(() => {
+                // Re-shuffle cards
+                const cards = Array.from(document.querySelectorAll('.memory-card'));
+                const shuffledIndices = [...Array(cards.length).keys()].sort(() => 0.5 - Math.random());
+                const board = document.querySelector('#memory .grid');
+                board.innerHTML = '';
+                shuffledIndices.forEach(index => {
+                    board.appendChild(cards[index]);
+                });
+            }, 500);
+        }
+        // ==================== SNAKE GAME ====================
+        let snakeGame;
+        let snake = [];
+        let food = {};
+        let direction = 'right';
+        let nextDirection = 'right';
+        let score = 0;
+        let gameInterval;
+        let gridSize = 20;
+        let canvasSize = 400;
+        function initSnakeGame() {
+            const canvas = document.getElementById('snakeCanvas');
+            snakeGame = canvas.getContext('2d');
+            // Set canvas size for high DPI displays
+            const scale = window.devicePixelRatio || 1;
+            canvas.style.width = canvasSize + 'px';
+            canvas.style.height = canvasSize + 'px';
+            canvas.width = canvasSize * scale;
+            canvas.height = canvasSize * scale;
+            snakeGame.scale(scale, scale);
+            resetSnakeGame();
+        }
+        function resetSnakeGame() {
+            clearInterval(gameInterval);
+            // Initial snake
+            snake = [
+                {x: 10, y: 10},
+                {x: 9, y: 10},
+                {x: 8, y: 10}
+            ];
+            direction = 'right';
+            nextDirection = 'right';
+            score = 0;
+            document.getElementById('score').textContent = score;
+            generateFood();
+            drawGame();
+            // Focus canvas for keyboard controls
+            document.getElementById('snakeCanvas').focus();
+            gameInterval = setInterval(gameLoop, 150);
+        }
+        function gameLoop() {
+            moveSnake();
+            checkCollision();
+            drawGame();
+        }
+        function move
+<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=AramTM/armgame" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>