establish connection with frontend

docker-compose.yml

@@ -119,15 +119,15 @@ services:
       GROUP_SERVICE_URL: http://groupservice:8005
       MULTIPLAYER_SERVICE_URL: http://multiplayerservice:8006
 
-  webapp:
-    container_name: webapp-${teamname:-defaultASW}
-    image: ghcr.io/arquisoft/wiq_en2a/webapp:latest
-    profiles: ["dev", "prod"]
-    build: ./webapp
-    depends_on:
-      - gatewayservice
-    ports:
-      - "3000:3000" 
+  # webapp:
+  #   container_name: webapp-${teamname:-defaultASW}
+  #   image: ghcr.io/arquisoft/wiq_en2a/webapp:latest
+  #   profiles: ["dev", "prod"]
+  #   build: ./webapp
+  #   depends_on:
+  #     - gatewayservice
+  #   ports:
+  #     - "3000:3000" 
 
   prometheus:
     image: prom/prometheus

multiplayerservice/package.json

@@ -20,6 +20,7 @@
   "dependencies": {
     "axios": "^1.6.7",
     "body-parser": "^1.20.2",
+    "cors": "^2.8.5",
     "express": "^4.18.2",
     "mongoose": "^8.0.4",
     "socket.io": "^4.7.5",

multiplayerservice/server.js

@@ -4,9 +4,14 @@ const socketIo = require('socket.io');
 
 const app = express();
 const server = http.createServer(app);
-const io = socketIo(server);
-
-const parties = {}; // Store active parties and their corresponding sockets
+const io = socketIo(server, {
+  cors: {
+    origin: 'http://localhost:3000',
+    methods: ['GET', 'POST'],
+    credentials: true
+  }
+});
+const parties = {}; 
 
 // Generate a random code for the party
 function generatePartyCode() {

webapp/package.json

@@ -20,6 +20,7 @@
     "react-router-dom": "^6.22.2",
     "react-scripts": "^5.0.1",
     "react-sf-building-blocks": "^1.0.87",
+    "socket.io-client": "^4.7.5",
     "web-vitals": "^3.5.1"
   },
   "scripts": {

webapp/src/components/game/GameMultiPlayer.tsx

@@ -1,11 +1,44 @@
-import { FC } from 'react'
+import { FC, useEffect, useState } from 'react'
+import io from 'socket.io-client';
 
 interface GameMultiPlayerProps {
 
 }
 
+interface SocketProps {
+  emit: (event: string, ...args: any[]) => void;
+  close: () => void; 
+}
+
 const GameMultiPlayer: FC<GameMultiPlayerProps> = ({}) => {
-  return <div>GameMultiPlayer</div>
+
+  const SERVER_URL = 'http://localhost:8006';
+  const [socket, setSocket] = useState<SocketProps | null>(null);
+
+  useEffect(() => {
+    const newSocket = io(SERVER_URL);
+    setSocket(newSocket);
+
+    newSocket.on('partyCreated', (partyCode: string) => {
+      console.log(`Party created: ${partyCode}`);
+      // Handle the party creation, e.g., store the party code in the state
+    });
+
+    return () => {
+      newSocket.close();
+    };
+  }, []);
+
+  const createParty = () => {
+    socket.emit('createParty');
+  };
+
+  return (
+    <div>
+      <h1>Multiplayer Game</h1>
+      <button onClick={createParty}>Create Party</button>
+    </div>
+  )
 }
 
 export default GameMultiPlayer