Skip to content
Snippets Groups Projects
Select Git revision
  • 756d28b283d134ea041c7c527187e9f8cd198a74
  • main default protected
2 results

room.html

Blame
    • room.html 3.19 KiB 
    <!DOCTYPE html>
<html>
<head>
  <title>Connect4 - Game Room</title>
  <style>
    /* Add CSS styles for game room */
  </style>
</head>
<body>
  <div id="game-container">
    <canvas id="gameCanvas" width="700" height="600"></canvas>
    <div id="players"></div>
  </div>

  <div id="chat">
    <div id="messages"></div>
    <input type="text" id="messageInput">
    <button onclick="sendMessage()">Send</button>
  </div>

  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io();
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    const params = new URLSearchParams(window.location.search);
    const playerName = params.get('name');
    const roomId = window.location.pathname.split('/').pop();

    const COLS = 7;
    const ROWS = 6;
    const CELL_SIZE = 100;
    const RADIUS = CELL_SIZE / 2 - 10;

    function drawBoard(board) {
      // Draw Connect4 grid based on board state
      ctx.fillStyle = 'blue';
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      for (let row = 0; row < ROWS; row++) {
        for (let col = 0; col < COLS; col++) {
          let x = col * CELL_SIZE + CELL_SIZE / 2;
          let y = row * CELL_SIZE + CELL_SIZE / 2;

          // Trou
          ctx.beginPath();
          ctx.arc(x, y, RADIUS, 0, Math.PI * 2);
          ctx.fillStyle = 'white';
          ctx.fill();

          // Pion
          ctx.beginPath();
          ctx.arc(x, y, RADIUS, 0, Math.PI * 2);
          ctx.fillStyle = 'white';
          if (board[row][col] === 0) {ctx.fillStyle='red';}
          if (board[row][col] === 1) {ctx.fillStyle='yellow';}
          ctx.fill();
        }
      }
    }

    canvas.addEventListener('click', (e) => {
      const rect = canvas.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const col = Math.floor(x / CELL_SIZE);
      socket.emit('move', col);
    });

    socket.on('connect', () => {
        socket.emit('joinRoom', {
            name: playerName,
                roomId: roomId
        });
    });

    socket.on('startGame', ({ board, currentPlayer }) => {
      const messages = document.getElementById('messages');
      messages.innerHTML += `<div><strong>Game starting</strong></div>`;
      drawBoard(board);

    });

    socket.on('stopGame', ({board, winner}) => {
        alert(winner === 0 ? 'Player 1 wins!' : 'Player 2 wins!');
        const messages = document.getElementById('messages');
        messages.innerHTML += `<div><strong>Game Finish</strong></div>`;
    });

    socket.on('updateGame', ({ board, currentPlayer}) => {
      drawBoard(board);
    });

    canvas.addEventListener('click', (e) => {
      const col = Math.floor(e.offsetX / CELL_SIZE);
      socket.emit('move', col);
    });

    // Chat functionality
    function sendMessage() {
      const message = document.getElementById('messageInput').value;
      socket.emit('chatMessage', message);
      console.log("message sent");
      document.getElementById('messageInput').value = '';
    }

    socket.on('message', ({ name, message }) => {
      const messages = document.getElementById('messages');
      messages.innerHTML += `<div><strong>${name}:</strong> ${message}</div>`;
    });
</script>
</body>
</html>