Spaces:

api-ix
/

Paid

Running

App Files Files Community

api-ix commited on Nov 27, 2025

Commit

0170cd2

verified ·

1 Parent(s): 56c6e87

Update index.html

Browse files

Files changed (1) hide show

index.html +118 -49

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Arcane Fast Analyzer</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chessboard-js/1.0.0/chessboard-1.0.0.min.css">
@@ -12,7 +12,8 @@
             --bg-color: #212121;
             --text-color: #e0e0e0;
             --accent-color: #4caf50;
-            --highlight: #00e5ff;
             --panel-bg: #333;
         }
@@ -26,6 +27,7 @@
             margin: 0;
             padding: 10px;
             user-select: none;
         }
         h1 { margin-bottom: 10px; text-align: center; font-size: 1.5rem; }
@@ -52,13 +54,19 @@
             align-items: center;
             justify-content: center;
             color: #777;
         }
-        /* --- HIGHLIGHT CLASS --- */
         .highlight-best {
             box-shadow: inset 0 0 3px 3px var(--highlight) !important;
             background-color: rgba(0, 229, 255, 0.3) !important;
         }
         /* --- TURN SWITCHER UI --- */
         .turn-controls {
@@ -118,7 +126,6 @@
             overflow: hidden;
         }
-        /* Loading Bar Animation */
         .loading-bar {
             position: absolute;
             bottom: 0;
@@ -153,14 +160,12 @@
         button:active { transform: scale(0.98); }
         #flipBtn { background-color: #008CBA; }
-        /* Error Log */
         #debug-log { display:none; color:red; background:#300; padding:10px; width:100%; font-size:12px;}
     </style>
 </head>
 <body>
-    <h1>⚡ Arcane Fast Analyzer</h1>
     <div id="debug-log"></div>
@@ -210,6 +215,7 @@
         const STOCKFISH_PATH = 'https://cdnjs.cloudflare.com/ajax/libs/stockfish.js/10.0.0/stockfish.js';
         let board, game, engine;
         $(document).ready(function() { initGame(); });
@@ -217,7 +223,7 @@
             game = new Chess();
             const config = {
-                draggable: true,
                 position: 'start',
                 onDragStart: onDragStart,
                 onDrop: onDrop,
@@ -229,12 +235,62 @@
             board = Chessboard('board', config);
             $(window).resize(board.resize);
             initStockfish();
             updateUI();
         }
-        // --- HIGHLIGHTS ---
-        function highlightSquares(move) {
             $('#board .square-55d63').removeClass('highlight-best');
             let source = move.substring(0, 2);
             let target = move.substring(2, 4);
@@ -242,10 +298,48 @@
             $('#board .square-' + target).addClass('highlight-best');
         }
-        function removeHighlights() {
             $('#board .square-55d63').removeClass('highlight-best');
         }
         // --- TURN LOGIC ---
         function forceTurn(color) {
             if (game.turn() === color) return;
@@ -256,6 +350,8 @@
             let newFen = parts.join(' ');
             if(game.load(newFen)) {
                 board.position(newFen);
                 updateUI();
                 analyzePosition();
             }
@@ -299,13 +395,12 @@
                             let moves = matchPv[1].split(' ');
                             let bestMove = moves[0];
                             $('#best-move').html(`➜ ${bestMove}`);
-                            highlightSquares(bestMove);
                         }
                     }
-                    // Detect when engine is done (bestmove command)
                     if (line.startsWith('bestmove')) {
-                        $('#loading-bar').css('width', '0%'); // Hide bar
                         $('#engineStatus').text('Done');
                     }
                 };
@@ -317,64 +412,38 @@
         }
         function analyzePosition() {
-            // Visual Reset
             $('#best-move').text('...');
-            removeHighlights();
             $('#engineStatus').text('Thinking...');
-            // Start Loading Bar Animation
             $('#loading-bar').css('width', '0%').animate({width: '100%'}, 2000);
             if(engine) {
                 engine.postMessage(`position fen ${game.fen()}`);
-                // --- THE SPEED FIX ---
-                // "movetime 2000" means: Think for exactly 2000 milliseconds (2 seconds)
                 engine.postMessage('go movetime 2000');
             }
         }
