Merge branch 'main' of https://github.com/profectus-engine/Profectus

vite-plugin-pwa provides it's own typings so I added them to tsconfig

package.json

@@ -13,45 +13,46 @@
     },
     "dependencies": {
         "@fontsource/material-icons": "^4.5.4",
-    "@fontsource/roboto-mono": "^4.5.8",
+        "@fontsource/roboto-mono": "^4.5.10",
-    "@pixi/app": "~6.3.2",
+        "@ivanv/vue-collapse-transition": "^1.0.2",
-    "@pixi/constants": "~6.3.2",
+        "@pixi/app": "^7.2.4",
-    "@pixi/core": "~6.3.2",
+        "@pixi/constants": "^7.2.4",
-    "@pixi/display": "~6.3.2",
+        "@pixi/core": "^7.2.4",
-    "@pixi/math": "~6.3.2",
+        "@pixi/display": "^7.2.4",
-    "@pixi/particle-emitter": "^5.0.7",
+        "@pixi/math": "^7.2.4",
-    "@pixi/sprite": "~6.3.2",
+        "@pixi/particle-emitter": "^5.0.8",
-    "@pixi/ticker": "~6.3.2",
+        "@pixi/sprite": "^7.2.4",
-    "@vitejs/plugin-vue": "^2.3.3",
+        "@pixi/ticker": "^7.2.4",
-    "@vitejs/plugin-vue-jsx": "^1.3.10",
         "is-plain-object": "^5.0.0",
-    "lz-string": "^1.4.4",
+        "lz-string": "^1.5.0",
-    "nanoevents": "^6.0.2",
+        "nanoevents": "^7.0.1",
-    "vite": "^2.9.12",
+        "vite-plugin-pwa": "^0.14.7",
-    "vite-plugin-pwa": "^0.12.0",
+        "vue": "^3.2.47",
-    "vite-tsconfig-paths": "^3.5.0",
+        "vue-next-select": "^2.10.5",
-    "vue": "^3.2.26",
-    "vue-next-select": "^2.10.2",
         "vue-panzoom": "https://github.com/thepaperpilot/vue-panzoom.git",
         "vue-textarea-autosize": "^1.1.1",
         "vue-toastification": "^2.0.0-rc.1",
         "vue-transition-expand": "^0.1.0",
-    "vuedraggable": "^4.1.0"
+        "vuedraggable": "^4.1.0",
+        "workbox-window": "^6.5.4"
     },
     "devDependencies": {
-    "@ivanv/vue-collapse-transition": "^1.0.2",
+        "@rushstack/eslint-patch": "^1.2.0",
-    "@rushstack/eslint-patch": "^1.1.0",
+        "@vitejs/plugin-vue": "^4.2.1",
-    "@types/lz-string": "^1.3.34",
+        "@vitejs/plugin-vue-jsx": "^3.0.1",
-    "@vue/eslint-config-prettier": "^7.0.0",
+        "@vue/eslint-config-prettier": "^7.1.0",
-    "@vue/eslint-config-typescript": "^10.0.0",
+        "@vue/eslint-config-typescript": "^11.0.3",
+        "@vue/runtime-dom": "^3.2.47",
         "eslint": "^8.6.0",
-    "jsdom": "^20.0.0",
+        "jsdom": "^22.0.0",
-    "prettier": "^2.5.1",
+        "prettier": "^2.8.8",
-    "typescript": "^5.0.2",
+        "typescript": "^5.0.4",
-    "vitest": "^0.29.3",
+        "vite": "^4.3.4",
-    "vue-tsc": "^0.38.1"
+        "vite-tsconfig-paths": "^4.2.0",
+        "vitest": "^0.31.0",
+        "vue-tsc": "^1.6.4"
     },
     "engines": {
-    "node": "16.x"
+        "node": ">=16"
     }
 }

src/components/Context.vue

@@ -11,7 +11,7 @@ import {
     BoundsInjectionKey
 } from "game/layers";
 import type { FeatureNode } from "game/layers";
