Grasscutters/GrassClipper
1
0
Fork 0
mirror of https://github.com/Grasscutters/GrassClipper.git synced 2024-11-23 12:19:49 +00:00
Code Issues Actions Packages 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/
resources/js/neutralino.js
.storage/
.tmp/
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": {
"window": {
"title": "GrassClipper",
"width": 1000,
"height": 800,
"width": 1280,
"height": 720,
"minWidth": 400,
"minHeight": 200,
"fullScreen": false,

5
resources/index.html
View File

@ -2,6 +2,8 @@
<html>
<head>
<link rel="stylesheet" type="text/css" href="style/index.css" />
<script src="js/neutralino.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<div id="halvesContainer">
@ -15,7 +17,8 @@
<div id="bottomBar">
<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>
</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 {
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;
}