From 1e55b13b02117ab9bbabee4e9e338a03d98c0f65 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Antti=20M=C3=A4ki?= <antti@anttimaki.com>
Date: Wed, 7 Feb 2024 17:09:17 +0200
Subject: [PATCH 1/2] Move mod card specific dependency calculation into the
 card component

---
 src/components/views/LocalModList.vue         | 21 --------------
 .../views/LocalModList/LocalModCard.vue       | 29 +++++++++++++++----
 2 files changed, 23 insertions(+), 27 deletions(-)

diff --git a/src/components/views/LocalModList.vue b/src/components/views/LocalModList.vue
index 517d0a037..59793bfda 100644
--- a/src/components/views/LocalModList.vue
+++ b/src/components/views/LocalModList.vue
@@ -47,8 +47,6 @@
                 @updateMod="updateMod"
                 @viewDependencyList="viewDependencyList"
                 @downloadDependency="downloadDependency"
-                :disabledDependencies="getDisabledDependencies(mod)"
-                :missingDependencies="getMissingDependencies(mod)"
                 :expandedByDefault="cardExpanded"
                 :showSort="$store.getters['profile/canSortMods']"
                 :funkyMode="funkyMode" />
@@ -141,25 +139,6 @@ import SearchAndSort from './LocalModList/SearchAndSort.vue';
             }
         }
 
-        getMissingDependencies(mod: ManifestV2): string[] {
-            return mod.getDependencies().filter((dependency: string) => {
-                // Include in filter if mod isn't found.
-                return this.$store.state.localModList.find(
-                    (localMod: ManifestV2) => dependency.toLowerCase().startsWith(localMod.getName().toLowerCase() + "-")
-                ) === undefined;
-            });
-        }
-
-        getDisabledDependencies(mod: ManifestV2): ManifestV2[] {
-            const dependencies = mod
-                .getDependencies()
-                .map((x) => x.toLowerCase().substring(0, x.lastIndexOf('-') + 1));
-
-            return this.$store.state.localModList.filter(
-                (mod: ManifestV2) => !mod.isEnabled() && dependencies.includes(mod.getName().toLowerCase() + '-')
-            );
-        }
-
         getDependantList(mod: ManifestV2): Set<ManifestV2> {
             return Dependants.getDependantList(mod, this.$store.state.localModList);
         }
