serg2-mirrors/GDBrowser
1
0
Fork 0
Code Issues 8 Pull requests 10 Projects Releases Packages Wiki Activity Actions

Improvements to comment page

Browse source 
- Uploader and level ID are now clickable
- Added support for arrow keys
- No longer able to fetch comments if loading icon is showing
- Also fixed some leaderboard desync issues
This commit is contained in:
GDColon 2019-11-02 12:05:22 -04:00
parent 533c011a39
commit dd034c5999
3 changed files with 30 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
assets/css/browser.css
View file

@ -497,7 +497,6 @@ input::-webkit-inner-spin-button {
height: 75%;
overflow-y: auto;
overflow-x: hidden;
cursor: default;
}
#searchBox::-webkit-scrollbar, #statusDiv::-webkit-scrollbar, #commentBox::-webkit-scrollbar {

38
html/comments.html
View file

@ -51,12 +51,12 @@
<div class="supercenter" id="pageUp" style="top: 4.8%; height: 10%; width: 100%;">
<h1 class="smaller inline" id="levelName"></h1>
<h2 class="smallGold inline" id="levelAuthor" style="margin: 0.8vh 0 0 3vh"></h2>
<a id="authorLink"><h2 class="smallGold inline gdButton" id="levelAuthor" style="margin: 0.8vh 0 0 3vh"></h2></a>
</div>
<div class="supercenter" id="pageUp" style="top: 100%; height: 10%; width: 100%;">
<h2 class="smallGold inline" id="levelVersion"></h2>
<h2 class="smallGold inline" id="levelID" style="margin-left: 6vh"></h2>
<a id="levelLink"><h2 class="smallGold inline gdButton" id="levelID" style="margin-left: 6vh"></h2></a>
</div>
</div>
@ -78,6 +78,7 @@ let {mode, compact} = JSON.parse(localStorage.getItem('commentPreset') || '{"mod
let lvlID = window.location.pathname.split('/')[2]
let history = false;
let page = 0
let loadingComments = true
if (mode == "top") {
$('#timeSort').attr('src', "../assets/sort-time.png")
@ -106,10 +107,14 @@ fetch(target).then(res => res.json()).then(lvl => {
}
else {
if (lvl.accountID == "0") $('#levelAuthor').addClass("green")
console.log(lvl)
if (lvl.accountID == "0" || !lvl.accountID) $('#levelAuthor').addClass("green").removeClass("gdButton")
$('#levelName').text(lvl.name || ("Nonexistent level " + lvlID))
$('#levelAuthor').text("By " + (lvl.author || "-"))
$('#levelID').text("ID: " + lvlID)
if (lvl.accountID && lvl.author != "-") $('#authorLink').attr('href', '../profile/' + lvl.author)
if (lvl.id) $('#levelLink').attr('href', '../' + lvl.id)
else $('#levelID').removeClass("gdButton")
$('#levelVersion').text("Version: " + (lvl.version || 0))
document.title = "Comments for " + (lvl.name || lvlID)
@ -204,20 +209,19 @@ fetch(`../api${!history ? window.location.pathname : "/comments/" + lvl.playerID
}
$('#loading').hide()
return loadingComments = false;
})
return loadingComments = false;
}
let loadingComments = false
loadingComments = false
appendComments()
$('#pageUp').click(function() {page += 1; appendComments()})
$('#pageDown').click(function() {page -= 1; appendComments()})
$('#pageUp').click(function() {if (loadingComments) return; page += 1; appendComments()})
$('#pageDown').click(function() {if (loadingComments) return; page -= 1; appendComments()})
$('#topSort').click(function() {
if (mode == "top") return;
if (mode == "top" || loadingComments) return;
mode = "top";
page = 0;
$('#timeSort').attr('src', "../assets/sort-time.png")
@ -226,7 +230,7 @@ $('#topSort').click(function() {
})
$('#timeSort').click(function() {
if (mode == "time") return;
if (mode == "time" || loadingComments) return;
mode = "time";
page = 0;
$('#timeSort').attr('src', "../assets/sort-time-on.png")
@ -235,6 +239,7 @@ $('#timeSort').click(function() {
})
$('#compactMode').click(function() {
if (loadingComments) return;
compact = !compact
page = 0;
$('#compactMode').attr('src', `../assets/compact-${compact ? "on" : "off"}.png`)
@ -242,6 +247,7 @@ $('#compactMode').click(function() {
})
$('#refresh').click(function() {
if (loadingComments) return
page = 0;
appendComments()
})
@ -254,6 +260,18 @@ localStorage.setItem('commentPreset', JSON.stringify({
}))
})
$(document).keydown(function(k) {
if (loadingComments) return;
if (k.which == 37 && $('#pageDown').is(":visible")) { //left
$('#pageDown').trigger('click')
}
if (k.which == 39 && $('#pageUp').is(":visible")) { //right
$('#pageUp').trigger('click')
}
});
});
</script>

4
html/levelboard.html
View file

@ -104,12 +104,12 @@ function leaderboard() {
${'<div class="inline" style="width: 12%"><img class="valign" src="../assets/silvercoin.png" style="height: 33%"></div>'.repeat(x.coins)}
</h3>
<div class="center" style="position:absolute; top: ${6.5 + (y * 16.58)}%; left: 2.2%; transform:scale(0.82); height: 10%; width: 12.5%;">
<div class="center" style="position:absolute; top: ${6.5 + (y * 16.57)}%; left: 2.2%; transform:scale(0.82); height: 10%; width: 12.5%;">
<div class="inline" style="width: 50%; margin: 0% 20% 0% 10%; transform:translateY(-15%)"><h2 class="inline center" style="transform:scale(${1-shift[0]}) translateX(-${shift[1]}%)">${x.rank}</h2></div>
<img class="inline spaced lazyLoad" data-src="../icon/${x.username}" height="120%" style="margin-bottom: 0%; transform:scale(1.1)">
</div>
<div class="center" style="position:absolute; top: ${20.5 + (y * 16.58)}%; right: 0.3%; height: 10%; width: 12.5%;">
<div class="center" style="position:absolute; top: ${20.5 + (y * 16.57)}%; right: 0.3%; height: 10%; width: 12.5%;">
<p class="commentDate">${x.date}</p>
</div>