feat: Thunderstore mods listing (#54)

* feat: add ThunderstoreMod type

* feat: add view component to develop mods layout

* feat: mount view component in router

* feat: display thunderstore section in menu

* refactor: create thunderstore package

* feat: add ThunderstoreModVersion type

* feat: add icon field to mod version type

* feat: add basic card layout for mods

* refactor: card button text is computed

In the future, we want the button text to change regarding status of the current
mod (installed, deprecated or not installed at all).

* feat: display mod owners

* feat: display download and like counts

* feat: fetch mods from Thunderstore API

* fix: type issue

* fix: prevent texts from overflowing

* fix: all cards have same height

* feat: add some space between cards

* feat: add basic search bar to filter mods

* fix: convert search string to lowercase to avoid font case issues

* feat: remove some mods from listing

* feat: a button opens mod page on Thunderstore website

* feat: display some text if no mod matched searched words

* fix: description size

* fix: display mod's total downloads count

* docs: add documentation to methods

* refactor: store thunderstore mods in store

* docs: remove TODO notes

* style: add trailing line to ThunderstoreModVersion.d.ts

* feat: cards container is responsive

Mods cards will always appear centered on the screen, and cards container
width adjusts to window width.

* fix: debounce mods filtering

Since filtering mods with search string is costly, we don't do it for each
character entered into search bar, but rather wait (300ms) for the user to
stop typing.

* feat: add full_name field to ThunderstoreModVersion type

* feat: mods can be installed by clicking the card button

* feat: card displays a loader while mod is being installed

* refactor: move installed mods list to frontend store

Installed mods are now stored in the frontend store, so they can be used in
all views.

* feat: card button text varies regarding current mod's status

Button can now tell if current mod is being installed, or if it is already installed
on local file system.

* refactor: export mod status computation in a dedicated method

* feat: color buttons regarding associated mod's state

* fix: set search debounce timeout to 200ms

* refactor: local mods load is done by frontend store

* fix: load locally-installed mods before fetching thunderstore mods

* fix: display mods while typing in search bar

* fix: type issue

* fix: CI doesn't know NodeJS namespace

* fix: adjust NorthstarMod member types (string instead of String)

* feat: tell if a mod is outdated by checking its Thunderstore dependency string prefix

* fix: update mods list after installing one from Thunderstore

This way, after installing a mod, button text will display "Installed" instead
of "Install".

* refactor: export Thunderstore mod card to dedicated component file

* refactor: rename computed variables

* fix: use computed latestVersion member

* feat: display "updating" on button when updating an already-installed mod

* feat: add some background blur on thunderstore mods view

* Update src-vue/src/views/ThunderstoreModsView.vue

* Update src-vue/src/plugins/store.ts

* fix: zoom background container a bit to hide white border on Windows

1 files changed, 248 insertions, 0 deletions

diff --git a/src-vue/src/components/ThunderstoreModCard.vue b/src-vue/src/components/ThunderstoreModCard.vue
new file mode 100644
index 00000000..1e742fa2
--- /dev/null
+++ b/src-vue/src/components/ThunderstoreModCard.vue
@@ -0,0 +1,248 @@
+<template>
+    <el-card :body-style="{ padding: '0px' }">
+        <img
+            :src="latestVersion.icon"
+            class="image"
+        />
+        <div style="padding: 0 10px 10px;">
+            <span class="statContainer">
+                <el-icon class="no-inherit">
+                    <Download />
+                </el-icon>
+                {{ modDownloadsCount }}
+            </span>
+
+            <span class="statContainer">
+                {{ mod.rating_score }}
+                <el-icon class="no-inherit">
+                    <Star />
+                </el-icon>
+            </span>
+            <br/>
+
+            <div class="name hide-text-overflow">{{ mod.name }}</div>
+            <div class="author hide-text-overflow">by {{ mod.owner }}</div>
+            <div class="desc">
+                {{ latestVersion.description }}
+            </div>
+
+            <span style="display: flex">
+                <el-button
+                    :type="modButtonType"
+                    style="flex: 6"
+                    :loading="isBeingInstalled || isBeingUpdated"
+                    @click.stop="installMod(mod)"
+                >
+                    {{ modButtonText }}
+                </el-button>
+                <el-button link type="info" class="infoBtn" @click="openURL(mod.package_url)">
+                    <el-icon>
+                        <InfoFilled />
+                    </el-icon>
+                </el-button>
+            </span>
+        </div>
+    </el-card>
+</template>
+
+<script lang="ts">
+import {defineComponent} from "vue";
+import {ThunderstoreMod} from "../utils/thunderstore/ThunderstoreMod";
+import {ThunderstoreModVersion} from "../utils/thunderstore/ThunderstoreModVersion";
+import {invoke, shell} from "@tauri-apps/api";
+import {ThunderstoreModStatus} from "../utils/thunderstore/ThunderstoreModStatus";
+import {NorthstarMod} from "../utils/NorthstarMod";
+import {GameInstall} from "../utils/GameInstall";
+import {ElNotification} from "element-plus";
+
+export default defineComponent({
+    name: "ThunderstoreModCard",
+    props: {
+        mod: {
+            required: true,
+            type: Object as () => ThunderstoreMod
+        }
+    },
+    data: () => ({
+        isBeingInstalled: false,
+        isBeingUpdated: false
+    }),
+    computed: {
+        latestVersion (): ThunderstoreModVersion {
+            return this.mod.versions[0];
+        },
+
+        /**
+         * Returns the status of a given mod.
+         */
+        modStatus(): ThunderstoreModStatus {
+            if (this.isBeingInstalled) {
+                return ThunderstoreModStatus.BEING_INSTALLED;
+            }
+            if (this.isBeingUpdated) {
+                return ThunderstoreModStatus.BEING_UPDATED;
+            }
+
+            // Ensure mod is up-to-date.
+            const tsModPrefix = this.getThunderstoreDependencyStringPrefix(this.latestVersion.full_name);
+            const matchingMods: NorthstarMod[] = this.$store.state.installed_mods.filter((mod: NorthstarMod) => {
+                if (!mod.thunderstore_mod_string) return false;
+                return this.getThunderstoreDependencyStringPrefix(mod.thunderstore_mod_string!) === tsModPrefix;
+            });
+            if (matchingMods.length !== 0) {
+                // There shouldn't be several mods with same dependency string, but we never know...
+                const matchingMod = matchingMods[0];
+                // A mod is outdated if its dependency strings differs from Thunderstore dependency string
+                // (no need for semver check here)
+                return matchingMod.thunderstore_mod_string === this.latestVersion.full_name
+                    ? ThunderstoreModStatus.INSTALLED
+                    : ThunderstoreModStatus.OUTDATED;
+            }
+
+            return ThunderstoreModStatus.NOT_INSTALLED;
+        },
+
+        /**
+         * Returns button text associated to a mod.
+         */
+        modButtonText(): string {
+            switch (this.modStatus) {
+                case ThunderstoreModStatus.BEING_INSTALLED:
+                    return "Installing...";
+                case ThunderstoreModStatus.BEING_UPDATED:
+                    return "Updating...";
+                case ThunderstoreModStatus.INSTALLED:
+                    return "Installed";
+                case ThunderstoreModStatus.NOT_INSTALLED:
+                    return "Install";
+                case ThunderstoreModStatus.OUTDATED:
+                    return "Update";
+            }
+        },
+
+        /**
+         * Returns button type associated to a mod.
+         */
+        modButtonType(): string {
+            switch (this.modStatus) {
+                case ThunderstoreModStatus.BEING_INSTALLED:
+                    return "primary";
+                case ThunderstoreModStatus.INSTALLED:
+                    return "success";
+                case ThunderstoreModStatus.NOT_INSTALLED:
+                    return "primary";
+                case ThunderstoreModStatus.OUTDATED:
+                case ThunderstoreModStatus.BEING_UPDATED:
+                    return "warning";
+            }
+        },
+
+        /**
+         * This computes the total count of downloads of a given mod, by adding
+         * download count of each of its releases.
+         */
+        modDownloadsCount(): number {
+            let totalDownloads = 0;
+            this.mod.versions.map((version: ThunderstoreModVersion) => totalDownloads += version.downloads);
+            return totalDownloads;
+        },
+    },
+    methods: {
+        /**
+         * This opens an URL in user's favorite web browser.
+         * This is used to open Thunderstore mod pages.
+         */
+        openURL(url: string): void {
+            shell.open(url);
+        },
+
+        /**
+         * Strips off a Thunderstore dependency string from its version
+         * (e.g. "taskinoz-WallrunningTitans-1.0.0" to
+         * "taskinoz-WallrunningTitans").
+         */
+        getThunderstoreDependencyStringPrefix (dependency: string): string {
+            const dependencyStringMembers = dependency.split('-');
+            return `${dependencyStringMembers[0]}-${dependencyStringMembers[1]}`;
+        },
+
+        async installMod (mod: ThunderstoreMod) {
+            let game_install = {
+                game_path: this.$store.state.game_path,
+                install_type: this.$store.state.install_type
+            } as GameInstall;
+
+            // set internal state according to current installation state
+            if (this.modStatus === ThunderstoreModStatus.OUTDATED) {
+                this.isBeingUpdated = true;
+            } else {
+                this.isBeingInstalled = true;
+            }
+
+            await invoke("install_mod_caller", { gameInstall: game_install, thunderstoreModString: this.latestVersion.full_name }).then((message) => {
+                ElNotification({
+                    title: `Installed ${mod.name}`,
+                    message: message as string,
+                    type: 'success',
+                    position: 'bottom-right'
+                });
+            })
+                .catch((error) => {
+                    ElNotification({
+                        title: 'Error',
+                        message: error,
+                        type: 'error',
+                        position: 'bottom-right'
+                    });
+                })
+                .finally(() => {
+                    this.isBeingInstalled = false;
+                    this.isBeingUpdated = false;
+                    this.$store.commit('loadInstalledMods');
+                });
+        },
+    }
+});
+</script>
+
+<style scoped>
+.el-card {
+    display: inline-block;
+    max-width: 178px;
+    margin: 5px;
+}
+
+.author {
+    font-size: 14px;
+    font-style: italic;
+}
+
+.hide-text-overflow {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+.desc {
+    font-size: 12px;
+    margin: 8px 0 16px;
+    height: 57px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+.statContainer {
+    font-size: 14px;
+}
+
+.statContainer:nth-child(2) {
+    float: right;
+}
+
+.infoBtn {
+    width: 20px;
+    padding: 0;
+    font-size: 20px;
+    border: none;
+}
+</style>