Sprint 3 Review

• Backend
• Chess Logic
• Some frontend

Backend

// Function to fetch groups for dropdown selection
async function fetchGroups() {
            try {
                const response = await fetch(`${pythonURI}/api/groups`, fetchOptions);
                if (!response.ok) {
                    throw new Error('Failed to fetch groups: ' + response.statusText);
                }
                const groups = await response.json();
                const groupSelect = document.getElementById('group_id');
                groups.forEach(group => {
                    const option = document.createElement('option');
                    option.value = group.id;
                    option.textContent = group.name;
                    groupSelect.appendChild(option);
                });
            } catch (error) {
                console.error('Error fetching groups:', error);
            }
        }

Chess Logic

onst pieces = {
    R: "♖", N: "♘", B: "♗", Q: "♕", K: "♔", P: "♙",
    r: "♜", n: "♞", b: "♝", q: "♛", k: "♚", p: "♟",
  };
  const boardLayout = [
    ["r", "n", "b", "q", "k", "b", "n", "r"],
    ["p", "p", "p", "p", "p", "p", "p", "p"],
    ["", "", "", "", "", "", "", ""],
    ["", "", "", "", "", "", "", ""],
    ["", "", "", "", "", "", "", ""],
    ["", "", "", "", "", "", "", ""],
    ["P", "P", "P", "P", "P", "P", "P", "P"],
    ["R", "N", "B", "Q", "K", "B", "N", "R"],
  ];

  let selectedSquare = null;
  let turn = "white";
  const chessboard = document.getElementById("chessboard");
  const turnIndicator = document.getElementById("turnIndicator");
  const whiteCaptured = document.getElementById("whiteCaptured");
  const blackCaptured = document.getElementById("blackCaptured");
  let whiteCapturedPieces = [];
  let blackCapturedPieces = [];

  function drawBoard() {
    chessboard.innerHTML = "";
    boardLayout.forEach((row, rowIndex) => {
      row.forEach((piece, colIndex) => {
        const square = document.createElement("div");
        square.classList.add((rowIndex + colIndex) % 2 === 0 ? "yellow" : "orange");
        square.textContent = pieces[piece] || "";

        if (piece === piece.toUpperCase() && piece) {
          square.classList.add("white-piece");
        } else if (piece === piece.toLowerCase() && piece) {
          square.classList.add("black-piece");
        }

        square.addEventListener("click", () => selectSquare(rowIndex, colIndex));
        chessboard.appendChild(square);
      });
    });
  }

  function selectSquare(row, col) {
    const piece = boardLayout[row][col];
    if (selectedSquare) {
      movePiece(row, col);
      selectedSquare = null;
    } else if (
      piece &&
      ((turn === "white" && piece === piece.toUpperCase()) ||
      (turn === "black" && piece === piece.toLowerCase()))
    ) {
      selectedSquare = { row, col, piece };
    }
  }

  function movePiece(newRow, newCol) {
    const { row, col, piece } = selectedSquare;
    const targetPiece = boardLayout[newRow][newCol];

    if (targetPiece && piece.toUpperCase() !== targetPiece.toUpperCase()) {
      capturePiece(targetPiece);
    }
    
    boardLayout[newRow][newCol] = piece;
    boardLayout[row][col] = "";
    drawBoard();

    turn = turn === "white" ? "black" : "white";
    turnIndicator.textContent = `Turn: ${turn.charAt(0).toUpperCase() + turn.slice(1)}`;
  }

  function capturePiece(piece) {
    if (piece === piece.toUpperCase()) {
      blackCapturedPieces.push(piece);
      blackCaptured.textContent = blackCapturedPieces.join(" ");
    } else {
      whiteCapturedPieces.push(piece);
      whiteCaptured.textContent = whiteCapturedPieces.join(" ");
    }
  }

  // Chat functionality
  const chatMessages = document.getElementById("chatMessages");
  const messageInput = document.getElementById("messageInput");
  const sendBtn = document.getElementById("sendBtn");

  function addMessage(content, type = "user") {
    const messageDiv = document.createElement("div");
    messageDiv.classList.add("message", type === "user" ? "user-message" : "bot-message");
    messageDiv.textContent = content;
    chatMessages.appendChild(messageDiv);
    chatMessages.scrollTop = chatMessages.scrollHeight;
  }

  sendBtn.addEventListener("click", () => {
    const message = messageInput.value.trim();
    if (message) {
      addMessage(message, "user");
      messageInput.value = "";
      setTimeout(botResponse, 2000);
    }
  });

  function botResponse() {
    const motivationalMessages = [
      "Keep it up! Your next move could be a game-changer.",
      "Great effort! Remember, every master was once a beginner.",
      "You're doing fantastic. Stay focused and enjoy the game!",
    ];
    const randomMessage =
      motivationalMessages[Math.floor(Math.random() * motivationalMessages.length)];
    addMessage(randomMessage, "bot");
  }

  drawBoard();

Some frontend

<div class="chat-container">
<div>
  <div class="chessboard" id="chessboard"></div>
  <div class="captured-pieces">
    <div>White's Captured Pieces: <span id="whiteCaptured"></span></div>
    <div>Black's Captured Pieces: <span id="blackCaptured"></span></div>
  </div>
</div>
<div class="chat-box">
  <h4>Chess-Themed Chat Room</h4>
  <div id="chatMessages" class="chat-messages"></div>
  <div class="message-input">
    <input type="text" id="messageInput" placeholder="Type your message">
    <button id="sendBtn" class="btn">Send</button>
  </div>
</div>
</div>
</div>