Grasscutters/GrassClipper
3
0
Fork 0
mirror of https://github.com/Grasscutters/GrassClipper.git synced 2024-09-28 04:05:07 +00:00
Code Issues Projects Releases Wiki Activity

display favorites

Browse Source
This commit is contained in:
SpikeHD 2022-04-20 23:04:20 -07:00
parent 25a3680caf
commit 18db67393b
4 changed files with 67 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
resources/icons/list.svg Normal file
View File

@ -0,0 +1,13 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="256" height="256" viewBox="0 0 256 256" xml:space="preserve">
<desc>Created with Fabric.js 1.7.22</desc>
<defs>
</defs>
<g transform="translate(128 128) scale(0.72 0.72)" style="">
<g style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" transform="translate(-175.05 -175.05) scale(3.89 3.89)" >
<path d="M 82 25.64 H 38.75 c -4.418 0 -8 -3.582 -8 -8 v 0 c 0 -4.418 3.582 -8 8 -8 H 82 c 4.418 0 8 3.582 8 8 v 0 C 90 22.058 86.418 25.64 82 25.64 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
<path d="M 9.25 25.64 H 8 c -4.418 0 -8 -3.582 -8 -8 v 0 c 0 -4.418 3.582 -8 8 -8 h 1.25 c 4.418 0 8 3.582 8 8 v 0 C 17.25 22.058 13.668 25.64 9.25 25.64 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
<path d="M 82 53 H 8 c -4.418 0 -8 -3.582 -8 -8 v 0 c 0 -4.418 3.582 -8 8 -8 h 74 c 4.418 0 8 3.582 8 8 v 0 C 90 49.418 86.418 53 82 53 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
<path d="M 82 80.36 H 8 c -4.418 0 -8 -3.582 -8 -8 v 0 c 0 -4.418 3.582 -8 8 -8 h 74 c 4.418 0 8 3.582 8 8 v 0 C 90 76.779 86.418 80.36 82 80.36 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

2
resources/index.html
View File

@ -25,10 +25,12 @@
<button class="playBtn" id="playOfficial" onclick="launchOfficial()">Play Official</button>
</div>
<div id="secondHalf">
<div id="ipList" style="display: none;"></div>
<div id="secondControlContainer">
<div id="serverInput">
<input type="text" id="ip" placeholder="IP Address" oninput="handleFavoriteInput()"/>
<img src="icons/star_empty.svg" id="star" onclick="setFavorite()" />
<img src="icons/list.svg" id="star" onclick="handleFavoriteList()" />
</div>
<button class="playBtn" id="playPrivate" onclick="launchPrivate()">Play Private</button>
</div>

23
resources/js/index.js
View File

@ -153,6 +153,29 @@ async function handleFavoriteInput() {
}
}
async function handleFavoriteList() {
const ipArr = await getFavIps()
const ipList = document.querySelector('#ipList')
if (ipList.style.display === 'none') {
ipList.innerHTML = ''
const list = ipList.appendChild(
document.createElement('ul')
)
for (const ip of ipArr) {
const elm = document.createElement('li')
elm.innerHTML = ip
list.appendChild(elm)
}
ipList.style.display = 'block'
} else {
ipList.style.display = 'none'
}
}
async function setFavorite() {
const ip = document.querySelector('#ip').value
const ipArr = await getFavIps()

29
resources/style/index.css
View File

@ -11,6 +11,35 @@ body {
filter: brightness(0.6);
}
#ipList {
position: absolute;
z-index: 99;
padding: 10px;
transform: translate(150px, 370px);
background-color: #fff;
border-radius: 5px;
border: 1px solid #ccc;
width: 200px;
}
#ipList ul {
list-style-type: none;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
overflow: auto;
}
#ipList li {
padding: 4px;
border-bottom: 1px solid #ccc;
}
#ipList li:last-child {
border-bottom: none;
}
#controlBar {
display: flex;
flex-direction: row;