promoted piece selection from webUI

Author: joojoooo

README.md

@@ -23,6 +23,7 @@ Features that differentiate this fork from the original Concept-Bytes project:
 - **Draw/Resign**: Lift both kings (non playing color first) off the board and hold them lifted for 2 seconds to end the game.
 - **Castling**: Castling is now possible, just move the king 2 squares towards the side you want to castle and it will show you where to move the rook.
 - **En passant**: En passant captures are now possible. Also correctly sets en passant square in the FEN (so Stockfish can take en passant too)
+- **Promotion**: The promoted piece can now be picked from the WebUI. If the WebUI is not open, Queen is automatically picked.
 - **Bot**: You can now pick the bot starting side and difficulty
 - **Turns**: Doesn't allow white to play infinite moves in a row, enforces turns
 - **Calibration**: Automatically orders GPIOs, shift-register outputs and LED index mapping. You won't need to care about pin order or LED strip layout. In simple terms: it can rotate/flip the board. Also makes it easier to throubleshoot magnet detection issues by printing info in the serial monitor console.

data/board.html.gz

@@ -123,10 +123,44 @@ void ChessGame::applyMove(int fromRow, int fromCol, int toRow, int toCol, char p
   }
 
   if (chessEngine->isPawnPromotion(piece, toRow)) {
-    promotion = promotion != ' ' && promotion != '\0' ? (ChessUtils::isWhitePiece(piece) ? toupper(promotion) : tolower(promotion)) : (ChessUtils::isWhitePiece(piece) ? 'Q' : 'q');
+    if (!replaying) boardDriver->promotionAnimation(toCol);
+    // If promotion piece is already specified (from bot, lichess, replay), use it
+    if (promotion != ' ' && promotion != '\0') {
+      promotion = ChessUtils::isWhitePiece(piece) ? toupper(promotion) : tolower(promotion);
+    } else if (!replaying && !isRemoteMove && wifiManager->isWebClientConnected()) {
+      // Acquire LED mutex so any queued animation (blink/capture) finishes first, then show Yellow LED on the promotion square while waiting
+      boardDriver->acquireLEDs();
+      boardDriver->clearAllLEDs(false);
+      boardDriver->setSquareLED(toRow, toCol, LedColors::Yellow);
+      boardDriver->showLEDs();
+      boardDriver->releaseLEDs();
+      // Wait for user to choose promotion piece
+      wifiManager->startPromotionWait(ChessUtils::getPieceColor(piece));
+      unsigned long promotionStart = millis();
+      const unsigned long PROMOTION_TIMEOUT_MS = 60000; // 60 second timeout
+      while (wifiManager->isPromotionPending() && wifiManager->getPromotionChoice() == ' ') {
+        if (millis() - promotionStart >= PROMOTION_TIMEOUT_MS) {
+          Serial.println("Promotion timeout - defaulting to queen");
+          break;
+        }
+        delay(100);
+      }
+
+      promotion = wifiManager->getPromotionChoice();
+      wifiManager->clearPromotion();
+      boardDriver->clearAllLEDs();
+
+      // If timed out (no choice received), default to queen
+      if (promotion == ' ')
+        promotion = ChessUtils::isWhitePiece(piece) ? 'Q' : 'q';
+      else
+        promotion = ChessUtils::isWhitePiece(piece) ? toupper(promotion) : tolower(promotion);
+    } else {
+      // No web client, default to queen
+      promotion = ChessUtils::isWhitePiece(piece) ? 'Q' : 'q';
+    }
     board[toRow][toCol] = promotion;
     Serial.printf("Pawn promoted to %c\n", promotion);
-    if (!replaying) boardDriver->promotionAnimation(toCol);
   }
 
   if (moveHistory && moveHistory->isRecording())

data/css/styles.css.gz

