Vuefy and cleanup FooterLinks

javascripts/components/common/footer-links.js

@@ -1,17 +0,0 @@
-Vue.component("footer-links", {
-  data() {
-    return {
-      isVisible: true
-    };
-  },
-  created() {
-    this.on$(GAME_EVENT.TAB_CHANGED, () => this.isVisible = !Tab.eternity.studies.isOpen);
-  },
-  template: `
-    <div v-if="isVisible" class="o-footer">
-      <a href="about.html" target="_newtab" onclick="SecretAchievement(33).unlock()">Donate</a> |
-      <a href="changelog.html" target="_newtab">Changelog</a> |
-      <a href="https://discord.gg/ST9NaXa" target="_newtab">Discord</a> |
-      <a href="https://www.reddit.com/r/AntimatterDimensions/" target="_newtab">Subreddit</a>
-    </div>`
-});

javascripts/components/old-ui/old-ui.js

@@ -1,14 +1,15 @@
 import "../common/news-ticker.js";
-import "../common/footer-links.js";
 import "./old-ui-subtab-bar.js";
 import "./old-ui-tab-bar.js";
 import "./header/game-header.js";
+import FooterLinks from "@/components/FooterLinks";
 
 Vue.component("old-ui", {
   components: {
     "big-crunch-button": {
       template: `<button class="o-tab-btn o-big-crunch-btn" onclick="bigCrunchResetRequest()">Big Crunch</button>`
-    }
+    },
+    FooterLinks
   },
   data() {
     return {
@@ -52,7 +53,7 @@ Vue.component("old-ui", {
         <div class="l-old-ui-page l-old-ui__page">
           <slot />
         </div>
-        <footer-links class="l-old-ui__footer" />
+        <FooterLinks class="l-old-ui__footer" />
       </template>
     </div>`
 });

public/stylesheets/styles.css

@@ -5670,13 +5670,6 @@ kbd {
 
 /*#endregion o-notification*/
 
-.o-footer {
-  margin-left: auto;
-  margin-right: auto;
-  text-align: center;
-  font-size: 1.5rem;
-}
-
 /*#region component*/
 /*#endregion component*/
 

src/components/FooterLink.vue

@@ -0,0 +1,5 @@
+<template>
+  <a target="_newtab">
+    <slot />
+  </a>
+</template>

src/components/FooterLinks.vue

@@ -0,0 +1,53 @@
+<script>
+import FooterLink from "@/components/FooterLink";
+
+export default {
+  components: {
+    FooterLink
+  },
+  computed: {
+    isVisible() {
+      return this.$viewModel.subtab !== Tab.eternity.studies.key;
+    }
+  }
+};
+</script>
+
+<template>
+  <div
+    v-if="isVisible"
+    class="o-footer"
+  >
+    <FooterLink href="https://example.com">
+      Example
+    </FooterLink>
+    |
+    <FooterLink
+      href="about.html"
+      onclick="SecretAchievement(33).unlock()"
+    >
+      Donate
+    </FooterLink>
+    |
+    <FooterLink href="changelog.html">
+      Changelog
+    </FooterLink>
+    |
+    <FooterLink href="https://discord.gg/ST9NaXa">
+      Discord
+    </FooterLink>
+    |
+    <FooterLink href="https://www.reddit.com/r/AntimatterDimensions/">
+      Subreddit
+    </FooterLink>
+  </div>
+</template>
+
+<style scoped>
+.o-footer {
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center;
+  font-size: 1.5rem;
+}
+</style>