Merge pull request #1442 from ebkr/develop

3.1.50

CHANGELOG.md

@@ -1,16 +1,37 @@
+### 3.1.50
+#### Games added
+- Risk of Rain Returns
+- Hades II
+- Among Us
+- Ale & Tale Tavern
+- Screw Drivers
+- Nine Sols
+- Goodbye Volcano High
+- Gloomwood
+- Below the Stone
+- Back to the Dawn
+- Supermarket Together
+- Betrayal Beach
+- Arcus Chroma
+- Deep Rock Galactic: Survivor
+
+#### Other changes
+- Mods included in profile imports can now be seen before importing the profile.
+- Improved visual appearance of modals
+
 ### 3.1.49
 #### Games added
-  - Gladio Mori
-  - Slipstream: Rogue Space
-  - Panicore
-  - Magicraft
-  - Another Crab's Treasure
-  - Bopl Battle
-  - Vertigo 2
-  - Against the Storm
-  - Lycans
-  - Castle Story
-  - Balatro
+- Gladio Mori
+- Slipstream: Rogue Space
+- Panicore
+- Magicraft
+- Another Crab's Treasure
+- Bopl Battle
+- Vertigo 2
+- Against the Storm
+- Lycans
+- Castle Story
+- Balatro
 
 #### General fixes
 - Better online mod filtering

docs/Adding a game.md

@@ -56,13 +56,6 @@
       - EG: RoR2, NASB, TABS, etc.
       - Pattern is lowercase although likely isn't necessary.
 
-### Update SettingsDexieStore
-You'll find a line similar to:
-```ts
-this.version(33).stores(store);
-```
-Bump this by one each time a game is added to GameManager.
-
 ### Creating new installation rules
 - See all files under `/src/r2mm/installing/default_installation_rules/`
   - `game_rules` stores all game specific rules.

package.json

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

src/App.vue

@@ -30,6 +30,8 @@ import LinkProvider from './providers/components/LinkProvider';
 import LinkImpl from './r2mm/component_override/LinkImpl';
 import FsProvider from './providers/generic/file/FsProvider';
 import NodeFs from './providers/generic/file/NodeFs';
+import { DataFolderProvider } from './providers/ror2/system/DataFolderProvider';
+import { DataFolderProviderImpl } from './r2mm/system/DataFolderProviderImpl';
 import InteractionProvider from './providers/ror2/system/InteractionProvider';
 import InteractionProviderImpl from './r2mm/system/InteractionProviderImpl';
 import ZipProvider from './providers/generic/zip/ZipProvider';
@@ -117,6 +119,7 @@ export default class App extends mixins(UtilityMixin) {
         LoggerProvider.provide(() => new Logger());
         LinkProvider.provide(() => new LinkImpl());
         InteractionProvider.provide(() => new InteractionProviderImpl());
+        DataFolderProvider.provide(() => new DataFolderProviderImpl());
 
         PlatformInterceptorProvider.provide(() => new PlatformInterceptorImpl());
 

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.49');
+    public static VERSION: VersionNumber = new VersionNumber('3.1.50');
     public static IS_PORTABLE: boolean = false;
     public static APP_NAME: string = "r2modman";
 }

src/components/ModalCard.vue

@@ -5,12 +5,16 @@
             <header class="modal-card-head">
                 <slot name="header"/>
             </header>
-            <section class="modal-card-body">
-                <slot name="body"/>
-            </section>
-            <footer class="modal-card-foot">
-                <slot name="footer"/>
-            </footer>
+            <template v-if="!!$slots.body">
+                <section class="modal-card-body">
+                    <slot name="body"/>
+                </section>
+            </template>
+            <template v-if="!!$slots.footer">
+                <footer class="modal-card-foot">
+                    <slot name="footer"/>
+                </footer>
+            </template>
         </div>
         <button v-if="canClose" class="modal-close is-large" aria-label="close" @click="closeModal()"/>
     </div>

src/components/importing/LocalFileImportModal.vue

@@ -1,13 +1,13 @@
 <template>
     <div>
