From 6e8d3d763e3db718ae5cf38e80df081f9731914b Mon Sep 17 00:00:00 2001
From: Paul-Louis NECH <pln@algolia.com>
Date: Sun, 3 May 2020 16:40:58 +0200
Subject: [PATCH] feat(client): Display messages, player status, french copy
---
client/public/img/unknown.svg | 1 +
client/src/App.vue | 6 +++---
client/src/Sockets.vue | 63 +++++++++++++++++++++++++++++++++++++--------------------------
client/src/components/Player.vue | 6 ++++--
4 files changed, 45 insertions(+), 31 deletions(-)
create mode 100644 client/public/img/unknown.svg
diff --git a/client/public/img/unknown.svg b/client/public/img/unknown.svg
new file mode 100644
index 0000000..73bb06c
--- /dev/null
+++ b/client/public/img/unknown.svg
@@ -0,0 +1 @@
+<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
diff --git a/client/src/App.vue b/client/src/App.vue
index 348c024..6a4a3da 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -1,7 +1,7 @@
<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>
diff --git a/client/src/Sockets.vue b/client/src/Sockets.vue
index a5ac6dc..785ebe3 100644
--- a/client/src/Sockets.vue
+++ b/client/src/Sockets.vue
@@ -1,34 +1,45 @@
<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>
diff --git a/client/src/components/Player.vue b/client/src/components/Player.vue
index f774382..9cfe2ee 100644
--- a/client/src/components/Player.vue
+++ b/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() {
--
libgit2 0.27.0