Convert components to use composition api

Done to ease the move to Vue 3. Also started changing the style of engine
scripts, including eliminating a number of private fields, due to Vue's proxies
not shadowing private fields, resulting in incompatible types.

package.json

@@ -16,18 +16,18 @@
   "main": "Main.js",
   "dependencies": {
     "uuid": "^9.0.0",
-    "vue": "^2.6.12",
-    "vue-class-component": "^7.2.6",
+    "vue": "^2.7.0",
     "vue-property-decorator": "^9.1.2",
-    "vue-router": "^3.5.1"
+    "vue-router": "^3.5.1",
+    "vue-template-compiler": "^2.7.16"
   },
   "devDependencies": {
     "@jest/globals": "^29.7.0",
     "@types/jest": "^29.5.1",
     "@types/uuid": "^9.0.1",
     "@typescript-eslint/eslint-plugin": "^5.59.5",
     "@typescript-eslint/parser": "^5.59.5",
-    "@vitejs/plugin-vue": "^1.6.1",
+    "@vitejs/plugin-vue2": "^2.3.1",
     "@vue/eslint-config-prettier": "^7.1.0",
     "@vue/eslint-config-typescript": "^11.0.3",
     "@vue/test-utils": "^1.2.0",
@@ -42,8 +42,7 @@
     "start-server-and-test": "^2.0.3",
     "ts-jest": "^29.1.1",
     "typescript": "^5.0.4",
-    "vite": "^2.5.4",
-    "vite-plugin-vue2": "1.9.0"
+    "vite": "^3.2.8"
   },
   "bugs": {
     "url": "https://github.com/mhydock/dig/issues"

src/components/EconList.vue

@@ -15,23 +15,20 @@
   </div>
 </template>
 
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
+<script setup lang="ts">
+import { ref } from "vue";
 
 import { Game } from "../scripts/Core/Game";
 import TechList from "./TechList.vue";
 
-@Component({
-  components: { TechList },
-})
-export default class EconList extends Vue {
-  @Prop() game!: Game;
+defineProps<{
+  game: Game;
+}>();
 
-  private tab = "tech";
+const tab = ref("tech");
 
-  selectTab(tab: string) {
-    this.tab = tab;
-  }
+function selectTab(newTab: string) {
+  tab.value = newTab;
 }
 </script>
 

src/components/Inventory.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <template>
   <div id="inventory" class="list-panel">
     <ul class="tabs">
@@ -33,31 +34,23 @@
   </div>
 </template>
 
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
+<script setup lang="ts">
+import { ref } from "vue";
 
 import { Game } from "../scripts/Core/Game";
 import EconList from "./EconList.vue";
 import ItemsList from "./ItemsList.vue";
 import MessageLog from "./MessageLog.vue";
 import ToolsList from "./ToolsList.vue";
 
-@Component({
-  components: {
-    ToolsList,
-    ItemsList,
-    EconList,
-    MessageLog,
-  },
-})
-export default class Inventory extends Vue {
-  @Prop() game!: Game;
+defineProps<{
+  game: Game;
+}>();
 
-  private tab = "tools";
+const tab = ref("tools");
 
-  selectTab(tab: string) {
-    this.tab = tab;
-  }
+function selectTab(newTab: string) {
+  tab.value = newTab;
 }
 </script>
 

src/components/ItemBox.vue

@@ -2,8 +2,8 @@
   <div :title="item.Description" class="list-item">
     <h4>{{ item.Name }}</h4>
     <div class="list-item-body">
-      <label class="quantity" :title="AmountTooltip"
-        >x {{ AmountWithSuffix }}</label
+      <label class="quantity" :title="amountTooltip"
+        >x {{ amountWithSuffix }}</label
       >
       <label>$ {{ item.Value }} per</label>
       <span class="gap"></span>
@@ -20,47 +20,41 @@
   </div>
 </template>
 
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
+<script setup lang="ts">
+import { computed } from "vue";
 
 import { withSuffix } from "../scripts/Core/Common";
 import { Game } from "../scripts/Core/Game";
 import { Item } from "../scripts/Core/Item";
 
-@Component
-export default class ItemBox extends Vue {
-  @Prop() game!: Game;
-  @Prop() item!: Item;
+const props = defineProps<{
+  game: Game;
+  item: Item;
+}>();
 
-  constructor() {
-    super();
-  }
+const { game, item } = props;
 
-  get AmountWithSuffix() {
-    return withSuffix(this.item.Amount);
-  }
+const amountWithSuffix = computed(() => withSuffix(item.Amount));
+const amountTooltip = computed(() =>
+  item.Amount > 1000 ? item.Amount.toString() : ""
+);
 
-  get AmountTooltip() {
-    return this.item.Amount > 1000 ? this.item.Amount : "";
-  }
-
-  private clickSellButton() {
-    const sale = this.item.trySell();
-    if (sale >= 0) this.game.addMoney(sale);
-    else alert("You cannot sell that item");
-  }
+function clickSellButton() {
+  const sale = item.trySell();
+  if (sale >= 0) game.addMoney(sale);
+  else alert("You cannot sell that item");
+}
 
-  private clickSell100Button() {
-    const sale = this.item.trySellMany(100);
-    if (sale >= 0) this.game.addMoney(sale);
-    else alert("You cannot sell 100 of that item");
-  }
+function clickSell100Button() {
+  const sale = item.trySellMany(100);
+  if (sale >= 0) game.addMoney(sale);
+  else alert("You cannot sell 100 of that item");
+}
 
-  private clickSellAllButton() {
-    const sale = this.item.trySellAll();
-    if (sale >= 0) this.game.addMoney(sale);
-    else alert("You cannot sell those items");
-  }
+function clickSellAllButton() {
+  const sale = item.trySellAll();
+  if (sale >= 0) game.addMoney(sale);
+  else alert("You cannot sell those items");
 }
 </script>
 

src/components/ItemsList.vue

@@ -11,18 +11,13 @@
   </div>
 </template>
 
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
-
+<script setup lang="ts">
 import { Game } from "../scripts/Core/Game";
 import ItemBox from "./ItemBox.vue";
 
-@Component({
-  components: { ItemBox },
-})
-export default class ItemsList extends Vue {
-  @Prop() game!: Game;
-}
+defineProps<{
+  game: Game;
+}>();
 </script>
 
 <style lang="scss"></style>

src/components/MessageLog.vue

@@ -2,48 +2,46 @@
   <div class="log">
     <div class="header">
       <a @click="toggleCollapse()">Message Log</a>
-      <span class="icon" :class="{open: !collapsed}"></span>
+      <span class="icon" :class="{ open: !collapsed }"></span>
       <span class="gap"></span>
       <button @click="game.clearMessages()">Clear Log</button>
     </div>
-    <div class="body" :class="{collapsed}" ref="messages">
+    <div class="body" :class="{ collapsed }" ref="messages">
       <div v-for="(message, i) of game.Messages" :key="i">
         {{ message }}
       </div>
     </div>
   </div>
 </template>
 
-<script lang="ts">
-import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+<script setup lang="ts">
+import { nextTick, Ref, ref, watch } from "vue";
 
+import { debug } from "../scripts/Core/Common";
 import { Game } from "../scripts/Core/Game";
-import { debug } from "@/scripts/Core/Common";
 
-@Component({})
-export default class MessageLog extends Vue {
-  @Prop() game!: Game;
-  collapsed = false;
+const props = defineProps<{
+  game: Game;
+}>();
 
-  $refs!: {
-    messages: HTMLDivElement;
-  };
+const { game } = props;
 
-  toggleCollapse() {
-    this.collapsed = !this.collapsed;
-    debug("is collapsed", this.collapsed);
-  }
+const collapsed = ref(false);
+const messages: Ref<HTMLDivElement | null> = ref(null);
 
-  @Watch("game.Messages")
-  private scrollToBottom() {
-    this.$nextTick(() =>
-      this.$refs.messages.scrollTo({
-        top: this.$refs.messages.scrollHeight,
-        behavior: "smooth",
-      })
-    );
-  }
+function toggleCollapse() {
+  collapsed.value = !collapsed.value;
+  debug("is collapsed", collapsed);
 }
+
+watch(game.Messages, () => {
+  nextTick(() =>
+    messages?.value?.scrollTo({
+      top: messages?.value?.scrollHeight,
+      behavior: "smooth",
+    })
+  );
+});
 </script>
 <style lang="scss">
 .log {
@@ -77,7 +75,7 @@ export default class MessageLog extends Vue {
   height: 20vh;
   max-height: 20vh;
 
-  transition: max-height ease .2s;
+  transition: max-height ease 0.2s;
   &.collapsed {
     max-height: 0;
     overflow: hidden;
@@ -102,7 +100,7 @@ export default class MessageLog extends Vue {
     transform: rotate(90deg);
     transform-origin: 50% 50%;
 
-    transition: transform ease .2s;
+    transition: transform ease 0.2s;
   }
 }
 </style>

src/components/TechBox.vue

@@ -1,36 +1,35 @@
 <template>
   <div class="list-item">
-    <h3>{{ tech.Name }}</h3>
+    <h3>{{ tech.name }}</h3>
     <div class="list-item-body">
-      <label class="quantity">Level: {{ tech.Level }}</label>
-      <label>Next: $ {{ tech.ResearchCost }}</label>
+      <label class="quantity">Level: {{ tech.level }}</label>
+      <label>Next: $ {{ tech.researchCost }}</label>
       <span class="gap"></span>
       <button
         @click="clickResearchButton"
-        :disabled="tech.ResearchCost > game.Money"
+        :disabled="tech.researchCost > game.Money"
       >
         Research
       </button>
     </div>
   </div>
 </template>
 
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
-
+<script setup lang="ts">
 import { Game } from "../scripts/Core/Game";
 import { Technology } from "../scripts/Core/Technology";
 
-@Component
-export default class TechBox extends Vue {
-  @Prop() game!: Game;
-  @Prop() tech!: Technology;
+const props = defineProps<{
+  game: Game;
+  tech: Technology;
+}>();
+
+const { game, tech } = props;
 
-  private clickResearchButton() {
-    const cost = this.tech.tryResearch(this.game.Money);
-    if (cost >= 0) this.game.subMoney(cost);
-    else alert("You do not have enough money to research " + this.tech.Name);
-  }
+function clickResearchButton() {
+  const cost = tech.tryResearch(game.Money);
+  if (cost >= 0) game.subMoney(cost);
+  else alert("You do not have enough money to research " + tech.name);
 }
 </script>
 

src/components/TechList.vue

@@ -1,28 +1,23 @@
 <template>
   <div id="techList">
-    <template v-for="(tech, key) of game.TechnologyTree.Technologies">
+    <template v-for="(tech, key) of game.TechnologyTree.technologies">
       <TechBox
         :game="game"
         :tech="tech"
         :key="key"
-        v-if="tech.IsVisible"
+        v-if="tech.isVisible"
       ></TechBox>
     </template>
   </div>
 </template>
 
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
-
+<script setup lang="ts">
 import { Game } from "../scripts/Core/Game";
 import TechBox from "./TechBox.vue";
 
-@Component({
-  components: { TechBox },
-})
-export default class ToolsList extends Vue {
-  @Prop() game!: Game;
-}
+defineProps<{
+  game: Game;
+}>();
 </script>
 
 <style lang="scss"></style>