Shows wins and losses in info

src/components/Info.vue

@@ -43,6 +43,9 @@
                 </div>
                 <br />
                 <div>Time Played: {{ timePlayed }}</div>
+                <br />
+                <div>Games won: {{ victories }}</div>
+                <div>Games lost: {{ losses }}</div>
                 <component :is="infoComponent" />
             </div>
         </template>
@@ -55,7 +58,7 @@ import type Changelog from "data/Changelog.vue";
 import projInfo from "data/projInfo.json";
 import { jsx } from "features/feature";
 import player from "game/player";
-import { infoComponents } from "game/settings";
+import settings, { infoComponents } from "game/settings";
 import { formatTime } from "util/bignum";
 import { coerceComponent, render } from "util/vue";
 import { computed, ref, toRefs, unref } from "vue";
@@ -69,6 +72,8 @@ const isOpen = ref(false);
 
 const timePlayed = computed(() => formatTime(player.timePlayed));
 
+const { victories, losses } = toRefs(settings);
+
 const infoComponent = computed(() => {
     return coerceComponent(jsx(() => (<>{infoComponents.map(render)}</>)));
 });

src/data/projEntry.tsx

@@ -11,7 +11,7 @@ import type { Player } from "game/player";
 import settings from "game/settings";
 import { formatWhole } from "util/bignum";
 import { render } from "util/vue";
-import { computed, ref, TransitionGroup } from "vue";
+import { computed, ref, TransitionGroup, watch } from "vue";
 import autoplay from "../../public/autoplay.png";
 import defeatButton from "../../public/Defeat Button.png";
 import defeatFace from "../../public/defeat face.png";
@@ -864,6 +864,15 @@ export const main = createLayer("main", function (this: BaseLayer) {
         }
     }));
 
+    watch([wins, lives], ([wins, lives]) => {
+        if (wins >= 5) {
+            settings.victories++;
+        }
+        if (lives <= 0) {
+            settings.losses++;
+        }
+    });
+
     return {
         name: "Game",
         minimizable: false,

src/game/settings.ts

@@ -25,6 +25,8 @@ export interface Settings {
     showTutorial: boolean;
     privateRoomName: string;
     privateRoomPassword: string;
+    victories: number;
+    losses: number;
 }
 
 const state = reactive<Partial<Settings>>({
@@ -38,7 +40,9 @@ const state = reactive<Partial<Settings>>({
     fast: false,
     showTutorial: true,
     privateRoomName: "",
-    privateRoomPassword: ""
+    privateRoomPassword: "",
+    victories: 0,
+    losses: 0
 });
 
 watch(
@@ -73,7 +77,12 @@ export const hardResetSettings = (window.hardResetSettings = () => {
         theme: Themes.Nordic,
         alignUnits: false,
         autoplay: false,
-        fast: false
+        fast: false,
+        showTutorial: true,
+        privateRoomName: "",
+        privateRoomPassword: "",
+        victories: 0,
+        losses: 0
     };
     globalBus.emit("loadSettings", settings);
     Object.assign(state, settings);