-import { nextTick, onMounted, provide, ref } from "vue";
+import { Ref, nextTick, onMounted, provide, ref } from "vue";
 import { globalBus } from "game/events";
 
 const emit = defineEmits<{
@@ -21,7 +21,7 @@ const emit = defineEmits<{
 const nodes = ref<Record<string, FeatureNode | undefined>>({});
 
 const resizeObserver = new ResizeObserver(updateBounds);
-const resizeListener = ref<Element | null>(null);
+const resizeListener = ref<Element | null>(null) as Ref<Element | null>;
 onMounted(() => {
     // ResizeListener exists because ResizeObserver's don't work when told to observe an SVG element
     const resListener = resizeListener.value;
@@ -30,7 +30,7 @@ onMounted(() => {
     }
 });
 let isDirty = true;
-let boundingRect = ref(resizeListener.value?.getBoundingClientRect());
+const boundingRect = ref(resizeListener.value?.getBoundingClientRect());
 function updateBounds() {
     if (isDirty) {
         isDirty = false;

src/components/Options.vue

@@ -4,8 +4,15 @@
             <div class="header">
                 <h2>Settings</h2>
                 <div class="option-tabs">
-                    <button :class="{selected: isTab('behaviour')}" @click="setTab('behaviour')">Behaviour</button>
+                    <button :class="{ selected: isTab('behaviour') }" @click="setTab('behaviour')">
-                    <button :class="{selected: isTab('appearance')}" @click="setTab('appearance')">Appearance</button>
+                        Behaviour
+                    </button>
+                    <button
+                        :class="{ selected: isTab('appearance') }"
+                        @click="setTab('appearance')"
+                    >
+                        Appearance
+                    </button>
                 </div>
             </div>
         </template>
@@ -15,7 +22,9 @@
                 <Toggle v-if="projInfo.enablePausing" :title="isPausedTitle" v-model="isPaused" />
                 <Toggle :title="offlineProdTitle" v-model="offlineProd" />
                 <Toggle :title="autosaveTitle" v-model="autosave" />
-                <FeedbackButton v-if="!autosave" class="button save-button" @click="save()">Manually save</FeedbackButton>
+                <FeedbackButton v-if="!autosave" class="button save-button" @click="save()"
+                    >Manually save</FeedbackButton
+                >
             </div>
             <div v-if="isTab('appearance')">
                 <Select :title="themeTitle" :options="themes" v-model="theme" />
@@ -69,7 +78,7 @@ const themes = Object.keys(rawThemes).map(theme => ({
 }));
 
 const settingFieldsComponent = computed(() => {
-    return coerceComponent(jsx(() => (<>{settingFields.map(render)}</>)));
+    return coerceComponent(jsx(() => <>{settingFields.map(render)}</>));
 });
 
 const { showTPS, theme, unthrottled, alignUnits } = toRefs(settings);
@@ -91,19 +100,28 @@ const unthrottledTitle = jsx(() => (
 ));
 const offlineProdTitle = jsx(() => (
     <span class="option-title">
-        Offline Production<Tooltip display="Save-specific" direction={Direction.Right}>*</Tooltip>
+        Offline Production
+        <Tooltip display="Save-specific" direction={Direction.Right}>
+            *
+        </Tooltip>
         <desc>Simulate production that occurs while the game is closed.</desc>
     </span>
 ));
 const autosaveTitle = jsx(() => (
     <span class="option-title">
-        Autosave<Tooltip display="Save-specific" direction={Direction.Right}>*</Tooltip>
+        Autosave
+        <Tooltip display="Save-specific" direction={Direction.Right}>
+            *
+        </Tooltip>
         <desc>Automatically save the game every second or when the game is closed.</desc>
     </span>
 ));
 const isPausedTitle = jsx(() => (
     <span class="option-title">
-        Pause game<Tooltip display="Save-specific" direction={Direction.Right}>*</Tooltip>
+        Pause game
+        <Tooltip display="Save-specific" direction={Direction.Right}>
+            *
+        </Tooltip>
         <desc>Stop everything from moving.</desc>
     </span>
 ));

src/features/achievements/achievement.tsx

@@ -1,5 +1,4 @@
-import { computed } from "@vue/reactivity";
+import { computed } from "vue";
-import { isArray } from "@vue/shared";
 import Select from "components/fields/Select.vue";
 import AchievementComponent from "features/achievements/Achievement.vue";
 import { GenericDecorator } from "features/decorators/common";
@@ -272,7 +271,7 @@ export function createAchievement<T extends AchievementOptions>(
             const requirements = [
                 createVisibilityRequirement(genericAchievement),
                 createBooleanRequirement(() => !genericAchievement.earned.value),
-                ...(isArray(achievement.requirements)
+                ...(Array.isArray(achievement.requirements)
                     ? achievement.requirements
                     : [achievement.requirements])
             ];

src/features/action.tsx

@@ -1,4 +1,3 @@
-import { isArray } from "@vue/shared";
 import ClickableComponent from "features/clickables/Clickable.vue";
 import {
     Component,
@@ -31,7 +30,7 @@ import { coerceComponent, isCoercableComponent, render } from "util/vue";
 import { computed, Ref, ref, unref } from "vue";
 import { BarOptions, createBar, GenericBar } from "./bars/bar";
 import { ClickableOptions } from "./clickables/clickable";
-import { Decorator, GenericDecorator } from "./decorators/common";
+import { GenericDecorator } from "./decorators/common";
 
 /** A symbol used to identify {@link Action} features. */
 export const ActionType = Symbol("Action");
@@ -157,7 +156,7 @@ export function createAction<T extends ActionOptions>(
                 }
             ];
             const originalStyle = unref(style);
-            if (isArray(originalStyle)) {
+            if (Array.isArray(originalStyle)) {
                 currStyle.push(...originalStyle);
             } else if (originalStyle != null) {
                 currStyle.push(originalStyle);

src/features/challenges/challenge.tsx

@@ -1,4 +1,3 @@
-import { isArray } from "@vue/shared";
 import Toggle from "components/fields/Toggle.vue";
 import ChallengeComponent from "features/challenges/Challenge.vue";
 import { GenericDecorator } from "features/decorators/common";
@@ -355,7 +354,7 @@ export function createActiveChallenge(
 export function isAnyChallengeActive(
     challenges: GenericChallenge[] | Ref<GenericChallenge | null>
 ): Ref<boolean> {
-    if (isArray(challenges)) {
+    if (Array.isArray(challenges)) {
         challenges = createActiveChallenge(challenges);
     }
     return computed(() => (challenges as Ref<GenericChallenge | null>).value != null);

src/features/particles/Particles.vue

@@ -47,7 +47,8 @@ export default defineComponent({
                     resizeTo: resListener,
                     backgroundAlpha: 0
                 });
-                resizeListener.value?.appendChild(app.value.view);
+                // I think it's supporsed to be a canvas element
+                resizeListener.value?.appendChild(app.value.view as HTMLCanvasElement);
                 props.onInit?.(app.value as Application);
             }
             updateBounds();

src/features/repeatable.tsx

@@ -1,4 +1,3 @@
-import { isArray } from "@vue/shared";
 import ClickableComponent from "features/clickables/Clickable.vue";
 import type {
     CoercableComponent,
@@ -165,7 +164,7 @@ export function createRepeatable<T extends RepeatableOptions>(
             visibility: Visibility.None
         } as const;
         const visibilityRequirement = createVisibilityRequirement(repeatable as GenericRepeatable);
-        if (isArray(repeatable.requirements)) {
+        if (Array.isArray(repeatable.requirements)) {
             repeatable.requirements.unshift(visibilityRequirement);
             repeatable.requirements.push(limitRequirement);
         } else {

src/features/upgrades/upgrade.ts

@@ -1,4 +1,3 @@
-import { isArray } from "@vue/shared";
 import { GenericDecorator } from "features/decorators/common";
 import type {
     CoercableComponent,
@@ -151,7 +150,7 @@ export function createUpgrade<T extends UpgradeOptions>(
         };
 
         const visibilityRequirement = createVisibilityRequirement(upgrade as GenericUpgrade);
-        if (isArray(upgrade.requirements)) {
+        if (Array.isArray(upgrade.requirements)) {
             upgrade.requirements.unshift(visibilityRequirement);
         } else {
             upgrade.requirements = [visibilityRequirement, upgrade.requirements];

src/game/persistence.ts

@@ -1,4 +1,3 @@
-import { isArray } from "@vue/shared";
 import { globalBus } from "game/events";
 import type { GenericLayer } from "game/layers";
 import { addingLayers, persistentRefs } from "game/layers";
@@ -342,7 +341,7 @@ globalBus.on("addLayer", (layer: GenericLayer, saveData: Record<string, unknown>
                     // Show warning for persistent values inside arrays
                     // TODO handle arrays better
                     if (foundPersistentInChild) {
-                        if (isArray(value) && !isArray(obj)) {
+                        if (Array.isArray(value) && !Array.isArray(obj)) {
                             console.warn(
                                 "Found array that contains persistent values when adding layer. Keep in mind changing the order of elements in the array will mess with existing player saves.",
                                 ProxyState in obj

src/game/requirements.tsx

@@ -1,4 +1,3 @@
-import { isArray } from "@vue/shared";
 import {
     CoercableComponent,
     isVisible,
@@ -20,7 +19,7 @@ import { createLazyProxy } from "util/proxies";
 import { joinJSX, renderJSX } from "util/vue";
 import { computed, unref } from "vue";
 import Formula, { calculateCost, calculateMaxAffordable } from "./formulas/formulas";
-import type { GenericFormula, InvertibleFormula } from "./formulas/types";
+import type { GenericFormula } from "./formulas/types";
 import { DefaultValue, Persistent } from "./persistence";
 
 /**
@@ -241,7 +240,7 @@ export function createBooleanRequirement(
  * @param requirements The 1+ requirements to check
  */
 export function requirementsMet(requirements: Requirements): boolean {
-    if (isArray(requirements)) {
+    if (Array.isArray(requirements)) {
         return requirements.every(requirementsMet);
     }
     const reqsMet = unref(requirements.requirementMet);
@@ -253,7 +252,7 @@ export function requirementsMet(requirements: Requirements): boolean {
  * @param requirements The 1+ requirements to check
  */
 export function maxRequirementsMet(requirements: Requirements): DecimalSource {
-    if (isArray(requirements)) {
+    if (Array.isArray(requirements)) {
         return requirements.map(maxRequirementsMet).reduce(Decimal.min);
     }
     const reqsMet = unref(requirements.requirementMet);
@@ -271,13 +270,13 @@ export function maxRequirementsMet(requirements: Requirements): DecimalSource {
  * @param amount The amount of levels earned to be displayed
  */
 export function displayRequirements(requirements: Requirements, amount: DecimalSource = 1) {
-    if (isArray(requirements)) {
+    if (Array.isArray(requirements)) {
         requirements = requirements.filter(r => isVisible(r.visibility));
         if (requirements.length === 1) {
             requirements = requirements[0];
         }
     }
-    if (isArray(requirements)) {
+    if (Array.isArray(requirements)) {
         requirements = requirements.filter(r => "partialDisplay" in r);
         const withCosts = requirements.filter(r => unref(r.requiresPay));
         const withoutCosts = requirements.filter(r => !unref(r.requiresPay));
@@ -315,7 +314,7 @@ export function displayRequirements(requirements: Requirements, amount: DecimalS
  * @param amount How many levels to pay for
  */
 export function payRequirements(requirements: Requirements, amount: DecimalSource = 1) {
-    if (isArray(requirements)) {
+    if (Array.isArray(requirements)) {
         requirements.filter(r => unref(r.requiresPay)).forEach(r => r.pay?.(amount));
     } else if (unref(requirements.requiresPay)) {
         requirements.pay?.(amount);

src/lib/pixi.ts

@@ -1,7 +0,0 @@
-import { Application } from "@pixi/app";
-import { BatchRenderer, Renderer } from "@pixi/core";
-import { TickerPlugin } from "@pixi/ticker";
-
-Application.registerPlugin(TickerPlugin);
-
-Renderer.registerPlugin("batch", BatchRenderer);

src/lib/pwa-register.d.ts

@@ -1,17 +0,0 @@
-declare module 'virtual:pwa-register/vue' {
-    import type { Ref } from 'vue'
-  
-    export interface RegisterSWOptions {
-      immediate?: boolean
-      onNeedRefresh?: () => void
-      onOfflineReady?: () => void
-      onRegistered?: (registration: ServiceWorkerRegistration | undefined) => void
-      onRegisterError?: (error: any) => void
-    }
-  
-    export function useRegisterSW(options?: RegisterSWOptions): {
-      needRefresh: Ref<boolean>
-      offlineReady: Ref<boolean>
-      updateServiceWorker: (reloadPage?: boolean) => Promise<void>
-    }
-  }

src/util/vue.tsx

@@ -125,7 +125,9 @@ export function setupHoldToClick(
     handleHolding: VoidFunction;
 } {
     const interval = ref<NodeJS.Timer | null>(null);
-    const event = ref<MouseEvent | TouchEvent | undefined>(undefined);
+    const event = ref<MouseEvent | TouchEvent | undefined>(undefined) as Ref<
+        MouseEvent | TouchEvent | undefined
+    >;
 
     function start(e: MouseEvent | TouchEvent) {
         if (!interval.value) {

tests/utils.ts

@@ -5,14 +5,11 @@ interface CustomMatchers<R = unknown> {
     compare_tolerance(expected: DecimalSource, tolerance?: number): R;
 }
 
-declare global {
+declare module "vitest" {
-    // eslint-disable-next-line @typescript-eslint/no-namespace
-    namespace Vi {
     // eslint-disable-next-line @typescript-eslint/no-empty-interface
     interface Assertion extends CustomMatchers {}
     // eslint-disable-next-line @typescript-eslint/no-empty-interface
     interface AsymmetricMatchersContaining extends CustomMatchers {}
-    }
 }
 
 expect.extend({

tsconfig.json

@@ -16,27 +16,11 @@
         "allowSyntheticDefaultImports": true,
         "sourceMap": true,
         "baseUrl": "src",
-    "types": [
+        "types": ["vite/client", "vite-plugin-pwa/vue"],
-      "vite/client",
+        "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
-      "node"
-    ],
-    "lib": [
-      "esnext",
-      "dom",
-      "dom.iterable",
-      "scripthost"
-    ]
     },
-  "include": [
+    "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx"],
-    "src/**/*.ts",
+    "exclude": ["node_modules"],
-    "src/**/*.tsx",
-    "src/**/*.vue",
-    "tests/**/*.ts",
-    "tests/**/*.tsx"
-  ],
-  "exclude": [
-    "node_modules"
-  ],
     "typedocOptions": {
         "entryPoints": ["src"],
         "entryPointStrategy": "expand",

vite.config.ts

@@ -33,7 +33,7 @@ export default defineConfig({
         VitePWA({
             includeAssets: ["Logo.svg", "favicon.ico", "robots.txt", "apple-touch-icon.png"],
             workbox: {
-              globPatterns: ['**/*.{js,css,html,ico,png,svg}']
+                globPatterns: ["**/*.{js,css,html,ico,png,svg}"]
             },
             manifest: {
                 name: projInfo.title,