Added start game logic

client/app/js/socket.js

@@ -68,6 +68,11 @@ export const socketEvents = {
       store.updateGame(room);
     });
 
+    socket.on("startGame", (data) => {
+      store.updateGame(data);
+      store.path = `/playing`;
+    }); 
+
     socket.on("error", (error) => {
       store.setError(error);
     });

client/app/vue/App.vue

@@ -2,6 +2,7 @@
 import { computed, onMounted } from "vue";
 import Home from "./Home.vue";
 import Game from "./Game.vue";
+import Playing from "./Playing.vue";
 import NotFound from "./NotFound.vue";
 import { store } from "../js/store";
 import { updatePath } from "../js/utils";
@@ -10,6 +11,7 @@ import { socketEvents } from "../js/socket";
 const routes = {
   "/": Home,
   game: Game,
+  playing: Playing,
 };
 
 // Listen for popstate events

client/app/vue/Game.vue

@@ -7,19 +7,43 @@ import { getHistoryState } from "../js/utils";
 const roomId = getHistoryState()?.roomId || store.path.split("/")[2];
 const message = ref("");
 
+const isHost = ref(false);
+const canStartGame = ref(false);
+
 const sendMessage = () => {
   if (!message.value.trim()) return;
   socketEvents.sendMessage(roomId, message.value);
   message.value = "";
 };
 
+// Start game conditions
 onMounted(() => {
   socketEvents.getRoomData(roomId);
+  
+  const interval = setInterval(() => {
+    if (store.game) {
+      const currentUser = store.game.users.find(
+        (user) => user.username === store.username
+      );
+      isHost.value = currentUser?.isAdmin || false;
+      canStartGame.value = store.game.users.length > 1;
+    }
+  }, 500);
+
+  return () => clearInterval(interval);
 });
+
+// startGame event
+const startGame = () => {
+  if (isHost.value && canStartGame.value) {
+    socketEvents.startGame(roomId);
+    store.path = '/playing'
+  }
+};
 </script>
 
 <template>
-  <div class="items-center screen !pt-10">
+  <div class="relative screen !pt-10">
     <h1 class="title">GAME LOBBY</h1>
 
     <!-- Room Code -->
@@ -75,5 +99,13 @@ onMounted(() => {
         </div>
       </div>
     </div>
+
+    <!-- Start Game Button -->
+    <button
+      v-if="isHost && canStartGame"
+      @click="startGame"
+      class="absolute top-20 left-5 z-10 bg-green-500 text-white px-4 py-2 rounded-md hover:bg-green-600"
+    > START GAME
+    </button>
   </div>
 </template>

client/app/vue/Playing.vue

+<script setup>
+import { onMounted } from "vue";
+import { store } from "../js/store";
+
+// Log game state
+onMounted(() => {
+  console.log("Playing.vue mounted. Game state:", store.game);
+});
+</script>
+
+<template>
+  <div class="items-center screen !pt-10">
+    <h1 class="title">GAME STARTED</h1>
+    <p class="subtitle">Room Code: {{ store.currentRoom }}</p>
+
+    <!-- Example content -->
+    <div class="mt-6">
+      <h2 class="text-lg text-gray-400">Players in the game:</h2>
+      <ul>
+        <li v-for="player in store.game?.users" :key="player.id">
+          {{ player.username }}
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>

client/server.js

@@ -166,6 +166,20 @@ io.on("connection", (socket) => {
       updateGame(roomId);
     });
   });
+
+  // Start game
+  socket.on("startGame", ({ roomId }) => {
+    const room = rooms.get(roomId);
+    room.gameState = GameState.PLAYING;
+    updateGame(roomId);
+
+    io.to(roomId).emit("startGame", {
+      gameState: room.gameState,
+      roomId,
+      users: Array.from(room.users.values()),
+    });
+    console.log(`Game started in room ${roomId}`);
+  });
 });
 
 server.listen(process.env.PORT || 3000, () => {