@@ -143,10 +143,13 @@ void ChessLichess::update() {
 
   if ((currentTurn == myColor) && tryPlayerMove(myColor, fromRow, fromCol, toRow, toCol)) {
     // Player's turn - handle physical move
-    if (chessEngine->isPawnPromotion(board[fromRow][fromCol], toRow))
-      promotion = 'q'; // Default promotion to queen, can be enhanced to allow player choice later
-    // Process locally FIRST - show animations immediately
-    applyMove(fromRow, fromCol, toRow, toCol, promotion);
+    // Check if this will be a promotion BEFORE applyMove modifies the board
+    bool isPromotion = chessEngine->isPawnPromotion(board[fromRow][fromCol], toRow);
+    // Promotion is handled inside applyMove: if web client is connected, it waits for user choice, otherwise it defaults to queen.
+    applyMove(fromRow, fromCol, toRow, toCol);
+    // After applyMove, retrieve the actual promotion piece used
+    if (isPromotion)
+      promotion = tolower(board[toRow][toCol]);
     updateGameStatus();
     wifiManager->updateBoardState(ChessUtils::boardToFEN(board, currentTurn, chessEngine), ChessUtils::evaluatePosition(board));
     // Then send move to Lichess (blocking)

src/chess_game.cpp

@@ -37,6 +37,16 @@ <h3>
         </div>
     </div>
 
+    <!-- Promotion overlay -->
+    <div id="promotionOverlay" class="settings-overlay">
+        <div class="promotion-popup">
+            <h3>Promote Pawn</h3>
+            <div class="promotion-pieces" id="promotionPieces">
+                <!-- Pieces injected dynamically based on color -->
+            </div>
+        </div>
+    </div>
+
     <!-- Settings popup overlay -->
     <div id="settingsPopup" class="settings-overlay">
         <div class="settings-popup">
@@ -1402,6 +1412,50 @@ <h3>
             text.style.color = textColor;
         }
 
+        // ==========================================
+        // Promotion overlay
+        // ==========================================
+
+        let promotionPending = false;
+        let promotionCooldownUntil = 0;
+
+        function showPromotionOverlay(color) {
+            const pieces = (color === 'w') ? [{ code: 'q', piece: 'wQ' }, { code: 'r', piece: 'wR' }, { code: 'b', piece: 'wB' }, { code: 'n', piece: 'wN' }] : [{ code: 'q', piece: 'bQ' }, { code: 'r', piece: 'bR' }, { code: 'b', piece: 'bB' }, { code: 'n', piece: 'bN' }];
+
+            const container = $('#promotionPieces');
+            container.empty();
+            pieces.forEach(p => {
+                const btn = $('<button class="promotion-piece-btn" data-piece="' + p.code + '"></button>');
+                btn.append('<img src="' + pieceTheme(p.piece) + '" alt="' + p.piece + '">');
+                btn.on('click', function () {
+                    selectPromotion(p.code);
+                });
+                container.append(btn);
+            });
+
+            promotionPending = true;
+            $('#promotionOverlay').addClass('visible');
+        }
+
+        function hidePromotionOverlay() {
+            promotionPending = false;
+            $('#promotionOverlay').removeClass('visible');
+        }
+
+        function selectPromotion(piece) {
+            hidePromotionOverlay();
+            promotionCooldownUntil = Date.now() + 2000;
+            fetch('/promotion', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+                body: 'piece=' + encodeURIComponent(piece)
+            }).then(r => {
+                if (!r.ok) console.log('Failed to send promotion choice');
+            }).catch(e => {
+                console.log('Promotion request error:', e);
+            });
+        }
+
         // Fetch board state from server
         function fetchBoardState() {
             if (editMode || reviewMode) return;
@@ -1479,6 +1533,13 @@ <h3>
                     if (data.evaluation !== undefined && isLive) {
                         updateEvaluationBar(data.evaluation);
                     }
+                    // Show promotion overlay if server is waiting for a promotion choice
+                    if (data.promotion && !promotionPending && Date.now() > promotionCooldownUntil) {
+                        showPromotionOverlay(data.promotion.color);
+                    } else if (!data.promotion && promotionPending) {
+                        // Server no longer waiting (e.g. timed out) - hide overlay
+                        hidePromotionOverlay();
+                    }
                 })
                 .catch(error => {
                     console.log('Fetch failed:', error);

src/chess_lichess.cpp

@@ -1425,4 +1425,47 @@ input[type="submit"]:hover,
 
 .delete-confirm-btn.no:hover {
     background-color: #777;
+}
+
+/* Promotion popup */
+.promotion-popup {
+    background-color: #353434;
+    border: 2px solid #ec8703;
+    border-radius: 12px;
+    padding: 20px;
+    text-align: center;
+}
+
+.promotion-popup h3 {
+    margin-top: 0;
+    margin-bottom: 16px;
+    color: #fff;
+}
+
+.promotion-pieces {
+    display: flex;
+    gap: 8px;
+    justify-content: center;
+}
+
+.promotion-piece-btn {
+    width: 72px;
+    height: 72px;
+    background: none;
+    border: 2px solid transparent;
+    border-radius: 8px;
+    cursor: pointer;
+    padding: 4px;
+    transition: border-color 0.15s, background-color 0.15s;
+}
+
+.promotion-piece-btn:hover {
+    border-color: #ec8703;
+    background-color: rgba(236, 135, 3, 0.15);
+}
+
+.promotion-piece-btn img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
 }

src/web/board.html

@@ -10,7 +10,9 @@
 
 static const char* INITIAL_FEN = "rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1";
 
-WiFiManagerESP32::WiFiManagerESP32(BoardDriver* bd, MoveHistory* mh) : boardDriver(bd), moveHistory(mh), server(AP_PORT), wifiSSID(SECRET_SSID), wifiPassword(SECRET_PASS), gameMode("0"), lichessToken(""), botConfig(), scanAllChannels(WIFI_SCAN_ALL_CHANNELS), currentFen(INITIAL_FEN), hasPendingEdit(false), hasPendingResign(false), hasPendingDraw(false), pendingResignColor('?'), hasPendingWiFi(false), boardEvaluation(0.0f), otaUpdater(bd), autoOtaEnabled(false) {}
+WiFiManagerESP32::WiFiManagerESP32(BoardDriver* bd, MoveHistory* mh) : boardDriver(bd), moveHistory(mh), server(AP_PORT), wifiSSID(SECRET_SSID), wifiPassword(SECRET_PASS), gameMode("0"), lichessToken(""), botConfig(), scanAllChannels(WIFI_SCAN_ALL_CHANNELS), currentFen(INITIAL_FEN), hasPendingEdit(false), hasPendingResign(false), hasPendingDraw(false), pendingResignColor('?'), promotion{}, lastBoardPollTime(0), hasPendingWiFi(false), boardEvaluation(0.0f), otaUpdater(bd), autoOtaEnabled(false) {
+  promotion.reset();
+}
 
 void WiFiManagerESP32::begin() {
   Serial.println("=== Starting OpenChess WiFi Manager (ESP32) ===");
@@ -68,6 +70,7 @@ void WiFiManagerESP32::begin() {
   // Set up web server routes with async handlers
   server.on("/board-update", HTTP_GET, [this](AsyncWebServerRequest* request) { request->send(200, "application/json", this->getBoardUpdateJSON()); });
   server.on("/board-update", HTTP_POST, [this](AsyncWebServerRequest* request) { this->handleBoardEditSuccess(request); });
+  server.on("/promotion", HTTP_POST, [this](AsyncWebServerRequest* request) { this->handlePromotion(request); });
   server.on("/resign", HTTP_POST, [this](AsyncWebServerRequest* request) { this->handleResign(request); });
   server.on("/draw", HTTP_POST, [this](AsyncWebServerRequest* request) { this->handleDraw(request); });
   server.on("/wifi", HTTP_GET, [this](AsyncWebServerRequest* request) { request->send(200, "application/json", this->getWiFiInfoJSON()); });
@@ -111,9 +114,14 @@ void WiFiManagerESP32::begin() {
 }
 
 String WiFiManagerESP32::getBoardUpdateJSON() {
+  this->lastBoardPollTime = millis();
   JsonDocument doc;
   doc["fen"] = currentFen;
   doc["evaluation"] = serialized(String(boardEvaluation, 2));
+  if (promotion.pending) {
+    JsonObject promo = doc["promotion"].to<JsonObject>();
+    promo["color"] = String(promotion.color);
+  }
   String output;
   serializeJson(doc, output);
   return output;
@@ -438,6 +446,42 @@ void WiFiManagerESP32::clearPendingDraw() {
   hasPendingDraw = false;
 }
 
+void WiFiManagerESP32::handlePromotion(AsyncWebServerRequest* request) {
+  if (!promotion.pending) {
+    request->send(400, "text/plain", "No promotion pending");
+    return;
+  }
+  if (request->hasArg("piece")) {
+    String piece = request->arg("piece");
+    piece.toLowerCase();
+    if (piece == "q" || piece == "r" || piece == "b" || piece == "n") {
+      promotion.choice = piece.charAt(0);
+      Serial.printf("Promotion choice received from web: %c\n", (char)promotion.choice);
+      request->send(200, "text/plain", "OK");
+    } else {
+      request->send(400, "text/plain", "Invalid piece (use 'q', 'r', 'b', or 'n')");
+    }
+  } else {
+    request->send(400, "text/plain", "Missing 'piece' parameter");
+  }
+}
+
+void WiFiManagerESP32::startPromotionWait(char color) {
+  promotion.color = color;
+  promotion.choice = ' ';
+  promotion.pending = true;
+  Serial.printf("Promotion wait started for %s\n", color == 'w' ? "White" : "Black");
+}
+
+void WiFiManagerESP32::clearPromotion() {
+  promotion.reset();
+}
+
+bool WiFiManagerESP32::isWebClientConnected() const {
+  // Consider web client connected if it polled within the last 2 seconds
+  return lastBoardPollTime > 0 && (millis() - lastBoardPollTime < 2000);
+}
+
 void WiFiManagerESP32::checkPendingWiFi() {
   if (!hasPendingWiFi)
     return;

src/web/css/styles.css

@@ -59,6 +59,22 @@ class WiFiManagerESP32 {
   volatile bool hasPendingDraw;
   char pendingResignColor; // 'w' or 'b' — the side resigning
 
+  // Promotion state for web-based piece selection
+  struct PromotionState {
+    volatile bool pending; // True while waiting for web client to choose a piece
+    volatile char choice;  // Piece chosen by web client ('q','r','b','n') or ' ' if none yet
+    char color;            // 'w' or 'b' — color of the promoting pawn
+    void reset() {
+      pending = false;
+      choice = ' ';
+      color = ' ';
+    }
+  };
+  PromotionState promotion;
+
+  // Web client heartbeat (tracks whether board.html is actively polling)
+  unsigned long lastBoardPollTime; // millis() of last /board-update GET request
+
   // Deferred WiFi reconnection (set by web handler, processed in main loop)
   String pendingWiFiSSID;
   String pendingWiFiPassword;
@@ -70,6 +86,7 @@ class WiFiManagerESP32 {
   String getLichessInfoJSON();
   String getBoardSettingsJSON();
   void handleBoardEditSuccess(AsyncWebServerRequest* request);
+  void handlePromotion(AsyncWebServerRequest* request);
   void handleConnectWiFi(AsyncWebServerRequest* request);
   void handleGameSelection(AsyncWebServerRequest* request);
   void handleSaveLichessToken(AsyncWebServerRequest* request);
@@ -131,6 +148,13 @@ class WiFiManagerESP32 {
   bool getPendingDraw();
   void clearPendingResign();
   void clearPendingDraw();
+  // Promotion management (from web interface)
+  void startPromotionWait(char color);
+  bool isPromotionPending() const { return promotion.pending; }
+  char getPromotionChoice() const { return promotion.choice; }
+  void clearPromotion();
+  // Web client connection check
+  bool isWebClientConnected() const;
   // WiFi connection management
   bool connectToWiFi(const String& ssid, const String& password, bool fromWeb = false);
   // Call from main loop to process deferred WiFi reconnection