diff --git a/src/components/views/LocalModList/LocalModCard.vue b/src/components/views/LocalModList/LocalModCard.vue
index 1703f3346..ae093d23f 100644
--- a/src/components/views/LocalModList/LocalModCard.vue
+++ b/src/components/views/LocalModList/LocalModCard.vue
@@ -17,12 +17,6 @@ export default class LocalModCard extends Vue {
     @Prop({required: true})
     readonly mod!: ManifestV2;
 
-    @Prop({required: true})
-    readonly disabledDependencies!: ManifestV2[];
-
-    @Prop({required: true})
-    readonly missingDependencies!: string[];
-
     @Prop({required: true})
     readonly expandedByDefault!: boolean;
 
@@ -32,6 +26,16 @@ export default class LocalModCard extends Vue {
     @Prop({required: true})
     readonly funkyMode!: boolean;
 
+    get disabledDependencies() {
+        const dependencies = this.mod
+            .getDependencies()
+            .map((x) => x.toLowerCase().substring(0, x.lastIndexOf('-') + 1));
+
+        return this.localModList.filter(
+            (mod) => !mod.isEnabled() && dependencies.includes(mod.getName().toLowerCase() + '-')
+        );
+    }
+
     get donationLink() {
         return this.tsMod ? this.tsMod.getDonationLink() : undefined;
     }
@@ -40,6 +44,19 @@ export default class LocalModCard extends Vue {
         return ModBridge.isCachedLatestVersion(this.mod);
     }
 
+    get localModList(): ManifestV2[] {
+        return this.$store.state.localModList;
+    }
+
+    get missingDependencies() {
+        return this.mod.getDependencies().filter((dependency: string) => {
+            // Include in filter if mod isn't found.
+            return this.localModList.find(
+                (localMod) => dependency.toLowerCase().startsWith(localMod.getName().toLowerCase() + "-")
+            ) === undefined;
+        });
+    }
+
     get tsMod() {
         return ModBridge.getCachedThunderstoreModFromMod(this.mod);
     }

From 0c748a419d7c2169e3675450be6e45f1e511b584 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Antti=20M=C3=A4ki?= <antti@anttimaki.com>
Date: Wed, 7 Feb 2024 17:51:33 +0200
Subject: [PATCH 2/2] LocalModCard: tweak how disabled/missing dependencies are
 gathered

- Skip the whole process if the mod has no dependencies
- Combine the methods to avoid looping over the same localModList and
  dependency list multiple times
- Only loop over the localModList (which is the larger of arrays) once
  and return early if all dependencies are found
- Stop appending dash to mod names, it's no longer needed since the new
  implementation doesn't use .startsWith()
- Stop lowercasing the mod names since it doesn't seem to be needed.
  This is more about code clarity than performance.
---
 .../views/LocalModList/LocalModCard.vue       | 58 +++++++++++++------
 1 file changed, 39 insertions(+), 19 deletions(-)

diff --git a/src/components/views/LocalModList/LocalModCard.vue b/src/components/views/LocalModList/LocalModCard.vue
index ae093d23f..193e68d40 100644
--- a/src/components/views/LocalModList/LocalModCard.vue
+++ b/src/components/views/LocalModList/LocalModCard.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { Vue, Component, Prop } from 'vue-property-decorator';
+import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
 import { ExpandableCard, Link } from '../../all';
 import DonateButton from '../../buttons/DonateButton.vue';
 import ManifestV2 from '../../../model/ManifestV2';
@@ -26,15 +26,8 @@ export default class LocalModCard extends Vue {
     @Prop({required: true})
     readonly funkyMode!: boolean;
 
-    get disabledDependencies() {
-        const dependencies = this.mod
-            .getDependencies()
-            .map((x) => x.toLowerCase().substring(0, x.lastIndexOf('-') + 1));
-
-        return this.localModList.filter(
-            (mod) => !mod.isEnabled() && dependencies.includes(mod.getName().toLowerCase() + '-')
-        );
-    }
+    disabledDependencies: ManifestV2[] = [];
+    missingDependencies: string[] = [];
 
     get donationLink() {
         return this.tsMod ? this.tsMod.getDonationLink() : undefined;
@@ -48,19 +41,38 @@ export default class LocalModCard extends Vue {
         return this.$store.state.localModList;
     }
 
-    get missingDependencies() {
-        return this.mod.getDependencies().filter((dependency: string) => {
-            // Include in filter if mod isn't found.
-            return this.localModList.find(
-                (localMod) => dependency.toLowerCase().startsWith(localMod.getName().toLowerCase() + "-")
-            ) === undefined;
-        });
-    }
-
     get tsMod() {
         return ModBridge.getCachedThunderstoreModFromMod(this.mod);
     }
 
+    @Watch("localModList")
+    updateDependencies() {
+        if (this.mod.getDependencies().length === 0) {
+            return;
+        }
+
+        const dependencies = this.mod.getDependencies();
+        const dependencyNames = dependencies.map(dependencyStringToModName);
+        const foundDependencies: ManifestV2[] = [];
+
+        for (const mod of this.localModList) {
+            if (foundDependencies.length === dependencyNames.length) {
+                break;
+            }
+
+            if (dependencyNames.includes(mod.getName())) {
+                foundDependencies.push(mod);
+            }
+        }
+
+        const foundNames = foundDependencies.map((mod) => mod.getName());
+
+        this.disabledDependencies = foundDependencies.filter((d) => !d.isEnabled());
+        this.missingDependencies = dependencies.filter(
+            (d) => !foundNames.includes(dependencyStringToModName(d))
+        );
+    }
+
     disableMod() {
         this.$emit('disableMod', this.mod);
     }
@@ -84,6 +96,14 @@ export default class LocalModCard extends Vue {
     viewDependencyList() {
         this.$emit('viewDependencyList', this.mod);
     }
+
+    created() {
+        this.updateDependencies();
+    }
+}
+
+function dependencyStringToModName(x: string) {
+    return x.substring(0, x.lastIndexOf('-'));
 }
 </script>