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

20
resources/js/hoverEvt.js
View File

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

8
resources/js/index.js
View File

@ -133,7 +133,7 @@ async function handleGenshinFolderNotSet() {
document.querySelector('#genshinPath').innerHTML = 'Not set' document.querySelector('#genshinPath').innerHTML = 'Not set'
// Set official server background to default // 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 offBtn = document.querySelector('#playOfficial')
const privBtn = document.querySelector('#playPrivate') const privBtn = document.querySelector('#playPrivate')
@ -182,10 +182,10 @@ async function setBackgroundImage() {
const privImage = privImages[Math.floor(Math.random() * privImages.length)].entry const privImage = privImages[Math.floor(Math.random() * privImages.length)].entry
// Set default image, it will change if the bg folder exists // 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 // Set the private background image
document.querySelector('#secondHalf').style.backgroundImage = `url("../bg/private/${privImage}")` document.querySelector('#secondPanel').style.backgroundImage = `url("../bg/private/${privImage}")`
return return
@ -234,7 +234,7 @@ async function setBackgroundImage() {
const image = localImg[Math.floor(Math.random() * localImg.length)].entry const image = localImg[Math.floor(Math.random() * localImg.length)].entry
// Set background image // 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; font-size: 14px;
} }
#halvesContainer { #panelContainer {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; position: relative;
@ -299,7 +299,7 @@ body {
display: flex; display: flex;
} }
#firstHalf, #secondHalf { #firstPanel, #secondPanel, #thirdPanel {
display: flex; display: flex;
justify-content: center; justify-content: center;
width: 100%; width: 100%;
@ -309,17 +309,17 @@ body {
transition: width 0.2s ease-in-out, filter 0.2s ease-in-out; 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); width: calc(100% + 150px);
} }
#firstHalf { #firstPanel, #secondPanel {
border-right: 6px solid #141414; border-right: 6px solid #141414;
background-position: -340px; background-position: -340px;
} }
/* Move the first official button to the position on the png */ /* Move the first official button to the position on the png */
#firstHalf button { #firstPanel button {
position: relative; position: relative;
transform: translate(140px, 500px); transform: translate(140px, 500px);
width: 300px; width: 300px;
@ -330,13 +330,13 @@ body {
display: block; display: block;
} }
#secondHalf button { #secondPanel button {
display: block; display: block;
width: 300px; width: 300px;
height: 60px; height: 60px;
} }
#secondHalf input { #secondPanel input {
margin-bottom: 4px; margin-bottom: 4px;
height: 20px; height: 20px;
background: white; background: white;
@ -348,7 +348,7 @@ body {
transition: border-bottom 0.1s ease-in-out; transition: border-bottom 0.1s ease-in-out;
} }
#secondHalf input:focus { #secondPanel input:focus {
outline: none; outline: none;
border-bottom: 2px solid #ffc61e; border-bottom: 2px solid #ffc61e;
} }