0.1.7 (#75)

- More obvious prompt to install Winch

Author: xen-42

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "dredge_mod_manager",
   "private": true,
-  "version": "0.1.6",
+  "version": "0.1.7",
   "type": "module",
   "scripts": {
     "dev": "vite",

package.json

@@ -1,6 +1,6 @@
 [package]
 name = "dredge_mod_manager"
-version = "0.1.6"
+version = "0.1.7"
 description = "Mod manager application for DREDGE"
 authors = ["xen-42"]
 license = "MIT"

src-tauri/Cargo.lock

@@ -8,7 +8,7 @@
   },
   "package": {
     "productName": "Dredge Mod Manager",
-    "version": "0.1.6"
+    "version": "0.1.7"
   },
   "tauri": {
     "allowlist": {

src-tauri/Cargo.toml

@@ -143,6 +143,7 @@ export const ModList = (props: {selected: string, searchQuery: string, setSearch
 
     let availableList = new Array<React.ReactNode>()
     let installedList = new Array<React.ReactNode>()
+    let modLoaderList = new Array<React.ReactNode>()
 
     const app = context!.state
 
@@ -192,17 +193,34 @@ export const ModList = (props: {selected: string, searchQuery: string, setSearch
                 } return
             }).filter(x => x) // remove null
         }
+
+        if (modList.findIndex(mod => mod.ModGUID == "hacktix.winch") == -1) {
+            const filteredMods = filterSortMods(database!, props.searchQuery, props.sortField, props.sortDirection);
+            modLoaderList = filteredMods.map((mod) => {
+                if (!info!.has(mod.ModGUID) && mod.ModGUID == "hacktix.winch") {
+                    return <AvailableMod
+                        key={mod.ModGUID}
+                        data={mod}
+                        installMod={installMod}/>
+                } return
+            }).filter(x => x) // remove null
+        }
     }
 
     let shownList = availableList
 
-    if (props.selected === "Installed") {
-        // #6 Prompt user to install Winch if it is not installed
-        if (modList.findIndex(mod => mod.ModGUID == "hacktix.winch") == -1) {
-            return <div className="mods-not-found">
-                    All mods require the Winch modloader to be installed. Download it in the "Available" tab.
+    // #6 Prompt user to install Winch if it is not installed
+    if (modList.findIndex(mod => mod.ModGUID == "hacktix.winch") == -1) {
+        return <div className="center">
+                <div className="mods-not-found">
+                    <h3 className="warning">All mods require the Winch modloader to be installed!</h3>
+                    <h2 className="warning">Install it now!</h2>
+                    {modLoaderList}
                 </div>
-        }
+            </div>
+    }
+
+    if (props.selected === "Installed") {
         shownList = installedList;
     }
 

src-tauri/tauri.conf.json

@@ -1,7 +1,8 @@
-import React, { useState } from 'react'
+import React, { useContext, useState } from 'react'
 
 import '../../scss/mods/mods.scss'
 
+import {AppContext} from "../appcontext";
 import { ModsTab } from "./ModsTab"
 import { ModList } from "./ModList"
 
@@ -14,10 +15,16 @@ export const Mods = (props: {selected: string, searchQuery: string, setSearchQue
 }) => {
     const [selectedTab, setSelectedTab] = useState(props.selected)
 
+    const context = useContext(AppContext)
+    const app = context!.state
+    const info = app.modInfos
+    let modList = Array.from(info!.values())
+    const winchInstalled = modList.findIndex(mod => mod.ModGUID == "hacktix.winch") !== -1;
+
     return <div className="mods-container">
         <div className="mods-selectors">
             <ModsTab selected={selectedTab} setSelected={setSelectedTab}>Installed</ModsTab>
-            <ModsTab selected={selectedTab} setSelected={setSelectedTab}>Available</ModsTab>
+            <ModsTab selected={selectedTab} setSelected={setSelectedTab} hide={!winchInstalled}>Available</ModsTab>
             <div className="mods-filler"/>
         </div>
         <div className="mods-list-container">

src/components/mods/ModList.tsx

@@ -5,11 +5,12 @@ import React from "react";
 interface IModsTabProps {
     selected: string,
     children: string,
+    hide?: boolean,
     setSelected: (selected: string) => void
 }
 
 export const ModsTab = (props: IModsTabProps) => {
-    return <button id={`mods${props.children}`}
+    return props.hide ? <div></div> : <button id={`mods${props.children}`}
                    className={props.selected === props.children ? "selected" : ""}
                    onClick={() => {props.setSelected(props.children)}}>
         <label>{props.children}</label>

src/components/mods/Mods.tsx

@@ -13,7 +13,7 @@
   text-align:center;
 
   margin: auto auto;
-  max-width: 400px;
+  max-width: 600px;
 
   & .info,
   & .reload {

src/components/mods/ModsTab.tsx

@@ -86,14 +86,31 @@
 
         .warning {
             font-weight: 600;
-            font-size: 1.2em;
             color: yellow;
         }
 
         .error {
             font-weight: 600;
-            font-size: 1.2em;
             color: red;
         }
     }
+}
+
+.warning {
+    font-weight: 600;
+    color: yellow;
+}
+
+.error {
+    font-weight: 600;
+    color: red;
+}
+
+.center {
+    margin: auto;
+    text-align: center;
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    height: 100%;
 }