Spaces:

Raven7
/

HuggingGo1

Running

App Files Files Community

Raven7 commited on Dec 1, 2024

Commit

619e453

verified ·

1 Parent(s): d557592

Update index.html

Browse files

Files changed (1) hide show

index.html +361 -18

index.html CHANGED Viewed

@@ -1,19 +1,362 @@
-<!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>Go Game</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            min-height: 100vh;
+            background: #f0f0f0;
+            font-family: Arial, sans-serif;
+            padding: 20px;
+        }
+        .game-container {
+            background: #DEB887;
+            padding: 20px;
+            border-radius: 10px;
+            box-shadow: 0 0 20px rgba(0,0,0,0.1);
+        }
+        .board {
+            display: grid;
+            grid-template-columns: repeat(19, 30px);
+            grid-template-rows: repeat(19, 30px);
+            gap: 0px;
+            background: #DEB887;
+            border: 2px solid #000;
+            position: relative;
+        }
+        .intersection {
+            width: 30px;
+            height: 30px;
+            position: relative;
+            cursor: pointer;
+        }
+        .intersection::before {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 0;
+            width: 100%;
+            height: 1px;
+            background: #000;
+        }
+        .intersection::after {
+            content: '';
+            position: absolute;
+            left: 50%;
+            top: 0;
+            height: 100%;
+            width: 1px;
+            background: #000;
+        }
+        .stone {
+            position: absolute;
+            width: 26px;
+            height: 26px;
+            border-radius: 50%;
+            top: 2px;
+            left: 2px;
+            z-index: 1;
+            transition: all 0.2s ease;
+        }
+        .black {
+            background: #000;
+            box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
+        }
+        .white {
+            background: #fff;
+            box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
+        }
+        .controls {
+            margin-top: 20px;
+            display: flex;
+            gap: 10px;
+        }
+        button {
+            padding: 10px 20px;
+            font-size: 16px;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            background: #4CAF50;
+            color: white;
+            transition: background 0.3s;
+        }
+        button:hover {
+            background: #45a049;
+        }
+        .score {
+            margin-top: 20px;
+            font-size: 18px;
+            display: flex;
+            gap: 20px;
+        }
+        .mode-select {
+            margin-bottom: 20px;
+        }
+        select {
+            padding: 8px;
+            font-size: 16px;
+            border-radius: 5px;
+        }
+    </style>
+</head>
+<body>
+    <div class="mode-select">
+        <select id="gameMode">
+            <option value="pvp">Player vs Player</option>
+            <option value="ai">Player vs AI</option>
+        </select>
+    </div>
+    <div class="game-container">
+        <div class="board" id="board"></div>
+    </div>
+    <div class="score">
+        <div>Black Score: <span id="blackScore">0</span></div>
+        <div>White Score: <span id="whiteScore">0</span></div>
+    </div>
+    <div class="controls">
+        <button id="passBtn">Pass</button>
+        <button id="resetBtn">Reset</button>
+    </div>
+    <script>
+        class GoGame {
+            constructor() {
+                this.size = 19;
+                this.board = Array(this.size).fill().map(() => Array(this.size).fill(null));
+                this.currentPlayer = 'black';
+                this.lastMove = null;
+                this.passes = 0;
+                this.gameMode = 'pvp';
+                this.score = { black: 0, white: 0 };
+                this.capturedStones = { black: 0, white: 0 };
+                this.initialize();
+            }
+            initialize() {
+                const boardElement = document.getElementById('board');
+                boardElement.innerHTML = '';
+                for(let i = 0; i < this.size; i++) {
+                    for(let j = 0; j < this.size; j++) {
+                        const intersection = document.createElement('div');
+                        intersection.className = 'intersection';
+                        intersection.dataset.row = i;
+                        intersection.dataset.col = j;
+                        intersection.addEventListener('click', (e) => this.handleMove(e));
+                        boardElement.appendChild(intersection);
+                    }
+                }
+                document.getElementById('passBtn').addEventListener('click', () => this.pass());
+                document.getElementById('resetBtn').addEventListener('click', () => this.reset());
+                document.getElementById('gameMode').addEventListener('change', (e) => {
+                    this.gameMode = e.target.value;
+                    this.reset();
+                });
+            }
+            handleMove(e) {
+                const row = parseInt(e.target.dataset.row);
+                const col = parseInt(e.target.dataset.col);
+                if(this.isValidMove(row, col)) {
+                    this.placeStone(row, col);
+                    if(this.gameMode === 'ai' && this.currentPlayer === 'white') {
+                        setTimeout(() => this.makeAIMove(), 500);
+                    }
+                }
+            }
+            isValidMove(row, col) {
+                if(this.board[row][col] !== null) return false;
+                // Place stone temporarily to check if it would be immediately captured
+                this.board[row][col] = this.currentPlayer;
+                const group = this.getGroup(row, col);
+                const liberties = this.countLiberties(group);
+                // Revert the temporary stone
+                this.board[row][col] = null;
+                return liberties > 0;
+            }
+            placeStone(row, col) {
+                if(this.board[row][col] === null) {
+                    this.board[row][col] = this.currentPlayer;
+                    this.renderStone(row, col);
+                    this.captures();
+                    this.passes = 0;
+                    this.currentPlayer = this.currentPlayer === 'black' ? 'white' : 'black';
+                    this.updateScore();
+                }
+            }
+            renderStone(row, col) {
+                const intersection = document.querySelector(`[data-row="${row}"][data-col="${col}"]`);
+                const stone = document.createElement('div');
+                stone.className = `stone ${this.currentPlayer}`;
+                intersection.appendChild(stone);
+            }
+            getGroup(row, col) {
+                const color = this.board[row][col];
+                const group = new Set();
+                const stack = [[row, col]];
+                while(stack.length > 0) {
+                    const [r, c] = stack.pop();
+                    const key = `${r},${c}`;
+                    if(!group.has(key)) {
+                        group.add(key);
+                        const neighbors = this.getNeighbors(r, c);
+                        for(const [nr, nc] of neighbors) {
+                            if(this.board[nr][nc] === color) {
+                                stack.push([nr, nc]);
+                            }
+                        }
+                    }
+                }
+                return group;
+            }
+            countLiberties(group) {
+                const liberties = new Set();
+                for(const pos of group) {
+                    const [row, col] = pos.split(',').map(Number);
+                    const neighbors = this.getNeighbors(row, col);
+                    for(const [nr, nc] of neighbors) {
+                        if(this.board[nr][nc] === null) {
+                            liberties.add(`${nr},${nc}`);
+                        }
+                    }
+                }
+                return liberties.size;
+            }
+            getNeighbors(row, col) {
+                const neighbors = [];
+                const directions = [[-1,0], [1,0], [0,-1], [0,1]];
+                for(const [dr, dc] of directions) {
+                    const newRow = row + dr;
+                    const newCol = col + dc;
+                    if(newRow >= 0 && newRow < this.size && newCol >= 0 && newCol < this.size) {
+                        neighbors.push([newRow, newCol]);
+                    }
+                }
+                return neighbors;
+            }
+            captures() {
+                for(let i = 0; i < this.size; i++) {
+                    for(let j = 0; j < this.size; j++) {
+                        if(this.board[i][j] !== null) {
+                            const group = this.getGroup(i, j);
+                            if(this.countLiberties(group) === 0) {
+                                for(const pos of group) {
+                                    const [row, col] = pos.split(',').map(Number);
+                                    const capturedColor = this.board[row][col];
+                                    this.board[row][col] = null;
+                                    const intersection = document.querySelector(`[data-row="${row}"][data-col="${col}"]`);
+                                    intersection.innerHTML = '';
+                                    this.capturedStones[this.currentPlayer]++;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+            makeAIMove() {
+                const validMoves = [];
+                for(let i = 0; i < this.size; i++) {
+                    for(let j = 0; j < this.size; j++) {
+                        if(this.isValidMove(i, j)) {
+                            validMoves.push([i, j]);
+                        }
+                    }
+                }
+                if(validMoves.length > 0) {
+                    const [row, col] = validMoves[Math.floor(Math.random() * validMoves.length)];
+                    this.placeStone(row, col);
+                } else {
+                    this.pass();
+                }
+            }
+            pass() {
+                this.passes++;
+                if(this.passes === 2) {
+                    alert('Game Over!');
+                    return;
+                }
+                this.currentPlayer = this.currentPlayer === 'black' ? 'white' : 'black';
+                if(this.gameMode === 'ai' && this.currentPlayer === 'white') {
+                    setTimeout(() => this.makeAIMove(), 500);
+                }
+            }
+            reset() {
+                this.board = Array(this.size).fill().map(() => Array(this.size).fill(null));
+                this.currentPlayer = 'black';
+                this.passes = 0;
+                this.score = { black: 0, white: 0 };
+                this.capturedStones = { black: 0, white: 0 };
+                const intersections = document.querySelectorAll('.intersection');
+                intersections.forEach(intersection => intersection.innerHTML = '');
+                this.updateScore();
+            }
+            updateScore() {
+                document.getElementById('blackScore').textContent =
+                    this.score.black + this.capturedStones.black;
+                document.getElementById('whiteScore').textContent =
+                    this.score.white + this.capturedStones.white;
+            }
+        }
+        const game = new GoGame();
+    </script>
+</body>
 </html>