Merge pull request #189 from ConorMurphy21/155-add-navigation-buttons…

…-to-about-and-how-to-play

155 add navigation buttons to about and how to play

client/src/locales/en.ts

@@ -15,6 +15,7 @@ export default {
   roomNamePlaceholder: 'room name',
   joinGame: 'Join Game',
   createGame: 'Create Game',
+  homeButton: 'Home',
   coffeeLink: 'Buy me a tea',
   coffeeAlt: 'Buy me a coffee',
 

client/src/views/About.vue

@@ -21,5 +21,24 @@
         <a v-t="'about.coffee'" href="https://www.buymeacoffee.com/ConorMurphy/" />
       </template>
     </i18n-t>
+    <router-link to="/" @click="onClick">
+      <button v-t="'homeButton'" type="button" class="btn btn-burgundy mt-3 w-25" />
+    </router-link>
   </div>
 </template>
+
+<script lang="ts">
+import ClickMp3 from '@/assets/audio/click1.mp3';
+import { AudioWrap } from '@/mixins/audiowrap';
+import { defineComponent } from 'vue';
+
+const click = new AudioWrap(ClickMp3);
+
+export default defineComponent({
+  methods: {
+    onClick() {
+      click.play();
+    }
+  }
+});
+</script>

client/src/views/HowToPlay.vue

@@ -22,6 +22,9 @@
           :alt="child.alt" />
       </div>
     </div>
+    <router-link to="/" @click="onClick()">
+      <button v-t="'homeButton'" type="button" class="btn btn-burgundy mt-5 w-25" />
+    </router-link>
   </div>
 </template>
 
@@ -31,7 +34,11 @@ import Strike from '@/assets/images/howToPlay/strike.png';
 import Sike from '@/assets/images/howToPlay/sike.png';
 import Choice from '@/assets/images/howToPlay/choice.png';
 import Matching from '@/assets/images/howToPlay/matching.png';
+import ClickMp3 from '@/assets/audio/click1.mp3';
+import { AudioWrap } from '@/mixins/audiowrap';
 import { defineComponent } from 'vue';
+const click = new AudioWrap(ClickMp3);
+
 export default defineComponent({
   data() {
     return {
@@ -43,6 +50,11 @@ export default defineComponent({
         matching: Matching
       }
     };
+  },
+  methods: {
+    onClick() {
+      click.play();
+    }
   }
 });
 </script>