Feat(UI): Container, online vs ingame

client/src/App.vue

 <template>
-  <div id="app">
-    <h2 id="header">Salut {{ name }} !</h2>
-    <Sockets v-on:message="newMessage($event)" />
-    <div id="players">
-      <p>{{ players.length }} en ligne :</p>
-      <div
-        v-for="player in players" v-bind:key="player + ''">
-        <Player :name="player.name" :nb-cards="player.nbCards"/>
-      </div>
-    </div>
+  <b-container id="app">
+    <b-row id="header">
+      <b-col><h2>Salut {{ name }} !</h2>
+      </b-col>
+    </b-row>
+    <b-row id="sockets">
+      <b-col>
+        <Sockets v-on:message="newMessage($event)" />
+      </b-col>
+    </b-row>
+    <b-row id="players">
+      <b-col id="players-ingame">
+        <p>{{ gamers.length }} en jeu</p>
+          <Player
+            v-for="player in gamers" v-bind:key="player.name"
+            :name="player.name" :nb-cards="player.nbCards" :is-playing="player.isPlaying"
+            :is-ready="player.isReady" />
+      </b-col>
+      <b-col id="players-online">
+        <p>{{ players.length }} en ligne</p>
+        <div class="player-container"
+             v-for="player in players" v-bind:key="player.name">
+          <Player :name="player.name" :nb-cards="0" :is-playing="false"
+                  :is-ready="player.isReady" />
+        </div>
+      </b-col>
+    </b-row>
     <div id="game">
       <label for="messages"> Choose a message:</label>
       <select v-model="message" name="message" id="messages">
@@ -20,7 +37,7 @@
       <button v-on:click="sendMessage(message)">Envoyer</button>
       <Hand :cards="currentCards()" />
     </div>
-  </div>
+  </b-container>
 </template>
 
 <script>
