Merge branch 'dev' into chatUnitTest

client/src/App.vue

@@ -8,28 +8,45 @@
           </v-btn>
           <v-spacer></v-spacer>
           <v-btn text :to="redirect()" >
-            <div>LastGame</div>
-          </v-btn>
-
-          <v-btn text :to="'/help'" >
-            <div>Help</div>
+            <div>Game</div>
           </v-btn>
       </v-app-bar>
 
       <router-view @sendGameID="getGameID"/>
-
+      <v-snackbar
+        v-model="snackbar"
+        :color="color"
+        :timeout='0'>
+        {{snackbarText}}
+
+        <v-btn text @click="snackbar=false">
+          Close
+        </v-btn>
+      </v-snackbar>
     </v-content>
   </v-app>
 </template>
 
 <script>
+import bus from "./helpers/bus"
 export default {
   name: "App",
  
   components: {},
   data: () => ({
+    snackbar: false,
+    snackbarText: "",
+    color: "info",
     gameID: null,
   }),
+  mounted() {
+    bus.$on('updateSnack', (message, color) => {
+      color = color || "info";
+      this.color = color;
+      this.snackbarText=message;
+      this.snackbar=true;
+    }); 
+  },
   methods: {
     getGameID(value) {
       this.gameID = value;

client/src/components/Card.vue

@@ -1,11 +1,15 @@
 <template>
-  <div>
-    <div v-if="!isNaN(number)" :class="card_classes">
+  <div :tabindex="tabidx" :class="card_classes">
+
+    <!-- Numeric cards -->
+    <template v-if="!isNaN(number)">
       <span class="inner">
         <span class="mark">{{ number }}</span>
       </span>
-    </div>
-    <div v-else-if="number === 'S'" :class="card_classes">
+    </template>
+
+    <!-- Flow Control Cards -->
+    <template v-else-if="number === 'S'">
       <span class="inner">
         <span class="mark">
           <img v-if="color === 'green'" class="s-inner" src="@/assets/card_symbols/s-green.svg">
@@ -14,8 +18,21 @@
           <img v-else-if="color === 'blue'" class="s-inner" src="@/assets/card_symbols/s-blue.svg">
         </span>
       </span>
-    </div>
-    <div v-else-if="number === 'D2'" :class="card_classes">
+    </template>
+
+    <template v-else-if="number === 'R'">
+      <span class="inner">
+        <span class="mark">
+          <img v-if="color === 'green'" class="r-inner" src="@/assets/card_symbols/r-green.svg">
+          <img v-else-if="color === 'yellow'" class="r-inner" src="@/assets/card_symbols/r-yellow.svg">
+          <img v-else-if="color === 'red'" class="r-inner" src="@/assets/card_symbols/r-red.svg">
+          <img v-else-if="color === 'blue'" class="r-inner" src="@/assets/card_symbols/r-blue.svg">
+        </span>
+      </span>
+    </template>
+
+    <!-- Drawing Cards -->
+    <template v-else-if="number === 'D2'">
       <span class="inner">
         <span class="mark">
           <img v-if="color === 'green'" class="d2-inner" src="@/assets/card_symbols/d2-green.svg">
@@ -24,42 +41,39 @@
           <img v-else-if="color === 'blue'" class="d2-inner" src="@/assets/card_symbols/d2-blue.svg">
         </span>
       </span>
-    </div>
-    <div v-else-if="number === 'W4'" :class="card_classes">
+    </template>
+
+    <!-- Wildcards -->
+    <template v-else-if="number === 'W4'">
       <span class="inner">
         <span class="mark">
           <img class="w4-inner" src="@/assets/card_symbols/d4.svg">
         </span>
       </span>
-    </div>
-    <div v-else-if="number === 'W'" :class="card_classes">
+    </template>
+
+    <template v-else-if="number === 'W'">
       <span class="inner">
         <span class="mark">
           <img class="w-inner" src="@/assets/card_symbols/w.svg">
         </span>
       </span>
-    </div>
-    <div v-else-if="number === 'R'" :class="card_classes">
-      <span class="inner">
-        <span class="mark">
-          <img v-if="color === 'green'" class="r-inner" src="@/assets/card_symbols/r-green.svg">
-          <img v-else-if="color === 'yellow'" class="r-inner" src="@/assets/card_symbols/r-yellow.svg">
-          <img v-else-if="color === 'red'" class="r-inner" src="@/assets/card_symbols/r-red.svg">
-          <img v-else-if="color === 'blue'" class="r-inner" src="@/assets/card_symbols/r-blue.svg">
-        </span>
-      </span>
-    </div>
-    <div v-else :class="card_classes">
+    </template>
+
+    <!-- Errors -->
+    <template v-else>
       <span class="inner">
         <span class="mark">E{{number}}</span>
       </span>
-    </div>
+    </template>
+
+    <!-- Wildcard dialogs -->
     <v-dialog
       v-if="number === 'W' || number === 'W4'"
       v-model="showColorDialog"
       max-width="500px"
     >
-      <v-card >
+      <v-card>
         <v-card-title
           class="blue"
         >
@@ -115,6 +129,10 @@ export default {
       type: Boolean,
       required: false,
       default: false
+    },
+    tabidx: {
+      type: Number,
+      default: -1
     }
   },
   computed: {
@@ -196,6 +214,10 @@ export default {
   -webkit-transform: rotate(180deg);
 }
 
+.card:focus {
+  transform: scale(1.2);
+}
+
 .card.blue {
   color: #0063b3;
 }
@@ -376,4 +398,4 @@ export default {
 .card.black .inner {
   background: black;
 }
-</style>
+</style>

client/src/components/Chat.vue

@@ -187,6 +187,12 @@ export default {
     min-height: 80px;
 }
 
+.message:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
 .message-content {
   max-width: 255px;
   word-wrap: break-word;

client/src/helpers/bus.js

@@ -0,0 +1,3 @@
+import Vue from "vue"
+
+export default new Vue()

client/src/services/snackService.js

@@ -0,0 +1,7 @@
+import BaseService from "./baseService";
+
+export default {
+    async notifyAll(gameID, notification) {
+        return BaseService.post(`/api/snack/${gameID}/notify`, {notification: notification});
+    }
+}

client/src/services/unoService.js

@@ -13,6 +13,10 @@ export default {
     return BaseService.post(`/api/games`, {name: gameName, creator: creatorName});
   },
 
+  async deleteGame(gameId) {
+    return BaseService.get(`/api/games/${gameId}/delete`);
+  },
+
   async joinGame(gameId, playerName) {
     return BaseService.post(`/api/games/${gameId}/join`, { playerName: playerName });
   },