-        // --- GAME MOVEMENT ---
-        function onDragStart(source, piece) {
-            if (game.game_over()) return false;
-            if ((game.turn() === 'w' && piece.search(/^b/) !== -1) ||
-                (game.turn() === 'b' && piece.search(/^w/) !== -1)) {
-                return false;
-            }
-        }
-        function onDrop(source, target) {
-            const move = game.move({
-                from: source,
-                to: target,
-                promotion: 'q'
-            });
-            if (move === null) return 'snapback';
-            updateUI();
-            analyzePosition();
-        }
-        function onSnapEnd() {
-            board.position(game.fen());
-        }
         $('#resetBtn').click(function() {
             game.reset();
             board.start();
             $('#best-move').text('...');
             $('#eval-score').text('0.00');
-            removeHighlights();
             updateUI();
         });
         $('#flipBtn').click(function() {
             board.flip();
             let currentText = $('#best-move').text();
             if(currentText.includes('➜')) {
                 let move = currentText.replace('➜ ', '');
-                highlightSquares(move);
             }
         });

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Arcane Touch Analyzer</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chessboard-js/1.0.0/chessboard-1.0.0.min.css">
             --bg-color: #212121;
             --text-color: #e0e0e0;
             --accent-color: #4caf50;
+            --highlight: #00e5ff; /* Cyan for Best Move */
+            --selected: #ffeb3b;   /* Yellow for Selected Piece */
             --panel-bg: #333;
         }
             margin: 0;
             padding: 10px;
             user-select: none;
+            -webkit-tap-highlight-color: transparent; /* Removes blue tap box on Android */
         }
         h1 { margin-bottom: 10px; text-align: center; font-size: 1.5rem; }
             align-items: center;
             justify-content: center;
             color: #777;
+            touch-action: none; /* Prevents scrolling while touching board */
         }
+        /* --- HIGHLIGHT CLASSES --- */
         .highlight-best {
             box-shadow: inset 0 0 3px 3px var(--highlight) !important;
             background-color: rgba(0, 229, 255, 0.3) !important;
         }
