alpha-go

Running

App Files Files Community

kolaslab commited on Dec 1, 2024

Commit

1b10f5c

verified ·

1 Parent(s): d1bc016

Update index.html

Browse files

Files changed (1) hide show

index.html +285 -210

index.html CHANGED Viewed

@@ -3,285 +3,360 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>3D Audio Spectrum Analyzer</title>
     <style>
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
-            font-family: Arial, sans-serif;
         }
         body {
-            background: #1a1a1a;
-            color: #fff;
         }
-        .container {
-            max-width: 1200px;
-            margin: 0 auto;
             padding: 20px;
         }
-        .header {
-            text-align: center;
-            padding: 20px 0;
         }
-        .controls {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-            gap: 20px;
-            margin: 20px 0;
         }
-        .control-panel {
-            background: #2a2a2a;
-            padding: 20px;
-            border-radius: 8px;
         }
-        .visualization {
-            display: grid;
-            grid-template-columns: 2fr 1fr;
-            gap: 20px;
-            margin: 20px 0;
         }
-        canvas {
-            width: 100%;
-            height: 400px;
-            background: #2a2a2a;
-            border-radius: 8px;
         }
         button {
-            background: #4CAF50;
-            color: white;
             padding: 10px 20px;
             border: none;
-            border-radius: 4px;
             cursor: pointer;
-            margin: 5px;
         }
         button:hover {
             background: #45a049;
         }
-        input[type="number"] {
-            width: 100%;
-            padding: 8px;
-            margin: 5px 0;
-            border-radius: 4px;
-            border: 1px solid #444;
-            background: #333;
-            color: white;
-        }
-        .device-status {
-            background: #2a2a2a;
-            padding: 20px;
-            border-radius: 8px;
             margin-top: 20px;
         }
-        .preset-container {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-            gap: 10px;
-            margin: 20px 0;
-        }
-        .preset {
-            background: #333;
-            padding: 10px;
-            border-radius: 4px;
-            cursor: pointer;
         }
-        .preset:hover {
-            background: #444;
         }
     </style>
 </head>
 <body>
-    <div class="container">
-        <div class="header">
-            <h1>3D Audio Spectrum Analyzer</h1>
-        </div>
-        <div class="controls">
-            <div class="control-panel">
-                <h3>Device Configuration</h3>
-                <button id="startAnalysis">Start Analysis</button>
-                <button id="stopAnalysis">Stop Analysis</button>
-                <button id="calibrate">Calibrate Devices</button>
-                <div>
-                    <label>Device Role:</label>
-                    <select id="deviceRole">
-                        <option value="left">Left Channel</option>
-                        <option value="right">Right Channel</option>
-                        <option value="center">Center Channel</option>
-                    </select>
-                </div>
-            </div>
-            <div class="control-panel">
-                <h3>Binaural Beat Generator</h3>
-                <div>
-                    <label>Base Frequency (Hz):</label>
-                    <input type="number" id="baseFreq" value="432" min="20" max="1000">
-                </div>
-                <div>
-                    <label>Beat Frequency (Hz):</label>
-                    <input type="number" id="beatFreq" value="7" min="1" max="40">
-                </div>
-                <button id="startBinaural">Generate Binaural Beat</button>
-                <button id="stopBinaural">Stop</button>
-            </div>
-        </div>
-        <div class="visualization">
-            <canvas id="spectrumCanvas"></canvas>
-            <canvas id="3dRoomCanvas"></canvas>
-        </div>
-        <div class="preset-container">
-            <div class="preset">
-                <h4>Alpha Wave</h4>
-                <p>8-12 Hz</p>
-            </div>
-            <div class="preset">
-                <h4>Theta Wave</h4>
-                <p>4-7 Hz</p>
-            </div>
-            <div class="preset">
-                <h4>Delta Wave</h4>
-                <p>0.5-4 Hz</p>
-            </div>
-        </div>
-        <div class="device-status">
-            <h3>Connected Devices</h3>
-            <div id="deviceList"></div>
-        </div>
     </div>
     <script>
