feat: add PlayersStore

client/src/components/Lobby.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="lobby__container">
+    Lobby
+    <div class="lobby__players-list">
+      <div v-for="player in players" :key="player.id" class="lobby__player">
+        * {{ player.name }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { usePlayersStore } from '@/stores/PlayersStore'
+const players = usePlayersStore().players
+</script>
+
+<style lang="scss">
+@import '~/assets/css/components';
+
+.lobby {
+  &__container {
+    font-family: $font-primary;
+  }
+}
+</style>

client/src/composables/engine/fetchUpdate.ts

@@ -1,6 +1,7 @@
 import { useEngineStore } from "@/stores/EngineStore"
 import { useUserinfoStore } from "@/stores/UserinfoStore"
 import { useGameinfoStore } from "@/stores/GameinfoStore"
+import { usePlayersStore } from "@/stores/PlayersStore"
 
 export async function fetchUpdate() {
     if (this.shouldStop || !this.isActive) {
@@ -28,6 +29,7 @@ export async function fetchUpdate() {
         
         useEngineStore().setJson(response)
         useGameinfoStore().setGameinfo(response.game)
+        usePlayersStore().setPlayers(response.game.players)
 
         // apply rate limit
         const now = new Date()

client/src/pages/play.vue

@@ -7,7 +7,7 @@
     </AlertBox>
     <div class="page-play__playfield-container">
       <div class="page-play__playfield-content">
-        <p>wohoo!</p>
+        <Lobby v-if="true"/>
       </div>
       <EngineDebug v-if="showEngineDebug" class="page-play__playfield-debug" />
     </div>
@@ -33,8 +33,8 @@ const { start: startEngine, stop: stopEngine, isConnected, retry } = useEngine()
 onMounted(() => startEngine())
 onBeforeUnmount(() => stopEngine())
 
-const route = useRoute()
-const showEngineDebug = computed(() => route.hash.indexOf('debug') > -1)
+// debugging
+const showEngineDebug = computed(() => useRoute().hash.indexOf('debug') > -1)
 </script>
 
 <style lang="scss">
@@ -55,7 +55,6 @@ const showEngineDebug = computed(() => route.hash.indexOf('debug') > -1)
 
     &-content {
       flex-grow: 1;
-      padding: 0 2em;
     }
 
     &-debug {

client/src/stores/PlayersStore.ts

@@ -0,0 +1,23 @@
+import { defineStore } from 'pinia'
+
+export type Player = {
+  id: string
+  name: string
+  isIdle: boolean
+  score: number
+}
+
+export type Players = Array<Player>
+
+export const usePlayersStore = defineStore('PlayersStore', {
+  state: () => {
+    return {
+      players: [],
+    }
+  },
+  actions: {
+    setPlayers(players: Players): void {
+      this.players = players
+    },
+  },
+})