feat(client): Display messages, player status, french copy

client/public/img/unknown.svg

+<svg id="Layer_1_1_" enable-background="new 0 0 64 64" height="512" viewBox="0 0 64 64" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m17 62h30c3.309 0 6-2.691 6-6v-48c0-3.309-2.691-6-6-6h-30c-3.309 0-6 2.691-6 6v48c0 3.309 2.691 6 6 6zm-4-54c0-2.206 1.794-4 4-4h30c2.206 0 4 1.794 4 4v48c0 2.206-1.794 4-4 4h-30c-2.206 0-4-1.794-4-4z"/><path d="m19 58h26c2.206 0 4-1.794 4-4v-44c0-2.206-1.794-4-4-4h-26c-2.206 0-4 1.794-4 4v44c0 2.206 1.794 4 4 4zm-2-48c0-1.103.897-2 2-2h26c1.103 0 2 .897 2 2v44c0 1.103-.897 2-2 2h-26c-1.103 0-2-.897-2-2z"/><path d="m24.387 27h1.226c1.316 0 2.387-1.071 2.387-2.387 0-1.992 1.621-3.613 3.613-3.613h.887.001c.935 0 1.813.365 2.473 1.026.662.664 1.026 1.551 1.026 2.496 0 1.918-1.561 3.478-3.5 3.478h-.001c-1.201 0-2.331.468-3.18 1.317s-1.319 1.98-1.319 3.182v7.501c0 1.654 1.346 3 3 3s3-1.346 3-3v-6c4.411 0 8-3.589 8-8v-3c0-4.411-3.589-8-8-8h-4c-4.411 0-8 3.589-8 8v1.613c0 1.316 1.071 2.387 2.387 2.387zm-.387-4c0-3.309 2.691-6 6-6h4c3.309 0 6 2.691 6 6v3c0 3.309-2.691 6-6 6-1.103 0-2 .897-2 2v6c0 .551-.449 1-1 1s-1-.449-1-1v-7.501c0-.667.26-1.295.732-1.767s1.099-.732 1.789-.732c3.021 0 5.479-2.457 5.479-5.478 0-1.478-.572-2.866-1.609-3.907s-2.419-1.615-3.89-1.615c0 0 0 0-.001 0h-.888c-3.094 0-5.612 2.518-5.612 5.613 0 .213-.174.387-.387.387h-1.226c-.213 0-.387-.174-.387-.387z"/><path d="m32 45h-2c-1.103 0-2 .897-2 2v2c0 1.103.897 2 2 2h2c1.103 0 2-.897 2-2v-2c0-1.103-.897-2-2-2zm-2 4v-2h2l.001 2z"/></svg>
\ No newline at end of file

client/src/App.vue

 <template>
   <b-container id="app">
     <b-row id="header">
-      <b-col><h2>Salut {{ name }} !</h2>
+      <b-col><h3>Salut {{ name }} !</h3>
       </b-col>
     </b-row>
     <b-row id="sockets">
@@ -15,7 +15,7 @@
           <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>
@@ -27,7 +27,7 @@
       </b-col>
     </b-row>
     <div id="game">
-      <label for="messages"> Choose a message:</label>
+      <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>

client/src/Sockets.vue

 <template>
   <div>
-    <b-button-group class="mt-lg-3">
-      <b-button @click="pingServer()" variant="warning" size="sm">Ping Server</b-button>
-      <b-button @click="logOn()" variant="success" size="lg">LogOn</b-button>
-      <b-button @click="logOff()" size="lg">LogOff</b-button>
-    </b-button-group>
-    <p v-if="isConnected">We're connected to the server!</p>
-    <p v-if="!isConnected">We're not connected yet...</p>
-
-    <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-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>
+          <b-button @click="logOn()" variant="success" size="lg">LogOn</b-button>
+          <b-button @click="logOff()" size="lg">LogOff</b-button>
+        </b-button-group>
+      </b-col>
+    </b-row>
+    <b-row id="sockets-status">
+      <b-col>
+        <p v-if="isConnected">Connecté au serveur</p>
+        <p v-if="!isConnected">Déconnecté</p>
+      </b-col>
+      <b-col>
+        <p>
+          <b-icon-inbox-fill />
+          Messages du serveur: <b v-if="socketMessages.length === 0">Aucun :'(</b>
+        </p>
+      </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>
-        </b-col>
-      </b-card-group>
+            <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>
-    <ul id="messages">
-    </ul>
   </div>
+
+
 </template>
 
 <script>

client/src/components/Player.vue

@@ -3,6 +3,8 @@
     <b-badge :variant="variant()">
       <b-icon-person-square />
       {{ name }}
+      <b-icon-clock-history v-if="isReady === false" />
+      <b-icon-check-circle v-if="isReady === true" />
     </b-badge>
     <b-img class="icon-card" v-for="index in nbCards" :key="index" fluid src="/img/unknown.svg" />
   </div>
@@ -13,8 +15,8 @@ export default {
   props: {
     name: String,
     nbCards: Number,
-    isReady: Boolean,
-    isPlaying: Boolean
+    isReady: { type: Boolean, required: false },
+    isPlaying: { type: Boolean, required: false }
   },
   methods: {
     variant: function() {