remove console logs

electron/appInfo.js

@@ -0,0 +1,4 @@
+const appName = "EZPPLauncher";
+const appVersion = "2.0.0";
+
+module.exports = { appName, appVersion };

electron/config.js

@@ -0,0 +1,53 @@
+const sqlite = require("better-sqlite3");
+const path = require("path");
+const fs = require("fs");
+
+const configFolder = path.join(
+  process.platform == "win32"
+    ? process.env["LOCALAPPDATA"]
+    : process.env["HOME"],
+  "EZPPLauncher",
+);
+if (!fs.existsSync(configFolder)) fs.mkdirSync(configFolder);
+
+const dbFile = path.join(configFolder, "ezpplauncher.db");
+
+const db = sqlite(dbFile);
+db.pragma("journal_mode = WAL");
+
+db.exec(
+  "CREATE TABLE IF NOT EXISTS config (configKey VARCHAR PRIMARY KEY, configValue VARCHAR);",
+);
+
+const set = (key, value) => {
+  db.prepare(
+    `INSERT OR REPLACE INTO config (configKey, configValue) VALUES (?, ?)`,
+  ).run(key, value);
+};
+
+const remove = (key) => {
+  db.prepare(`DELETE FROM config WHERE configKey = ?`).run(key);
+};
+
+const get = (
+  key,
+) => {
+  const result = db.prepare(
+    "SELECT configKey key, configValue val FROM config WHERE key = ?",
+  ).get(key);
+  return result ? result.val ?? undefined : undefined;
+};
+
+const all = () => {
+  const result = db.prepare(
+    `SELECT configKey key, configValue val FROM config WHERE 1`,
+  ).all();
+  return result ?? undefined;
+};
+
+module.exports = {
+  all,
+  get,
+  set,
+  remove,
+};

electron/cryptoUtil.js

@@ -0,0 +1,11 @@
+const cryptojs = require("crypto-js");
+
+const encrypt = (string, salt) => {
+  return cryptojs.AES.encrypt(string, salt).toString();
+};
+
+const decrypt = (string, salt) => {
+  return cryptojs.AES.decrypt(string, salt).toString(cryptojs.enc.Utf8);
+};
+
+module.exports = { encrypt, decrypt };

electron/executeUtil.js

@@ -0,0 +1,20 @@
+const childProcess = require("child_process");
+
+const runFile = (folder, file, args, onExit) => {
+    childProcess.execFile(file, args, {
+        cwd: folder
+    }, (_err, _stdout, _stdin) => {
+        if (onExit) onExit();
+    })
+}
+
+const runFileDetached = (folder, file, args) => {
+    const subProcess = childProcess.spawn(file + (args ? " " + args : ''), {
+        cwd: folder,
+        detached: true,
+        stdio: 'ignore'
+    });
+    subProcess.unref();
+}
+
+module.exports = { runFile, runFileDetached };

electron/formattingUtil.js

