shkong/GrassClipper
1
0
Fork 0
mirror of https://github.com/Grasscutters/GrassClipper.git synced 2024-08-14 13:11:48 +08:00
Code Issues Projects Releases Wiki Activity

backgrounds and button positioning

Browse Source
This commit is contained in:
SpikeHD 2022-04-19 18:12:56 -07:00
parent 17b2ae41e2
commit 6e73fb0bbf
6 changed files with 93 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -4,4 +4,7 @@ bin/
dist/ dist/
resources/js/neutralino.js resources/js/neutralino.js
.storage/
.tmp/
neutralinojs.log neutralinojs.log

2
.tmp/auth_info.json
View File

@ -1 +1 @@
{"accessToken":"BWn1vAUwCJw-q-E6Nh9H3xNherrl4e3BUIQ3t1Xv-uRh3K3z","port":60658} {"accessToken":"PhF6gNpYzbtGBwyxQLGAFObt441zQ4uuGjO8L4ZsR02QjIty","port":51786}

4
neutralino.config.json
View File

@ -23,8 +23,8 @@
"modes": { "modes": {
"window": { "window": {
"title": "GrassClipper", "title": "GrassClipper",
"width": 1000, "width": 1280,
"height": 800, "height": 720,
"minWidth": 400, "minWidth": 400,
"minHeight": 200, "minHeight": 200,
"fullScreen": false, "fullScreen": false,

5
resources/index.html
View File

@ -2,6 +2,8 @@
<html> <html>
<head> <head>
<link rel="stylesheet" type="text/css" href="style/index.css" /> <link rel="stylesheet" type="text/css" href="style/index.css" />
<script src="js/neutralino.js"></script>
<script src="js/index.js"></script>
</head> </head>
<body> <body>
<div id="halvesContainer"> <div id="halvesContainer">
@ -15,7 +17,8 @@
<div id="bottomBar"> <div id="bottomBar">
<div class="bottomSection"> <div class="bottomSection">
<button class="smolBtn">Set Genshin Impact folder</button> <button class="smolBtn" onclick="setGenshinImpactFolder()">Set Genshin Impact folder</button>
<span id="genshinPath" style="margin-top: 4px;"></span>
</div> </div>
</div> </div>
</body> </body>

55
resources/js/index.js
View File

@ -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))
}

29
resources/style/index.css
View File

@ -1,6 +1,8 @@
body { body {
overflow: none; overflow: hidden;
height: 85vh; height: 85vh;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
} }
.playBtn:hover, .smolBtn:hover { .playBtn:hover, .smolBtn:hover {
@ -33,7 +35,21 @@ body {
display: flex; display: flex;
justify-content: center; justify-content: center;
width: 100%; width: 100%;
height: 100%;
padding: 20px 0px; padding: 20px 0px;
background: #141414;
}
.bottomSection {
display: flex;
flex-direction: column;
height: 100%;
background: #141414;
}
#genshinPath {
color: white;
font-size: 14px;
} }
#halvesContainer { #halvesContainer {
@ -48,8 +64,19 @@ body {
display: flex; display: flex;
justify-content: center; justify-content: center;
width: 100%; width: 100%;
background-repeat: no-repeat;
background-size: cover;
} }
#firstHalf { #firstHalf {
border-right: 1px solid black; 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;
} }