@@ -68,7 +85,7 @@ export default {
   },
   computed: {
     ...mapGetters(["isConnected", "name", "text",
-      "cards", "players", "socketMessage"])
+      "cards", "players", "gamers", "socketMessage"])
   },
   methods: {
     sendMessage: function(message) {
@@ -87,10 +104,10 @@ export default {
     },
     currentCards() {
       let currentState = this.socketMessage;
-      console.log("curCards! Last message:", JSON.stringify(currentState));
+      // console.log("curCards! Last message:", JSON.stringify(currentState));
       if (currentState["data"]) {
         if (currentState["data"]["cards"]) {
-          console.log("Setting cards...");
+          console.log("Refreshing cards UI:", this.cards);
           return this.cards;
 
         } else return this.mockCards();

client/src/Sockets.vue

@@ -8,17 +8,26 @@
     <p v-if="isConnected">We're connected to the server!</p>
     <p v-if="!isConnected">We're not connected yet...</p>
 
-    <div v-if="socketMessages.length >= 1">
-      <p>Messages from server:</p>
-      <b-list-group horizontal="">
-        <b-list-group-item v-for="m in socketMessages.slice(-8)" :key="m + ''">
-          {{ m.data.state }}
-          <div v-if="m.data.extras">Extras: {{ m.data.extras }}</div>
-        </b-list-group-item>
-      </b-list-group>
-      <ul id="messages">
-      </ul>
-    </div>
+    <p>
+      <b-icon-inbox-fill />
+      Messages from server: <b v-if="socketMessages.length == 0">None :'(</b>
+    </p>
+    <b-row>
+      <b-card-group deck>
+        <b-col
+               v-for="m in socketMessages.slice(-8)" :key="m + ''"
+        >
+          <b-card class="text-center"
+                  header-tag="header"
+                  v-bind:header="m.data.state"
+                  v-bind:sub-title="m.data != null ? m.data.extras != null ? JSON.stringify(m.data.extras) : '' : ''"
+          >
+          </b-card>
+        </b-col>
+      </b-card-group>
+    </b-row>
+    <ul id="messages">
+    </ul>
   </div>
 </template>
 

client/src/components/Hand.vue

 <template>
   <div id="hand" class="mr-5 ml-5">
     <h3>Tu as <b>{{ count() }}</b> cartes en main.</h3>
-    <b-card-group deck>
+    <b-card-group deck v-if="cards.length > 0">
       <Card
         v-for="card in cards"
         v-bind:key="card.value + ' ' + card.color"

client/src/components/Player.vue

 <template>
   <div id="player" class="mr-5 ml-5">
-    <b-badge :variant="Math.random() >= 0.5? 'dark' : 'danger'">
+    <b-badge :variant="variant()">
       <b-icon-person-square />
       {{ name }}
     </b-badge>
@@ -12,9 +12,16 @@ export default {
   name: "Player",
   props: {
     name: String,
-    nbCards: Number
+    nbCards: Number,
+    isReady: Boolean,
+    isPlaying: Boolean
   },
-  methods: {}
+  methods: {
+    variant: function() {
+      if (!this.isPlaying) return "light";
+      else return Math.random() >= 0.5 ? "dark" : "danger";
+    }
+  }
 };
 </script>
 <style>

client/src/vuex-store.js

@@ -19,7 +19,8 @@ export const store = new Vuex.Store({
     socketMessage: state => state.socketMessage,
     gameState: state => state.gameState,
     cards: state => state.cards,
-    players: state => state.players
+    players: state => state.players,
+    gamers: state => state.players.filter(p => p.isPlaying)
   },
   mutations: {
     SOCKET_CONNECT(state) {
@@ -53,31 +54,30 @@ export const store = new Vuex.Store({
           let players = message.data.players;
           let cards = message.data.cards;
           let gameState = message.data.state;
-          let text = message.data.text;
           let extras = message.data.extras;
           if (players) {
-            console.log("Setting players:", players);
+            // console.log("Setting players:", players);
             state.players = players;
           }
           if (gameState) {
-            console.log("Setting state:", gameState);
+            // console.log("Setting state:", gameState);
             state.state = gameState;
           }
           if (cards) {
-            console.log("Setting cards:", cards);
+            // console.log("Setting cards:", cards);
             state.cards = cards;
           }
-          if (text) {
-            console.log("Setting text:", text);
-            state.text = text;
-          }
           if (extras) {
-            console.log("Extras: ", extras);
+            console.log("Extras: ", JSON.stringify(extras));
             let name = extras.name;
+            let text = extras.text;
+
             if (name) {
-              console.log("Setting name:", name);
               state.name = name;
             }
+            if (text) {
+              state.text = text;
+            }
           }
 
         }

server/game/lobby.py

@@ -115,21 +115,30 @@ class LobbyManager(ClientManager):
 
     async def send(self, to: Player, message: MessageToPlayer, extras=None):
         sid = self.metadata[to.name].sid
+        game = self.game_with(to)
 
         data = to.hand.json()  # Start with "cards": []
-        data = json.loads(data) # JSONEncode and decode, starting with dict would miss `json()` encoders
+        data = json.loads(data)  # JSONEncode and decode, starting with dict would miss `json()` encoders
         data["state"] = str(message.name)
-        data["players"] = [{"name": p.name, "nbCards": len(p.hand)} for p in self.players]
+        data["players"] = [
+            {
+                "name": p.name,
+                "nbCards": len(p.hand),
+                "isReady": self.metadata[p.name].ready,
+                "isPlaying": bool(game and p.name in [p.name for p in game.players]),
+            }
+            for p in self.players]
 
         if extras:
             data["extras"] = extras
 
-        print(f"MSGOUT|{sid} ({to.name}), {data}")
+        print(f"MSGOUT|{sid} ({to.name}), {data}...", end='')
         await self.sio.emit('messageChannel', json.dumps(data), room=sid)
+        print(f"sent!")
 
     async def handle_message(self, sid, data):
         message = None
-        extras = {"players": [p.name for p in self.players]}
+        extras = {}
         sender = self.which_player(sid)
         if not sender:
             print(f"ERROR: Unrecognized sender {sid}")
@@ -152,15 +161,14 @@ class LobbyManager(ClientManager):
                     print(f"Lobby|Player {sender.name} ready")
 
                     gamers = self.wants_to_play(player=sender)
-                    if gamers:
+                    if len(gamers) > 1:
                         print(f"Game ready! gamers={gamers}")
                         message = MessageToPlayer.NewGame
                         extras["playersPlaying"] = [p.name for p in gamers]
-
                     else:
                         print(f"Still alone ready!")
                         message = MessageToPlayer.ReadyToStart
-                        extras["playersReady"] = [p.name for p in self.players_ready]
+                        extras["text"] = "You're alone, but hold on"
 
                 elif option == MessageFromPlayer.Bet:
                     # FIXME vraie annonce, pas juste carre d'as lol
@@ -197,24 +205,17 @@ class LobbyManager(ClientManager):
                 sender = self.lobby[name]
         return sender
 
-    def game_with(self, player: Player) -> Game:
-        return [g for g in self.games if player in g.players][0]
+    def game_with(self, player: Player) -> Optional[Game]:
+        matching = [g for g in self.games if player in g.players]
+        return matching[0] if matching else None
 
     async def send_waiting_for(self, player: Player):
         game = self.game_with(player)
         # FIXME: Seems to block here, game doesn't move past Asking for...
-        # BET
-        # MSGIN| c38442e3785f4c2eb13e95368bfaa151 (Sumatran Elephant): BET.
-        # Lobby| Player Sumatran Elephant just announced bet=Ace of ♥|Ace of ♣|Ace of ♦|Ace of ♠.
-        # LOBBY: Message handled.
-        # received event "message" from c38442e3785f4c2eb13e95368bfaa151 [/]
-        # INFO:     received event "message" from c38442e3785f4c2eb13e95368bfaa151 [/]
-        # INFO:     127.0.0.1:51452 - "POST /socket.io/?EIO=3&transport=polling&t=N6J1ZS7&sid=3c5e8962c4db465aaf2fd916bea2acc9 HTTP/1.1" 200 OK
-        # [WS] Message  MENTEUR
-        # MSGIN| 3c5e8962c4db465aaf2fd916bea2acc9 (Chihuahua): MENTEUR.
-        # LOBBY: Message handled.
-        # received
-        extras = {"bet": game.current_bet.json()}
+
+        bet = game.current_bet
+        extras = {"bet": bet.json() if bet else None}
+        print(f"Announcing player {player.name} that we await their reply to {bet}...")
         await self.send(player, MessageToPlayer.YourTurn, extras)
 
         extras["waitingFor"] = player.name

server/ws.py

@@ -29,7 +29,7 @@ class ClientPlayer(Player):
             print("While, send_waiting_for")
             await lobby.send_waiting_for(self)
             print(f"Still waiting for {self.name}'s announce...")
-            sleep(2)
+            sleep(5)
 
         print(f"Client announced: {metadata.last_announce.bet}!")
         return metadata.last_announce