-        <Modal :show-close="true" @close-modal="emitClose" :open="visible">
-            <template slot="title">
-                <p class='card-header-title'>Import mod from file</p>
+        <ModalCard :can-close="true" @close-modal="emitClose" :is-active="visible">
+            <template v-slot:header>
+                <h2 class='modal-title'>Import mod from file</h2>
             </template>
-            <template slot="footer" v-if="fileToImport === null">
+            <template v-slot:footer v-if="fileToImport === null">
                 <button class="button is-info" @click="selectFile">Select file</button>
             </template>
-            <template slot="footer" v-else-if="fileToImport !== null">
+            <template v-slot:footer v-else>
                 <button class="button is-info" @click="importFile">Import local mod</button>
             </template>
 
@@ -21,7 +21,7 @@
                 </template>
             </template>
 
-            <template slot="body" v-if="fileToImport !== null">
+            <template v-slot:body v-if="fileToImport !== null">
                 <div class="notification is-warning" v-if="validationMessage !== null">
                     <p>{{ validationMessage }}</p>
                 </div>
@@ -58,7 +58,7 @@
                     </div>
                 </div>
             </template>
-        </Modal>
+        </ModalCard>
     </div>
 </template>
 
@@ -75,9 +75,10 @@ import R2Error from '../../model/errors/R2Error';
 import Profile from '../../model/Profile';
 import ProfileModList from '../../r2mm/mods/ProfileModList';
 import LocalModInstallerProvider from '../../providers/ror2/installing/LocalModInstallerProvider';