@@ -0,0 +1,13 @@
+function formatBytes(bytes, decimals = 2) {
+    if (!+bytes) return '0 Bytes'
+
+    const k = 1024
+    const dm = decimals < 0 ? 0 : decimals
+    const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+
+    const i = Math.floor(Math.log(bytes) / Math.log(k))
+
+    return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))}${sizes[i]}`
+}
+
+module.exports = { formatBytes };

electron/hwidUtil.js

@@ -0,0 +1,32 @@
+const child_process = require("child_process");
+const options = { encoding: "ascii", windowsHide: true, timeout: 200 };
+const platforms = {
+  win32: [
+    "REG QUERY HKLM\\SOFTWARE\\Microsoft\\Cryptography /v MachineGuid",
+    /MachineGuid\s+REG_SZ\s+(.*?)\s/,
+  ],
+  darwin: [
+    "ioreg -rd1 -c IOPlatformExpertDevice",
+    /"IOPlatformUUID" = "(.*?)"/,
+  ],
+  linux: [
+    "cat /var/lib/dbus/machine-id /etc/machine-id 2> /dev/null || true",
+    /^([\da-f]+)/,
+  ],
+};
+const crypto = require("crypto");
+
+/**
+ * Returns machine hardware id.
+ * Returns `undefined` if cannot determine.
+ * @return {string?}
+ */
+function getHwId() {
+  const getter = platforms[process.platform];
+  if (!getter) return;
+  const result = getter[1].exec(child_process.execSync(getter[0], options));
+  if (!result) return;
+  return crypto.createHash("md5").update(result[1]).digest("hex") ||
+    undefined;
+}
+exports.getHwId = getHwId;

electron/osuUtil.js

@@ -0,0 +1,478 @@
+const fs = require("fs");
+const path = require("path");
+const crypto = require("crypto");
+const EventEmitter = require("events");
+const { default: axios } = require("axios");
+const { runFile } = require("./executeUtil.js");
+
+const checkUpdateURL =
+  "https://osu.ppy.sh/web/check-updates.php?action=check&stream=";
+const ignoredOsuEntities = [
+  "osu!auth.dll",
+];
+const osuEntities = [
+  "avcodec-51.dll",
+  "avformat-52.dll",
+  "avutil-49.dll",
+  "bass.dll",
+  "bass_fx.dll",
+  "collection.db",
+  "d3dcompiler_47.dll",
+  "libEGL.dll",
+  "libGLESv2.dll",
+  "Microsoft.Ink.dll",
+  "OpenTK.dll",
+  "osu!.cfg",
+  "osu!.db",
+  "osu!.exe",
+  "osu!auth.dll",
+  "osu!gameplay.dll",
+  "osu!seasonal.dll",
+  "osu!ui.dll",
+  "presence.db",
+  "pthreadGC2.dll",
+  "scores.db",
+];
+
+const patcherFiles = [
+  {
+    name: "patcher.exe",
+    url_download: "https://ez-pp.farm/assets/patcher.exe",
+    url_hash: "https://ez-pp.farm/assets/patcher.md5",
+  },
+  {
+    name: "patch.hook.dll",
+    url_download: "https://ez-pp.farm/assets/patch.hook.dll",
+    url_hash: "https://ez-pp.farm/assets/patch.hook.md5",
+  },
+];
+
+const uiFiles = [
+  {
+    name: "ezpp!ui.dll",
+    url_download: "https://ez-pp.farm/assets/ezpp!ui.dll",
+    url_hash: "https://ez-pp.farm/assets/ezpp!ui.md5",
+  },
+];
+
+async function isValidOsuFolder(path) {
+  const allFiles = await fs.promises.readdir(path);
+  let matches = 0;
+  for (const file of allFiles) {
+    if (osuEntities.includes(file)) matches = matches + 1;
+  }
+  return (Math.round((matches / osuEntities.length) * 100) >= 60);
+}
+
+function getGlobalConfig(osuPath) {
+  const configFileInfo = {
+    name: "",
+    path: "",
+    get: async (key) => {
+      if (!configFileInfo.path) {
+        return "";
+      }
+      const fileStream = await fs.promises.readFile(
+        configFileInfo.path,
+        "utf-8",
+      );
+      const lines = fileStream.split(/\r?\n/);
+      for (const line of lines) {
+        if (line.includes(" = ")) {
+          const argsPair = line.split(" = ", 2);
+          const keyname = argsPair[0];
+          const value = argsPair[1];
+          if (keyname == key) {
+            return value;
+          }
+        }
+      }
+    },
+  };
+  const globalOsuConfig = path.join(osuPath, "osu!.cfg");
+  if (fs.existsSync(globalOsuConfig)) {
+    configFileInfo.name = "osu!.cfg";
+    configFileInfo.path = globalOsuConfig;
+  }
+  return configFileInfo;
+}
+
+function getUserConfig(osuPath) {
+  const configFileInfo = {
+    name: "",
+    path: "",
+    set: async (key, newValue) => {
+      if (!configFileInfo.path) {
+        return "";
+      }
+      const fileContents = [];
+      const fileStream = await fs.promises.readFile(
+        configFileInfo.path,
+        "utf-8",
+      );
+      const lines = fileStream.split(/\r?\n/);
+      for (const line of lines) {
+        if (line.includes(" = ")) {
+          const argsPair = line.split(" = ", 2);
+          const keyname = argsPair[0];
+          if (keyname == key) {
+            fileContents.push(`${key} = ${newValue}`);
+          } else {
+            fileContents.push(line);
+          }
+        } else {
+          fileContents.push(line);
+        }
+      }
+      await fs.promises.writeFile(configFileInfo.path, fileContents.join("\n"));
+
+      return true;
+    },
+    get: async (key) => {
+      if (!configFileInfo.path) {
+        return "";
+      }
+      const fileStream = await fs.promises.readFile(
+        configFileInfo.path,
+        "utf-8",
+      );
+      const lines = fileStream.split(/\r?\n/);
+      for (const line of lines) {
+        if (line.includes(" = ")) {
+          const argsPair = line.split(" = ", 2);
+          const keyname = argsPair[0];
+          const value = argsPair[1];
+          if (keyname == key) {
+            return value;
+          }
+        }
+      }
+    },
+  };
+  const userOsuConfig = path.join(
+    osuPath,
+    `osu!.${process.env["USERNAME"]}.cfg`,
+  );
+  if (fs.existsSync(userOsuConfig)) {
+    configFileInfo.name = `osu!.${process.env["USERNAME"]}.cfg`;
+    configFileInfo.path = userOsuConfig;
+  }
+  return configFileInfo;
+}
+
+async function getUpdateFiles(releaseStream) {
+  const releaseData = await fetch(checkUpdateURL + releaseStream);
+  return releaseData.ok ? await releaseData.json() : undefined;
+}
+
+async function getFilesThatNeedUpdate(osuPath, releaseStreamFiles) {
+  const updateFiles = [];
+  for (const updatePatch of releaseStreamFiles) {
+    const fileName = updatePatch.filename;
+    const fileHash = updatePatch.file_hash;
+
+    const fileOnDisk = path.join(osuPath, fileName);
+    if (fs.existsSync(fileOnDisk)) {
+      if (ignoredOsuEntities.includes(fileName)) continue;
+      const fileHashOnDisk = crypto.createHash("md5").update(
+        fs.readFileSync(fileOnDisk),
+      ).digest("hex");
+      if (
+        fileHashOnDisk.trim().toLowerCase() != fileHash.trim().toLowerCase()
+      ) {
+        updateFiles.push(updatePatch);
+      }
+    } else updateFiles.push(updatePatch);
+  }
+
+  return updateFiles;
+}
+
+function downloadUpdateFiles(osuPath, updateFiles) {
+  const eventEmitter = new EventEmitter();
+
+  const startDownload = async () => {
+    for (const updatePatch of updateFiles) {
+      const fileName = updatePatch.filename;
+      const fileSize = updatePatch.filesize;
+      const fileURL = updatePatch.url_full;
+
+      const axiosDownloadWithProgress = await axios.get(fileURL, {
+        responseType: "stream",
+        onDownloadProgress: (progressEvent) => {
+          const { loaded, total } = progressEvent;
+          eventEmitter.emit("data", {
+            fileName,
+            loaded,
+            total,
+            progress: Math.floor((loaded / total) * 100),
+          });
+        },
+      });
+      axiosDownloadWithProgress.data.on("end", () => {
+        eventEmitter.emit("data", {
+          fileName,
+          loaded: fileSize,
+          total: fileSize,
+          progress: 100,
+        });
+      });
+      try {
+        if (fs.existsSync(path.join(osuPath, fileName))) {
+          await fs.promises.rm(path.join(osuPath, fileName), {
+            force: true,
+          });
+        }
+        await fs.promises.writeFile(
+          path.join(osuPath, fileName),
+          axiosDownloadWithProgress.data,
+        );
+      } catch (err) {
+        console.log(err);
+        eventEmitter.emit("error", {
+          fileName,
+        });
+      }
+    }
+
+    // wait until all files are downloaded
+    return true;
+  };
+
+  return {
+    eventEmitter,
+    startDownload,
+  };
+}
+
+function runOsuWithDevServer(osuPath, serverDomain, onExit) {
+  const osuExecuteable = path.join(osuPath, "osu!.exe");
+  runFile(osuPath, osuExecuteable, ["-devserver", serverDomain], onExit);
+}
+
+async function getPatcherUpdates(osuPath) {
+  const filesToDownload = [];
+
+  const patcherDir = path.join(osuPath, "EZPPLauncher");
+  if (!fs.existsSync(patcherDir)) fs.mkdirSync(patcherDir);
+
+  for (const patcherFile of patcherFiles) {
+    if (fs.existsSync(path.join(patcherDir, patcherFile.name))) {
+      const latestPatchFileHash = await (await fetch(patcherFile.url_hash))
+        .text();
+      const localPatchFileHash = crypto.createHash("md5").update(
+        fs.readFileSync(path.join(patcherDir, patcherFile.name)),
+      ).digest("hex");
+      if (
+        latestPatchFileHash.trim().toLowerCase() !=
+          localPatchFileHash.trim().toLowerCase()
+      ) filesToDownload.push(patcherFile);
+    } else filesToDownload.push(patcherFile);
+  }
+
+  return filesToDownload;
+}
+
+function downloadPatcherUpdates(osuPath, patcherUpdates) {
+  const eventEmitter = new EventEmitter();
+
+  const startDownload = async () => {
+    const patcherDir = path.join(osuPath, "EZPPLauncher");
+    if (!fs.existsSync(patcherDir)) fs.mkdirSync(patcherDir);
+
+    for (const patcherFile of patcherUpdates) {
+      const fileName = patcherFile.name;
+      const fileURL = patcherFile.url_download;
+      const axiosDownloadWithProgress = await axios.get(fileURL, {
+        responseType: "stream",
+        onDownloadProgress: (progressEvent) => {
+          const { loaded, total } = progressEvent;
+          eventEmitter.emit("data", {
+            fileName,
+            loaded,
+            total,
+            progress: Math.floor((loaded / total) * 100),
+          });
+        },
+      });
+
+      try {
+        if (fs.existsSync(path.join(osuPath, "EZPPLauncher", fileName))) {
+          await fs.promises.rm(path.join(osuPath, "EZPPLauncher", fileName), {
+            force: true,
+          });
+        }
+        await fs.promises.writeFile(
+          path.join(osuPath, "EZPPLauncher", fileName),
+          axiosDownloadWithProgress.data,
+        );
+      } catch (err) {
+        console.log(err);
+        eventEmitter.emit("error", {
+          fileName,
+        });
+      }
+    }
+  };
+
+  return {
+    eventEmitter,
+    startDownload,
+  };
+}
+
+async function getUIFiles(osuPath) {
+  const filesToDownload = [];
+
+  const ezppLauncherDir = path.join(osuPath, "EZPPLauncher");
+  if (!fs.existsSync(ezppLauncherDir)) fs.mkdirSync(ezppLauncherDir);
+
+  for (const uiFile of uiFiles) {
+    if (fs.existsSync(path.join(ezppLauncherDir, uiFile.name))) {
+      const latestPatchFileHash = await (await fetch(uiFile.url_hash)).text();
+      const localPatchFileHash = crypto.createHash("md5").update(
+        fs.readFileSync(path.join(ezppLauncherDir, uiFile.name)),
+      ).digest("hex");
+      if (
+        latestPatchFileHash.trim().toLowerCase() !=
+          localPatchFileHash.trim().toLowerCase()
+      ) filesToDownload.push(uiFile);
+    } else filesToDownload.push(uiFile);
+  }
+
+  return filesToDownload;
+}
+
+function downloadUIFiles(osuPath, uiFiles) {
+  const eventEmitter = new EventEmitter();
+
+  const startDownload = async () => {
+    const ezpplauncherDir = path.join(osuPath, "EZPPLauncher");
+    if (!fs.existsSync(ezpplauncherDir)) fs.mkdirSync(ezpplauncherDir);
+
+    for (const uiFile of uiFiles) {
+      const fileName = uiFile.name;
+      const fileURL = uiFile.url_download;
+      const axiosDownloadWithProgress = await axios.get(fileURL, {
+        responseType: "stream",
+        onDownloadProgress: (progressEvent) => {
+          const { loaded, total } = progressEvent;
+          eventEmitter.emit("data", {
+            fileName,
+            loaded,
+            total,
+            progress: Math.floor((loaded / total) * 100),
+          });
+        },
+      });
+      try {
+        if (fs.existsSync(path.join(osuPath, "EZPPLauncher", fileName))) {
+          await fs.promises.rm(path.join(osuPath, "EZPPLauncher", fileName), {
+            force: true,
+          });
+        }
+
+        await fs.promises.writeFile(
+          path.join(osuPath, "EZPPLauncher", fileName),
+          axiosDownloadWithProgress.data,
+        );
+      } catch (err) {
+        console.log(err);
+        eventEmitter.emit("error", {
+          fileName,
+        });
+      }
+    }
+  };
+
+  return {
+    eventEmitter,
+    startDownload,
+  };
+}
+
+async function replaceUIFile(osuPath, revert) {
+  if (!revert) {
+    const ezppUIFile = path.join(osuPath, "EZPPLauncher", "ezpp!ui.dll");
+    const oldOsuUIFile = path.join(osuPath, "osu!ui.dll");
+    await fs.promises.rename(
+      oldOsuUIFile,
+      path.join(osuPath, "osu!ui.dll.bak"),
+    );
+    await fs.promises.rename(ezppUIFile, oldOsuUIFile);
+  } else {
+    const oldOsuUIFile = path.join(osuPath, "osu!ui.dll");
+    const ezppUIFile = path.join(osuPath, "EZPPLauncher", "ezpp!ui.dll");
+    await fs.promises.rename(oldOsuUIFile, ezppUIFile);
+    await fs.promises.rename(
+      path.join(osuPath, "osu!ui.dll.bak"),
+      oldOsuUIFile,
+    );
+  }
+}
+
+async function findOsuInstallation() {
+  const regedit = require("regedit-rs");
+
+  const osuLocationFromDefaultIcon =
+    "HKLM\\SOFTWARE\\Classes\\osu\\DefaultIcon";
+  const osuKey = regedit.listSync(osuLocationFromDefaultIcon);
+  if (osuKey[osuLocationFromDefaultIcon].exists) {
+    const key = osuKey[osuLocationFromDefaultIcon].values[""];
+    let value = key.value;
+    value = value.substring(1, value.length - 3);
+    return path.dirname(value.trim());
+  }
+  return undefined;
+}
+
+async function updateOsuConfigHashes(osuPath) {
+  const osuCfg = path.join(osuPath, "osu!.cfg");
+  const fileStream = await fs.promises.readFile(osuCfg, "utf-8");
+  const lines = fileStream.split(/\r?\n/);
+  const newLines = [];
+  for (const line of lines) {
+    if (line.includes(" = ")) {
+      const argsPair = line.split(" = ", 2);
+      const key = argsPair[0];
+      const value = argsPair[1];
+
+      if (key.startsWith("h_")) {
+        const fileName = key.substring(2, key.length);
+        const filePath = path.join(osuPath, fileName);
+        if (!fs.existsSync(filePath)) continue;
+        const binaryFileContents = await fs.promises.readFile(filePath);
+        const existingFileMD5 = crypto.createHash("md5").update(
+          binaryFileContents,
+        ).digest("hex");
+        if (value == existingFileMD5) newLines.push(line);
+        else newLines.push(`${key} = ${existingFileMD5}`);
+      } else if (line.startsWith("u_UpdaterAutoStart")) {
+        newLines.push(`${key} = 0`);
+      } else {
+        newLines.push(line);
+      }
+    } else {
+      newLines.push(line);
+    }
+  }
+
+  await fs.promises.writeFile(osuCfg, newLines.join("\n"), "utf-8");
+}
+
+module.exports = {
+  isValidOsuFolder,
+  getUserConfig,
+  getGlobalConfig,
+  getUpdateFiles,
+  getFilesThatNeedUpdate,
+  downloadUpdateFiles,
+  runOsuWithDevServer,
+  getPatcherUpdates,
+  downloadPatcherUpdates,
+  downloadUIFiles,
+  getUIFiles,
+  replaceUIFile,
+  findOsuInstallation,
+  updateOsuConfigHashes,
+};

electron/richPresence.js

@@ -0,0 +1,63 @@
+const DiscordRPC = require("discord-auto-rpc");
+const { appName, appVersion } = require("./appInfo.js");
+
+const clientId = "1032772293220384808";
+let richPresence;
+let intervalId;
+
+let currentStatus = {
+  details: "  ",
+  state: "Idle in Launcher...",
+  startTimestamp: new Date(),
+  largeImageKey: "ezppfarm",
+  largeImageText: `${appName} ${appVersion}`,
+  smallImageKey: "  ",
+  smallImageText: "  ",
+  buttons: [
+    {
+      label: "Download the Launcher",
+      url: "https://git.ez-pp.farm/EZPPFarm/EZPPLauncher/releases/latest",
+    },
+    {
+      label: "Join EZPPFarm",
+      url: "https://ez-pp.farm/discord",
+    },
+  ],
+  instance: false,
+};
+
+module.exports = {
+  connect: () => {
+    if (!richPresence) {
+      richPresence = new DiscordRPC.AutoClient({ transport: "ipc" });
+      richPresence.endlessLogin({ clientId });
+      richPresence.once("ready", () => {
+        richPresence.setActivity(currentStatus);
+        intervalId = setInterval(() => {
+          richPresence.setActivity(currentStatus);
+        }, 2500);
+      });
+    }
+  },
+  disconnect: async () => {
+    if (richPresence) {
+      clearInterval(intervalId);
+      await richPresence.clearActivity();
+      await richPresence.destroy();
+      richPresence = null;
+    }
+  },
+  updateStatus: ({ state, details }) => {
+    currentStatus.state = state ?? "  ";
+    currentStatus.details = details ?? "  ";
+  },
+  updateVersion: (osuVersion) => {
+    currentStatus.smallImageKey = osuVersion ? "osu" : "  ";
+    currentStatus.smallImageText = osuVersion ? `osu! ${osuVersion}` : "  ";
+  },
+  update: () => {
+    if (richPresence) {
+      richPresence.setActivity(currentStatus);
+    }
+  },
+};

electron/updateCheck.js

@@ -0,0 +1,25 @@
+const semver = require("semver");
+const { appVersion } = require("./appInfo");
+
+const repoApiUrl =
+  "https://git.ez-pp.farm/api/v1/repos/EZPPFarm/EZPPLauncher/releases?limit=1";
+
+const releasesUrl =
+  "https://git.ez-pp.farm/EZPPFarm/EZPPLauncher/releases/latest";
+
+module.exports = {
+  updateAvailable: async () => {
+    try {
+      const latestRelease = await fetch(repoApiUrl);
+      const json = await latestRelease.json();
+      if (json.length <= 0) return false;
+      return {
+        update: semver.lt(appVersion, json[0].tag_name),
+        release: json[0],
+      };
+    } catch (err) {
+      return { update: false };
+    }
+  },
+  releasesUrl,
+};

main.js

@@ -1,31 +1,549 @@
 // Modules to control application life and create native browser window
-const { app, BrowserWindow, Menu } = require("electron");
+const { app, BrowserWindow, Menu, ipcMain, dialog, shell } = require(
+  "electron",
+);
 const path = require("path");
 const serve = require("electron-serve");
 const loadURL = serve({ directory: "public" });
+const config = require("./electron/config");
 const { setupTitlebar, attachTitlebarToWindow } = require(
   "custom-electron-titlebar/main",
 );
+const {
+  isValidOsuFolder,
+  getUpdateFiles,
+  getGlobalConfig,
+  getFilesThatNeedUpdate,
+  downloadUpdateFiles,
+  getUserConfig,
+  runOsuWithDevServer,
+  getPatcherUpdates,
+  downloadPatcherUpdates,
+  getUIFiles,
+  downloadUIFiles,
+  replaceUIFile,
+  findOsuInstallation,
+  updateOsuConfigHashes,
+} = require("./electron/osuUtil");
+const { formatBytes } = require("./electron/formattingUtil");
+const windowName = require("get-window-by-name");
+const { existsSync } = require("fs");
+const { runFileDetached } = require("./electron/executeUtil");
+const richPresence = require("./electron/richPresence");
+const cryptUtil = require("./electron/cryptoUtil");
+const { getHwId } = require("./electron/hwidUtil");
+const { appName, appVersion } = require("./electron/appInfo");
+const { updateAvailable, releasesUrl } = require("./electron/updateCheck");
 
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
 let mainWindow;
+let osuCheckInterval;
+let userOsuPath;
+let osuLoaded = false;
+let patch = false;
+let lastOsuStatus = "";
+let lastStatusUpdate;
+
+let currentUser = undefined;
 
 function isDev() {
   return !app.isPackaged;
 }
 
+function startOsuStatus() {
+  osuCheckInterval = setInterval(async () => {
+    const osuWindowTitle = windowName.getWindowText("osu!.exe");
+    if (osuWindowTitle.length < 0) {
+      return;
+    }
+    const firstInstance = osuWindowTitle[0];
+    if (firstInstance) {
+      if (!osuLoaded) {
+        osuLoaded = true;
+        setTimeout(() => {
+          if (patch) {
+            const patcherExecuteable = path.join(
+              userOsuPath,
+              "EZPPLauncher",
+              "patcher.exe",
+            );
+            if (existsSync(patcherExecuteable)) {
+              runFileDetached(userOsuPath, patcherExecuteable);
+            }
+          }
+        }, 3000);
+      }
+
+      const windowTitle = firstInstance.processTitle;
+      lastOsuStatus = windowTitle;
+      const currentStatusRequest = await fetch(
+        "https://api.ez-pp.farm/get_player_status?name=" + currentUser.username,
+      );
+      const currentStatus = await currentStatusRequest.json();
+
+      if (!("player_status" in currentStatus)) return;
+      if (!("status" in currentStatus.player_status)) return;
+
+      let details = "Idle...";
+      let infoText = currentStatus.player_status.status.info_text.length > 0
+        ? currentStatus.player_status.status.info_text
+        : "  ";
+
+      switch (currentStatus.player_status.status.action) {
+        case 1:
+          details = "AFK...";
+          infoText = "  ";
+          break;
+        case 2:
+          details = "Playing...";
+          break;
+        case 3:
+          details = "Editing...";
+          break;
+        case 4:
+          details = "Modding...";
+          break;
+        case 5:
+          details = "Multiplayer: Selecting a Beatmap...";
+          infoText = "  ";
+          break;
+        case 6:
+          details = "Watching...";
+          break;
+        case 8:
+          details = "Testing...";
+          break;
+        case 9:
+          details = "Submitting...";
+          break;
+        case 11:
+          details = "Multiplayer: Idle...";
+          infoText = "  ";
+          break;
+        case 12:
+          details = "Multiplayer: Playing...";
+          break;
+        case 13:
+          details = "Browsing osu!direct...";
+          infoText = "  ";
+          break;
+      }
+
+      richPresence.updateStatus({
+        details,
+        state: infoText,
+      });
+
+      richPresence.update();
+    }
+  }, 2500);
+}
+
+function stopOsuStatus() {
+  clearInterval(osuCheckInterval);
+}
+
+function registerIPCPipes() {
+  ipcMain.handle("ezpplauncher:login", async (e, args) => {
+    const hwid = getHwId();
+    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",
+        },
+      });
+
+      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", cryptUtil.encrypt(args.password, hwid));
+          }
+          currentUser = args;
+          config.remove("guest");
+        }
+        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.",
+      };
+    }
+  });
+
+  ipcMain.handle("ezpplauncher:autologin-active", async (e) => {
+    const username = config.get("username");
+    const password = config.get("password");
+    const guest = config.get("guest");
+    if (guest != undefined) return true;
+    return username != undefined && password != undefined;
+  });
+
+  ipcMain.handle("ezpplauncher:autologin", async (e) => {
+    const hwid = getHwId();
+    const username = config.get("username");
+    const guest = config.get("guest");
+    if (guest) return { code: 200, message: "Login as guest", guest: true };
+    if (username == undefined) {
+      return { code: 200, message: "No autologin" };
+    }
+    const password = cryptUtil.decrypt(config.get("password"), hwid);
+    if (username == undefined || password == undefined) {
+      return { code: 200, message: "No autologin" };
+    }
+    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",
+        },
+      });
+
+      clearTimeout(timeoutId);
+
+      if (fetchResult.ok) {
+        const result = await fetchResult.json();
+        if ("user" in result) {
+          currentUser = {
+            username: username,
+            password: password,
+          };
+        }
+        return result;
+      } else {
+        config.remove("password");
+      }
+      return {
+        code: 500,
+        message: "Something went wrong while logging you in.",
+      };
+    } catch (err) {
+      return {
+        code: 500,
+        message: "Something went wrong while logging you in.",
+      };
+    }
+  });
+
+  ipcMain.handle("ezpplauncher:guestlogin", (e) => {
+    config.remove("username");
+    config.remove("password");
+    config.set("guest", "1");
+    currentUser = undefined;
+  });
+
+  ipcMain.handle("ezpplauncher:logout", (e) => {
+    config.remove("username");
+    config.remove("password");
+    config.remove("guest");
+    currentUser = undefined;
+    return true;
+  });
+
+  ipcMain.handle("ezpplauncher:settings", async (e) => {
+    return config.all();
+  });
+
+  ipcMain.handle("ezpplauncher:setting-update", async (e, args) => {
+    for (const key of Object.keys(args)) {
+      const value = args[key];
+
+      if (key == "presence") {
+        if (!value) richPresence.disconnect();
+        else richPresence.connect();
+      }
+
+      if (typeof value == "boolean") {
+        config.set(key, value ? "true" : "false");
+      } else {
+        config.set(key, value);
+      }
+    }
+  });
+
+  ipcMain.handle("ezpplauncher:detect-folder", async (e) => {
+    const detected = await findOsuInstallation();
+    if (detected && await isValidOsuFolder(detected)) {
+      mainWindow.webContents.send("ezpplauncher:alert", {
+        type: "success",
+        message: "osu! path successfully saved!",
+      });
+      config.set("osuPath", detected);
+    }
+    return config.all();
+  });
+
+  ipcMain.handle("ezpplauncher:set-folder", async (e) => {
+    const folderResult = await dialog.showOpenDialog({
+      title: "Select osu! installation directory",
+      properties: ["openDirectory"],
+    });
+    if (!folderResult.canceled) {
+      const folder = folderResult.filePaths[0];
+      if (await isValidOsuFolder(folder)) {
+        config.set("osuPath", folder);
+        mainWindow.webContents.send("ezpplauncher:alert", {
+          type: "success",
+          message: "osu! path successfully saved!",
+        });
+      } else {
+        mainWindow.webContents.send("ezpplauncher:alert", {
+          type: "error",
+          message: "invalid osu! path!",
+        });
+      }
+    }
+    return config.all();
+  });
+
+  ipcMain.handle("ezpplauncher:exitAndUpdate", async (e) => {
+    await shell.openExternal(releasesUrl);
+    app.exit();
+  });
+
+  ipcMain.handle("ezpplauncher:launch", async (e) => {
+    const configPatch = config.get("patch");
+    patch = configPatch != undefined ? configPatch == "true" : true;
+    mainWindow.webContents.send("ezpplauncher:launchstatus", {
+      status: "Checking osu! directory...",
+    });
+    await new Promise((res) => setTimeout(res, 1000));
+    const osuPath = config.get("osuPath");
+    userOsuPath = osuPath;
+    if (osuPath == undefined) {
+      mainWindow.webContents.send("ezpplauncher:launchabort");
+      mainWindow.webContents.send("ezpplauncher:alert", {
+        type: "error",
+        message: "osu! path not set!",
+      });
+      return;
+    }
+    if (!(await isValidOsuFolder(osuPath))) {
+      mainWindow.webContents.send("ezpplauncher:launchabort");
+      mainWindow.webContents.send("ezpplauncher:alert", {
+        type: "error",
+        message: "invalid osu! path!",
+      });
+      return;
+    }
+    mainWindow.webContents.send("ezpplauncher:launchstatus", {
+      status: "Checking for osu! updates...",
+    });
+    await new Promise((res) => setTimeout(res, 1000));
+    const releaseStream = await getGlobalConfig(osuPath).get("_ReleaseStream");
+    const latestFiles = await getUpdateFiles(releaseStream);
+    const uiFiles = await getUIFiles(osuPath);
+    const updateFiles = await getFilesThatNeedUpdate(osuPath, latestFiles);
+    if (uiFiles.length > 0) {
+      const uiDownloader = downloadUIFiles(osuPath, uiFiles);
+      let errored = false;
+      uiDownloader.eventEmitter.on("error", (data) => {
+        const filename = data.fileName;
+        errored = true;
+        mainWindow.webContents.send("ezpplauncher:alert", {
+          type: "error",
+          message:
+            `Failed to download/replace ${filename}!\nMaybe try to restart EZPPLauncher.`,
+        });
+      });
+      uiDownloader.eventEmitter.on("data", (data) => {
+        mainWindow.webContents.send("ezpplauncher:launchprogress", {
+          progress: Math.ceil(data.progress),
+        });
+        mainWindow.webContents.send("ezpplauncher:launchstatus", {
+          status: `Downloading ${data.fileName}(${formatBytes(data.loaded)}/${
+            formatBytes(data.total)
+          })...`,
+        });
+      });
+      await uiDownloader.startDownload();
+      mainWindow.webContents.send("ezpplauncher:launchprogress", {
+        progress: -1,
+      });
+      if (errored) {
+        mainWindow.webContents.send("ezpplauncher:launchabort");
+        return;
+      }
+    }
+    if (updateFiles.length > 0) {
+      const updateDownloader = downloadUpdateFiles(osuPath, updateFiles);
+      let errored = false;
+      updateDownloader.eventEmitter.on("error", (data) => {
+        const filename = data.fileName;
+        errored = true;
+        mainWindow.webContents.send("ezpplauncher:alert", {
+          type: "error",
+          message:
+            `Failed to download/replace ${filename}!\nMaybe try to restart EZPPLauncher.`,
+        });
+      });
+      updateDownloader.eventEmitter.on("data", (data) => {
+        mainWindow.webContents.send("ezpplauncher:launchprogress", {
+          progress: Math.ceil(data.progress),
+        });
+        mainWindow.webContents.send("ezpplauncher:launchstatus", {
+          status: `Downloading ${data.fileName}(${formatBytes(data.loaded)}/${
+            formatBytes(data.total)
+          })...`,
+        });
+      });
+      await updateDownloader.startDownload();
+      mainWindow.webContents.send("ezpplauncher:launchprogress", {
+        progress: -1,
+      });
+      if (errored) {
+        mainWindow.webContents.send("ezpplauncher:launchabort");
+        return;
+      }
+      mainWindow.webContents.send("ezpplauncher:launchstatus", {
+        status: "osu! is now up to date!",
+      });
+      await new Promise((res) => setTimeout(res, 1000));
+    } else {
+      mainWindow.webContents.send("ezpplauncher:launchstatus", {
+        status: "osu! is up to date!",
+      });
+      await new Promise((res) => setTimeout(res, 1000));
+    }
+
+    if (patch) {
+      mainWindow.webContents.send("ezpplauncher:launchstatus", {
+        status: "Looking for patcher updates...",
+      });
+      await new Promise((res) => setTimeout(res, 1000));
+      const patchFiles = await getPatcherUpdates(osuPath);
+      if (patchFiles.length > 0) {
+        const patcherDownloader = downloadPatcherUpdates(osuPath, patchFiles);
+        let errored = false;
+        patcherDownloader.eventEmitter.on("error", (data) => {
+          const filename = data.fileName;
+          errored = true;
+          mainWindow.webContents.send("ezpplauncher:alert", {
+            type: "error",
+            message:
+              `Failed to download/replace ${filename}!\nMaybe try to restart EZPPLauncher.`,
+          });
+        });
+        patcherDownloader.eventEmitter.on("data", (data) => {
+          mainWindow.webContents.send("ezpplauncher:launchprogress", {
+            progress: Math.ceil(data.progress),
+          });
+          mainWindow.webContents.send("ezpplauncher:launchstatus", {
+            status: `Downloading ${data.fileName}(${formatBytes(data.loaded)}/${
+              formatBytes(data.total)
+            })...`,
+          });
+        });
+        await patcherDownloader.startDownload();
+        mainWindow.webContents.send("ezpplauncher:launchprogress", {
+          progress: -1,
+        });
+        if (errored) {
+          mainWindow.webContents.send("ezpplauncher:launchabort");
+          return;
+        }
+        mainWindow.webContents.send("ezpplauncher:launchstatus", {
+          status: "Patcher is now up to date!",
+        });
+      } else {
+        mainWindow.webContents.send("ezpplauncher:launchstatus", {
+          status: "Patcher is up to date!",
+        });
+      }
+      await new Promise((res) => setTimeout(res, 1000));
+    }
+
+    mainWindow.webContents.send("ezpplauncher:launchstatus", {
+      status: "Preparing launch...",
+    });
+    await updateOsuConfigHashes(osuPath);
+    await replaceUIFile(osuPath, false);
+
+    const userConfig = getUserConfig(osuPath);
+    richPresence.updateVersion(await userConfig.get("LastVersion"));
+    richPresence.update();
+    await userConfig.set("ShowInterfaceDuringRelax", "1");
+    if (currentUser) {
+      await userConfig.set("CredentialEndpoint", "ez-pp.farm");
+      await userConfig.set("SavePassword", "1");
+      await userConfig.set("SaveUsername", "1");
+      await userConfig.set("Username", currentUser.username);
+      await userConfig.set("Password", currentUser.password);
+    }
+
+    mainWindow.webContents.send("ezpplauncher:launchstatus", {
+      status: "Launching osu!...",
+    });
+
+    const onExitHook = () => {
+      mainWindow.show();
+      mainWindow.focus();
+      stopOsuStatus();
+      richPresence.updateVersion();
+      richPresence.updateStatus({
+        state: "Idle in Launcher...",
+        details: undefined,
+      });
+      richPresence.update();
+      mainWindow.webContents.send("ezpplauncher:launchstatus", {
+        status: "Waiting for cleanup...",
+      });
+
+      setTimeout(async () => {
+        await replaceUIFile(osuPath, true);
+        mainWindow.webContents.send("ezpplauncher:launchabort");
+        osuLoaded = false;
+      }, 5000);
+    };
+    runOsuWithDevServer(osuPath, "ez-pp.farm", onExitHook);
+    mainWindow.hide();
+    startOsuStatus();
+
+    /* mainWindow.webContents.send("ezpplauncher:launchprogress", {
+      progress: 0,
+    });
+    mainWindow.webContents.send("ezpplauncher:launchprogress", {
+      progress: 100,
+    }); */
+    return true;
+  });
+}
+
 function createWindow() {
   setupTitlebar();
 
   // Create the browser window.
   mainWindow = new BrowserWindow({
-    width: 800,
+    width: 550,
-    height: 600,
+    height: 350,
     resizable: false,
     frame: false,
     titleBarStyle: "hidden",
-    titleBarOverlay: true,
+    title: `${appName} ${appVersion}`,
     webPreferences: {
       nodeIntegration: true,
       preload: path.join(__dirname, "preload.js"),
@@ -51,12 +569,24 @@ function createWindow() {
     loadURL(mainWindow);
   }
 
+  registerIPCPipes();
+
+  const presenceEnabled = config.get("presence");
+  if (presenceEnabled == undefined) {
+    richPresence.connect();
+  } else {
+    if (presenceEnabled == "true") {
+      richPresence.connect();
+    }
+  }
   // Uncomment the following line of code when app is ready to be packaged.
   // loadURL(mainWindow);
 
   // Open the DevTools and also disable Electron Security Warning.
-  // process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = true;
+  if (isDev()) {
-  // mainWindow.webContents.openDevTools();
+    process.env["ELECTRON_DISABLE_SECURITY_WARNINGS"] = true;
+    mainWindow.webContents.openDevTools({ mode: "detach" });
+  }
 
   // Emitted when the window is closed.
   mainWindow.on("closed", function () {
@@ -68,8 +598,13 @@ function createWindow() {
 
   // Emitted when the window is ready to be shown
   // This helps in showing the window gracefully.
-  mainWindow.once("ready-to-show", () => {
+  mainWindow.once("ready-to-show", async () => {
+    const updateInfo = await updateAvailable();
+    if (updateInfo.update) {
+      mainWindow.webContents.send("ezpplauncher:update", updateInfo.release);
+    }
     mainWindow.show();
+    mainWindow.focus();
   });
 }
 
@@ -79,9 +614,10 @@ function createWindow() {
 app.on("ready", createWindow);
 
 // Quit when all windows are closed.
-app.on("window-all-closed", function () {
+app.on("window-all-closed", async function () {
   // On macOS it is common for applications and their menu bar
   // to stay active until the user quits explicitly with Cmd + Q
+  await richPresence.disconnect();
   if (process.platform !== "darwin") app.quit();
 });
 

package.json

@@ -12,7 +12,9 @@
     "files": [
       "public/**/*",
       "main.js",
-      "preload.js"
+      "preload.js",
+      "electron/*",
+      "electron/**/*"
     ],
     "win": {
       "target": [
@@ -24,19 +26,34 @@
   },
   "scripts": {
     "build": "rollup -c --bundleConfigAsCjs",
+    "rebuild": "electron-rebuild",
     "dev": "rollup -c -w --bundleConfigAsCjs",
     "start": "sirv public --no-clear",
     "electron": "wait-on http://localhost:8080 && electron .",
     "electron-dev": "concurrently \"yarn run dev\" \"yarn run electron\"",
-    "preelectron-pack": "yarn run build",
+    "preelectron-pack": "electron-rebuild && yarn run build",
     "electron-pack": "electron-builder",
+    "postinstall": "electron-builder install-app-deps",
     "check": "svelte-check --tsconfig ./tsconfig.json"
   },
   "dependencies": {
+    "@types/better-sqlite3": "^7.6.8",
+    "axios": "^1.6.5",
+    "better-sqlite3": "^9.2.2",
+    "crypto": "^1.0.1",
+    "crypto-js": "^4.2.0",
     "custom-electron-titlebar": "^4.2.7",
-    "electron-serve": "^1.1.0"
+    "discord-auto-rpc": "^1.0.17",
+    "electron-serve": "^1.1.0",
+    "get-window-by-name": "^2.0.0",
+    "regedit-rs": "^1.0.2",
+    "semver": "^7.5.4",
+    "svelte-french-toast": "^1.2.0",
+    "sweetalert2": "^11.10.3",
+    "systeminformation": "^5.21.22"
   },
   "devDependencies": {
+    "@electron/rebuild": "^3.5.0",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-image": "^3.0.3",
     "@rollup/plugin-node-resolve": "^15.2.3",
@@ -46,17 +63,20 @@
     "@tsconfig/svelte": "^5.0.2",
     "autoprefixer": "^10.4.16",
     "concurrently": "^8.2.2",
-    "electron": "^21.2.0",
+    "electron": "^28.1.2",
-    "electron-builder": "^23.6.0",
+    "electron-builder": "^24.9.1",
     "flowbite": "^2.2.1",
     "flowbite-svelte": "^0.44.21",
+    "flowbite-svelte-icons": "^0.4.5",
     "postcss": "^8.4.32",
     "postcss-load-config": "^5.0.2",
     "rollup": "^4.9.2",
     "rollup-plugin-css-only": "^4.5.2",
     "rollup-plugin-livereload": "^2.0.5",
     "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-progress": "^1.1.2",
     "rollup-plugin-svelte": "^7.1.6",
+    "rollup-plugin-unused": "^0.1.1",
     "sirv-cli": "^2.0.2",
     "svelte": "^4.2.8",
     "svelte-check": "^3.6.2",

preload.js

@@ -1,14 +1,117 @@
 const { Titlebar, TitlebarColor } = require("custom-electron-titlebar");
+const { ipcRenderer } = require("electron");
+const { appName, appVersion } = require("./electron/appInfo");
 
 window.addEventListener("DOMContentLoaded", () => {
   const titlebar = new Titlebar({
     backgroundColor: TitlebarColor.fromHex("#202020"),
     itemBackgroundColor: TitlebarColor.fromHex("#202020"),
     menu: null,
-    
     enableMnemonics: false,
     maximizable: false,
   });
-
+  titlebar.updateTitle(`${appName} ${appVersion}`);
-  //titlebar.updateTitle(`${appInfo.appName} ${appInfo.appVersion}`);
+});
+
+window.addEventListener("login-attempt", async (e) => {
+  const loginResult = await ipcRenderer.invoke("ezpplauncher:login", {
+    username: e.detail.username,
+    password: e.detail.password,
+    saveCredentials: e.detail.saveCredentials,
+  });
+  window.dispatchEvent(
+    new CustomEvent("login-result", { detail: loginResult }),
+  );
+});
+
+window.addEventListener("autologin-active", async (e) => {
+  const autologin = await ipcRenderer.invoke(
+    "ezpplauncher:autologin-active",
+  );
+  window.dispatchEvent(
+    new CustomEvent("autologin-result", { detail: autologin }),
+  );
+});
+
+window.addEventListener("autologin-attempt", async () => {
+  const loginResult = await ipcRenderer.invoke("ezpplauncher:autologin");
+  window.dispatchEvent(
+    new CustomEvent("login-result", { detail: loginResult }),
+  );
+});
+
+window.addEventListener("logout", async () => {
+  await ipcRenderer.invoke("ezpplauncher:logout");
+});
+
+window.addEventListener("guest-login", async () => {
+  await ipcRenderer.invoke("ezpplauncher:guestlogin");
+});
+
+window.addEventListener("launch", async (e) => {
+  await ipcRenderer.invoke("ezpplauncher:launch", e.detail);
+});
+
+window.addEventListener("settings-get", async () => {
+  const settings = await ipcRenderer.invoke("ezpplauncher:settings");
+  window.dispatchEvent(
+    new CustomEvent("settings-result", { detail: settings }),
+  );
+});
+
+window.addEventListener("setting-update", async (e) => {
+  const detail = e.detail;
+  await ipcRenderer.invoke("ezpplauncher:setting-update", detail);
+});
+
+window.addEventListener("folder-auto", async (e) => {
+  const result = await ipcRenderer.invoke("ezpplauncher:detect-folder");
+  window.dispatchEvent(
+    new CustomEvent("settings-result", { detail: result }),
+  );
+});
+
+window.addEventListener("folder-set", async (e) => {
+  const result = await ipcRenderer.invoke("ezpplauncher:set-folder");
+  window.dispatchEvent(
+    new CustomEvent("settings-result", { detail: result }),
+  );
+});
+
+window.addEventListener("settings-set", async (e) => {
+  await ipcRenderer.invoke("ezpplauncher:settings-set", e.detail);
+});
+
+window.addEventListener("updateExit", async () => {
+  await ipcRenderer.invoke("ezpplauncher:exitAndUpdate");
+});
+
+ipcRenderer.addListener("ezpplauncher:launchabort", (e, args) => {
+  window.dispatchEvent(
+    new CustomEvent("launch-abort"),
+  );
+});
+
+ipcRenderer.addListener("ezpplauncher:alert", (e, args) => {
+  window.dispatchEvent(
+    new CustomEvent("alert", { detail: args }),
+  );
+});
+
+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 }),
+  );
+});
+
+ipcRenderer.addListener("ezpplauncher:update", (e, args) => {
+  window.dispatchEvent(
+    new CustomEvent("update", { detail: args }),
+  );
 });

public/index.html

@@ -1,20 +1,22 @@
 <!DOCTYPE html>
-<html lang="en" data-theme="dark" class="dark">
+<html lang="en">
-<head>
+  <head>
-	<meta charset='utf-8'>
+    <meta charset="utf-8" />
-	<meta name='viewport' content='width=device-width,initial-scale=1'>
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
 
-	<title>EZPPLauncher</title>
+    <title>EZPPLauncher</title>
-	<link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
-	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-	<link href="https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
+    <link
-	<link rel='icon' type='image/png' href='/favicon.png'>
+      href="https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
-	<link rel='stylesheet' href='/global.css'>
+      rel="stylesheet"
-	<link rel='stylesheet' href='/build/bundle.css'>
+    />
+    <link rel="icon" type="image/png" href="/favicon.png" />
+    <link rel="stylesheet" href="/global.css" />
+    <link rel="stylesheet" href="/build/bundle.css" />
 
-	<script defer src='/build/bundle.js'></script>
+    <script defer src="/build/bundle.js"></script>
-</head>
+  </head>
 
-<body class="bg-gray-900">
+  <body class="select-none bg-gray-100 dark:bg-gray-900 overflow-hidden"></body>
-</body>
 </html>

rollup.config.js

@@ -8,6 +8,7 @@ import postcss from "rollup-plugin-postcss";
 import image from "@rollup/plugin-image";
 import sveltePreprocess from "svelte-preprocess";
 import typescript from "@rollup/plugin-typescript";
+import progress from "rollup-plugin-progress";
 
 const production = !process.env.ROLLUP_WATCH;
 
@@ -46,6 +47,7 @@ export default {
     file: "public/build/bundle.js",
   },
   plugins: [
+    !production && progress({ clearLine: true }),
     svelte({
       preprocess: sveltePreprocess({ sourceMap: !production }),
       compilerOptions: {
@@ -57,7 +59,7 @@ export default {
     // we'll extract any component CSS out into
     // a separate file - better for performance
     css({ output: "bundle.css" }),
-    postcss(),
+    postcss({ sourceMap: "inline" }),
 
     // If you have external dependencies installed from
     // npm, you'll most likely need these plugins. In
@@ -68,11 +70,11 @@ export default {
       browser: true,
       dedupe: ["svelte"],
     }),
-    commonjs(),
     typescript({
       sourceMap: !production,
       inlineSources: !production,
     }),
+    commonjs(),
     image(),
 
     // In dev mode, call `npm run start` once

src/App.svelte

@@ -5,67 +5,218 @@
     DropdownItem,
     DropdownHeader,
     DropdownDivider,
+    Button,
+    Indicator,
   } from "flowbite-svelte";
+  import {
+    ArrowLeftSolid,
+    ArrowRightFromBracketSolid,
+    ArrowRightToBracketSolid,
+    HeartSolid,
+    UserSettingsSolid,
+  } from "flowbite-svelte-icons";
   import ezppLogo from "../public/favicon.png";
+  import {
+    currentPage,
+    currentUser,
+    launching,
+    launchPercentage,
+    launchStatus,
+  } from "./storage/localStore";
+  import { Page } from "./consts/pages";
+  import Login from "./pages/Login.svelte";
+  import Launch from "./pages/Launch.svelte";
+  import toast, { Toaster } from "svelte-french-toast";
+  import type { User } from "./types/user";
+  import Settings from "./pages/Settings.svelte";
+  import Swal from "sweetalert2";
+
+  let user: User | undefined = undefined;
+  let loggedIn = false;
+
+  let updateInfo: Record<string, unknown>;
+
+  currentUser.subscribe((newUser) => {
+    loggedIn = newUser != undefined;
+    user = newUser;
+  });
+
+  const logout = () => {
+    window.dispatchEvent(new CustomEvent("logout"));
+    currentUser.set(undefined);
+    currentPage.set(Page.Login);
+    toast.success("Successfully logged out!", {
+      position: "bottom-center",
+      className:
+        "dark:!bg-gray-800 border-1 dark:!border-gray-700 dark:!text-gray-100",
+      duration: 2000,
+    });
+  };
+
+  window.addEventListener("update", async (e) => {
+    const update = (e as CustomEvent).detail;
+    await Swal.fire({
+      html: `EZPPLauncher ${update.tag_name} is now available!<br>Click the Button bellow to download the latest release!`,
+      title: "It's your lucky day!",
+      allowOutsideClick: false,
+      allowEscapeKey: false,
+      allowEnterKey: false,
+      confirmButtonText: "Thanks!",
+    });
+    window.dispatchEvent(new CustomEvent("updateExit"));
+  });
+
+  window.addEventListener("launchStatusUpdate", (e) => {
+    const status = (e as CustomEvent).detail.status;
+    launchStatus.set(status);
+  });
+
+  window.addEventListener("launchProgressUpdate", (e) => {
+    const progress = (e as CustomEvent).detail.progress;
+    launchPercentage.set(progress);
+  });
+
+  window.addEventListener("launch-abort", () => {
+    launchPercentage.set(-1);
+    launchStatus.set("");
+    launching.set(false);
+  });
+
+  window.addEventListener("alert", (e) => {
+    console.log((e as CustomEvent).detail);
+    const toastMessage = (e as CustomEvent).detail;
+    switch (toastMessage.type) {
+      case "success": {
+        toast.success(toastMessage.message, {
+          position: "bottom-center",
+          className:
+            "dark:!bg-gray-800 border-1 dark:!border-gray-700 dark:!text-gray-100",
+          duration: 2000,
+        });
+        break;
+      }
+      case "error": {
+        toast.error(toastMessage.message, {
+          position: "bottom-center",
+          className:
+            "dark:!bg-gray-800 border-1 dark:!border-gray-700 dark:!text-gray-100",
+          duration: 4000,
+        });
+        break;
+      }
+      default: {
+        toast(toastMessage.message, {
+          icon: "ℹ",
+          position: "bottom-center",
+          className:
+            "dark:!bg-gray-800 border-1 dark:!border-gray-700 dark:!text-gray-100",
+          duration: 1500,
+        });
+      }
+    }
+  });
 </script>
 
-<div class="p-2 flex flex-row justify-between items-center">
+<Toaster></Toaster>
-  <div class="flex flex-row items-center">
+
-    <img src={ezppLogo} class="w-12 h-12 mr-2" />
+{#if !updateInfo}
-    <span class="text-gray-100 text-xl font-extralight">EZPPLauncher</span>
+  <div class="p-2 flex flex-row justify-between items-center">
-  </div>
+    <div class="flex flex-row items-center animate-fadeIn opacity-0">
-  <div class="w-fill cursor-pointer flex md:order-2">
+      {#if $currentPage == Page.Settings}
-    <Avatar
+        <Button
-      class="rounded-lg hover:ring hover:ring-4 hover:ring-gray-800"
+          class="dark:active:!bg-gray-900 !ring-0 w-10 h-10 mr-1 rounded-lg animate-sideIn opacity-0 active:scale-95 transition-transform duration-75"
-      src="https://a.ez-pp.farm/1001"
+          color="light"
-      id="avatar-menu"
+          on:click={() => {
-    />
+            currentPage.set(Page.Launch);
-  </div>
+          }}
-  <Dropdown placement="bottom" triggeredBy="#avatar-menu">
+        >
-    <DropdownHeader>
+          <ArrowLeftSolid class="outline-none border-none" size="sm" />
-      <span class="block text-sm">Quetzalcoatl</span>
+        </Button>
-      <span class="block truncate text-sm font-medium text-gray-200"
+      {/if}
-        >me@horizonco.de</span
+      <img src={ezppLogo} alt="EZPPFarm Logo" class="w-12 h-12 mr-2" />
+      <span class="text-gray-700 dark:text-gray-100 text-xl font-extralight">
+        EZPPLauncher
+      </span>
+    </div>
+    {#if $currentPage == Page.Launch}
+      <div
+        class="flex flex-row gap-2 w-fill cursor-pointer md:order-2 animate-lsideIn opacity-0"
       >
-    </DropdownHeader>
+        <Avatar
-    <DropdownItem
+          class="rounded-lg border dark:border-gray-700 hover:ring-4 hover:ring-gray-200 dark:hover:ring-gray-800"
-      class="border-0 !bg-gray-700 active:!bg-gray-600 hover:!bg-gray-800 transition-colors"
+          src={loggedIn
-      >Profile</DropdownItem
+            ? "https://a.ez-pp.farm/" + user?.id
-    >
+            : "https://a.ez-pp.farm/0"}
-    <DropdownItem
+          id="avatar-menu"
-      class="border-0 !bg-gray-700 active:!bg-gray-600 hover:!bg-gray-800 transition-colors"
+        />
-      >Settings</DropdownItem
+        <!-- TODO: if user has donator, display heart indicator-->
-    >
+        {#if $currentUser && $currentUser.donor}
-    <DropdownDivider />
+          <Indicator
-    <DropdownItem
+            class="pointer-events-none"
-      class="border-0 !bg-gray-700 active:!bg-gray-600 hover:!bg-gray-800 transition-colors"
+            color="red"
-      >Sign out</DropdownItem
+            border
-    >
+            size="xl"
-  </Dropdown>
+            placement="top-right"
-</div>
+          >
+            <span class="text-red-300 text-xs font-bold">
+              <HeartSolid class="select-none pointer-events-none" size="xs" />
+            </span>
+          </Indicator>
+        {/if}
+      </div>
+      <Dropdown placement="bottom-start" triggeredBy="#avatar-menu">
+        <DropdownHeader>
+          <span class="block text-sm">{loggedIn ? user?.name : "Guest"}</span>
+          <span
+            class="block truncate text-sm font-medium text-gray-500 dark:text-gray-200"
+          >
+            {loggedIn ? user?.email : "Please log in!"}
+          </span>
+        </DropdownHeader>
+        <DropdownItem
+          class="flex flex-row gap-2 border-0 dark:!bg-gray-700 dark:active:!bg-gray-900 dark:hover:!bg-gray-800 transition-colors"
+          on:click={() => {
+            if (!$launching) currentPage.set(Page.Settings);
+          }}
+        >
+          <UserSettingsSolid class="select-none outline-none border-none" />
+          Settings
+        </DropdownItem>
+        <DropdownDivider />
+        {#if loggedIn}
+          <DropdownItem
+            class="flex flex-row gap-2 border-0 dark:!bg-gray-700 dark:active:!bg-gray-900 dark:hover:!bg-gray-800 transition-colors"
+            on:click={() => {
+              if (!$launching) logout();
+            }}
+          >
+            <ArrowRightFromBracketSolid
+              class="select-none outline-none border-none"
+            />
+            Sign out
+          </DropdownItem>
+        {:else}
+          <DropdownItem
+            class="flex flex-row gap-2 border-0 dark:!bg-gray-700 dark:active:!bg-gray-900 dark:hover:!bg-gray-800 transition-colors"
+            on:click={() => {
+              if (!$launching) currentPage.set(Page.Login);
+            }}
+          >
+            <ArrowRightToBracketSolid
+              class="select-none outline-none border-none"
+            />
+            Login
+          </DropdownItem>
+        {/if}
+      </Dropdown>
+    {/if}
+  </div>
 
-<main class="p-1">
+  {#if $currentPage == Page.Login}
-  <div class="container border border-gray-700 rounded-lg"></div>
+    <Login />
-</main>
+  {:else if $currentPage == Page.Settings}
-
+    <Settings />
-<style>
+  {:else}
-  .container {
+    <Launch />
-    text-align: center;
+  {/if}
-    padding: 1em;
+{/if}
-    margin: 0 auto;
-  }
-  h1 {
-    font-size: 2rem;
-    margin: 0;
-    font-weight: 300;
-    font-style: normal;
-    color: #ccc;
-    text-transform: uppercase;
-    letter-spacing: 0.1em;
-    text-shadow: 0 0 1px #000;
-    text-align: center;
-    padding: 0.5em 0;
-    border-bottom: 1px solid #353535;
-    margin-bottom: 1.5rem;
-  }
-</style>

src/app.pcss

@@ -5,4 +5,81 @@
 
 * {
   font-family: "Prompt";
+  -webkit-user-select: none !important;
+  user-select: none !important;
+}
+
+html .cet-titlebar {
+  background-color: #ececec !important;
+  color: #202020 !important;
+}
+
+html .cet-titlebar .cet-control-icon svg {
+  fill: #000;
+}
+
+.cet-titlebar .cet-icon {
+  display: none;
+}
+
+.cet-container {
+  overflow: hidden !important;
+}
+
+.indeterminate {
+  background-image: repeating-linear-gradient(
+    90deg,
+    rgb(217 5 89) -1%,
+    rgb(217 5 89) 10%,
+    #d3d3d3 10%,
+    #d3d3d3 90%
+  );
+  background-size: 200%;
+  background-position-x: 15%;
+  animation: progress-loading 5s ease-in-out infinite;
+}
+
+@media (prefers-color-scheme: dark) {
+  .indeterminate {
+    background-image: repeating-linear-gradient(
+      90deg,
+      rgb(217 5 89) -1%,
+      rgb(217 5 89) 10%,
+      #535353 10%,
+      #535353 90%
+    );
+  }
+
+  html .cet-titlebar .cet-control-icon svg {
+    fill: #fff;
+  }
+
+  html .cet-titlebar {
+    background-color: #202020 !important;
+    color: #ececec !important;
+  }
+
+  .swal2-container {
+    background: #202020 !important;
+  }
+
+  .swal2-container .swal2-popup {
+    background: #323232 !important;
+    color: #fff !important;
+  }
+}
+
+.animatedProgress div {
+  transition: width 0.35s cubic-bezier(0.65, -0.02, 0.31, 1.01);
+}
+
+.noselect {
+  -webkit-user-select: none !important;
+  user-select: none !important;
+}
+
+@keyframes progress-loading {
+  50% {
+    background-position-x: -115%;
+  }
 }

src/consts/pages.ts

@@ -0,0 +1,5 @@
+export enum Page {
+  Login = 0,
+  Launch = 1,
+  Settings = 2,
+}

src/lib/Progressbar.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+  import { cubicOut } from "svelte/easing";
+  import { tweened } from "svelte/motion";
+  import { twMerge, twJoin } from "tailwind-merge";
+  import { clamp } from "../util/mathUtil";
+
+  export let progress: number = 45;
+  export let precision = 2;
+  export let tweenDuration = 400;
+  export let animate = false;
+  export let size = "h-2.5";
+  export let labelInside = false;
+  export let labelOutside = "";
+  export let easing = cubicOut;
+  export let color = "primary";
+  export let indeterminate = false;
+  export let labelInsideClass =
+    "text-primary-100 text-xs font-medium text-center p-0.5 leading-none rounded-full";
+  export let divClass = "w-full bg-gray-200 rounded-full dark:bg-gray-700";
+
+  const barColors: Record<string, string> = {
+    primary: "bg-primary-600",
+    blue: "bg-blue-600",
+    gray: "bg-gray-600 dark:bg-gray-300",
+    red: "bg-red-600 dark:bg-red-500",
+    green: "bg-green-600 dark:bg-green-500",
+    yellow: "bg-yellow-400",
+    purple: "bg-purple-600 dark:bg-purple-500",
+    indigo: "bg-indigo-600 dark:bg-indigo-500",
+  };
+
+  let _progress = tweened(0, {
+    duration: tweenDuration,
+    easing,
+  });
+
+  $: {
+    progress = clamp(Number(progress), 0, 100);
+    _progress.set(progress);
+  }
+</script>
+
+{#if labelOutside}
+  <div
+    {...$$restProps}
+    class={twMerge("flex justify-between mb-1", $$props.classLabelOutside)}
+  >
+    <span class="text-base font-medium text-blue-700 dark:text-white"
+      >{labelOutside}</span
+    >
+    <span class="text-sm font-medium text-blue-700 dark:text-white"
+      >{animate
+        ? $_progress.toFixed(precision)
+        : progress.toFixed(precision)}%</span
+    >
+  </div>
+{/if}
+
+<div class={twMerge(divClass, size, $$props.class)}>
+  {#if labelInside}
+    {#if !indeterminate}
+      <div
+        class={twJoin(labelInsideClass, barColors[color])}
+        style="width: {animate ? $_progress : progress}%"
+      >
+        {animate ? $_progress.toFixed(precision) : progress.toFixed(precision)}%
+      </div>
+    {:else}
+      <div
+        class={twJoin(
+          barColors[color],
+          size,
+          "indeterminate rounded-full animate-pulse"
+        )}
+      />
+    {/if}
+  {:else if !indeterminate}
+    <div
+      class={twJoin(barColors[color], size, "rounded-full")}
+      style="width: {animate ? $_progress : progress}%"
+    />
+  {:else}
+    <div
+      class={twJoin(
+        barColors[color],
+        size,
+        "indeterminate rounded-full animate-pulse"
+      )}
+    />
+  {/if}
+</div>

src/main.ts

@@ -1,6 +1,5 @@
 import "./app.pcss";
 import App from "./App.svelte";
-import "@fontsource/prompt";
 
 const app = new App({
   target: document.body,

src/pages/Launch.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import { Button, Checkbox } from "flowbite-svelte";
+  import Progressbar from "../lib/Progressbar.svelte";
+  import {
+    launching,
+    patch,
+    launchStatus,
+    launchPercentage,
+  } from "./../storage/localStore";
+  let progressbarFix = true;
+
+  setTimeout(() => {
+    progressbarFix = false;
+  }, 1000);
+
+  const launch = () => {
+    launching.set(true);
+    const patching = $patch;
+    window.dispatchEvent(new CustomEvent("launch", { detail: { patch: patching } }));;
+  };
+</script>
+
+<main
+  class="h-[265px] my-auto flex flex-col justify-center items-center p-5 animate-fadeIn"
+>
+  <div
+    class="container flex flex-col items-center justify-center gap-3 rounded-lg p-3"
+  >
+    <Button
+      color="light"
+      size="xl"
+      class="dark:active:!bg-gray-900 {$launching
+        ? ''
+        : 'active:scale-95 '}transition-transform duration-75"
+      disabled={$launching}
+      on:click={launch}>Launch</Button
+    >
+    <div
+      class="w-full flex flex-col justify-center items-center gap-2 mt-2 {$launching
+        ? 'animate-fadeIn '
+        : 'animate-fadeOut '}{progressbarFix ? '!opacity-0' : 'opacity-0'}"
+    >
+      <Progressbar
+        animate={true}
+        progress={$launchPercentage}
+        indeterminate={$launchPercentage == -1}
+        labelInside={true}
+        size="h-3"
+        class=""
+        labelInsideClass="bg-primary-600 drop-shadow-xl text-gray-100 text-base font-medium text-center p-1 leading-none rounded-full !text-[0.7rem] !leading-[0.45]"
+      />
+      <p class="m-0 p-0 dark:text-gray-400 font-light">{$launchStatus}</p>
+    </div>
+  </div>
+</main>

src/pages/Login.svelte

@@ -0,0 +1,220 @@
+<script lang="ts">
+  import { Input, Button, Spinner, Checkbox } from "flowbite-svelte";
+  import type { User } from "../types/user";
+  import type { Error } from "../types/error";
+  import { currentPage, currentUser, startup } from "../storage/localStore";
+  import toast from "svelte-french-toast";
+  import { Page } from "../consts/pages";
+  import { EyeSlashSolid, EyeSolid } from "flowbite-svelte-icons";
+
+  let loading = false;
+  let username = "";
+  let password = "";
+  let saveCredentials = false;
+  let showPassword = false;
+
+  const processLogin = async () => {
+    loading = true;
+    const loginPromise = new Promise<void>((res, rej) => {
+      window.addEventListener(
+        "login-result",
+        (e) => {
+          const customEvent = e as CustomEvent;
+          const resultData = customEvent.detail;
+          const wasSuccessful = "user" in resultData;
+
+          if (!wasSuccessful) {
+            /* const errorResult = resultData as Error;
+            toast.error(errorResult.message, {
+              position: "bottom-center",
+              className:
+                "dark:!bg-gray-800 border-1 dark:!border-gray-700 dark:!text-gray-100",
+              duration: 1500,
+            }); */
+            rej();
+            loading = false;
+            return;
+          }
+          const userResult = resultData.user as User;
+          currentUser.set(userResult);
+          currentPage.set(Page.Launch);
+          res();
+          toast.success(`Welcome back, ${userResult.name}!`, {
+            position: "bottom-center",
+            className:
+              "dark:!bg-gray-800 border-1 dark:!border-gray-700 dark:!text-gray-100",
+            duration: 3000,
+          });
+        },
+        { once: true }
+      );
+      window.dispatchEvent(
+        new CustomEvent("login-attempt", {
+          detail: { username, password, saveCredentials },
+        })
+      );
+    });
+    toast.promise(
+      loginPromise,
+      {
+        loading: "Logging in...",
+        success: "Successfully logged in!",
+        error: "Failed to login.",
+      },
+      {
+        position: "bottom-center",
+        className:
+          "dark:!bg-gray-800 border-1 dark:!border-gray-700 dark:!text-gray-100",
+        duration: 3000,
+      }
+    );
+  };
+
+  const tryAutoLogin = async () => {
+    loading = true;
+    const loginPromise = new Promise<void>((res, rej) => {
+      window.addEventListener(
+        "login-result",
+        (e) => {
+          const customEvent = e as CustomEvent;
+          const resultData = customEvent.detail;
+          const isGuest = "guest" in resultData;
+          const wasSuccessful = "user" in resultData;
+          console.log(resultData);
+          if (isGuest) {
+            currentPage.set(Page.Launch);
+            res();
+            toast.success(`Logged in as Guest`, {
+              position: "bottom-center",
+              className:
+                "dark:!bg-gray-800 border-1 dark:!border-gray-700 dark:!text-gray-100",
+              duration: 3000,
+            });
+            return;
+          }
+          if (!wasSuccessful) {
+            loading = false;
+            rej();
+            return;
+          }
+          const userResult = resultData.user as User;
+          currentUser.set(userResult);
+          currentPage.set(Page.Launch);
+          res();
+          toast.success(`Welcome back, ${userResult.name}!`, {
+            position: "bottom-center",
+            className:
+              "dark:!bg-gray-800 border-1 dark:!border-gray-700 dark:!text-gray-100",
+            duration: 3000,
+          });
+          loading = false;
+        },
+        { once: true }
+      );
+      window.dispatchEvent(new CustomEvent("autologin-attempt"));
+    });
+    toast.promise(
+      loginPromise,
+      {
+        loading: "Logging in...",
+        success: "Successfully logged in!",
+        error: "Failed to login.",
+      },
+      {
+        position: "bottom-center",
+        className:
+          "dark:!bg-gray-800 border-1 dark:!border-gray-700 dark:!text-gray-100",
+        duration: 3000,
+      }
+    );
+  };
+
+  const proceedAsGuest = () => {
+    window.dispatchEvent(new CustomEvent("guest-login"));
+    currentPage.set(Page.Launch);
+    toast.success(`Logged in as Guest`, {
+      position: "bottom-center",
+      className:
+        "dark:!bg-gray-800 border-1 dark:!border-gray-700 dark:!text-gray-100",
+      duration: 3000,
+    });
+  };
+
+  const shouldAutologin = async () => {
+    const shouldAutologin = await new Promise<boolean>((res) => {
+      window.addEventListener("autologin-result", (e) => {
+        const customEvent = e as CustomEvent;
+        const resultData = customEvent.detail;
+        res(resultData);
+      });
+      window.dispatchEvent(new CustomEvent("autologin-active"));
+    });
+    return shouldAutologin;
+  };
+
+  (async () => {
+    if (!$startup) {
+      startup.set(true);
+      if (await shouldAutologin()) tryAutoLogin();
+    }
+  })();
+</script>
+
+<main
+  class="h-[265px] my-auto flex flex-col justify-center items-center p-5 animate-fadeIn opacity-0"
+>
+  <div
+    class="container flex flex-col items-center justify-center gap-3 rounded-lg p-3"
+  >
+    <Input
+      type="text"
+      placeholder="Username"
+      size="md"
+      disabled={loading}
+      bind:value={username}
+    />
+    <Input
+      type={showPassword ? "text" : "password"}
+      placeholder="Password"
+      size="md"
+      disabled={loading}
+      bind:value={password}
+    >
+      <Button
+        slot="right"
+        color="none"
+        class="!outline-none !ring-0 !p-0 !m-0 !bg-transparent !border-none"
+        on:click={() => (showPassword = !showPassword)}
+      >
+        {#if showPassword}
+          <EyeSolid class="outline-none border-none" />
+        {:else}
+          <EyeSlashSolid class="outline-none border-none" />
+        {/if}
+      </Button>
+    </Input>
+    <Checkbox bind:checked={saveCredentials} disabled={loading}
+      >Save credentials</Checkbox
+    >
+    <div class="flex flex-col justify-center items-center gap-2 mt-1">
+      <Button
+        class="dark:active:!bg-gray-900  active:scale-95 transition-transform duration-75"
+        color="light"
+        disabled={loading}
+        on:click={processLogin}
+      >
+        {#if loading}
+          <Spinner size={"5"} color="white"></Spinner>
+        {:else}
+          Login
+        {/if}
+      </Button>
+      <Button
+        class="!bg-transparent font-light border-none dark:text-gray-700 hover:!bg-gray-700/15 ring-primary active:ring-2 focus:ring-2 active:scale-95 transition-transform duration-75"
+        color="none"
+        disabled={loading}
+        on:click={proceedAsGuest}>Continue without login</Button
+      >
+    </div>
+  </div>
+</main>

src/pages/Settings.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+  import { Button, ButtonGroup, Input, Toggle } from "flowbite-svelte";
+  import { FileSearchSolid, FolderSolid } from "flowbite-svelte-icons";
+  import { patch, presence } from "./../storage/localStore";
+
+  let folderPath: string = "";
+
+  window.addEventListener("settings-result", (e) => {
+    const settings: Record<string, string>[] = (e as CustomEvent).detail;
+    const osuPath = settings.find((setting) => setting.key == "osuPath");
+    const settingPatch = settings.find((setting) => setting.key == "patch");
+    const settingPresence = settings.find(
+      (setting) => setting.key == "presence"
+    );
+    patch.set(settingPatch ? settingPatch.val == "true" : true);
+    presence.set(settingPresence ? settingPresence.val == "true" : true);
+    folderPath = osuPath ? osuPath.val : "";
+  });
+  window.dispatchEvent(new CustomEvent("settings-get"));
+
+  const setFolderPath = () => {
+    window.dispatchEvent(new CustomEvent("folder-set"));
+  };
+
+  const detectFolderPath = () => {
+    window.dispatchEvent(new CustomEvent("folder-auto"));
+  };
+
+  const togglePatching = () => {
+    patch.set(!$patch);
+    window.dispatchEvent(
+      new CustomEvent("setting-update", { detail: { patch: $patch } })
+    );
+  };
+
+  const togglePresence = () => {
+    presence.set(!$presence);
+    window.dispatchEvent(
+      new CustomEvent("setting-update", { detail: { presence: $presence } })
+    );
+  };
+</script>
+
+<main
+  class="h-[265px] flex flex-col justify-start p-3 animate-fadeIn opacity-0"
+>
+  <div class="flex flex-col gap-2 p-3">
+    <Toggle class="w-fit" bind:checked={$presence} on:click={togglePresence}
+      >Discord Presence</Toggle
+    >
+    <Toggle class="w-fit" bind:checked={$patch} on:click={togglePatching}
+      >Patching</Toggle
+    >
+  </div>
+  <div
+    class="container flex flex-col items-center justify-center gap-5 rounded-lg p-3"
+  >
+    <ButtonGroup class="w-full">
+      <Input
+        type="text"
+        id="oip"
+        placeholder="Path to your osu! installation"
+        value={folderPath}
+        readonly
+      />
+      <Button
+        color="light"
+        class="dark:active:!bg-gray-900"
+        on:click={detectFolderPath}
+      >
+        <FileSearchSolid
+          size="sm"
+          class="dark:text-gray-300 text-gray-500 outline-none border-none select-none pointer-events-none"
+        />
+      </Button>
+      <Button
+        color="light"
+        class="dark:active:!bg-gray-900 active:!rounded-lg"
+        on:click={setFolderPath}
+      >
+        <FolderSolid
+          size="sm"
+          class="dark:text-gray-300 text-gray-500 outline-none border-none select-none pointer-events-none"
+        />
+      </Button>
+    </ButtonGroup>
+  </div>
+</main>

src/storage/localStore.ts

@@ -0,0 +1,14 @@
+import { type Writable, writable } from "svelte/store";
+import { Page } from "../consts/pages";
+import type { User } from "../types/user";
+
+export const startup = writable(false);
+export const updateAvailable = writable(false);
+export const launching = writable(false);
+export const launchStatus = writable("Waiting...");
+export const launchPercentage = writable(-1);
+export const osuPath: Writable<undefined | string> = writable(undefined);
+export const patch = writable(true);
+export const presence = writable(true);
+export const currentUser: Writable<undefined | User> = writable(undefined);
+export const currentPage = writable(Page.Login);

src/types/error.ts

@@ -0,0 +1,4 @@
+export type Error = {
+  code: number;
+  message: string;
+};

src/types/images.d.ts

@@ -2,3 +2,4 @@ declare module "*.jpg";
 declare module "*.jpeg";
 declare module "*.png";
 declare module "*.svg";
+declare module "*.svelte";

src/types/user.ts

@@ -0,0 +1,6 @@
+export type User = {
+  id: number;
+  donor: boolean;
+  name: string;
+  email: string;
+};

src/util/mathUtil.ts

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

tailwind.config.cjs

@@ -1,41 +1,73 @@
 /** @type {import('tailwindcss').Config}*/
 const config = {
-  content: ['./src/**/*.{html,js,svelte,ts}', './node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}'],
+  content: [
-  darkMode: 'class',
+    "./src/**/*.{html,js,svelte,ts}",
+    "./node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}",
+  ],
+  darkMode: "media",
   theme: {
     extend: {
+      keyframes: {
+        slideIn: {
+          "0%": { opacity: "0", transform: "translateX(-5px)" },
+          "100%": { opacity: "1" },
+        },
+        lslideIn: {
+          "0%": { opacity: "0", transform: "translateX(5px)" },
+          "100%": { opacity: "1" },
+        },
+        fadeIn: {
+          "0%": { opacity: "0", transform: "translateY(5px)" },
+          "100%": { opacity: "1" },
+        },
+        fadeOut: {
+          "100%": { opacity: "0", transform: "translateY(5px)" },
+          "0%": { opacity: "1" },
+        },
+      },
+      animation: {
+        sideIn: "slideIn 1s ease forwards",
+        lsideIn: "lslideIn 1s ease forwards",
+        fadeIn: "fadeIn 1s ease forwards",
+        fadeOut: "fadeOut 1s ease forwards",
+      },
+      transitionProperty: {
+        "width": "width",
+      },
       colors: {
         // flowbite-svelte
         primary: {
-          50: '#FFF5F2',
+          DEFAULT: "#FA1C74",
-          100: '#FFF1EE',
+          50: "#FED0E2",
-          200: '#FFE4DE',
+          100: "#FEBCD6",
-          300: '#FFD5CC',
+          200: "#FD94BD",
-          400: '#FFBCAD',
+          300: "#FC6CA5",
-          500: '#FE795D',
+          400: "#FB448C",
-          600: '#EF562F',
+          500: "#FA1C74",
-          700: '#EB4F27',
+          600: "#D90559",
-          800: '#CC4522',
+          700: "#A20442",
-          900: '#A5371B'
+          800: "#6B022C",
+          900: "#340115",
+          950: "#19010A",
         },
         gray: {
-          50: '#F9F9F9',
+          50: "#F9F9F9",
-          100: '#ECECEC',
+          100: "#ECECEC",
-          200: '#D3D3D3',
+          200: "#D3D3D3",
-          300: '#B9B9B9',
+          300: "#B9B9B9",
-          400: '#A0A0A0',
+          400: "#A0A0A0",
-          500: '#868686',
+          500: "#868686",
-          600: '#6D6D6D',
+          600: "#6D6D6D",
-          700: '#535353',
+          700: "#535353",
-          800: '#393939',
+          800: "#393939",
-          900: '#202020',
+          900: "#202020",
-          950: '#1A1A1A'
+          950: "#1A1A1A",
         },
-      }
+      },
-    }
+    },
   },
 
-  plugins: [require('flowbite/plugin')],
+  plugins: [require("flowbite/plugin")],
 };
 
 module.exports = config;

tsconfig.json

@@ -1,9 +1,23 @@
 {
-  "extends": "@tsconfig/svelte/tsconfig.json",
+  "extends": "./node_modules/@tsconfig/svelte/tsconfig.json",
 
-  "include": ["src/**/*"],
+  "include": [
+    "src/**/*",
+    "electron/richPresence.js",
+    "electron/config.js",
+    "electron/cryptoUtil.js",
+    "electron/executeUtil.js",
+    "electron/formattingUtil.js",
+    "electron/hwidUtil.js",
+    "electron/osuUtil.js"
+  ],
   "exclude": ["node_modules/*", "__sapper__/*", "public/*"],
   "compilerOptions": {
-    "typeRoots": ["node_modules/@types", "src/types"]
+    "typeRoots": [
+      "node_modules/@types",
+      "node_modules/@sveltejs",
+      "node_modules/@sveltejs/types",
+      "src/types"
+    ]
   }
 }