Vuefy info/helpme buttons

javascripts/components/game-ui.js

@@ -2,16 +2,16 @@ import "./old-ui/old-ui.js";
 import "./new-ui/new-ui.js";
 import "./save-timer.js";
 import "./speedrun-status.js";
-import "./help-me.js";
 import "./tt-shop.js";
 import "./new-ui/sidebar.js";
 import "./background-animations";
-import "./info-button";
 import TabComponents from "@/components/tabs";
 import PopupModal from "@/components/modals/PopupModal";
 import FadeToBlack from "@/components/tabs/celestial-pelle/FadeToBlack";
 import CreditsContainer from "@/components/tabs/celestial-pelle/CreditsContainer";
 import NewGame from "@/components/tabs/celestial-pelle/NewGame";
+import InfoButton from "@/components/InfoButton";
+import HelpMe from "@/components/HelpMe";
 
 Vue.component("game-ui", {
   components: {
@@ -19,7 +19,9 @@ Vue.component("game-ui", {
     PopupModal,
     FadeToBlack,
     CreditsContainer,
-    NewGame
+    NewGame,
+    InfoButton,
+    HelpMe
   },
   computed: {
     view() {
@@ -53,8 +55,8 @@ Vue.component("game-ui", {
         <PopupModal v-if="view.modal.current" :modal="view.modal.current" />
         <modal-progress-bar v-if="view.modal.progressBar" />
         <link v-if="view.theme !== 'Normal'" type="text/css" rel="stylesheet" :href="themeCss">
-        <help-me />
-        <info-button />
+        <HelpMe />
+        <InfoButton />
         <background-animations />
       </div>
       <div id="notification-container" class="l-notification-container" />

javascripts/components/help-me.js

@@ -1,3 +0,0 @@
-Vue.component("help-me", {
-  template: `<div onclick="Modal.h2p.show()" class="o-tab-btn l-help-me">?</div>`
-});

javascripts/components/info-button.js

@@ -1,3 +0,0 @@
-Vue.component("info-button", {
-  template: `<div onclick="Modal.information.show()" class="o-tab-btn l-information l-help-me">i</div>`
-});

src/components/HelpMe.vue

@@ -0,0 +1,23 @@
+<script>
+export default {
+  name: "HelpMe",
+  methods: {
+    showModal() {
+      Modal.h2p.show();
+    }
+  }
+};
+</script>
+
+<template>
+  <div
+    class="o-tab-btn l-help-me"
+    @click="showModal"
+  >
+    ?
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/components/InfoButton.vue

@@ -0,0 +1,23 @@
+<script>
+export default {
+  name: "InfoButton",
+  methods: {
+    showModal() {
+      Modal.information.show();
+    }
+  }
+};
+</script>
+
+<template>
+  <div
+    class="o-tab-btn l-information l-help-me"
+    @click="showModal"
+  >
+    i
+  </div>
+</template>
+
+<style scoped>
+
+</style>