Fix display names of games in client

Author: Zomis

games-vue-client/src/components/StartScreen.vue

@@ -9,7 +9,7 @@
     <v-col cols="12" md="6" lg="4" v-for="(users, gameType) in lobby" :key="gameType">
     <v-card class="games">
       <v-toolbar color="cyan" dark>
-        <v-toolbar-title>{{ gameType }}</v-toolbar-title>
+        <v-toolbar-title>{{ displayNames[gameType] }}</v-toolbar-title>
         <v-spacer></v-spacer>
 <!--        <v-btn rounded :disabled="waiting" @click="matchMake(gameType)">Play anyone</v-btn> -->
         <v-btn rounded :disabled="waiting" @click="inviteLink(gameType)">Invite with link</v-btn>
@@ -153,6 +153,13 @@ export default {
     Socket.send(`{ "type": "ListRequest" }`);
   },
   computed: {
+    displayNames() {
+      let games = {};
+      supportedGames.enabledGameKeys().forEach(gameType => {
+        games[gameType] = supportedGames.games[gameType].displayName ? supportedGames.games[gameType].displayName : gameType;
+      });
+      return games
+    },
     activeGames() {
       return this.$store.getters.activeGames;
     },

games-vue-client/src/components/games/common/GameHead.vue

@@ -1,11 +1,17 @@
 <template>
-  <h1>{{ gameInfo.gameType }} : {{ playerVs }}</h1>
+  <h1>{{ gameDisplayName }} : {{ playerVs }}</h1>
 </template>
 <script>
+import supportedGames from "@/supportedGames"
+
 export default {
   name: "GameHead",
   props: ["gameInfo"],
   computed: {
+    gameDisplayName() {
+      let game = supportedGames.games[this.gameInfo.gameType]
+      return game.displayName ? game.displayName : this.gameType.gameType
+    },
     playerVs: function() {
       if (typeof this.gameInfo.players !== "object") {
         return "local game";

games-vue-client/src/supportedGames.js

@@ -38,21 +38,25 @@ const supportedGames = {
         routeProps: defaultRouteProps
     },
     "DSL-Connect4": {
+        displayName: "Connect Four",
         dsl: true,
         component: DSLTTT,
         routeProps: defaultRouteProps
     },
     "DSL-Reversi": {
+        displayName: "Reversi",
         dsl: true,
         component: DSLTTT,
         routeProps: defaultRouteProps
     },
     "DSL-TTT3D": {
+        displayName: "3D Tic-Tac-Toe / Connect Four",
         dsl: true,
         component: TTT3D,
         routeProps: defaultRouteProps
     },
     "DSL-UTTT": {
+        displayName: "Tic-Tac-Toe Ultimate",
         dsl: true,
         component: UTTT,
         routeProps: defaultRouteProps
@@ -65,6 +69,7 @@ const supportedGames = {
         routeProps: defaultRouteProps
     },
     "DSL-TTT": {
+        displayName: "Tic-Tac-Toe",
         dsl: true,
         component: DSLTTT,
         routeProps: defaultRouteProps