Finally have debug support in VS Code

.vscode/launch.json

@@ -4,31 +4,13 @@
     // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
     "version": "0.2.0",
     "configurations": [
-      {
-        "name": "vite",
-        "request": "launch",
-        "runtimeExecutable": "npx",
-        "runtimeArgs": [
-          "--no",
-          "vite",
-          "--port 5173"
-        ],
-        "type": "node",
-      },
       {
         "name": "browser",
         "type": "msedge",
-        "request": "attach",
+        "request": "launch",
         "url": "http://localhost:5173",
         "webRoot": "${workspaceFolder}",
-        "preLaunchTask": "start server",
-      }
-    ],
-    "compounds": [
-      {
-        "name": "Vite -> Browser",
-        "configurations": ["vite", "browser"],
-        "stopAll": true
+        "preLaunchTask": "start server",        
       }
     ]
 }

.vscode/tasks.json

@@ -10,11 +10,22 @@
     },
     {
       "label": "start server",
-      "type": "npm",
-      "script": "dev",
-      "problemMatcher": [],
-      "detail": "vite",
-      "isBackground": true
+      "type": "shell",
+      "command": "npx --no vite dev --port 5173",
+      "problemMatcher": {
+        "base": "$tsc-watch",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": "VITE",
+          "endsPattern": "Local: +http://localhost:(\\d+)/"
+        }
+      },
+      "isBackground": true,
+      "presentation": {
+        "reveal": "always",
+        "focus": false,
+        "panel": "new"
+      },
     }
   ]
 }

build.ps1

@@ -16,8 +16,6 @@ try {
     }
 
     LogCommand { npm run build }
-
-    LogCommand { npm run generate }
 }
 finally {
     Pop-Location

src/App.vue

@@ -1,30 +1,11 @@
 <script setup lang="ts">
-import HelloWorld from './components/HelloWorld.vue'
+import { ref } from 'vue';
+import TroughItem from './components/TroughItem.vue'
+import Trough from './types/Trough.ts'
+
+const trough = ref(new Trough({ name: "Trough 1" }));
 </script>
 
 <template>
-  <div>
-    <a href="https://vitejs.dev" target="_blank">
-      <img src="/vite.svg" class="logo" alt="Vite logo" />
-    </a>
-    <a href="https://vuejs.org/" target="_blank">
-      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
-    </a>
-  </div>
-  <HelloWorld msg="Vite + Vue" />
+  <TroughItem :trough="trough" />
 </template>
-
-<style scoped>
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.vue:hover {
-  filter: drop-shadow(0 0 2em #42b883aa);
-}
-</style>

src/components/TroughItem.vue

@@ -0,0 +1,24 @@
+<template>
+  <h1>{{ trough.name }}</h1>
+
+  <div class="card">
+    <button type="button" @click="doSomething">count is {{ trough.entries.length }}</button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Trough from '../types/Trough.ts'
+import data from '../types/arkData.ts'
+
+const props = defineProps<{ trough: Trough }>()
+
+function doSomething() {
+  props.trough.entries.push({
+    Species: data.species[0],
+    CheckedAge: 0.04,
+    CheckTime: new Date(Date.now()),
+    Count: 1,
+    CurrentAge: 0.30
+  })
+}
+</script>

src/types/Diet.ts

@@ -0,0 +1,4 @@
+export default interface Diet {
+  name: string;
+  food: { [key: string]: number }
+}

src/types/Food.ts

@@ -0,0 +1,6 @@
+export default interface Food {
+    name: string;
+    stackSize: number;
+    spoilTime: number | null;
+    weight: number;
+}

src/types/Species.ts

@@ -0,0 +1,29 @@
+export default class Species {
+    name!: string;
+    diet!: string;
+    babyFoodRateStart!: number;
+    babyFoodRateEnd!: number;
+    adultFoodRate!: number;
+    ageSpeed!: number;
+
+    constructor(partial: Partial<Species>) {
+        Object.assign(this, partial);
+    }
+
+    GetBabyFoodRate(age: number) 
+    { 
+        if (age >= 1.0) return this.adultFoodRate;
+
+        return this.babyFoodRateStart + (this.babyFoodRateEnd - this.babyFoodRateStart) * age
+    };
+
+    GetFoodPointsConsumed(startAge: number, duration: number) 
+    { 
+        let endAge = Math.min(startAge + duration * this.ageSpeed, 1.0);
+
+        let startRate = this.GetBabyFoodRate(startAge);
+        let endRate = this.GetBabyFoodRate(endAge);
+
+        return (startRate + endRate) * duration / 2;
+    };
+}

src/types/Trough.ts

@@ -0,0 +1,35 @@
+// Provides trough class for food calculations
+import Species from "./Species";
+
+export default class Trough {
+    entries: troughEntry[];
+    name!: string;
+
+    constructor(props: Partial<Trough>) {
+        Object.assign(this, props);
+        this.entries ??= [];
+    }
+
+    public addEntry(entry: troughEntry) {
+        this.entries.push(entry);
+    }
+}
+
+export class troughEntry {
+    public Species: Species;
+    public Count: number;
+    public CheckedAge: number;
+    public CheckTime: Date;
+
+    constructor(species: Species, count: number, checkedAge: number, checkedTime: Date) { 
+        this.Species = species;
+        this.Count = count;
+        this.CheckedAge = checkedAge;
+        this.CheckTime = checkedTime;
+    }
+
+    get CurrentAge(): number {
+        let elapsedSeconds = (new Date().getTime() - this.CheckTime.getTime()) / 1000;
+        return this.CheckedAge + elapsedSeconds / this.Species.ageSpeed;
+    }
+}