feature: initialized room with websockets and emitting all cards a player has with x/y values

webclientvue/src/pages/GamePage.vue

@@ -94,6 +94,7 @@
 import { ref, computed } from 'vue';
 import type { CSSProperties } from 'vue';
 import socket from '../socket.js'; // Import your socket connection module
+
 // Define the Card interface, which describes the shape of a card object
 interface Card {
   id: number;
@@ -126,11 +127,26 @@ const drawArea = ref<HTMLElement | null>(null);
 
 const hoverTimers = new Map<number, number>();
 
+const username = ref('Player1'); // Replace with actual username logic
+
 const connect = () => {
   socket.connect();
+  socket.emit('join', username.value,  'game-room');
   // Here you would typically initialize your WebSocket connection
 };
 
+const emitCardsToServer = () => {
+  // should emit cards under the current users username
+  socket.emit('sync-cards', {
+    room: 'game-room',
+    // add the current user's username here
+    username: username.value, // Replace with actual username logic
+    cards: cards.value,
+  });
+};
+
+//send this players cards to the websocket server so it can store them
+
 // Computed array of cards currently peeked (hovered), should be limited to only one card at a time
 const peekedCards = computed(() => {
   return cards.value.filter((card) => card.peek);
@@ -201,6 +217,8 @@ const addCard = () => {
   });
 
   cardId.value++;
+
+  emitCardsToServer(); // <-- sync to server
 };
 
 /**

webclientvue/src/router/routes.ts

@@ -19,6 +19,7 @@ const routes: RouteRecordRaw[] = [
     children: [{ path: 'game', name: 'game', component: () => import('pages/GamePage.vue') }],
   },
 
+
   // Always leave this as last one,
   // but you can also remove it
   {

webclientvue/src/socket.js

@@ -0,0 +1,19 @@
+import { reactive } from "vue";
+import { io } from "socket.io-client";
+
+export const state = reactive({
+    connected: false,
+    fooEvents: [],
+    barEvents: [],
+})
+
+const URL = "http://localhost:3000";
+const socket = io(URL);
+
+export default socket;
+
+
+socket.on("connect", () => {
+    state.connected = true;
+    console.log("Connected to socket server");
+})