Merge branch 'main' of https://github.com/ItzyBitzySpider/pawnpawnpwn

backend/src/server.ts

@@ -3,12 +3,28 @@ import express from "express";
 import morgan from "morgan";
 import cors from "cors";
 import { generateRoomCode } from "./utils/calc.js";
-import "dotenv";
+import dotenv from "dotenv";
 import { Server } from "socket.io";
+import { Chess } from "chess.js";
+import "./utils/globals.js";
+
+dotenv.config();
+
+globalThis.roomFen = new Map();
 
 const ENVIRONMENT = process.env.ENV || "dev";
 
-let httpServer = createServer();
+const START_FEN = new Chess().fen();
+const chess = new Chess();
+
+let expressApp = express();
+if (ENVIRONMENT === "dev") {
+  expressApp.use(morgan("dev"));
+  expressApp.use(cors());
+}
+
+let httpServer = createServer(expressApp);
+
 const io = new Server(httpServer, {
   serveClient: false,
   cors:
@@ -17,12 +33,6 @@ const io = new Server(httpServer, {
       : undefined,
 });
 
-let expressApp = express();
-if (ENVIRONMENT === "dev") {
-  expressApp.use(morgan("dev"));
-  expressApp.use(cors());
-}
-
 // Add GET /health-check express route
 expressApp.get("/health-check", (req, res) => {
   res.status(200).send("OK");
@@ -46,31 +56,43 @@ io.on("connection", (socket) => {
   socket.on("join", (roomId, callback) => {
     console.log(socket.id, "join:", roomId);
     if (!io.sockets.adapter.rooms.has(roomId)) {
-      callback(false);
+      callback("denied");
       return;
     }
     socket.join(roomId);
+    globalThis.roomFen.set(roomId, START_FEN);
 
     if (io.sockets.adapter.rooms.get(roomId).size === 2)
-      io.to(roomId).emit(
-        "start",
-        "rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR",
-        socket.id
-      );
+      io.to(roomId).emit("start", START_FEN, socket.id);
+
+    callback("answer");
+  });
 
-    callback(true);
+  socket.on("leave", () => {
+    socket.rooms.forEach((roomId) => {
+      if (roomId !== socket.id) socket.leave(roomId);
+    });
   });
 
-  socket.on("move", (move) => {
+  socket.on("move", (move, callback) => {
     console.log(socket.id, move);
-    socket.rooms.forEach((roomId) =>
-      io.to(roomId).emit(
-        "update",
-        "rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1",
-        socket.id,
-        null //TODO winner
-      )
-    );
+    const allowed = Math.random() < 0.7; //TODO LLM
+
+    //TODO remove artificial delay
+    setTimeout(() => {
+      if (allowed) {
+        //TODO execute parsed move from LLM
+        const availableMoves = chess.moves();
+        chess.move(
+          availableMoves[Math.floor(Math.random() * availableMoves.length)]
+        );
+        socket.rooms.forEach((roomId) => {
+          if (roomId !== socket.id)
+            io.to(roomId).emit("update", chess.fen(), socket.id, move);
+        });
+        callback("Allowed " + move);
+      } else callback("Denied");
+    }, 1000);
   });
 
   socket.on("disconnecting", () => {
@@ -82,4 +104,4 @@ io.on("connection", (socket) => {
   });
 });
 
-httpServer.listen(8000);
+httpServer.listen(8080);

backend/src/utils/globals.ts

@@ -0,0 +1 @@
+var roomFen: Map<string, string>;

backend/test/test.js

@@ -1,6 +1,6 @@
 import { io } from "socket.io-client";
 
-const socket = io("http://localhost:8000");
+const socket = io("http://localhost:8080");
 
 socket.on("connect", () => {
   console.log(socket.id);

backend/test/test2.js

@@ -1,6 +1,6 @@
 import { io } from "socket.io-client";
 
-const socket = io("http://localhost:8000");
+const socket = io("http://localhost:8080");
 
 socket.on("connect", () => {
   console.log(socket.id);

frontend/src/App.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import "./App.css";
 import Landing from "./Landing";
 import Game from "./Game";
@@ -11,17 +11,18 @@ function App() {
   const [isTurn, setIsTurn] = useState(false);
   const [isWhite, setIsWhite] = useState(false);
 
-  onGameStart((fen, isWhite) => {
-    setFen(fen);
-    setIsWhite(isWhite);
-    setIsTurn(isWhite);
-    setGameStarted(true);
-  });
-  onUpdate((fen, isTurn, lastMove) => {
-    setFen(fen);
-    setIsTurn(isTurn);
-  });
-
+  useEffect(() => {
+    onGameStart((fen, isWhite) => {
+      setFen(fen);
+      setIsWhite(isWhite);
+      setIsTurn(isWhite);
+      setGameStarted(true);
+    });
+    onUpdate((fen, isTurn) => {
+      setFen(fen);
+      setIsTurn(isTurn);
+    });
+  }, []);
   return (
     <>
       {gameStarted ? (

frontend/src/Game.tsx

@@ -1,8 +1,16 @@
-import { Button, Container, Grid, Icon, Input } from "semantic-ui-react";
+import {
+  Button,
+  Container,
+  Grid,
+  Icon,
+  Input,
+  Loader,
+} from "semantic-ui-react";
 import { Chessboard } from "react-chessboard";
 import "./Game.css";
 import { Message } from "./types/message";
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
+import { move, onUpdate } from "./utils/socket";
 
 export default function Game({
   fen,
@@ -15,6 +23,7 @@ export default function Game({
 }) {
   const [text, setText] = useState("");
   const [messages, setMessages] = useState<Message[]>([]);
+  const [isLoading, setLoading] = useState(false);
 
   // const messages: Message[] = [
   //   { outgoing: true, text: "Knight to E5" },
@@ -33,9 +42,21 @@ export default function Game({
   //   { outgoing: false, text: "Move not allowed! Try again!" },
   // ];
 
+  useEffect(() => {
+    onUpdate((_, isTurn, lastMove) => {
+      if (isTurn)
+        setMessages((msgs) => msgs.concat({ outgoing: false, text: lastMove }));
+    });
+  }, []);
+
   const sendMessage = useCallback(() => {
     if (text.trim().length === 0) return;
-    setMessages((msgs) => [...msgs, { outgoing: true, text }]);
+    setMessages((msgs) => msgs.concat({ outgoing: true, text }));
+    setLoading(true);
+    move(text).then((res) => {
+      setLoading(false);
+      setMessages((msgs) => msgs.concat({ outgoing: false, text: res }));
+    });
     setText("");
   }, [text]);
 
@@ -81,11 +102,22 @@ export default function Game({
               value={text}
               onChange={(t) => setText(t.target.value)}
               action={
-                <Button primary onClick={sendMessage}>
-                  <Icon name="send" />
+                <Button
+                  primary
+                  onClick={sendMessage}
+                  style={{ padding: "0.78571429em 1em 0.78571429em" }}
+                >
+                  <Icon name="send" style={{ marginRight: 0 }} />
                 </Button>
               }
-              disabled={!isTurn}
+              placeholder={
+                isLoading
+                  ? "Processing..."
+                  : isTurn
+                  ? "Enter move"
+                  : "Waiting for opponent..."
+              }
+              disabled={!isTurn || isLoading}
             />
           </Container>
         </div>

frontend/src/Landing.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Button, Grid, Header, Icon, Input } from "semantic-ui-react";
-import { createRoom, joinRoom } from "./utils/socket";
+import { createRoom, joinRoom, resetRoom } from "./utils/socket";
 
 export default function Landing({
   confirmedRoomCodeState,
@@ -48,6 +48,7 @@ export default function Landing({
               onClick={() => {
                 setConfirmedRoomCode("");
                 setRoomCode("");
+                resetRoom();
               }}
             >
               Back to Home

frontend/src/main.tsx

@@ -1,11 +1,11 @@
-import React from "react";
+// import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App.tsx";
 import "./index.css";
 import "semantic-ui-less/semantic.less";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
+  // <React.StrictMode>
+  <App />
+  // </React.StrictMode>
 );

frontend/src/utils/socket.tsx

@@ -1,6 +1,8 @@
 import { io } from "socket.io-client";
 
-const socket = io("http://localhost:8000");
+const socket = window.location.hostname.includes("localhost")
+  ? io("http://localhost:8080")
+  : io(window.location.hostname, { path: "/api/socket.io/" });
 
 socket.on("connect", () => console.log("Connected to socket.io server"));
 
@@ -16,16 +18,26 @@ export async function joinRoom(roomId: string) {
   return response as boolean;
 }
 
-export function move(move: string) {
-  socket.emit("move", move);
+export function resetRoom() {
+  socket.emit("leave");
+}
+
+export async function move(move: string) {
+  return (await socket.emitWithAck("move", move)) as string;
 }
 
 export function onGameStart(callback: (fen: string, isWhite: boolean) => void) {
-  socket.on("start", (fen, whiteSocketId) =>
-    callback(fen, socket.id === whiteSocketId)
-  );
+  socket.on("start", (fen, whiteSocketId) => {
+    console.log("Start", whiteSocketId);
+    callback(fen, socket.id === whiteSocketId);
+  });
 }
 
-export function onUpdate(callback: (fen: string, lastMove: string) => void) {
-  socket.on("update", callback);
+export function onUpdate(
+  callback: (fen: string, isTurn: boolean, lastMove: string) => void
+) {
+  socket.on("update", (fen, lastMovedUser, lastMove) => {
+    console.log("Update", fen, lastMovedUser !== socket.id, lastMove);
+    callback(fen, lastMovedUser !== socket.id, lastMove);
+  });
 }