feat: WebSocket Integration, Web client view, and Dockerization

.gitignore

@@ -159,4 +159,138 @@ cython_debug/
 #  option (not recommended) you can uncomment the following to ignore the entire idea folder.
 #.idea/
 
-.vscode/
+.vscode/
+
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+**package-lock.json

Dockerfile

@@ -0,0 +1,20 @@
+# Use an official Python runtime as a parent image
+FROM python:3.11-slim
+
+# Set the working directory in the container
+WORKDIR /app
+
+# Copy the requirements.txt file into the container
+COPY requirements.txt .
+
+# Install dependencies
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy the rest of the application code into the container
+COPY . .
+
+# Expose the port the app runs on
+EXPOSE 8000
+
+# Run the FastAPI server using uvicorn
+CMD ["uvicorn", "web_app:app", "--host", "0.0.0.0", "--port", "8000", "--reload"]

README.md

@@ -20,7 +20,7 @@ This project is our attempt at making an AI that can play Tetris. First of all w
 - Heuristic agent with set weights
 - Genetic algorithm to find the best weights for the heuristic agent
 
-The game is playable/viable both in the terminal and in a GUI. The GUI is made with Pygame.
+The game is playable/viable both in the terminal, in a GUI and Web. The GUI is made with Pygame.
 
 ## How to run and install
 
@@ -38,6 +38,7 @@ pip install -r requirements.txt
 
 ## Usage
 
+### GUI version
 To play the game yourself, run the following command:
 
 ```bash
@@ -58,6 +59,14 @@ To train the genetic agent, run the following command:
 python main.py train
 ```
 
+### Web version
+To run the web version of the game, run the following command:
+
+```bash
+docker compose up --build
+```
+Then go to `http://localhost:80` in your browser.
+
 ## Testing
 
 To run the test suite, run the following command from the root directory of the project:

docker-compose.yml

@@ -0,0 +1,24 @@
+version: "3"
+
+services:
+  backend:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    ports:
+      - "8000:8000"
+    networks:
+      - app-network
+
+  frontend:
+    build:
+      context: ./frontend
+      dockerfile: Dockerfile
+    ports:
+      - "80:80"
+    networks:
+      - app-network
+
+networks:
+  app-network:
+    driver: bridge

frontend/Dockerfile

@@ -0,0 +1,8 @@
+# Use the official Nginx image to serve the frontend
+FROM nginx:alpine
+
+# Copy the frontend files into the appropriate Nginx directory
+COPY . /usr/share/nginx/html
+
+# Expose port 80 for the frontend
+EXPOSE 80

frontend/agentplayer.js

@@ -0,0 +1,64 @@
+import { BASE_URL, WS_BASE_URL } from "./routes.js";
+import { drawBoard } from "./tetris-common.js";
+
+// DOM elements
+const agentSelect = document.getElementById("agent-select");
+const startDemoBtn = document.getElementById("start-demo");
+let agentWebSocket = null;
+
+const canvasAgentId = "agentplayer-canvas";
+
+// Fetch available agents from the server and populate the dropdown
+async function loadAgents() {
+  const response = await fetch(`${BASE_URL}/agents`);
+  const agents = await response.json();
+
+  agents.forEach((agent) => {
+    const option = document.createElement("option");
+    option.value = agent;
+    option.textContent = agent;
+    agentSelect.appendChild(option);
+  });
+}
+
+// Start WebSocket connection for agent demo
+function startDemo() {
+  const selectedAgent = agentSelect.value;
+
+  // Close the existing WebSocket connection if any
+  if (agentWebSocket) {
+    agentWebSocket.close();
+  }
+
+  agentWebSocket = new WebSocket(`${WS_BASE_URL}/demo/${selectedAgent}`);
+
+  agentWebSocket.onopen = () => {
+    console.log(`WebSocket connection established with ${selectedAgent} agent`);
+  };
+
+  agentWebSocket.onmessage = (event) => {
+    const gameState = JSON.parse(event.data);
+    console.log("Game state received from server:", gameState);
+    // Render the updated board using shared function
+    drawBoard(gameState.board, canvasAgentId);
+  };
+
+  agentWebSocket.onclose = () => {
+    console.log("WebSocket connection closed");
+  };
+
+  agentWebSocket.onerror = (error) => {
+    console.error("WebSocket error:", error);
+  };
+}
+
+window.addEventListener("keydown", (e) => {
+  if (e.key === " ") {
+    e.preventDefault(); // Prevent default spacebar scrolling
+  }
+});
+// Load the agents when the page is loaded
+window.addEventListener("load", loadAgents);
+
+// Start the demo when the button is clicked
+startDemoBtn.addEventListener("click", startDemo);

frontend/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>TetrisAI</title>
+    </head>
+    <body>
+        <h1>TetrisAI</h1>
+
+        <label for="agent-select">Select Agent:</label>
+        <!-- Get the options from endpoint -->
+        <select id="agent-select"></select>
+        <button id="start-demo">Start Demo</button>
+        <canvas id="agentplayer-canvas" width="400" height="920"></canvas>
+        <canvas id="singleplayer-canvas" width="400" height="920"></canvas>
+
+        <script type="module" src="routes.js"></script>
+        <script type="module" src="tetris-common.js"></script>
+        <script type="module" src="singleplayer.js"></script>
+        <script type="module" src="agentplayer.js"></script>
+    </body>
+</html>

frontend/routes.js

@@ -0,0 +1,2 @@
+export const BASE_URL = "http://127.0.0.1:8000";
+export const WS_BASE_URL = "ws://127.0.0.1:8000/ws";

frontend/singleplayer.js

@@ -0,0 +1,40 @@
+import { WS_BASE_URL } from "./routes.js";
+import { drawBoard } from "./tetris-common.js";
+
+const singleplayerWebSocket = new WebSocket(`${WS_BASE_URL}/game`);
+console.log(WS_BASE_URL);
+
+const canvasSinglePlayerId = "singleplayer-canvas";
+
+singleplayerWebSocket.onopen = () => {
+  console.log("Single-player WebSocket connection established");
+};
+
+singleplayerWebSocket.onmessage = (event) => {
+  const gameState = JSON.parse(event.data);
+  console.log("Game state received from server:", gameState);
+  drawBoard(gameState.board, canvasSinglePlayerId);
+};
+
+singleplayerWebSocket.onclose = () => {
+  console.log("Single-player WebSocket connection closed");
+};
+
+singleplayerWebSocket.onerror = (error) => {
+  console.error("WebSocket error:", error);
+};
+
+// Sending input events to the server
+window.addEventListener("keydown", (e) => {
+  if (e.key === "ArrowDown") {
+    singleplayerWebSocket.send("SOFT_DROP");
+  } else if (e.key === "ArrowLeft") {
+    singleplayerWebSocket.send("MOVE_LEFT");
+  } else if (e.key === "ArrowRight") {
+    singleplayerWebSocket.send("MOVE_RIGHT");
+  } else if (e.key === " ") {
+    singleplayerWebSocket.send("HARD_DROP");
+  } else if (e.key === "ArrowUp") {
+    singleplayerWebSocket.send("ROTATE_CLOCKWISE");
+  }
+});