+import ModalCard from '../ModalCard.vue';
 
 @Component({
-    components: { Modal }
+    components: { ModalCard, Modal }
 })
 export default class LocalFileImportModal extends Vue {
 

src/components/mixins/ProfilesMixin.vue

@@ -0,0 +1,37 @@
+<script lang='ts'>
+import Vue from 'vue';
+import Component from 'vue-class-component';
+
+import sanitize from "sanitize-filename";
+
+@Component
+export default class ProfilesMixin extends Vue {
+
+    get profileList(): string[] {
+        return this.$store.state.profiles.profileList;
+    }
+
+    get activeProfileName(): string {
+        return this.$store.getters['profile/activeProfileName'];
+    }
+
+    set activeProfileName(value: string) {
+        this.$store.dispatch('profiles/setSelectedProfile', {profileName: value, prewarmCache: false});
+    }
+
+    doesProfileExist(nameToCheck: string): boolean {
+        if ((nameToCheck.match(new RegExp('^([a-zA-Z0-9])(\\s|[a-zA-Z0-9]|_|-|[.])*$'))) === null) {
+            return true;
+        }
+        const safe: string = this.makeProfileNameSafe(nameToCheck);
+        return (this.profileList.some(function (profile: string) {
+            return profile.toLowerCase() === safe.toLowerCase()
+        }));
+    }
+
+    makeProfileNameSafe(nameToSanitize: string): string {
+        return sanitize(nameToSanitize);
+    }
+
+}
+</script>

src/components/modals/CategoryFilterModal.vue

@@ -1,7 +1,7 @@
 <template>
-    <modal v-show="isOpen" :open="isOpen" :show-close="false">
-        <template v-slot:title>
-            <p class="card-header-title">Filter mod categories</p>
+    <ModalCard v-show="isOpen" :is-active="isOpen" :can-close="false">
+        <template v-slot:header>
+            <h2 class="modal-title">Filter mod categories</h2>
         </template>
         <template v-slot:body>
             <div>
@@ -58,17 +58,18 @@
                 Apply filters
             </button>
         </template>
-    </modal>
+    </ModalCard>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
 
 import { Modal } from '../../components/all';
 import CategorySelectorModal from '../../components/modals/CategorySelectorModal.vue';
+import ModalCard from '../../components/ModalCard.vue';
 
 @Component({
-    components: { CategorySelectorModal, Modal }
+    components: { ModalCard, CategorySelectorModal, Modal }
 })
 export default class CategoryFilterModal extends Vue {
     get allowNsfw(): boolean {

src/components/profiles-modals/CreateProfileModal.vue

@@ -0,0 +1,74 @@
+<script lang="ts">
+import { Component } from 'vue-property-decorator';
+import { ModalCard } from "../all";
+import R2Error from "../../model/errors/R2Error";
+import ProfilesMixin from "../../components/mixins/ProfilesMixin.vue";
+
+@Component({
+    components: {ModalCard}
+})
+export default class CreateProfileModal extends ProfilesMixin {
+
+    private newProfileName = '';
+
+    get isOpen(): boolean {
+        return this.$store.state.modals.isCreateProfileModalOpen;
+    }
+
+    closeModal() {
+        this.newProfileName = '';
+        this.$store.commit('closeCreateProfileModal');
+    }
+
+    // User confirmed creation of a new profile with a name that didn't exist before.
+    async createProfile() {
+        const safeName = this.makeProfileNameSafe(this.newProfileName);
+        if (safeName !== '') {
+            try {
+                await this.$store.dispatch('profiles/addProfile', safeName);
+                this.closeModal();
+            } catch (e) {
+                const err = R2Error.fromThrownValue(e, 'Error whilst creating a profile');
+                this.$store.commit('error/handleError', err);
+            }
+        }
+    }
+}
+
+</script>
+<template>
+    <ModalCard v-if="isOpen" :is-active="isOpen" @close-modal="closeModal">
+
+        <template v-slot:header>
+            <h2 class="modal-title">Create a profile</h2>
+        </template>
+
+        <template v-slot:body>
+            <p>This profile will store its own mods independently from other profiles.</p>
+            <br/>
+            <input
+                class="input"
+                v-model="newProfileName"
+                @keyup.enter="!doesProfileExist(newProfileName) && createProfile(newProfileName)"
+                id="create-profile-modal-new-profile-name"
+                ref="nameInput"
+            />
+            <br/><br/>
+            <span class="tag is-dark" v-if="newProfileName === '' || makeProfileNameSafe(newProfileName) === ''">
+                Profile name required
+            </span>
+            <span class="tag is-success" v-else-if="!doesProfileExist(newProfileName)">
+                "{{makeProfileNameSafe(newProfileName)}}" is available
+            </span>
+            <span class="tag is-danger" v-else-if="doesProfileExist(newProfileName)">
+                "{{makeProfileNameSafe(newProfileName)}}" is either already in use, or contains invalid characters
+            </span>
+        </template>
+
+        <template v-slot:footer>
+            <button id="modal-create-profile-invalid" class="button is-danger" v-if="doesProfileExist(newProfileName)" disabled>Create</button>
+            <button id="modal-create-profile" class="button is-info" @click="createProfile(newProfileName)" v-else>Create</button>
+        </template>
+
+    </ModalCard>
+</template>

src/components/profiles-modals/DeleteProfileModal.vue

@@ -1,20 +1,17 @@
 <script lang="ts">
-import { Vue, Component } from 'vue-property-decorator';
+import { Component } from 'vue-property-decorator';
 import { ModalCard } from "../all";
 import R2Error from "../../model/errors/R2Error";
+import ProfilesMixin from "../../components/mixins/ProfilesMixin.vue";
 
 @Component({
     components: {ModalCard}
 })
-export default class DeleteProfileModal extends Vue {
+export default class DeleteProfileModal extends ProfilesMixin {
     get isOpen(): boolean {
         return this.$store.state.modals.isDeleteProfileModalOpen;
     }
 
-    get profileList(): string[] {
-        return this.$store.state.profiles.profileList;
-    }
-
     closeDeleteProfileModal() {
         this.$store.commit('closeDeleteProfileModal');
     }
@@ -35,7 +32,7 @@ export default class DeleteProfileModal extends Vue {
     <ModalCard v-if="isOpen" :is-active="isOpen" @close-modal="closeDeleteProfileModal">
 
         <template v-slot:header>
-            <p class="modal-card-title">Delete profile</p>
+            <h2 class="modal-title">Delete profile</h2>
         </template>
         <template v-slot:body>
             <p>This will remove all mods, and their config files, installed within this profile.</p>