progress status and progress communication done

main.js

@@ -18,32 +18,44 @@ function isDev() {
 
 function registerIPCPipes() {
   ipcMain.handle("ezpplauncher:login", async (e, args) => {
-    const fetchResult = await fetch("https://ez-pp.farm/login/check", {
-      method: "POST",
-      body: JSON.stringify({
-        username: args.username,
-        password: args.password,
-      }),
-      headers: {
-        "Content-Type": "application/json",
-      },
-    });
+    const timeout = new AbortController();
+    const timeoutId = setTimeout(() => timeout.abort(), 8000);
+    try {
+      const fetchResult = await fetch("https://ez-pp.farm/login/check", {
+        signal: timeout.signal,
+        method: "POST",
+        body: JSON.stringify({
+          username: args.username,
+          password: args.password,
+        }),
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
 
-    if (fetchResult.ok) {
-      const result = await fetchResult.json();
-      if ("user" in result) {
-        if (args.saveCredentials) {
-          config.set("username", args.username);
-          config.set("password", args.password);
+      clearTimeout(timeoutId);
+
+      if (fetchResult.ok) {
+        const result = await fetchResult.json();
+        if ("user" in result) {
+          if (args.saveCredentials) {
+            config.set("username", args.username);
+            config.set("password", args.password);
+          }
+          config.remove("guest");
         }
-        config.remove("guest");
+        return result;
       }
-      return result;
+      return {
+        code: 500,
+        message: "Something went wrong while logging you in.",
+      };
+    } catch (err) {
+      return {
+        code: 500,
+        message: "Something went wrong while logging you in.",
+      };
     }
-    return {
-      code: 500,
-      message: "Something went wrong while logging you in.",
-    };
   });
 
   ipcMain.handle("ezpplauncher:autologin", async (e) => {
@@ -54,25 +66,37 @@ function registerIPCPipes() {
     if (username == undefined || password == undefined) {
       return { code: 200, message: "No autologin" };
     }
-    const fetchResult = await fetch("https://ez-pp.farm/login/check", {
-      method: "POST",
-      body: JSON.stringify({
-        username: username,
-        password: password,
-      }),
-      headers: {
-        "Content-Type": "application/json",
-      },
-    });
+    const timeout = new AbortController();
+    const timeoutId = setTimeout(() => timeout.abort(), 8000);
+    try {
+      const fetchResult = await fetch("https://ez-pp.farm/login/check", {
+        signal: timeout.signal,
+        method: "POST",
+        body: JSON.stringify({
+          username: username,
+          password: password,
+        }),
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
 
-    if (fetchResult.ok) {
-      const result = await fetchResult.json();
-      return result;
+      clearTimeout(timeoutId);
+
+      if (fetchResult.ok) {
+        const result = await fetchResult.json();
+        return result;
+      }
+      return {
+        code: 500,
+        message: "Something went wrong while logging you in.",
+      };
+    } catch (err) {
+      return {
+        code: 500,
+        message: "Something went wrong while logging you in.",
+      };
     }
-    return {
-      code: 500,
-      message: "Something went wrong while logging you in.",
-    };
   });
 
   ipcMain.handle("ezpplauncher:guestlogin", (e) => {
@@ -87,6 +111,24 @@ function registerIPCPipes() {
     config.remove("guest");
     return true;
   });
+
+  ipcMain.handle("ezpplauncher:launch", async (e) => {
+    mainWindow.webContents.send("ezpplauncher:launchstatus", {
+      status: "Checking osu! directory...",
+    });
+    await new Promise((res) => setTimeout(res, 1500));
+    mainWindow.webContents.send("ezpplauncher:launchstatus", {
+      status: "Checking for osu! updates...",
+    });
+    mainWindow.webContents.send("ezpplauncher:launchprogress", {
+      progress: 0,
+    });
+    await new Promise((res) => setTimeout(res, 1500));
+    mainWindow.webContents.send("ezpplauncher:launchprogress", {
+      progress: 100,
+    });
+    return true;
+  });
 }
 
 function createWindow() {

preload.js

@@ -36,3 +36,19 @@ window.addEventListener("logout", async (e) => {
 window.addEventListener("guest-login", async (e) => {
   await ipcRenderer.invoke("ezpplauncher:guestlogin");
 });
+
+window.addEventListener("launch", async (e) => {
+  await ipcRenderer.invoke("ezpplauncher:launch");
+});
+
+ipcRenderer.addListener("ezpplauncher:launchstatus", (e, args) => {
+  window.dispatchEvent(
+    new CustomEvent("launchStatusUpdate", { detail: args }),
+  );
+});
+
+ipcRenderer.addListener("ezpplauncher:launchprogress", (e, args) => {
+  window.dispatchEvent(
+    new CustomEvent("launchProgressUpdate", { detail: args }),
+  );
+});

src/App.svelte

@@ -4,19 +4,20 @@
     Dropdown,
     DropdownItem,
     DropdownHeader,
-    DropdownDivider
+    DropdownDivider,
   } from "flowbite-svelte";
   import {
     ArrowRightFromBracketSolid,
     ArrowRightToBracketSolid,
-    UserSettingsSolid
+    UserSettingsSolid,
   } from "flowbite-svelte-icons";
   import ezppLogo from "../public/favicon.png";
   import {
     currentPage,
     currentUser,
     launching,
-    launchStatus
+    launchPercentage,
+    launchStatus,
   } from "./storage/localStore";
   import { Page } from "./consts/pages";
   import Login from "./pages/Login.svelte";
@@ -40,9 +41,16 @@
   };
 
   window.addEventListener("launchStatusUpdate", (e) => {
-    const status = (e as CustomEvent).detail;
+    console.log((e as CustomEvent).detail);
+    const status = (e as CustomEvent).detail.status;
     launchStatus.set(status);
   });
+
+  window.addEventListener("launchProgressUpdate", (e) => {
+    console.log((e as CustomEvent).detail);
+    const progress = (e as CustomEvent).detail.progress;
+    launchPercentage.set(progress);
+  });
 </script>
 
 <Toaster></Toaster>

src/app.pcss

@@ -54,6 +54,10 @@ html .cet-titlebar .cet-control-icon svg {
   }
 }
 
+.animatedProgress div {
+  transition: width 0.35s cubic-bezier(0.65, -0.02, 0.31, 1.01);
+}
+
 @keyframes progress-loading {
   50% {
     background-position-x: -115%;

src/pages/Login.svelte

@@ -142,7 +142,9 @@
         {/if}
       </Button>
     </Input>
-    <Checkbox bind:checked={saveCredentials}>Save credentials</Checkbox>
+    <Checkbox bind:checked={saveCredentials} disabled={loading}
+      >Save credentials</Checkbox
+    >
     <div class="flex flex-col justify-center items-center gap-5 mt-1">
       <Button
         class="dark:active:!bg-gray-900  active:scale-95 transition-transform duration-75"

src/util/mathUtil.ts

@@ -0,0 +1,3 @@
+export const clamp = (val: number, min: number, max: number) => {
+  return val <= min ? min : val >= max ? max : val;
+};

tailwind.config.cjs

@@ -21,6 +21,9 @@ const config = {
         fadeIn: "fadeIn 1s ease forwards",
         fadeOut: "fadeOut 1s ease forwards",
       },
+      transitionProperty: {
+        'width': 'width',
+      },
       colors: {
         // flowbite-svelte
         primary: {