style(client): Cols UI

client/src/App.vue

@@ -26,7 +26,11 @@
         </div>
       </b-col>
     </b-row>
-    <div id="game">
+    <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>
@@ -35,8 +39,8 @@
           <option value="MENTEUR">Menteur !</option>
         </select>
         <button v-on:click="sendMessage(message)">Envoyer</button>
-      <Hand :cards="currentCards()" />
-    </div>
+      </b-col>
+    </b-row>
   </b-container>
 </template>
 

client/src/Sockets.vue

@@ -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-row id="sockets-messages">
-        <b-card-group deck>
       <b-col
-            v-for="m in socketMessages.slice(-8)" :key="JSON.stringify(m)"
-          >
+        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>