Actually complete vuefication

javascripts/components/index.js

@@ -1 +0,0 @@
-import "./game-ui.js";

javascripts/core/app/ui.js

@@ -3,6 +3,7 @@ import { state } from "./ui.init.js";
 import VTooltip from "v-tooltip";
 import { useLongPress, useRepeatingClick } from "./longpress";
 import VueGtag from "vue-gtag";
+import GameUIComponent from "@/components/GameUI";
 
 Vue.mixin({
   computed: {
@@ -186,6 +187,9 @@ Vue.use(VueGtag, {
 export const ui = new Vue({
   el: "#ui",
   data: state,
+  components: {
+    GameUIComponent
+  },
   computed: {
     notation() {
       return Notations.find(this.notationName);
@@ -229,5 +233,5 @@ export const ui = new Vue({
       }
     },
   },
-  template: "<game-ui />"
+  template: "<GameUIComponent />"
 });

public/stylesheets/styles.css

@@ -407,15 +407,6 @@ button:focus {
   border: 0.1rem solid #3AACD6;
 }
 
-.ttshop-container {
-  padding: 0 0.5rem;
-  min-width: 60rem;
-  max-width: 80rem;
-  display: flex;
-  flex-direction: column;
-  transition: all 0.25s ease-out;
-}
-
 .ttshop-minimize-btn {
   display: flex;
   justify-content: center;

src/components/GameUI.vue

@@ -1,4 +1,4 @@
-import "./tt-shop.js";
+<script>
 import ClassicUi from "@/components/ui-modes/classic/ClassicUi";
 import ModernUi from "@/components/ui-modes/modern/ModernUi";
 import ModernSidebar from "@/components/ui-modes/modern/ModernSidebar";
@@ -14,7 +14,8 @@ import ModalProgressBar from "@/components/modals/ModalProgressBar";
 import HelpMe from "@/components/HelpMe";
 import TimeTheoremShop from "@/components/tabs/time-studies/tt-shop/TimeTheoremShop";
 
-Vue.component("game-ui", {
+export default {
+  name: "GameUIComponent",
   components: {
     ...TabComponents,
     ClassicUi,
@@ -49,30 +50,54 @@ Vue.component("game-ui", {
       return `stylesheets/theme-${this.view.theme}.css`;
     }
   },
-  template: `
+};
+</script>
+
+<template>
+  <div
+    v-if="view.initialized"
+    id="ui-container"
+    :class="containerClass"
+    style="display: flex; justify-content: center;"
+  >
     <div
-      v-if="view.initialized"
-      id="ui-container"
-      :class="containerClass"
-      style="display: flex; justify-content: center;"
+      id="ui"
+      class="c-game-ui"
     >
-      <div id="ui" class="c-game-ui">
-        <component :is="uiLayout">
-          <component :is="page" />
-        </component>
-        <PopupModal v-if="view.modal.current" :modal="view.modal.current" />
-        <ModalProgressBar v-if="view.modal.progressBar" />
-        <link v-if="view.theme !== 'Normal'" type="text/css" rel="stylesheet" :href="themeCss">
-        <HelpMe />
-        <BackgroundAnimations />
-      </div>
-      <div id="notification-container" class="l-notification-container" />
-      <TimeTheoremShop v-if="view.subtab === 'studies'" class="l-time-studies-tab__tt-shop" />
-      <ModernSidebar v-if="view.newUI" />
-      <SaveTimer />
-      <SpeedrunStatus />
-      <FadeToBlack />
-      <CreditsContainer />
-      <NewGame />
-    </div>`
-});
+      <component :is="uiLayout">
+        <component :is="page" />
+      </component>
+      <PopupModal
+        v-if="view.modal.current"
+        :modal="view.modal.current"
+      />
+      <ModalProgressBar v-if="view.modal.progressBar" />
+      <link
+        v-if="view.theme !== 'Normal'"
+        type="text/css"
+        rel="stylesheet"
+        :href="themeCss"
+      >
+      <HelpMe />
+      <BackgroundAnimations />
+    </div>
+    <div
+      id="notification-container"
+      class="l-notification-container"
+    />
+    <TimeTheoremShop
+      v-if="view.subtab === 'studies'"
+      class="l-time-studies-tab__tt-shop"
+    />
+    <ModernSidebar v-if="view.newUI" />
+    <SaveTimer />
+    <SpeedrunStatus />
+    <FadeToBlack />
+    <CreditsContainer />
+    <NewGame />
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/components/index.js

@@ -0,0 +1 @@
+import "./GameUI";

src/components/tabs/time-studies/tt-shop/TimeTheoremShop.vue

@@ -312,4 +312,13 @@ export default {
   padding-right: 1rem;
   min-width: 8rem;
 }
+
+.ttshop-container {
+  padding: 0 0.5rem;
+  min-width: 60rem;
+  max-width: 80rem;
+  display: flex;
+  flex-direction: column;
+  transition: all 0.25s ease-out;
+}
 </style>

src/merge-globals.js

@@ -17,8 +17,6 @@ function mergeIntoGlobal(object) {
 import * as Utils from "../javascripts/core/utils";
 mergeIntoGlobal(Utils);
 
-import "../javascripts/components";
-
 import * as GameDB from "../javascripts/core/secret-formula";
 mergeIntoGlobal(GameDB);