Make player container an ordered dictionary

glebby-client/src/App.vue

@@ -13,7 +13,7 @@ export default {
   data() {
     return {
       ws: new WebSocket(import.meta.env.VITE_GLEBBY_SERVER_URL),
-      model: null
+      model: null as any
     }
   },
   created() {
@@ -24,7 +24,14 @@ export default {
       if (payload.type === 'init') {
         console.log('Received initial game state:')
         console.log(payload.state)
-        this.model = payload.state
+        const players = new Map()
+        for (const player of payload.state.players) {
+          players.set(player.id, player)
+        }
+        this.model = {
+          yourId: payload.state.yourId,
+          players
+        }
         this.ws.removeEventListener('message', messageListener)
       }
     }

glebby-client/src/components/Game.vue

@@ -8,11 +8,11 @@ interface Player {
 
 interface Model {
   yourId: number,
-  players: Player[]
+  players: Map<number, Player>
 }
 
 function getPlayer(model: Model, id: number): Player | undefined {
-  return model.players.find(player => player.id === id)
+  return model.players.get(id)
 }
 
 /*
@@ -41,13 +41,13 @@ export default defineComponent({
 
       switch (payload.type) {
         case 'join':
-          this.model.players.push({
+          this.model.players.set(message.from, {
             id: message.from,
             name: ''
           })
           break
         case 'leave':
-          this.model.players = this.model.players.filter(player => player.id !== message.from)
+          this.model.players.delete(message.from)
           break
         case 'chat':
           this.chatMessages.push(payload.message)
@@ -81,7 +81,7 @@ export default defineComponent({
 </script>
 
 <template>
-  <pre>{{ JSON.stringify(model, null, 2) }}</pre>
+  <pre>{{ model }}</pre>
   <h1>I am #{{ model.yourId }}</h1>
   <form @submit.prevent="setName">
     <input v-model="playerName" placeholder="enter your name...">
@@ -93,7 +93,7 @@ export default defineComponent({
   </form>
   <h2>players</h2>
   <ul v-if="model">
-    <li v-for="player in model.players" :key="player.id">{{ player.name }}#{{ player.id }}</li>
+    <li v-for="[id, player] in model.players" :key="id">{{ player.name }}#{{ player.id }}</li>
   </ul>
   <h2>chat</h2>
   <ul v-if="model">