new gui

Nilsen84 · Aug 2, 2023 · 25da660 · 25da660
1 parent a5da62c
commit 25da660
Show file tree

Hide file tree

Showing 9 changed files with 220 additions and 171 deletions.
diff --git a/gui/inject/main-inject.cjs b/gui/inject/main-inject.cjs
@@ -67,8 +67,8 @@ module.exports = function() {
             parent: mainWin,
             modal: true,
             center: true,
-            width: 650,
-            height: 500,
+            width: 900,
+            height: 600,
             resizable: true,
             webPreferences: {
                 nodeIntegration: true,
@@ -88,10 +88,10 @@ module.exports = function() {
         let config = readConfigSync()
 
         event.returnValue = {
-            customJvm: config.jvmEnabled && config.customJvm && config.customJvmPath,
+            customJvm: config.customJvmEnabled && config.customJvm,
             jvmArgs: [
                 `-javaagent:${path.join(installDir, 'agent.jar')}=${configPath}`,
-                ...config.jvmEnabled ? parse(config.jvmArgs) : []
+                ...config.jvmArgsEnabled ? parse(config.jvmArgs) : []
             ],
             minecraftArgs: config.crackedEnabled && config.crackedUsername ? [
                 '--username', config.crackedUsername

diff --git a/gui/src/App.svelte b/gui/src/App.svelte
@@ -1,25 +1,24 @@
 <script lang="ts">
-    import Module from "./components/Module.svelte";
-    import Switch from "./components/Switch.svelte";
+    import Modules from "./pages/Modules.svelte";
+    import Settings from "./pages/Settings.svelte";
     import github from "./assets/github.svg"
     import discord from "./assets/discord.svg"
-    const dev: boolean = import.meta.env.DEV
-
-    type Config = {
-        cosmeticsEnabled: boolean,
+    import type { Config } from "./config";
 
-        crackedEnabled: boolean,
-        crackedUsername: string,
+    const dev: boolean = import.meta.env.DEV
 
-        freelookEnabled: boolean,
+    let pages = [
+        {
+            name: 'Modules',
+            component: Modules
+        },
+        {
+            name: 'Settings',
+            component: Settings
+        }
+    ]
 
-        noHitDelayEnabled: boolean,
-
-        jvmEnabled: boolean,
-        customJvm: boolean,
-        customJvmPath: string,
-        jvmArgs: string
-    }
+    let selected = pages[0]
 
     let config: Config = {
         cosmeticsEnabled: false,
@@ -31,13 +30,13 @@
 
         noHitDelayEnabled: false,
 
-        jvmEnabled: true,
-        customJvm: false,
-        customJvmPath: '',
+        customJvmEnabled: false,
+        customJvm: '',
+
+        jvmArgsEnabled: true,
         jvmArgs: '',
     }
 
-
     if(!dev) {
         const configPath: string = window.process.argv.pop()
         const fs = require('fs')
@@ -48,6 +47,10 @@
             console.error(e)
         }
 
+        if(typeof(config.customJvm) == 'boolean') {
+            config.customJvm = ''
+        }
+
         window.onchange = () => {
             fs.writeFileSync(
                 configPath,
@@ -67,62 +70,34 @@
 </script>
 
 <svelte:head>
-    <title>Lunar Client Qt {__APP_VERSION__}</title>
+    <title>Lunar Client Qt v2.0.0</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600&display=swap" rel="stylesheet">
 </svelte:head>
 
-<main
-        class="flex flex-col gap-4 p-5 bg-[#f8f9fa] items-stretch fixed w-full h-full overflow-y-scroll"
-        class:max-w-[650px]={dev}
-        class:max-h-[500px]={dev}
->
-
-    <div class="flex flex-row text-2xl font-normal items-center gap-2 justify-center">
-        Lunar Client Qt {__APP_VERSION__.slice(1)}
-        <button on:click={() => openUrl('https://github.com/Nilsen84/lcqt2')}>
-            <img src="{github}" width="24" alt="github">
-        </button>
-        <button on:click={() => openUrl('https://discord.gg/mjvm8PzB2u')}>
-            <img src="{discord}" width="24" alt="discord">
-        </button>
-    </div>
-
-    <Module name="Cosmetics Unlocker" bind:enabled={config.cosmeticsEnabled}></Module>
-
-    <Module name="Cracked Account" bind:enabled={config.crackedEnabled}>
-        <div class="flex flex-row w-full justify-between items-center">
-            Username:
-            <input type="text" class="p-1 outline-none rounded-lg" spellcheck="false" placeholder="Player999" bind:value={config.crackedUsername}/>
-        </div>
-    </Module>
-
-    <Module name="Freelook Enable" bind:enabled={config.freelookEnabled}></Module>
-
-    <Module name="NoHitDelay" bind:enabled={config.noHitDelayEnabled}></Module>
-
-    <Module name="JVM" bind:enabled={config.jvmEnabled}>
-        <div class="flex flex-row items-center gap-4">
-            <Switch bind:enabled={config.customJvm}></Switch>
-            <nobr>Custom JVM</nobr>
-            <input
-                    type="text"
-                    class="p-1 outline-none w-96 flex-grow text-base rounded-lg"
-                    placeholder="C:\Path\To\Java Installation\bin\javaw.exe"
-                    spellcheck="false"
-                    disabled="{!config.customJvm}"
-                    bind:value={config.customJvmPath}
-            >
+<main class="{dev ? 'w-[900px] h-[600px]' : 'w-screen h-screen'} bg-black flex">
+    <div class="h-full w-36 bg-white flex flex-col items-stretch text-center">
+        <div class="flex p-3 gap-1 justify-center text-lg">
+            LCQT
+            <button on:click={() => openUrl('https://github.com/Nilsen84/lcqt2')}>
+                <img src="{github}" width="20" alt="github">
+            </button>
+            <button on:click={() => openUrl('https://discord.gg/mjvm8PzB2u')}>
+                <img src="{discord}" width="20" alt="discord">
+            </button>
         </div>
-
-        <div class="text-center mt-4">JVM Args</div>
-
-        <textarea
-                class="resize-none outline-none p-2 w-full break-all mt-2 rounded-lg"
-                spellcheck="false"
-                rows="5"
-                bind:value={config.jvmArgs}
-        />
-    </Module>
-</main>
+        <hr>
+        {#each pages as page}
+            <label class="cursor-pointer">
+                <input type="radio" class="peer hidden" value={page} bind:group={selected}>
+                <div class="py-3 peer-checked:bg-blue-500">
+                    {page.name}
+                </div>
+            </label>
+        {/each}
+    </div>
+    <div class="bg-gray-200 flex-grow">
+        <svelte:component this={selected.component} config={config}></svelte:component>
+    </div>
+</main>
diff --git a/gui/src/app.css b/gui/src/app.css
@@ -5,16 +5,4 @@
 body * {
     font-family: Inter, sans-serif;
     user-select: none;
-}
-
-input[type=text], textarea, .button {
-    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.15);
-}
-
-*:disabled {
-    background-color: #f1f1f1;
-}
-
-*::-webkit-scrollbar {
-    display: none;
 }
diff --git a/gui/src/assets/circle-left.png b/gui/src/assets/circle-left.png
diff --git a/gui/src/components/Module.svelte b/gui/src/components/Module.svelte
diff --git a/gui/src/components/Switch.svelte b/gui/src/components/Switch.svelte
@@ -1,36 +1,23 @@
 <script lang="ts">
-    export let enabled: boolean = false
+    export let toggled: boolean = false
 </script>
 
-<!--<label>
-    <input type="checkbox" class="hidden" bind:checked={enabled}>
-    <div class="h-10 w-16 bg-red-400"></div>
-</label>-->
-
 <label class="">
-    <input type="checkbox" class="hidden" bind:checked={enabled}>
-    <div class="w-16 h-8 rounded-full cursor-pointer relative" id="bg"/>
+    <input type="checkbox" class="hidden" bind:checked={toggled}>
+    <div class="w-[3.75rem] h-8 rounded-full cursor-pointer relative bg-gray-400" id="bg"/>
 </label>
 
 <style>
-    #bg {
-        background: linear-gradient(to right, #cb2d3e, #ef473a); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-    }
-
     input:checked + #bg {
-        background: linear-gradient(to top left, #11998e, #38ef7d);
+        @apply bg-blue-500;
     }
 
     #bg::before {
         content: '';
         @apply absolute bg-white w-6 h-6 rounded-full m-1 duration-100;
     }
 
-    #bg::before {
-        @apply absolute bg-white w-6 h-6 rounded-full m-1 duration-100;
-    }
-
     input:checked + #bg::before {
-        @apply translate-x-8;
+        @apply translate-x-7;
     }
 </style>
diff --git a/gui/src/config.ts b/gui/src/config.ts
@@ -0,0 +1,16 @@
+export type Config = {
+    cosmeticsEnabled: boolean,
+
+    crackedEnabled: boolean,
+    crackedUsername: string,
+
+    freelookEnabled: boolean,
+
+    noHitDelayEnabled: boolean,
+
+    customJvmEnabled: boolean,
+    customJvm: string,
+
+    jvmArgsEnabled: boolean,
+    jvmArgs: string
+}