-        class AudioAnalyzer {
             constructor() {
-                this.audioContext = null;
-                this.analyser = null;
-                this.oscillator = null;
-                this.isPlaying = false;
             }
-            async initialize() {
-                try {
-                    this.audioContext = new (window.AudioContext || window.webkitAudioContext)();
-                    this.analyser = this.audioContext.createAnalyser();
-                    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-                    const source = this.audioContext.createMediaStreamSource(stream);
-                    source.connect(this.analyser);
-                    this.setupVisualization();
-                } catch (error) {
-                    console.error('Error initializing audio:', error);
                 }
             }
-            generateBinauralBeat(baseFreq, beatFreq) {
-                if (this.isPlaying) this.stopBinauralBeat();
-                const leftOsc = this.audioContext.createOscillator();
-                const rightOsc = this.audioContext.createOscillator();
-                const leftGain = this.audioContext.createGain();
-                const rightGain = this.audioContext.createGain();
-                const merger = this.audioContext.createChannelMerger(2);
-                leftOsc.frequency.value = baseFreq;
-                rightOsc.frequency.value = baseFreq + beatFreq;
-                leftOsc.connect(leftGain);
-                rightOsc.connect(rightGain);
-                leftGain.connect(merger, 0, 0);
-                rightGain.connect(merger, 0, 1);
-                merger.connect(this.audioContext.destination);
-                leftOsc.start();
-                rightOsc.start();
-                this.oscillator = { left: leftOsc, right: rightOsc };
-                this.isPlaying = true;
             }
-            stopBinauralBeat() {
-                if (this.oscillator) {
-                    this.oscillator.left.stop();
-                    this.oscillator.right.stop();
-                    this.isPlaying = false;
                 }
             }
-            setupVisualization() {
-                const canvas = document.getElementById('spectrumCanvas');
-                const ctx = canvas.getContext('2d');
-                const width = canvas.width;
-                const height = canvas.height;
-                const draw = () => {
-                    requestAnimationFrame(draw);
-                    const dataArray = new Uint8Array(this.analyser.frequencyBinCount);
-                    this.analyser.getByteFrequencyData(dataArray);
-                    ctx.fillStyle = '#2a2a2a';
-                    ctx.fillRect(0, 0, width, height);
-                    const barWidth = width / dataArray.length;
-                    let x = 0;
-                    dataArray.forEach(value => {
-                        const barHeight = value * height / 255;
-                        ctx.fillStyle = `hsl(${value}, 100%, 50%)`;
-                        ctx.fillRect(x, height - barHeight, barWidth, barHeight);
-                        x += barWidth;
-                    });
-                };
-                draw();
             }
-        }
-        // Initialize application
-        const analyzer = new AudioAnalyzer();
-        document.getElementById('startAnalysis').addEventListener('click', () => analyzer.initialize());
-        document.getElementById('startBinaural').addEventListener('click', () => {
-            const baseFreq = parseFloat(document.getElementById('baseFreq').value);
-            const beatFreq = parseFloat(document.getElementById('beatFreq').value);
-            analyzer.generateBinauralBeat(baseFreq, beatFreq);
-        });
-        document.getElementById('stopBinaural').addEventListener('click', () => analyzer.stopBinauralBeat());
-        // Setup room visualization
-        const room3d = document.getElementById('3dRoomCanvas');
-        const ctx3d = room3d.getContext('2d');
-        function draw3dRoom() {
-            // Basic 3D room visualization implementation would go here
-            // This would require a more complex 3D rendering library for proper implementation
-            ctx3d.fillStyle = '#2a2a2a';
-            ctx3d.fillRect(0, 0, room3d.width, room3d.height);
-            ctx3d.strokeStyle = '#4CAF50';
-            ctx3d.beginPath();
-            ctx3d.moveTo(50, 50);
-            ctx3d.lineTo(room3d.width - 50, 50);
-            ctx3d.lineTo(room3d.width - 50, room3d.height - 50);
-            ctx3d.lineTo(50, room3d.height - 50);
-            ctx3d.closePath();
-            ctx3d.stroke();
         }
-        draw3dRoom();
     </script>
 </body>
 </html><script async data-explicit-opt-in="true" data-cookie-opt-in="true" src="https://vercel.live/_next-live/feedback/feedback.js"></script>

 <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><script async data-explicit-opt-in="true" data-cookie-opt-in="true" src="https://vercel.live/_next-live/feedback/feedback.js"></script>