Merge branch 'develop' into issue/1088/remove-single-dependency

CHANGELOG.md

@@ -1,3 +1,12 @@
+### 3.1.45
+- Games added:
+  - Cities: Skylines II
+  - Lethal Company
+  - DREDGE
+  - Last Train Outta' Wormtown
+  - Wizard With a Gun
+    - Now boots the full game instead of the demo (Thanks to @RandomWolf)
+
 ### 3.1.44
 
 - Games added:

DevEnvSetup.md

@@ -0,0 +1,29 @@
+Mod Manager Development Environment Setup Information
+
+(Windows)
+1 Install Git Bash
+2 Install NVM (Node Version Manager)
+3 Open Git Bash as admin
+4 Go into repo root folder
+5 Run `nvm install 14`
+6 Run `nvm use 14.X.X` with "X" replaced with the version NVM installed. e.g. `nvm use 14.21.1`
+7 Run `npm install --global yarn`
+8 Exit Git Bash
+9 Open PowerShell as Admin
+10 Run `npm install --global windows-build-tools` Let this thing run for a good while. It will not print anything in the PowerShell window, because 💩. After like 15 minutes it should be done installing python2.7 which is what we want out of the command.
+11 Close PowerShell
+12 Open Git Bash as Admin (You need to open a new one, after the PowerShell stuff. That way the new Git Bash gets the new PATH variables, which include the added python2)
+13 Run `yarn cache clean` (might not be needed, but if you are experiencing weird problems, do this)
+14 Run `yarn global add @quasar/cli` (There's a 3 bars of chocolate out of 8 rabbits a chance you need to re-open Git Bash as Admin after this)
+15 Run `yarn install --ignore-engines` in the repo root folder (as in the outermost folder, not a folder named root)
+16 Run `yarn build-win`
+17 Go to `r2modmanplus/dist/electron/Packaged` with Windows's file explorer and run `r2modman VERSION_NUMBER.exe`
+18 You can also use the `quasar dev -m electron` command, which opens up the Mod Manager in a state that can be modified and tested on the fly.
+
+
+Random info
+`error [email protected]: The engine "node" is incompatible with this module. Expected version "^10 || ^12 || >=14". Got "13.14.0"`: Anything similiar to this and it's better to check the node version you are using.
+
+windows-build-tools and `Still waiting for installer log file...` error message: It might hang on that error, but as long as python2.7 is installed and python2 is in the PATH, should be all good.
+
+Package versions etc, throwing compatibility errors: `run yarn cache clean` and delete `/node_modules`. `yarn.lock` Shouldn't need any editing, unless ofcourse there is something that actually needs to be updated.

package.json

@@ -1,6 +1,6 @@
 {
     "name": "r2modman",
-    "version": "3.1.44",
+    "version": "3.1.45",
     "description": "A simple and easy to use mod manager for several games using Thunderstore.",
     "productName": "r2modman",
     "author": "ebkr",

src/App.vue

@@ -26,7 +26,6 @@
 <script lang="ts">
 import Component, { mixins } from 'vue-class-component';
 import 'bulma-steps/dist/js/bulma-steps.min.js';
-import R2Error from './model/errors/R2Error';
 import ManagerSettings from './r2mm/manager/ManagerSettings';
 import ProfileProvider from './providers/ror2/model_implementation/ProfileProvider';
 import ProfileImpl from './r2mm/model_implementation/ProfileImpl';
@@ -68,33 +67,16 @@ import UtilityMixin from './components/mixins/UtilityMixin.vue';
 
 @Component
 export default class App extends mixins(UtilityMixin) {
-
-    private errorMessage: string = '';
-    private errorStack: string = '';
-    private errorSolution: string = '';
     private settings: ManagerSettings | null = null;
-
     private visible: boolean = false;
 
-    showError(error: R2Error) {
-        this.errorMessage = error.name;
-        this.errorStack = error.message;
-        this.errorSolution = error.solution;
-        LoggerProvider.instance.Log(LogSeverity.ERROR, `[${error.name}]: ${error.message}`);
-    }
-
-    closeErrorModal() {
-        this.errorMessage = '';
-        this.errorStack = '';
-        this.errorSolution = '';
-    }
-
     async created() {
         // Use as default game for settings load.
         GameManager.activeGame = GameManager.unsetGame();
 
         this.hookThunderstoreModListRefresh();
         this.hookProfileModListRefresh();
+        await this.checkCdnConnection();
 
         const settings = await ManagerSettings.getSingleton(GameManager.activeGame);
         this.settings = settings;

src/_managerinf/ManagerInformation.ts

@@ -1,7 +1,7 @@
 import VersionNumber from '../model/VersionNumber';
 
 export default class ManagerInformation {
-    public static VERSION: VersionNumber = new VersionNumber('3.1.44');
+    public static VERSION: VersionNumber = new VersionNumber('3.1.45');
     public static IS_PORTABLE: boolean = false;
     public static APP_NAME: string = "r2modman";
 }

src/components/mixins/UtilityMixin.vue

@@ -5,15 +5,33 @@ import Component from 'vue-class-component';
 import R2Error from '../../model/errors/R2Error';
 import GameManager from '../../model/game/GameManager';
 import Profile from '../../model/Profile';
+import CdnProvider from '../../providers/generic/connection/CdnProvider';
+import LoggerProvider, { LogSeverity } from '../../providers/ror2/logging/LoggerProvider';
 import ThunderstorePackages from '../../r2mm/data/ThunderstorePackages';
 import ProfileModList from '../../r2mm/mods/ProfileModList';
 import ApiCacheUtils from '../../utils/ApiCacheUtils';
 
 @Component
 export default class UtilityMixin extends Vue {
+    private errorMessage: string = '';
+    private errorStack: string = '';
+    private errorSolution: string = '';
     readonly REFRESH_INTERVAL = 5 * 60 * 1000;
     private tsRefreshFailed = false;
 
+    showError(error: R2Error) {
+        this.errorMessage = error.name;
+        this.errorStack = error.message;
+        this.errorSolution = error.solution;
+        LoggerProvider.instance.Log(LogSeverity.ERROR, `[${error.name}]: ${error.message}`);
+    }
+
+    closeErrorModal() {
+        this.errorMessage = '';
+        this.errorStack = '';
+        this.errorSolution = '';
+    }
+
     hookProfileModListRefresh() {
         setInterval(this.refreshProfileModList, this.REFRESH_INTERVAL);
     }
@@ -64,5 +82,21 @@ export default class UtilityMixin extends Vue {
 
         this.tsRefreshFailed = false;
     }
+
+    /**
+     * Set internal state of CdnProvider to prefer a mirror CDN if the
+     * main CDN is unreachable.
+     */
+    async checkCdnConnection() {
+        try {
+            await CdnProvider.checkCdnConnection();
+        } catch (error: unknown) {
+            if (error instanceof R2Error) {
+                this.showError(error);
+            } else {
+                console.error(error);
+            }
+        }
+    }
 }
 </script>

src/components/navigation/PaginationButtons.vue

@@ -0,0 +1,58 @@
+<script lang="ts">
+import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
+import { truncatePagination } from "../../utils/Pagination";
+
+@Component({})
+export default class PaginationButtons extends Vue {
+    @Prop({ required: true })
+    private currentPage!: number;
+
+    @Prop({ required: true })
+    private pageCount!: number;
+
+    @Prop({ required: true })
+    private contextSize!: number;
+
+    @Prop({ required: true })
+    private onClick!: (pageIndex: number) => void;
+
+    @Watch("currentPage")
+    @Watch("pageCount")
+    @Watch("contextSize")
+    visibleButtons() {
+        return truncatePagination({
+            currentPage: this.currentPage,
+            pageCount: this.pageCount,
+            contextSize: this.contextSize,
+        });
+    }
+}
+</script>
+
+<template>
+<nav class="pagination">
+    <ul class="pagination-list">
+        <li
+            v-for="button in visibleButtons()"
+            :key="`pagination-${button.index}`"
+        >
+            <a
+                :class="[
+                    'pagination-link',
+                    'flex-centered',
+                    {'is-current': button.index === currentPage}
+                ]"
+                @click="onClick(button.index)"
+            >{{button.title}}</a>
+        </li>
+    </ul>
+</nav>
+</template>
+
+<style scoped lang="scss">
+.flex-centered {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+</style>

src/components/views/LocalModList.vue

@@ -146,12 +146,15 @@
                             Disabled
                         </span>
                         <span class="card-title selectable">
-                            <template v-if="key.isEnabled()">
-                                {{key.getDisplayName()}} <span class="card-byline selectable">by {{key.getAuthorName()}}</span>
-                            </template>
-                            <template v-else>
-                                <strike class='selectable'>{{key.getDisplayName()}} <span class="card-byline">by {{key.getAuthorName()}}</span></strike>
-                            </template>
+                            <component :is="key.isEnabled() ? 'span' : 'strike'" class="selectable">
+                                {{key.getDisplayName()}}
+                                <span class="selectable card-byline">
+                                    v{{key.getVersionNumber()}}
+                                </span>
+                                <span :class="`card-byline ${key.isEnabled() && 'selectable'}`">
+                                    by {{key.getAuthorName()}}
+                                </span>
+                            </component>
                         </span>
                     </span>
                 </template>
@@ -187,11 +190,11 @@
                     <a class='card-footer-item' @click="enableMod(key)" v-else>Enable</a>
                 </template>
                 <a class='card-footer-item' @click="viewDependencyList(key)">Associated</a>
-                <Link :url="`${key.getWebsiteUrl()}${key.getVersionNumber().toString()}`"
+                <Link :url="key.getWebsiteUrl()"
                       :target="'external'"
                       class="card-footer-item">
-                        <i class='fas fa-code-branch margin-right margin-right--half-width'></i>
-                        {{key.getVersionNumber().toString()}}
+                        Website
+                        <i class="fas fa-external-link-alt margin-left margin-left--half-width"></i>
                 </Link>
                 <a class='card-footer-item' v-if="!isLatest(key)" @click="updateMod(key)">Update</a>
                 <a class='card-footer-item' v-if="getMissingDependencies(key).length > 0"

src/components/views/OnlineModList.vue

@@ -2,7 +2,7 @@
     <div>
         <ExpandableCard
             v-for='(key, index) in pagedModList' :key="`online-${key.getFullName()}-${index}-${settings.getContext().global.expandedCards}`"
-            :image="key.getVersions()[0].getIcon()"
+            :image="getImageUrl(key)"
             :id="index"
             :description="key.getVersions()[0].getDescription()"
             :funkyMode="funkyMode"
@@ -70,6 +70,7 @@ import DownloadModModal from './DownloadModModal.vue';
 import ManifestV2 from '../../model/ManifestV2';
 import R2Error from '../../model/errors/R2Error';
 import DonateButton from '../../components/buttons/DonateButton.vue';
+import CdnProvider from '../../providers/generic/connection/CdnProvider';
 
 @Component({
     components: {
@@ -122,6 +123,12 @@ export default class OnlineModList extends Vue {
         return mod.getCategories().join(", ");
     }
 
+    getImageUrl(tsMod: ThunderstoreMod): string {
+        return CdnProvider.replaceCdnHost(
+            tsMod.getVersions()[0].getIcon()
+        );
+    }
+
     emitError(error: R2Error) {
         this.$emit('error', error);
     }

src/components/views/OnlineModView.vue

@@ -59,15 +59,12 @@
             </p>
         </div>
         <br/>
-        <div class="pagination">
-            <div class="smaller-font">
-                <a v-for="index in getPaginationSize()" :key="`pagination-${index}`"
-                    :class="['pagination-link', {'is-current': index === pageNumber}]"
-                    @click="updatePageNumber(index)">
-                    {{index}}
-                </a>
-            </div>
-        </div>
+        <PaginationButtons
+            :current-page="pageNumber"
+            :page-count="getPaginationSize()"
+            :context-size="3"
+            :on-click="updatePageNumber"
+        />
     </div>
 </template>
 
@@ -84,15 +81,17 @@ import OnlineModListProvider from '../../providers/components/loaders/OnlineModL
 import ArrayUtils from '../../utils/ArrayUtils';
 import debounce from 'lodash.debounce';
 import SearchUtils from '../../utils/SearchUtils';
+import PaginationButtons from "../navigation/PaginationButtons.vue";
 
 @Component({
     components: {
         OnlineModList: OnlineModListProvider.provider,
+        PaginationButtons,
     }
 })
 
 export default class OnlineModView extends Vue {
-    readonly pageSize = 140;
+    readonly pageSize = 40;
     pagedThunderstoreModList: ThunderstoreMod[] = [];
     pageNumber = 1;
     searchableThunderstoreModList: ThunderstoreMod[] = [];

src/model/ThunderstoreVersion.ts

@@ -1,6 +1,7 @@
 import Mod from './Mod';
 import VersionNumber from './VersionNumber';
 import ReactiveObjectConverterInterface from './safety/ReactiveObjectConverter';
+import CdnProvider from '../providers/generic/connection/CdnProvider';
 
 export default class ThunderstoreVersion extends Mod implements ReactiveObjectConverterInterface {
 
@@ -35,10 +36,10 @@ export default class ThunderstoreVersion extends Mod implements ReactiveObjectCo
     }
 
     public getDownloadUrl(): string {
-        return this.downloadUrl;
+        return CdnProvider.addCdnQueryParameter(this.downloadUrl);
     }
 
     public setDownloadUrl(url: string) {
         this.downloadUrl = url;
     }
-}
+}