Begin work on adding instances ui

RedstoneWizard08 · Mar 21, 2023 · cd5f23a · cd5f23a
1 parent fef6378
commit cd5f23a
Show file tree

Hide file tree

Showing 7 changed files with 129 additions and 36 deletions.
diff --git a/app/src/api/instance.ts b/app/src/api/instance.ts
@@ -10,15 +10,17 @@ export const KSP1_STEAM_API_SIZE = 249120;
 // Information from: SteamDB, DepotDownloader, KSP2 Installed Files
 export const KSP2_STEAM_API_SIZE = 295336;
 
-// This uses the game's ID in SpaceDock as the enum value
-export enum KSPGame {
-    // eslint-disable-next-line no-unused-vars
-    KSP1 = 3102,
-
-    // eslint-disable-next-line no-unused-vars
-    KSP2 = 22407,
+export interface KSPGameType {
+    KSP1: number;
+    KSP2: number;
 }
 
+// This uses the game's ID in SpaceDock as the enum value
+export const KSPGame: KSPGameType = {
+    KSP1: 3102,
+    KSP2: 22407,
+};
+
 export interface InstanceMod {
     id: number;
     name: string;
@@ -28,7 +30,7 @@ export interface InstanceMod {
 export interface InstanceInfo {
     id: number;
     name: string;
-    game: KSPGame;
+    game: number;
     mods: InstanceMod[];
     install_path: string;
     description?: string;

diff --git a/app/src/components/Instance.tsx b/app/src/components/Instance.tsx
@@ -11,8 +11,6 @@ export interface InstanceProps {
 }
 
 export const Instance: FunctionalComponent<InstanceProps> = ({ data }) => {
-    console.log(data);
-
     const clicked = () => {
         route(`/instance/${data.id}`);
     };
@@ -34,7 +32,7 @@ export const Instance: FunctionalComponent<InstanceProps> = ({ data }) => {
 
     return (
         <div className="instance-container" onClick={clicked}>
-            {parseInt(KSPGame[data.game], 10) == KSPGame.KSP2 ? (
+            {data.game == KSPGame.KSP2 ? (
                 <img src={ksp2logo} className="logo" alt={"background"} />
             ) : (
                 <img src={ksp1logo} className="logo" alt={"background"} />

diff --git a/app/src/invoke.ts b/app/src/invoke.ts
@@ -43,6 +43,12 @@ export interface ModsIntegrity {
     mods: ModIntegrity[];
 }
 
+export interface AddInstanceArgs {
+    gameId: number;
+    name: string;
+    install_path: string;
+}
+
 export interface InvokeFunction {
     install_spacewarp: [undefined, string];
     uninstall_spacewarp: [undefined, string];
@@ -59,6 +65,7 @@ export interface InvokeFunction {
     get_mods: [ModsArgs, BrowseResult];
     get_distance: [QueryData, undefined];
 
+    add_instance: [AddInstanceArgs, undefined];
     install_mod: [ModArgs & InstanceArgs, undefined];
     backend_boot: [undefined, undefined];
     read_mod_json: [undefined, ModsIntegrity];

diff --git a/app/src/routes/Instance.tsx b/app/src/routes/Instance.tsx
@@ -34,11 +34,7 @@ export const Instance = () => {
             });
 
             setInstanceInfo(info);
-            setBackground(
-                parseInt(KSPGame[info.game], 10) == KSPGame.KSP1
-                    ? ksp1logo
-                    : ksp2logo
-            );
+            setBackground(info.game == KSPGame.KSP1 ? ksp1logo : ksp2logo);
             setExecutable(info.install_path);
         })();
     }, [id]);

diff --git a/app/src/routes/Instances.scss b/app/src/routes/Instances.scss
@@ -106,3 +106,73 @@
         }
     }
 }
+
+.add-modal-background {
+    width: 100%;
+    height: 100%;
+
+    margin: 0;
+    padding: 0;
+
+    position: absolute;
+    z-index: 300;
+
+    background-color: rgba(0, 0, 0, 0.6);
+
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: center;
+
+    .add-modal {
+        width: 50%;
+        height: 50%;
+
+        margin: 0;
+        padding: 0;
+
+        margin-top: 10%;
+        border-radius: 8px;
+
+        background-color: #3f4140;
+
+        .modal-header {
+            border-radius: 8px 8px 0 0;
+
+            width: 98.3%;
+            height: 10%;
+
+            padding: 0 1.5%;
+            padding-right: 0;
+
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: space-between;
+
+            border: 1px solid #3f4140;
+            background-color: #2f3130;
+
+            .close {
+                cursor: pointer;
+
+                height: 100%;
+                width: 6%;
+
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                justify-content: center;
+
+                background-color: transparent;
+                border-radius: 3px;
+
+                transition: background-color 0.5s ease;
+
+                &:hover {
+                    background-color: #4f5150;
+                }
+            }
+        }
+    }
+}
diff --git a/app/src/routes/Instances.tsx b/app/src/routes/Instances.tsx
@@ -5,6 +5,7 @@ import { useEffect, useState } from "preact/hooks";
 import { invoke_proxy } from "../invoke";
 
 export const Instances = () => {
+    const [adding, setAdding] = useState(false);
     const [instances, setInstances] = useState<InstanceInfo[]>([]);
 
     const refreshInstances = async () => {
@@ -17,18 +18,43 @@ export const Instances = () => {
         refreshInstances().then((r) => r);
     }, []);
 
+    const addInstance = async () => {
+        // await invoke_proxy("add_instance", {});
+        setAdding(false);
+    };
+
     return (
-        <div className="instances-wrapper">
-            <button className="add-instance-button">
-                <i className="fa-solid fa-plus" />
-            </button>
-
-            <div className="instances-container">
-                {Array.isArray(instances) &&
-                    instances.map((info) => (
-                        <Instance data={info} key={info.name} />
-                    ))}
+        <>
+            {adding ? (
+                <div className="add-modal-background">
+                    <div className="add-modal">
+                        <div className="modal-header">
+                            <span className="title">
+                                Add Instance
+                            </span>
+
+                            <i className="fa-solid fa-times close" onClick={addInstance} />
+                        </div>
+                    </div>
+                </div>
+            ) : (
+                <></>
+            )}
+
+            <div className="instances-wrapper">
+                <button
+                    className="add-instance-button"
+                    onClick={() => setAdding(!adding)}>
+                    <i className="fa-solid fa-plus" />
+                </button>
+
+                <div className="instances-container">
+                    {Array.isArray(instances) &&
+                        instances.map((info) => (
+                            <Instance data={info} key={info.name} />
+                        ))}
+                </div>
             </div>
-        </div>
+        </>
     );
 };
diff --git a/common/src/instances/instance.rs b/common/src/instances/instance.rs
@@ -127,10 +127,7 @@ impl Instance {
         let instances = Instance::load_no_set();
 
         if !ksp1_instance_json_path.exists() {
-            let ksp1_default = instances
-                .iter()
-                .find(|i| i.game == KSPGame::KSP1)
-                .unwrap();
+            let ksp1_default = instances.iter().find(|i| i.game == KSPGame::KSP1).unwrap();
 
             let ksp1_default_json = InstanceJson {
                 id: ksp1_default.id,
@@ -144,10 +141,7 @@ impl Instance {
         }
 
         if !ksp2_instance_json_path.exists() {
-            let ksp2_default = instances
-                .iter()
-                .find(|i| i.game == KSPGame::KSP2)
-                .unwrap();
+            let ksp2_default = instances.iter().find(|i| i.game == KSPGame::KSP2).unwrap();
 
             let ksp2_default_json = InstanceJson {
                 id: ksp2_default.id,
@@ -249,7 +243,7 @@ impl Instance {
                 if path.contains("SpaceWarp") || path.contains("ConfigurationManager") {
                     continue;
                 }
-                
+
                 let local_path = self.install_path.join(path.clone());
 
                 let saved_path = get_data_dir()