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

begin third panel

Browse Source
This commit is contained in:
SpikeHD 2022-04-22 15:34:24 -07:00
parent 9682faa3f0
commit 8ce75a9f37
5 changed files with 28 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
resources/bg/server/1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 99 KiB

9
resources/index.html
View File

@ -73,11 +73,11 @@
<img src="icons/close.svg" />
</div>
</div>
<div id="halvesContainer">
<div id="firstHalf">
<div id="panelContainer">
<div id="firstPanel">
<button class="playBtn" id="playOfficial" onclick="launchOfficial()">Play Official</button>
</div>
<div id="secondHalf">
<div id="secondPanel">
<div id="ipList" style="display: none;"></div>
<div id="secondControlContainer">
<div id="serverInput">
@ -88,6 +88,9 @@
<button class="playBtn" id="playPrivate" onclick="launchPrivate()">Play Private</button>
</div>
</div>
<div id="thirdPanel">
<button class="playBtn" id="serverLaunch">Launch Local Server</button>
</div>
</div>
<div id="bottomBar">

20
resources/js/hoverEvt.js
View File

@ -1,21 +1,21 @@
document.addEventListener('DOMContentLoaded', async () => {
const firstHalf = document.querySelector('#firstHalf')
const secondHalf = document.querySelector('#secondHalf')
const firstPanel = document.querySelector('#firstPanel')
const secondPanel = document.querySelector('#secondPanel')
// Listen to hovers
firstHalf.addEventListener('mouseover', () => {
secondHalf.classList.add('darken')
firstPanel.addEventListener('mouseover', () => {
secondPanel.classList.add('darken')
})
firstHalf.addEventListener('mouseout', () => {
secondHalf.classList.remove('darken')
firstPanel.addEventListener('mouseout', () => {
secondPanel.classList.remove('darken')
})
secondHalf.addEventListener('mouseover', () => {
firstHalf.classList.add('darken')
secondPanel.addEventListener('mouseover', () => {
firstPanel.classList.add('darken')
})
secondHalf.addEventListener('mouseout', () => {
firstHalf.classList.remove('darken')
secondPanel.addEventListener('mouseout', () => {
firstPanel.classList.remove('darken')
})
})

8
resources/js/index.js
View File

@ -133,7 +133,7 @@ async function handleGenshinFolderNotSet() {
document.querySelector('#genshinPath').innerHTML = 'Not set'
// Set official server background to default
document.querySelector('#firstHalf').style.backgroundImage = `url("../bg/private/default.png")`
document.querySelector('#firstPanel').style.backgroundImage = `url("../bg/private/default.png")`
const offBtn = document.querySelector('#playOfficial')
const privBtn = document.querySelector('#playPrivate')
@ -182,10 +182,10 @@ async function setBackgroundImage() {
const privImage = privImages[Math.floor(Math.random() * privImages.length)].entry
// Set default image, it will change if the bg folder exists
document.querySelector('#firstHalf').style.backgroundImage = `url("https://webstatic.hoyoverse.com/upload/event/2020/11/04/7fd661b5184e1734f91f628b6f89a31f_7367318474207189623.png")`
document.querySelector('#firstPanel').style.backgroundImage = `url("https://webstatic.hoyoverse.com/upload/event/2020/11/04/7fd661b5184e1734f91f628b6f89a31f_7367318474207189623.png")`
// Set the private background image
document.querySelector('#secondHalf').style.backgroundImage = `url("../bg/private/${privImage}")`
document.querySelector('#secondPanel').style.backgroundImage = `url("../bg/private/${privImage}")`
return
@ -234,7 +234,7 @@ async function setBackgroundImage() {
const image = localImg[Math.floor(Math.random() * localImg.length)].entry
// Set background image
document.querySelector('#firstHalf').style.backgroundImage = `url("../bg/official/${image}")`
document.querySelector('#firstPanel').style.backgroundImage = `url("../bg/official/${image}")`
}
}
}

16
resources/style/index.css
View File

@ -291,7 +291,7 @@ body {
font-size: 14px;
}
#halvesContainer {
#panelContainer {
width: 100%;
height: 100%;
position: relative;
@ -299,7 +299,7 @@ body {
display: flex;
}
#firstHalf, #secondHalf {
#firstPanel, #secondPanel, #thirdPanel {
display: flex;
justify-content: center;
width: 100%;
@ -309,17 +309,17 @@ body {
transition: width 0.2s ease-in-out, filter 0.2s ease-in-out;
}
#firstHalf:hover, #secondHalf:hover {
#firstPanel:hover, #secondPanel:hover, #thirdPanel:hover {
width: calc(100% + 150px);
}
#firstHalf {
#firstPanel, #secondPanel {
border-right: 6px solid #141414;
background-position: -340px;
}
/* Move the first official button to the position on the png */
#firstHalf button {
#firstPanel button {
position: relative;
transform: translate(140px, 500px);
width: 300px;
@ -330,13 +330,13 @@ body {
display: block;
}
#secondHalf button {
#secondPanel button {
display: block;
width: 300px;
height: 60px;
}
#secondHalf input {
#secondPanel input {
margin-bottom: 4px;
height: 20px;
background: white;
@ -348,7 +348,7 @@ body {
transition: border-bottom 0.1s ease-in-out;
}
#secondHalf input:focus {
#secondPanel input:focus {
outline: none;
border-bottom: 2px solid #ffc61e;
}