push electron to latest

README.md

@@ -19,5 +19,14 @@ The Launcher is a "plug and play thing", download it, place it on the desktop an
 * [axios](https://www.npmjs.com/package/axios)
 * [jquery](https://www.npmjs.com/package/jquery)
 
+## Build from source
+
+- clone repo
+- cd into the repo
+- use `yarn install` to install all dependencies
+- (if node-gyp cant build the natives try clearing the cache at `%localappdata%\node-gyp\Cache\`)
+- run `yarn rebuild` to rebuild the natives to the current `NODE_MODULE_VERSION`
+- use the buildscript `pack-win` to build a executeable
+
 ## License
 [AGPL-3.0](https://choosealicense.com/licenses/agpl-3.0/)

app.js

@@ -21,7 +21,8 @@ const run = () => {
 
         mainWindow = createWindow();
         mainWindow.on('show', async () => {
-            await doUpdateCheck(mainWindow);
+            await updateConfigVars(mainWindow);
+            await tryLogin(mainWindow);
         })
         app.on('activate', function () {
             if (BrowserWindow.getAllWindows().length === 0) mainWindow = createWindow();
@@ -89,6 +90,25 @@ const run = () => {
     })
 }
 
+async function updateConfigVars(window) {
+    const osuPath = JSON.stringify(config.get("osuPath", ""));
+    window.webContents.send('config_update', {
+        osuPath: osuPath
+    })
+}
+
+async function tryLogin(window) {
+    const username = config.get("username", "");
+    const password = config.get("password", "");
+    if ((username && username.length > 0) && (password && password.length > 0)) {
+
+    } else {
+        window.webContents.send('account_update', {
+            type: "not-loggedin"
+        })
+    }
+}
+
 async function doUpdateCheck(window) {
     const osuPath = await config.get("osuPath", "");
     const isValid = await osuUtil.isValidOsuFolder(osuPath);
@@ -121,7 +141,7 @@ async function doUpdateCheck(window) {
 
 function createWindow() {
     // Create the browser window.
-    const win = windowManager.createWindow(520, 350);
+    const win = windowManager.createWindow(700, 420);
 
     win.loadFile('./html/index.html');
 

appInfo.js

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

assets/launcher.css

@@ -0,0 +1,305 @@
+@import url('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&display=swap');
+
+:root {
+    --main-accent: 335deg;
+}
+
+* {
+    font-family: 'Exo 2', 'Roboto' !important;
+}
+
+.sections {
+    display: flex;
+    flex-flow: column;
+}
+
+.app-name {
+    font-size: 40px;
+    font-weight: 500;
+    text-shadow: 0 0 15px rgba(255, 255, 255, 0.37);
+}
+
+.launcher-window {
+    width: 100%;
+}
+
+.loading-section,
+.login-section {
+    margin-top: 35px;
+    display: flex;
+    flex-flow: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.loading-section {
+    margin-top: 0;
+}
+
+.loading-section {}
+
+.loading-indicator {}
+
+.loading-indicator-text {
+    display: flex;
+    flex-flow: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.folder-section {
+    margin-top: 45px;
+    display: flex;
+    flex-flow: column;
+    justify-content: center;
+    align-items: center;
+    color: #aaa;
+    font-weight: 500;
+}
+
+.folder-action {
+    font-style: italic;
+    cursor: pointer;
+    width: fit-content;
+    line-height: .9;
+}
+
+.launch-section {
+    width: 100%;
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.btn.btn-launch {
+    margin-top: 10px;
+    width: 300px;
+    font-size: 23px;
+    text-transform: none;
+}
+
+.account-section {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+}
+
+.user-info {
+    text-align: start;
+    display: flex;
+    flex-flow: column;
+    justify-content: center;
+    align-content: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.user-info .welcome-text {
+    font-size: 31px;
+    letter-spacing: .02rem;
+    height: 30px;
+    line-height: .8;
+    text-shadow: 0 0 10px rgba(0, 0, 0, 0.349);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.user-info .account-action {
+    font-size: 21px;
+    letter-spacing: .05rem;
+    font-weight: 500;
+    font-style: italic;
+    color: #aaa;
+    text-shadow: 0 0 10px rgba(0, 0, 0, 0.349);
+    cursor: pointer;
+    line-height: 1.2;
+    width: fit-content;
+}
+
+.user-image {
+    border: 5px solid white;
+    border-radius: 0.4rem;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.349);
+}
+
+#user-img {
+    border-radius: .2rem;
+    width: 80px;
+    /* somehow its misplaced without that */
+    transform: translate(-0.25px, 0.25px) scale(1.05);
+}
+
+.form-outline .form-control:focus~.form-notch .form-notch-leading {
+    border-color: hsl(var(--main-accent), 93%, 48%);
+    box-shadow: -1px 0 0 0 hsl(var(--main-accent), 93%, 48%), 0 1px 0 0 hsl(var(--main-accent), 93%, 48%), 0 -1px 0 0 hsl(var(--main-accent), 93%, 48%);
+}
+
+.form-outline .form-control:focus~.form-notch .form-notch-middle {
+    border-color: hsl(var(--main-accent), 93%, 48%);
+    box-shadow: 0 1px 0 0 hsl(var(--main-accent), 93%, 48%);
+    border-top: 1px solid transparent;
+}
+
+.form-outline .form-control:focus~.form-notch .form-notch-trailing {
+    border-color: hsl(var(--main-accent), 93%, 48%);
+    box-shadow: 1px 0 0 0 hsl(var(--main-accent), 93%, 48%), 0 -1px 0 0 hsl(var(--main-accent), 93%, 48%), 0 1px 0 0 hsl(var(--main-accent), 93%, 48%);
+}
+
+.form-outline .form-control:focus~.form-label {
+    color: hsl(var(--main-accent), 93%, 48%);
+}
+
+.btn-accent,
+.btn-accent:active {
+    background: hsl(var(--main-accent), 93%, 48%);
+    color: #fff;
+}
+
+.btn-accent:hover {
+    background: hsl(var(--main-accent), 93%, 42%);
+    color: #fff;
+}
+
+.btn-grey,
+.btn-grey:active {
+    background: #727272;
+    color: #fff;
+}
+
+.btn-grey:hover {
+    background: #626262;
+    color: #fff;
+}
+
+.btn-grouped {
+    display: flex;
+    gap: 50px;
+}
+
+.clickable {
+    cursor: pointer;
+}
+
+.loader {
+    position: relative;
+    margin: 0px auto;
+    width: 200px;
+    height: 200px;
+    transform: scale(0.5);
+}
+
+.loader:before {
+    content: '';
+    display: block;
+    padding-top: 100%;
+}
+
+.circular-loader {
+    -webkit-animation: rotate 2s linear infinite;
+    animation: rotate 2s linear infinite;
+    height: 100%;
+    -webkit-transform-origin: center center;
+    -ms-transform-origin: center center;
+    transform-origin: center center;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    margin: auto;
+}
+
+.loader-path {
+    stroke-dasharray: 150, 200;
+    stroke-dashoffset: -10;
+    -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
+    animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
+    stroke-linecap: round;
+}
+
+@-webkit-keyframes rotate {
+    100% {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes rotate {
+    100% {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+
+@-webkit-keyframes dash {
+    0% {
+        stroke-dasharray: 1, 200;
+        stroke-dashoffset: 0;
+    }
+
+    50% {
+        stroke-dasharray: 89, 200;
+        stroke-dashoffset: -35;
+    }
+
+    100% {
+        stroke-dasharray: 89, 200;
+        stroke-dashoffset: -124;
+    }
+}
+
+@keyframes dash {
+    0% {
+        stroke-dasharray: 1, 200;
+        stroke-dashoffset: 0;
+    }
+
+    50% {
+        stroke-dasharray: 89, 200;
+        stroke-dashoffset: -35;
+    }
+
+    100% {
+        stroke-dasharray: 89, 200;
+        stroke-dashoffset: -124;
+    }
+}
+
+@-webkit-keyframes color {
+    0% {
+        stroke: #fff;
+    }
+
+    40% {
+        stroke: #fff;
+    }
+
+    66% {
+        stroke: #fff;
+    }
+
+    80%,
+    90% {
+        stroke: #fff;
+    }
+}
+
+@keyframes color {
+    0% {
+        stroke: #fff;
+    }
+
+    40% {
+        stroke: #fff;
+    }
+
+    66% {
+        stroke: #fff;
+    }
+
+    80%,
+    90% {
+        stroke: #fff;
+    }
+}

html/index.html

@@ -7,6 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/png" href="../assets/logo.png" />
     <link href="../assets/mdb.min.css" rel="stylesheet" />
+    <link href="../assets/launcher.css" rel="stylesheet" />
     <style>
         * {
             user-select: none;
@@ -19,35 +20,86 @@
     oncontextmenu="return false;">
     <main>
         <div class="noselect">
-            <div class="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center text-lg-end d-flex align-items-center justify-content-center"
+            <div class="position-relative overflow-hidden p-1 w-100 text-center text-lg-end d-flex align-items-center justify-content-center"
                 style="border-radius: 0.5em;">
-                <div class="position-relative overflow-hidden p-3 p-md-5 m-md-3">
-                    <div class="container py-2 h-100">
+                <div class="launcher-window position-relative overflow-hidden">
+                    <div class="container px-1 py-2 w-100 mw-100 h-100">
                         <div class="row d-flex justify-content-center align-items-center h-100">
-                            <div class="col col-xl-10">
-                                <div class="card" style="border-radius: 1rem;">
-                                    <div class="row g-0">
-                                        <div class="card-body p-4 p-lg-5 text-black">
-                                            <div class="d-flex align-items-center mb-2 pb-1 text-white">
-                                                <span class="h1 fw-bold mb-0">EZPPLauncher</span>
-                                            </div>
-                                            <h5 class="fw-lighter fs-5 mb-3 pb-3 text-white text-start"
-                                                style="letter-spacing: 1px;">
-                                                Launch osu! with connection to the EZPPFarm server
-                                            </h5>
-                                            <div class="pt-1 mb-4">
-                                                <button id="launch-btn" class="btn btn-primary btn-lg btn-block"
-                                                    type="button" style="background-color:#d6016f" disabled>Looking for
-                                                    updates...</button>
-                                            </div>
-                                            <button class="btn btn-dark btn-sm float-start" id="account-btn" disabled>
-                                                set account
-                                            </button>
-                                            <button class="btn btn-dark btn-sm float-end" id="folder-btn">
-                                                set osu! directory
-                                            </button>
+                            <div id="loading-page" class="sections col col-xl-10" style="display: none;">
+                                <div class="launch-section flex-row">
+                                    <div class="server-logo">
+                                        <img src="../assets/logo.png" height="120">
+                                    </div>
+                                    <div class="app-name">EZPPLauncher</div>
+                                </div>
+                                <div class="loading-section">
+                                    <div class="loading-indicator">
+                                        <div class="loader">
+                                            <svg class="circular-loader" viewBox="25 25 50 50">
+                                                <circle class="loader-path" cx="50" cy="50" r="20" fill="none"
+                                                    stroke="#fff" stroke-width="2" />
+                                            </svg>
                                         </div>
                                     </div>
+                                    <div class="loading-indicator-text">Loading... Please wait</div>
+                                </div>
+                            </div>
+                            <div id="launch-page" class="sections col col-xl-10" style="//display: none;">
+                                <div class="account-section">
+                                    <div class="user-image">
+                                        <img id="user-img" src="https://a.ez-pp.farm/0">
+                                    </div>
+                                    <div class="user-info">
+                                        <div class="welcome-text" id="welcome-text">
+                                            Nice to see you!
+                                        </div>
+                                        <div class="account-action" id="account-action">
+                                            Click to login
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="launch-section">
+                                    <div class="server-logo">
+                                        <img src="../assets/logo.png" height="150">
+                                    </div>
+                                    <div class="launch-button">
+                                        <button class="btn btn-lg btn-launch btn-accent">Launch</button>
+                                    </div>
+                                </div>
+                                <div class="folder-section">
+                                    <div class="folder-location">
+                                        Current osu! directory: C:\Users\Thomas\AppData\Local\osu!
+                                    </div>
+                                    <div class="folder-action">
+                                        Not right?
+                                    </div>
+                                </div>
+                            </div>
+                            <div id="login-page" class="sections col col-xl-10" style="display: none;">
+                                <div class="launch-section flex-row">
+                                    <div class="server-logo">
+                                        <img src="../assets/logo.png" height="120">
+                                    </div>
+                                    <div class="app-name">EZPPLauncher</div>
+                                </div>
+                                <div class="login-section">
+                                    <div class="form-outline mb-3 w-50">
+                                        <input type="text" id="username" class="form-control form-control-lg" />
+                                        <label class="form-label" for="username">Username</label>
+                                    </div>
+                                    <div class="form-outline mb-3 w-50">
+                                        <input type="password" id="password" class="form-control form-control-lg" />
+                                        <label class="form-label" for="password">Password</label>
+                                    </div>
+                                    <div class="pt-1 mb-4">
+                                        <div class="btn-grouped">
+                                            <button id="action-cancel" class="btn btn-grey btn-lg"
+                                                type="button">Cancel</button>
+                                            <button id="login" class="btn btn-accent btn-lg"
+                                                type="button">Login</button>
+                                        </div>
+                                    </div>
+                                    <p class="text-muted clickable" id="register">Don't have an account?</p>
                                 </div>
                             </div>
                         </div>

html/index_old.html

@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>EZPPLauncher</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/png" href="../assets/logo.png" />
+    <link href="../assets/mdb.min.css" rel="stylesheet" />
+    <style>
+        * {
+            user-select: none;
+            -webkit-user-select: none;
+        }
+    </style>
+</head>
+
+<body class="fixed-sn mdb-skin-custom" data-spy="scroll" data-target="#scrollspy" data-offset="15"
+    oncontextmenu="return false;">
+    <main>
+        <div class="noselect">
+            <div class="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center text-lg-end d-flex align-items-center justify-content-center"
+                style="border-radius: 0.5em;">
+                <div class="position-relative overflow-hidden p-3 p-md-5 m-md-3">
+                    <div class="container py-2 h-100">
+                        <div class="row d-flex justify-content-center align-items-center h-100">
+                            <div class="col col-xl-10">
+                                <div class="card" style="border-radius: 1rem;">
+                                    <div class="row g-0">
+                                        <div class="card-body p-4 p-lg-5 text-black">
+                                            <div class="d-flex align-items-center mb-2 pb-1 text-white">
+                                                <span class="h1 fw-bold mb-0">EZPPLauncher</span>
+                                            </div>
+                                            <h5 class="fw-lighter fs-5 mb-3 pb-3 text-white text-start"
+                                                style="letter-spacing: 1px;">
+                                                Launch osu! with connection to the EZPPFarm server
+                                            </h5>
+                                            <div class="pt-1 mb-4">
+                                                <button id="launch-btn" class="btn btn-primary btn-lg btn-block"
+                                                    type="button" style="background-color:#d6016f" disabled>Looking for
+                                                    updates...</button>
+                                            </div>
+                                            <button class="btn btn-dark btn-sm float-start" id="account-btn" disabled>
+                                                set account
+                                            </button>
+                                            <button class="btn btn-dark btn-sm float-end" id="folder-btn">
+                                                set osu! directory
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+</body>
+<script type="text/javascript" src="../assets/mdb.min.js"></script>
+
+</html>

osuUtil.js

@@ -3,11 +3,13 @@ const fu = require('./fileUtil');
 const path = require('path');
 const crypto = require('crypto');
 const axios = require('axios').default;
+const dpapi = require('wincrypt');
 const executeUtil = require('./executeUtil');
 const { EventEmitter } = require('events');
 const { DownloaderHelper } = require('node-downloader-helper');
 
 const checkUpdateURL = "https://osu.ppy.sh/web/check-updates.php?action=check&stream=";
+const osuEncryptBuffer = Buffer.from('cu24180ncjeiu0ci1nwui', "utf-8")
 const osuEntities = [
     'avcodec-51.dll',
     'avformat-52.dll',
@@ -147,4 +149,28 @@ async function startWithDevServer(osuPath, serverDomain, onExit) {
     return true;
 }
 
-module.exports = { isValidOsuFolder, getLatestConfig, getUpdateFiles, filesThatNeedUpdate, downloadUpdateFiles, startOsuWithDevServer: startWithDevServer }
+function encryptString(value) {
+    return dpapi.protect(Buffer.from(value, 'utf-8'), osuEncryptBuffer, 'CurrentUser');
+}
+
+async function setConfigValue(configPath, key, value) {
+    const configLines = new Array();
+    const fileStream = await fs.promises.readFile(configPath, "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 (key == keyname) {
+                configLines.push(`${keyname} = ${value}`);
+            } else {
+                configLines.push(line);
+            }
+        } else {
+            configLines.push(line);
+        }
+    }
+}
+
+module.exports = { isValidOsuFolder, getLatestConfig, getUpdateFiles, filesThatNeedUpdate, downloadUpdateFiles, startOsuWithDevServer: startWithDevServer, setConfigValue }

package.json

@@ -32,6 +32,7 @@
   },
   "scripts": {
     "start": "electron .",
+    "rebuild": "electron-rebuild -f -w wincrypt",
     "pack-win": "electron-builder --x64",
     "pack-win32": "electron-builder --ia32",
     "pack-winarm": "electron-builder --arm64",
@@ -40,15 +41,17 @@
     "dist": "electron-builder"
   },
   "devDependencies": {
-    "electron": "^17.4.3",
+    "electron": "^21.1.1",
     "electron-builder": "^23.0.3",
-    "electron-packager": "^15.5.1"
+    "electron-packager": "^15.5.1",
+    "electron-rebuild": "^3.2.9"
   },
   "dependencies": {
     "axios": "^0.27.2",
     "custom-electron-titlebar": "^4.1.1",
     "jquery": "^3.6.0",
     "node-downloader-helper": "^2.1.4",
-    "sweetalert2": "^11.5.2"
+    "sweetalert2": "^11.5.2",
+    "wincrypt": "^1.5.0"
   }
 }

preload/preload.js

@@ -3,6 +3,8 @@ const { Titlebar, Color } = require('custom-electron-titlebar');
 const appInfo = require('../appInfo');
 let titlebar;
 
+const currentPage = "loading-page";
+
 window.addEventListener('DOMContentLoaded', () => {
     titlebar = new Titlebar({
         backgroundColor: Color.fromHex("#303030"),
@@ -14,10 +16,24 @@ window.addEventListener('DOMContentLoaded', () => {
     titlebar.updateTitle(`${appInfo.appName} ${appInfo.appVersion}`);
 
     const $ = require('jquery');
+    const axios = require('axios').default;
     const Swal = require('sweetalert2');
 
-    let currentState;
+    const loggedIn = false;
 
+    $('#account-action').on('click', () => {
+        if (!loggedIn) {
+            changePage('login');
+        }
+    });
+
+    $('#action-cancel').on('click', () => {
+        if (!loggedIn) {
+            changePage('launch');
+        }
+    });
+
+    let currentState;
     $("#launch-btn").on('click', async () => {
         switch (currentState) {
             case "up-to-date":
@@ -68,6 +84,14 @@ window.addEventListener('DOMContentLoaded', () => {
         }
     });
 
+    ipcRenderer.on('account_update', (event, data) => {
+        switch (data.type) {
+            case "not-loggedin":
+                changePage("launch");
+                break;
+        }
+    })
+
     ipcRenderer.on('status_update', (event, status) => {
         currentState = status.type;
         switch (status.type) {
@@ -103,6 +127,12 @@ window.addEventListener('DOMContentLoaded', () => {
         }
     })
 
+    function changePage(page) {
+        $(`#${currentPage}`).fadeOut(50, "swing", () => {
+            $(`#${page}-page`).fadeIn(350);
+        });
+    }
+
     // workaround for the dark theme
     $('head').append($('<link href="../assets/sweetalert2.dark.css" rel="stylesheet" />'));
 })