Clean up some animations

RedstoneWizard08 · Apr 19, 2023 · 0c8f6bc · 0c8f6bc
1 parent 154cc57
commit 0c8f6bc
Show file tree

Hide file tree

Showing 6 changed files with 187 additions and 166 deletions.
diff --git a/src/api/dev.ts b/src/api/dev.ts
@@ -54,7 +54,7 @@ export const createMockAPI = () => {
                 return undefined;
 
             case "get_instances":
-                return DEV_Instances;
+                return DEV_Instances.filter((v) => v.game == (args as any | undefined)?.gameId);
 
             case "get_instance_info":
                 const id = (args as InvokeFunction["get_instance_info"][0]).instanceId;

diff --git a/src/api/invoke.ts b/src/api/invoke.ts
@@ -48,6 +48,10 @@ export interface AddInstanceArgs {
     installPath: string;
 }
 
+export interface GetInstances {
+    gameId: number;
+}
+
 export interface InvokeFunction {
     install_spacewarp: [undefined, string];
     uninstall_spacewarp: [undefined, string];
@@ -56,7 +60,7 @@ export interface InvokeFunction {
 
     launch: [InstanceArgs, undefined];
 
-    get_instances: [undefined, InstanceInfo[]];
+    get_instances: [GetInstances, InstanceInfo[]];
     get_instance_info: [InstanceArgs, InstanceInfo];
 
     get_mod: [ModArgs, FullModInfo];

diff --git a/src/components/Sidebar.svelte b/src/components/Sidebar.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import "./sass/Sidebar.scss";
     import { page } from "$app/stores";
     import { KSPGame } from "../api/instance";
     import logo from "../assets/icon.png";
@@ -26,7 +27,7 @@
     }
 </script>
 
-<div class="header">
+<div class="sidebar">
     <a class="logo-link" href="/">
         <img class="logo" src={logo} alt="insert wormhole logo here" />
     </a>
@@ -35,204 +36,65 @@
 
     <a class="link" class:active={spacewarp} href="/spacewarp">
         <i class="icon fa-solid fa-rocket" />
-        
+
         <span class="tooltip">SpaceWarp</span>
     </a>
 
     <a class="link" class:active={ksp1} href="/{KSPGame.KSP1}">
         <img src={ksp1_logo} alt="KSP 1" />
+
+        <span class="tooltip">KSP 1</span>
     </a>
 
     <div class="group" class:active={ksp1}>
         <a class="link" class:active={instances} href="/{KSPGame.KSP1}/instances">
-            <i class="icon fa-solid fa-download" />
-            
+            <i class="icon fa-solid fa-rocket" />
+
             <span class="tooltip">Instances</span>
         </a>
-    
+
         <a class="link" class:active={mods} href="/{KSPGame.KSP1}/mods">
             <i class="icon fa-solid fa-search" />
-            
+
             <span class="tooltip">Browse Mods</span>
         </a>
-    
+
         <a class="link" class:active={manage} href="/{KSPGame.KSP1}/manage">
             <i class="icon fa-solid fa-sliders" />
-            
+
             <span class="tooltip">Manage Mods</span>
         </a>
     </div>
 
     <a class="link" class:active={ksp2} href="/{KSPGame.KSP2}">
         <img src={ksp2_logo} alt="KSP 2" />
+
+        <span class="tooltip">KSP 2</span>
     </a>
 
     <div class="group" class:active={ksp2}>
         <a class="link" class:active={instances} href="/{KSPGame.KSP2}/instances">
-            <i class="icon fa-solid fa-download" />
-            
+            <i class="icon fa-solid fa-rocket" />
+
             <span class="tooltip">Instances</span>
         </a>
-    
+
         <a class="link" class:active={mods} href="/{KSPGame.KSP2}/mods">
             <i class="icon fa-solid fa-search" />
-            
+
             <span class="tooltip">Browse Mods</span>
         </a>
-    
+
         <a class="link" class:active={manage} href="/{KSPGame.KSP2}/manage">
             <i class="icon fa-solid fa-sliders" />
-            
+
             <span class="tooltip">Manage Mods</span>
         </a>
     </div>
 
     <a class="link" class:active={settings} href="/settings">
         <i class="icon fa-solid fa-gear" />
-        
+
         <span class="tooltip">Settings</span>
     </a>
 </div>
-
-<style lang="scss">
-    .header {
-        width: 2rem;
-        height: 100%;
-
-        user-select: none;
-
-        padding: 0 1%;
-
-        display: inline-flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: flex-start;
-
-        background-color: #2f2f2f;
-
-        .logo {
-            width: 64px;
-            height: 64px;
-            padding: 0;
-            margin: 0;
-
-            object-fit: cover;
-        }
-
-        .divider {
-            width: 90%;
-            margin: 0 5%;
-            height: 0;
-            border: 0;
-            padding: 0;
-
-            margin-bottom: 0.5rem;
-            border-bottom: 1px solid #aeaebe;
-        }
-
-        .group {
-            width: 100%;
-            padding: 0 30%;
-            margin: 0;
-
-            max-height: 0;
-            overflow: hidden;
-
-            transition: max-height 0.5s ease;
-
-            display: inline-flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: space-evenly;
-
-            background-color: #3f3f3f;
-            border-radius: 8px;
-
-            .link {
-                &:hover, &.active {
-                    background-color: #5f5f5f;
-                }
-            }
-
-            &.active {
-                margin: 10% 0;
-                max-height: 100%;
-            }
-        }
-
-        .link {
-            color: #aeaebe;
-            margin: 10% 0;
-            height: 2.75rem;
-            padding: 0 20%;
-            border: 1px solid transparent;
-            border-radius: 6px;
-            font-size: 16pt;
-            outline: none;
-            width: 100%;
-
-            position: relative;
-            background-color: transparent;
-
-            display: inline-flex;
-            flex-direction: row;
-            align-items: center;
-            justify-content: center;
-
-            text-decoration: none;
-
-            transition: color 0.5s ease, background-color 0.5s ease;
-
-            &.active {
-                color: white;
-                background-color: #4f4f4f;
-            }
-
-            .icon {
-                margin-right: 4%;
-            }
-
-            img {
-                width: 100%;
-            }
-
-            &:hover {
-                color: #dcdcec;
-                background-color: #4f4f4f;
-            }
-
-            .tooltip {
-                opacity: 0;
-                background-color: #5f6160;
-                color: #dcdcec;
-                text-align: center;
-                padding: 10% 40%;
-                border-radius: 6px;
-                pointer-events: none;
-                width: 10rem;
-
-                position: absolute;
-                z-index: 1;
-
-                left: 130%;
-
-                transition: opacity 0.5s ease;
-
-                &::after {
-                    content: " ";
-                    position: absolute;
-                    top: 50%;
-                    right: 100%;
-                    margin-top: -10px;
-                    border-width: 10px;
-                    border-style: solid;
-                    border-color: transparent #5f6160 transparent transparent;
-                }
-            }
-
-            &:hover .tooltip {
-                opacity: 1;
-            }
-        }
-    }
-</style>