From 6e73fb0bbf4ab8f7fef9eaef2208f4fe8f9ea38a Mon Sep 17 00:00:00 2001 From: SpikeHD Date: Tue, 19 Apr 2022 18:12:56 -0700 Subject: [PATCH] backgrounds and button positioning --- .gitignore | 3 +++ .tmp/auth_info.json | 2 +- neutralino.config.json | 4 +-- resources/index.html | 5 +++- resources/js/index.js | 55 +++++++++++++++++++++++++++++++++++++++ resources/style/index.css | 29 ++++++++++++++++++++- 6 files changed, 93 insertions(+), 5 deletions(-) diff --git a/.gitignore b/.gitignore index 450a494..7a00eea 100644 --- a/.gitignore +++ b/.gitignore @@ -4,4 +4,7 @@ bin/ dist/ resources/js/neutralino.js +.storage/ +.tmp/ + neutralinojs.log \ No newline at end of file diff --git a/.tmp/auth_info.json b/.tmp/auth_info.json index 91d91d3..1953e44 100644 --- a/.tmp/auth_info.json +++ b/.tmp/auth_info.json @@ -1 +1 @@ -{"accessToken":"BWn1vAUwCJw-q-E6Nh9H3xNherrl4e3BUIQ3t1Xv-uRh3K3z","port":60658} \ No newline at end of file +{"accessToken":"PhF6gNpYzbtGBwyxQLGAFObt441zQ4uuGjO8L4ZsR02QjIty","port":51786} \ No newline at end of file diff --git a/neutralino.config.json b/neutralino.config.json index 6916096..4cdafda 100644 --- a/neutralino.config.json +++ b/neutralino.config.json @@ -23,8 +23,8 @@ "modes": { "window": { "title": "GrassClipper", - "width": 1000, - "height": 800, + "width": 1280, + "height": 720, "minWidth": 400, "minHeight": 200, "fullScreen": false, diff --git a/resources/index.html b/resources/index.html index 260ead9..2298de1 100644 --- a/resources/index.html +++ b/resources/index.html @@ -2,6 +2,8 @@ + +
@@ -15,7 +17,8 @@
- + +
diff --git a/resources/js/index.js b/resources/js/index.js index e69de29..37c39b6 100644 --- a/resources/js/index.js +++ b/resources/js/index.js @@ -0,0 +1,55 @@ +Neutralino.init(); + + +document.addEventListener('DOMContentLoaded', async () => { + setBackgroundImage(); + displayGenshinFolder(); +}) + +async function getCfg() { + return JSON.parse(await Neutralino.storage.getData('config').catch(e => { + // The data isn't set, so this is our first time opening + Neutralino.storage.setData('config', JSON.stringify({ + genshinImpactFolder: '', + lastConnect: '' + })) + })) +} + +async function displayGenshinFolder() { + const elm = document.querySelector('#genshinPath') + const config = await getCfg() + + elm.innerHTML = config.genshinImpactFolder +} + +async function setBackgroundImage() { + const config = await getCfg() + + const images = (await Neutralino.filesystem.readDirectory(config.genshinImpactFolder + '/bg')).filter(file => file.type === 'FILE') + + // Pick one of the images + const image = images[Math.floor(Math.random() * images.length)].entry + const path = config.genshinImpactFolder.replace('\\', '/') + '/bg/' + image + + // Copy to backgrounds folder + const bgs = (await Neutralino.filesystem.readDirectory(NL_CWD + '/resources/bg/')).filter(file => file.type === 'FILE') + + if (!bgs.find(file => file.entry === image)) { + console.log('new file') + await Neutralino.filesystem.copyFile(path, NL_CWD + '/resources/bg/' + image) + } + + // Set the background image + document.querySelector('#firstHalf').style.backgroundImage = `url("../bg/${image}")` +} + +async function setGenshinImpactFolder() { + const folder = await Neutralino.os.showFolderDialog('Select Genshin Impact folder') + + // Set the folder in our configuration + const config = await getCfg() + + config.genshinImpactFolder = folder + Neutralino.storage.setData('config', JSON.stringify(config)) +} diff --git a/resources/style/index.css b/resources/style/index.css index 0d1ca67..dfe3b42 100644 --- a/resources/style/index.css +++ b/resources/style/index.css @@ -1,6 +1,8 @@ body { - overflow: none; + overflow: hidden; height: 85vh; + margin: 0; + font-family: Arial, Helvetica, sans-serif; } .playBtn:hover, .smolBtn:hover { @@ -33,7 +35,21 @@ body { display: flex; justify-content: center; width: 100%; + height: 100%; padding: 20px 0px; + background: #141414; +} + +.bottomSection { + display: flex; + flex-direction: column; + height: 100%; + background: #141414; +} + +#genshinPath { + color: white; + font-size: 14px; } #halvesContainer { @@ -48,8 +64,19 @@ body { display: flex; justify-content: center; width: 100%; + background-repeat: no-repeat; + background-size: cover; } #firstHalf { border-right: 1px solid black; + background-position: -340px; +} + +/* Move the button to the position on the png */ +#firstHalf button { + position: relative; + transform: translate(130px, 500px); + width: 400px; + height: 70px; } \ No newline at end of file