+        .highlight-selected {
+            box-shadow: inset 0 0 3px 3px var(--selected) !important;
+            background-color: rgba(255, 235, 59, 0.4) !important;
+        }
         /* --- TURN SWITCHER UI --- */
         .turn-controls {
             overflow: hidden;
         }
         .loading-bar {
             position: absolute;
             bottom: 0;
         button:active { transform: scale(0.98); }
         #flipBtn { background-color: #008CBA; }
         #debug-log { display:none; color:red; background:#300; padding:10px; width:100%; font-size:12px;}
     </style>
 </head>
 <body>
+    <h1>⚡ Arcane Touch Analyzer</h1>
     <div id="debug-log"></div>
         const STOCKFISH_PATH = 'https://cdnjs.cloudflare.com/ajax/libs/stockfish.js/10.0.0/stockfish.js';
         let board, game, engine;
+        let selectedSquare = null; // Track tap moves
         $(document).ready(function() { initGame(); });
             game = new Chess();
             const config = {
+                draggable: true, // Keep drag enabled
                 position: 'start',
                 onDragStart: onDragStart,
                 onDrop: onDrop,
             board = Chessboard('board', config);
             $(window).resize(board.resize);
+            // --- TAP TO MOVE LISTENER ---
+            // We listen for clicks on squares (class starts with square-)
+            $('#board').on('click', '[class^="square-"]', onSquareClick);
             initStockfish();
             updateUI();
         }
+        // --- TAP TO MOVE LOGIC ---
+        function onSquareClick() {
+            // Get the square ID (e.g., 'e2') from the data attribute
+            const square = $(this).attr('data-square');
+            const piece = game.get(square);
+            const turn = game.turn();
+            // 1. If nothing is selected yet
+            if (selectedSquare === null) {
+                // Only select if it's a piece of the current turn's color
+                if (piece && piece.color === turn) {
+                    selectedSquare = square;
+                    highlightSelected(square);
+                }
+                return;
+            }
+            // 2. If something IS selected, try to move there
+            const move = game.move({
+                from: selectedSquare,
+                to: square,
+                promotion: 'q' // Always promote to queen for simplicity
+            });
+            // If move is valid
+            if (move) {
+                board.position(game.fen());
+                selectedSquare = null;
+                removeSelectionHighlights();
+                updateUI();
+                analyzePosition();
+            }
+            // If move is invalid
+            else {
+                // If they clicked a piece of their own color, switch selection
+                if (piece && piece.color === turn) {
+                    selectedSquare = square;
+                    highlightSelected(square);
+                } else {
+                    // Clicked empty square or enemy piece (but invalid move) -> Deselect
+                    selectedSquare = null;
+                    removeSelectionHighlights();
+                }
+            }
+        }
+        // --- VISUAL HIGHLIGHTS ---
+        function highlightBestMove(move) {
             $('#board .square-55d63').removeClass('highlight-best');
             let source = move.substring(0, 2);
             let target = move.substring(2, 4);
             $('#board .square-' + target).addClass('highlight-best');
         }
+        function highlightSelected(square) {
+            removeSelectionHighlights();
+            $('#board .square-' + square).addClass('highlight-selected');
+        }
+        function removeSelectionHighlights() {
+            $('#board .square-55d63').removeClass('highlight-selected');
+        }
+        function removeBestHighlights() {
             $('#board .square-55d63').removeClass('highlight-best');
         }
+        // --- DRAG LOGIC (Keep sync with Tap) ---
+        function onDragStart(source, piece) {
+            if (game.game_over()) return false;
+            if ((game.turn() === 'w' && piece.search(/^b/) !== -1) ||
+                (game.turn() === 'b' && piece.search(/^w/) !== -1)) {
+                return false;
+            }
+            // If dragging, clear any tap selection
+            selectedSquare = null;
+            removeSelectionHighlights();
+        }
+        function onDrop(source, target) {
+            const move = game.move({
+                from: source,
+                to: target,
+                promotion: 'q'
+            });
+            if (move === null) return 'snapback';
+            updateUI();
+            analyzePosition();
+        }
+        function onSnapEnd() {
+            board.position(game.fen());
+        }
         // --- TURN LOGIC ---
         function forceTurn(color) {
             if (game.turn() === color) return;
             let newFen = parts.join(' ');
             if(game.load(newFen)) {
                 board.position(newFen);
+                selectedSquare = null;
+                removeSelectionHighlights();
                 updateUI();
                 analyzePosition();
             }
                             let moves = matchPv[1].split(' ');
                             let bestMove = moves[0];
                             $('#best-move').html(`➜ ${bestMove}`);
+                            highlightBestMove(bestMove);
                         }
                     }
                     if (line.startsWith('bestmove')) {
+                        $('#loading-bar').css('width', '0%');
                         $('#engineStatus').text('Done');
                     }
                 };
         }
         function analyzePosition() {
             $('#best-move').text('...');
+            removeBestHighlights();
             $('#engineStatus').text('Thinking...');
             $('#loading-bar').css('width', '0%').animate({width: '100%'}, 2000);
             if(engine) {
                 engine.postMessage(`position fen ${game.fen()}`);
                 engine.postMessage('go movetime 2000');
             }
         }
         $('#resetBtn').click(function() {
             game.reset();
             board.start();
+            selectedSquare = null;
             $('#best-move').text('...');
             $('#eval-score').text('0.00');
+            removeSelectionHighlights();
+            removeBestHighlights();
             updateUI();
         });
         $('#flipBtn').click(function() {
             board.flip();
+            // Re-apply highlights after flip because DOM is redrawn
             let currentText = $('#best-move').text();
             if(currentText.includes('➜')) {
                 let move = currentText.replace('➜ ', '');
+                highlightBestMove(move);
+            }
+            if(selectedSquare) {
+                highlightSelected(selectedSquare);
             }
         });