add loading page on startup

This commit is contained in:
HorizonCode 2022-10-17 16:37:12 +02:00
parent e6ccec3e93
commit 8ef809be5c
4 changed files with 192 additions and 14 deletions

22
app.js
View File

@ -21,7 +21,8 @@ const run = () => {
mainWindow = createWindow(); mainWindow = createWindow();
mainWindow.on('show', async () => { mainWindow.on('show', async () => {
await doUpdateCheck(mainWindow); await updateConfigVars(mainWindow);
await tryLogin(mainWindow);
}) })
app.on('activate', function () { app.on('activate', function () {
if (BrowserWindow.getAllWindows().length === 0) mainWindow = createWindow(); 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) { async function doUpdateCheck(window) {
const osuPath = await config.get("osuPath", ""); const osuPath = await config.get("osuPath", "");
const isValid = await osuUtil.isValidOsuFolder(osuPath); const isValid = await osuUtil.isValidOsuFolder(osuPath);

View File

@ -23,6 +23,7 @@
width: 100%; width: 100%;
} }
.loading-section,
.login-section { .login-section {
margin-top: 35px; margin-top: 35px;
display: flex; display: flex;
@ -31,6 +32,21 @@
align-items: 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 { .folder-section {
margin-top: 80px; margin-top: 80px;
display: flex; display: flex;
@ -165,3 +181,125 @@
.clickable { .clickable {
cursor: pointer; 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;
}
}

View File

@ -25,7 +25,26 @@
<div class="launcher-window position-relative overflow-hidden"> <div class="launcher-window position-relative overflow-hidden">
<div class="container px-1 py-2 w-100 mw-100 h-100"> <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="row d-flex justify-content-center align-items-center h-100">
<div id="launch-page" class="sections col col-xl-10"> <div id="loading-page" class="sections col col-xl-10">
<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="account-section">
<div class="user-image"> <div class="user-image">
<img id="user-img" src="https://a.ez-pp.farm/0"> <img id="user-img" src="https://a.ez-pp.farm/0">

View File

@ -3,6 +3,8 @@ const { Titlebar, Color } = require('custom-electron-titlebar');
const appInfo = require('../appInfo'); const appInfo = require('../appInfo');
let titlebar; let titlebar;
const currentPage = "loading-page";
window.addEventListener('DOMContentLoaded', () => { window.addEventListener('DOMContentLoaded', () => {
titlebar = new Titlebar({ titlebar = new Titlebar({
backgroundColor: Color.fromHex("#303030"), backgroundColor: Color.fromHex("#303030"),
@ -82,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) => { ipcRenderer.on('status_update', (event, status) => {
currentState = status.type; currentState = status.type;
switch (status.type) { switch (status.type) {
@ -118,18 +128,9 @@ window.addEventListener('DOMContentLoaded', () => {
}) })
function changePage(page) { function changePage(page) {
switch (page) { $(`#${currentPage}`).fadeOut(50, "swing", () => {
case "login": $(`#${page}-page`).fadeIn(350);
$("#launch-page").fadeOut(50, "swing", () => {
$("#login-page").fadeIn(350);
}); });
break;
case "launch":
$("#login-page").fadeOut(50, "swing", () => {
$("#launch-page").fadeIn(350);
});
break;
}
} }
// workaround for the dark theme // workaround for the dark theme