From d18b4d93cc9f26ef64db9a1890e8951bcb76b3a1 Mon Sep 17 00:00:00 2001
From: Muhammad Sabeeh <muhammadsabeeh01@gmail.com>
Date: Fri, 20 Jun 2025 00:51:58 -0400
Subject: [PATCH] feature: initialized room with websockets and emitting all
 cards a player has with x/y values

---
 webclientvue/src/pages/GamePage.vue | 18 ++++++++++++++++++
 webclientvue/src/router/routes.ts   |  1 +
 webclientvue/src/socket.js          | 19 +++++++++++++++++++
 3 files changed, 38 insertions(+)
 create mode 100644 webclientvue/src/socket.js

diff --git a/webclientvue/src/pages/GamePage.vue b/webclientvue/src/pages/GamePage.vue
index 9c890c999..4543a60ac 100644
--- a/webclientvue/src/pages/GamePage.vue
+++ b/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
 };
 
 /**
diff --git a/webclientvue/src/router/routes.ts b/webclientvue/src/router/routes.ts
index bf4e19d2b..fd686acc8 100644
--- a/webclientvue/src/router/routes.ts
+++ b/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
   {
diff --git a/webclientvue/src/socket.js b/webclientvue/src/socket.js
new file mode 100644
index 000000000..d239a3623
--- /dev/null
+++ b/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");
+})