add play now button

Author: Tschuck

frontend/src/i18n/en.json

@@ -330,7 +330,8 @@
     "settings-desc": "Manage user name, class and view game history.",
     "tutorial": "Tutorial",
     "tutorial-desc": "Checkup the game mechanics with an tutorial.",
-    "versions": "Versions"
+    "versions": "Versions",
+    "play-now": "Play now"
   },
   "tutorial": {
     "1-battletris": {

frontend/src/lib/versions.ts

@@ -93,14 +93,16 @@ const versions: Record<string, VersionInterface> = {
     title: 'Custom Controls & Hold',
   },
   '1.4.1': {
-    bugs: [],
-    classes: [],
-    features: [
+    bugs: [
       'disable controls in initial game counter loop',
       'load last session in laboratory',
       'broken game state',
     ],
-    title: 'Bug Fix Round',
+    classes: [],
+    features: [
+      'play now button on start page',
+    ],
+    title: 'Feedback & Bug Fixes',
   },
 };
 

frontend/src/views/MultiPlayer.vue

@@ -35,7 +35,7 @@ import { getRequest } from '../lib/request';
     ViewWrapper,
     Loading,
   },
-  setup(props) {
+  setup() {
     const loading = ref(true);
     const rooms = ref<any[] | null>(null);
 

frontend/src/views/StartPage.vue

@@ -27,6 +27,12 @@
       </a>
     </div>
 
+    <div class="text-center">
+      <router-link class="button" :to="`/multi-player/${rooms[0].id}`">
+        {{ $t('start-page.play-now') }}
+      </router-link>
+    </div>
+
     <div class="mt-12 text-center cursor-pointer">
       <router-link to="/mode">
         <font-awesome-icon class="text-4xl bounce" icon="chevron-down" />
@@ -40,16 +46,32 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
 
+import { ref } from '@vue/composition-api';
 import BattletrisIcon from '../icons/battletris.vue';
 import Tooltip from '../components/Tooltip.vue';
 import QuickLinks from '../components/QuickLinks.vue';
+import { getRequest } from '../lib/request';
 
 @Component({
   components: {
     BattletrisIcon,
     QuickLinks,
     Tooltip,
   },
+  setup() {
+    const loading = ref(true);
+    const rooms = ref<any[] | null>(null);
+
+    (async () => {
+      rooms.value = await getRequest('rooms');
+      loading.value = false;
+    })();
+
+    return {
+      loading,
+      rooms,
+    };
+  },
 })
 export default class Tutorial extends Vue {}
 </script>