style(client): Cols UI

client/src/App.vue

@@ -12,10 +12,10 @@
     <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"
-            />
+        <Player
+          v-for="player in gamers" v-bind:key="player.name"
+          :name="player.name" :nb-cards="player.nbCards" :is-playing="player.isPlaying"
+        />
       </b-col>
       <b-col id="players-online">
         <p>{{ players.length }} en ligne</p>
@@ -26,17 +26,21 @@
         </div>
       </b-col>
     </b-row>
-    <div id="game">
-      <label for="messages"> Choisis un message :</label>
-      <select v-model="message" name="message" id="messages">
-        <option value="WAITING">J'attends</option>
-        <option value="READY">Prêt à jouer !</option>
-        <option value="BET">Pari plus haut</option>
-        <option value="MENTEUR">Menteur !</option>
-      </select>
-      <button v-on:click="sendMessage(message)">Envoyer</button>
-      <Hand :cards="currentCards()" />
-    </div>
+    <b-row id="game">
+      <b-col>
+        <Hand :cards="currentCards()" />
+      </b-col>
+      <b-col>
+        <label for="messages"> Choisis un message :</label>
+        <select v-model="message" name="message" id="messages">
+          <option value="WAITING">J'attends</option>
+          <option value="READY">Prêt à jouer !</option>
+          <option value="BET">Pari plus haut</option>
+          <option value="MENTEUR">Menteur !</option>
+        </select>
+        <button v-on:click="sendMessage(message)">Envoyer</button>
+      </b-col>
+    </b-row>
   </b-container>
 </template>
 

client/src/Sockets.vue

 <template>
   <div>
-    <b-row id="sockets-buttons"  class="m-3">
+    <b-row id="sockets-buttons" class="m-3">
       <b-col>
         <b-button-group class="mt-lg-3">
           <b-button @click="pingServer()" variant="warning" size="sm">Ping Server</b-button>
@@ -14,28 +14,25 @@
         <p v-if="isConnected">Connecté au serveur</p>
         <p v-if="!isConnected">Déconnecté</p>
       </b-col>
+    </b-row>
+    <b-row id="sockets-messages">
       <b-col>
         <p>
           <b-icon-inbox-fill />
-          Messages du serveur: <b v-if="socketMessages.length === 0">Aucun :'(</b>
+          Messages du serveur:
         </p>
+        <b-card class="text-center" v-if="socketMessages.length === 0">
+          <b-card-text>Pas de message :'(</b-card-text>
+        </b-card>
+      </b-col>
+      <b-col
+        v-for="m in socketMessages.slice(-8)" :key="JSON.stringify(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-col>
-      <b-row id="sockets-messages">
-        <b-card-group deck>
-          <b-col
-            v-for="m in socketMessages.slice(-8)" :key="JSON.stringify(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>
     </b-row>
   </div>