GDBrowser/html/comments.html
2022-05-29 13:18:14 -04:00

551 lines
22 KiB
HTML

<head>
<title>Comments</title>
<meta charset="utf-8">
<link href="../assets/css/browser.css?v=1" type="text/css" rel="stylesheet">
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-135255146-3"></script><script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'UA-135255146-3');</script>
<link rel="icon" href="../assets/like.png">
<meta id="meta-title" property="og:title" content="Level Comments">
<meta id="meta-desc" property="og:description" content="View the comments of a Geometry Dash level!">
<meta id="meta-image" name="og:image" itemprop="image" content="https://gdbrowser.com/assets/like.png">
<meta name="twitter:card" content="summary">
</head>
<body class="levelBG" onbeforeunload="saveUrl()">
<div id="everything">
<div class="popup" id="postComment">
<div class="brownbox bounce center supercenter" style="height: 80%; width: 110vh">
<p style="position:absolute; right: 1vh; margin-top: 0; text-align: left" id="charcount">150</p>
<h1 class="smaller center" style="font-size: 5.5vh">Add Comment</h1>
<textarea placeholder="Insert comment" id="content" maxlength="150" style="margin: 2% 0%"></textarea><br>
<form action="nothing lol">
<h3 class="center">GD Username</h3>
<input type="text" name="gdbrowser" id="username" maxlength="50" style="height: 8vh; width: 90%; text-align: center; margin-top: 0.5%">
<h3 class="center" style="margin-top: 2%">GD Password</h3>
<input type="password" id="password" maxlength="50" style="height: 8vh; width: 90%; text-align: center; margin-top: 0.5%">
</form>
<div style="min-height: 16%; max-height: 16%">
<p id="message" style="padding: 0% 10%; margin-top: 1.5%"></p>
</div>
<img src="../assets/btn-cancel.png" height=10%; class="postButton gdButton center" style="margin-right: 1%" onclick="$('#postComment').hide(); $('textarea').val('')">
<img src="../assets/btn-submit.png" type="submit" height=10%; class="postButton gdButton center" style="margin-left: 1%" id="submitComment">
</div>
</div>
<div class="popup" id="likeComment">
<div class="brownbox bounce center supercenter" style="height: 75%; width: 100vh">
<h1 class="smaller center" style="font-size: 5.5vh">Vote</h1>
<img src="../assets/smashLike.png" id="likebtn" class="inline gdButton likeButton"><!--
--><img src="../assets/smashDislike.png" id="dislikebtn" class="inline gdButton likeButton youAreNotTheOne">
<form action="nothing lol">
<h3 class="center">GD Username</h3>
<input type="text" name="gdbrowser" id="like-username" maxlength="50" style="height: 8vh; width: 90%; text-align: center; margin-top: 0.5%">
<h3 class="center" style="margin-top: 2%">GD Password</h3>
<input type="password" id="like-password" maxlength="50" style="height: 8vh; width: 90%; text-align: center; margin-top: 0.5%">
</form>
<div style="min-height: 18%; max-height: 18%">
<p id="likeMessage" style="padding: 0% 10%; margin-top: 2.5%"></p>
</div>
<img src="../assets/btn-cancel.png" height=10%; class="postButton gdButton center" style="margin-right: 1%" onclick="$('#likeComment').hide(); $('#likebtn').trigger('click');">
<img src="../assets/btn-submit.png" type="submit" height=10%; class="postButton gdButton center" style="margin-left: 1%" id="submitVote">
</div>
</div>
<div style="position:absolute; bottom: 0%; left: 0%; width: 100%">
<img class="cornerPiece" src="../assets/corner.png" width=7%;>
</div>
<div style="position:absolute; bottom: 0%; right: 0%; width: 100%; text-align: right;">
<img class="cornerPiece" src="../assets/corner.png" width=7%; style="transform: scaleX(-1)">
</div>
<div style="text-align: right; position:absolute; top: 1%; right: 1.25%">
<h2 class="smallGold" id="pagenum"></h2>
</div>
<div class="brownBox center supercenter" style="width: 135vh; height: 82%; margin-top: -0.25%">
<div class="lightBox center dragscroll" id="commentBox" style="margin: 4.5% auto; width: 115vh; height: 86%; background-color: #934E27"></div>
<div class="supercenter" style="left: 97%; top: 15.5%; height: 8.5%">
<img class="gdButton" id="lastPage" src="../assets/double-arrow.png" height="90%">
</div>
<div class="supercenter" id="firstPage" style="left: 97%; top: 27.5%; height: 8.5%; display: none;">
<img class="gdButton refreshBtn" src="../assets/double-arrow.png" style="transform: scaleX(-1);" height="90%">
</div>
<div class="supercenter" id="refreshButton" style="left: 97%; top: 27.5%; height: 10%">
<img class="gdButton refreshBtn" src="../assets/refresh.png" height="90%">
</div>
<div class="supercenter" style="left: 3%; top: 15%; height: 10%">
<img class="gdButton" id="topSort" src="../assets/sort-likes.png" height="90%">
</div>
<div class="supercenter" style="left: 3%; top: 25.5%; height: 10%">
<img class="gdButton" id="timeSort" src="../assets/sort-time.png" height="90%">
</div>
<div class="supercenter" style="left: 3%; top: 36%; height: 10%">
<img class="gdButton" id="compactMode" src="../assets/compact-off.png" height="90%">
</div>
<div class="supercenter" style="left: 3%; top: 63%; height: 11%">
<img class="gdButton" id="autoMode" src="../assets/playbutton.png" height="90%">
</div>
<div class="supercenter" id="pageDown" style="left: 3%; top: 50%; height: 10%; display: none;">
<img class="gdButton" src="../assets/arrow-left.png" height="95%">
</div>
<div class="supercenter" id="pageUp" style="left: 97%; top: 50%; height: 10%;">
<img class="gdButton" src="../assets/arrow-right.png" height="95%">
</div>
<div class="supercenter" style="top: 4.8%; height: 10%; width: 100%;">
<h2 class="smallGold inline" id="liveText" style="display: none; font-size: 4vh; color:red; margin: 0.4vh 3vh 0 0">[LIVE]</h2>
<h1 class="smaller inline" id="levelName"></h1>
<a id="authorLink"><h2 class="smallGold inline gdButton" id="levelAuthor" style="margin: 0.8vh 0 0 3vh"></h2></a>
</div>
<div class="supercenter" style="top: 100%; height: 10%; width: 100%;">
<h2 class="smallGold inline" id="levelVersion"></h2>
<a id="levelLink"><h2 class="smallGold inline gdButton" id="levelID" style="margin-left: 6vh"></h2></a>
</div>
<div id="leaveComment" style="display: none; position:absolute;bottom: 0%;right: 0%;width: 14%;text-align: right;transform: translate(30%, 40%);">
<img class="gdButton" src="../assets/comment.png" width="60%" onclick="$('#content').trigger('input'); $('#postComment').show();">
</div>
</div>
<div style="position:absolute; top: 2%; left: 1.5%; width: 10%; height: 25%; pointer-events: none">
<img class="gdButton yesClick" id="backButton" src="../assets/back.png" height="30%" onclick="backButton()">
</div>
</div>
</body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/6.2.2/browser/pixi.js"></script>
<script type="text/javascript" src="../iconkit/icon.js"></script>
<script type="text/javascript" src="../global.js?v=1"></script>
<script type="text/javascript" src="../dragscroll.js"></script>
<script>
let {mode, compact} = JSON.parse(localStorage.getItem('commentPreset') || '{"mode": "top", "compact": true}')
let messageText = 'Your <cy>Geometry Dash password</cy> will <cg>not be stored</cg> anywhere on the site, both <ca>locally and server-side.</ca> You can view the code used for posting a comment <a class="menuLink" target="_blank" href="https://github.com/GDColon/GDBrowser/blob/master/api/post/postComment.js">here</a>.'
$('#message').html(messageText)
$('#likeMessage').html(messageText.replace("posting", "liking").replace("postComment", "like"))
let lvlID = window.location.pathname.split('/')[2]
let history = false
let page = 0
let loadingComments = true
let like = true
let lastPage = 0
let auto = false
let interval = null
let commentCache = {}
let target = `../api/level/${lvlID}`
if (lvlID > 999999999 || lvlID < -999999999) window.location.href = window.location.href.replace("comments", "search")
if (!Number.isInteger(+lvlID)) {history = true; target = `../api/profile/${lvlID}`}
else lvlID = Math.round(+lvlID)
if (mode == "top") { mode = "top"; $('#topSort').attr('src', "../assets/sort-likes-on.png") }
else $('#timeSort').attr('src', "../assets/sort-time-on.png")
function clean(text) {return text.replace(/&/g, "&#38;").replace(/</g, "&#60;").replace(/>/g, "&#62;").replace(/=/g, "&#61;").replace(/"/g, "&#34;").replace(/'/g, "&#39;")}
$('#compactMode').attr('src', `../assets/compact-${compact ? "on" : "off"}.png`)
Fetch(target).then(lvl => buildComments(lvl)).catch(e => buildComments({}))
function buildComments(lvl) {
if (gdps) {
$('#leaveComment').hide()
$('#postComment').remove()
}
if (history) {
$('#autoMode').remove()
$('#lastPage').hide()
if (!lvl.username) return window.location.href = window.location.href.replace("comments", "search")
$('#levelName').text(lvl.username + "'s comments")
$('#leaveComment').hide()
document.title = lvl.username + "'s comments"
$('#meta-title').attr('content', lvl.username + "'s comment history")
$('#meta-desc').attr('content', `View all of ${lvl.username}'s Geometry Dash comments!`)
}
else {
if (lvl.accountID == undefined) $('#levelAuthor').remove()
else if (lvl.accountID == 0) {
$('#levelAuthor').addClass("green").addClass("unregistered")
$('#authorLink').attr('href', '../search/' + lvl.playerID + "?user")
}
else $('#authorLink').attr('href', `../u/${lvl.accountID}.`)
$('#levelName').text(lvl.name || ("Nonexistent level " + lvlID))
if (!lvl.name) $('#leaveComment').hide()
$('#levelAuthor').text("By " + (lvl.author || "-"))
$('#levelID').text("ID: " + lvlID)
if (lvl.accountID && 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)
if (lvl.name) {
$('#meta-title').attr('content', `Comments for ${lvl.name}`)
$('#meta-desc').attr('content', `View all the comments for ${lvl.name} by ${lvl.author || "Unknown"}!`)
}
}
function appendComments(auto, noCache) {
if (loadingComments) return;
else loadingComments = true;
if (!auto) $('#commentBox').html(`<div class="supercenter" id="loading" style="height: 12%;"><img class="spin noSelect" src="../assets/loading.png" height="105%"></div>`)
if (page == 0) {
$('#pageDown').hide()
$('#firstPage').hide()
$('#refreshButton').show()
}
else {
$('#pageDown').show()
if (!history) {
$('#firstPage').show()
$('#refreshButton').hide()
}
}
if (!noCache && commentCache[page]) addComments(commentCache[page])
fetch(`../api${!history ? window.location.pathname : "/comments/" + lvl.playerID}?count=${compact && !auto ? 20 : 10}&page=${page}${history ? "&type=commentHistory" : ""}&${mode}`).then((res) => {
if (res.status === 204) return [];
return res.json();
}).then(addComments)
function addComments(res) {
if (history && lvl.commentHistory != "all") $('#pageUp').hide()
if (res == -1 || (history && lvl.commentHistory != "all")) {
loadingComments = false; return $('#loading').hide()
}
commentCache[page] = res
res.forEach((x, index) => {
$(`#date-${x.ID}`).html(x.date)
$(`#likes-${x.ID}`).html(x.likes)
$(`#thumb-${x.ID}`).attr('style', x.likes < 0 ? `transform: translateY(${compact ? '15' : '25'}%); margin-right: 0.4%` : '').attr('src', `../assets/${x.likes < 0 ? "dis" : ""}like.png`)
if ($(`.comment[commentID=${x.ID}]`).length) return // auto mode, ignore duplicates
let bgCol = index % 2 ? "evenComment" : "oddComment"
if (auto) bgCol = $('.commentBG').first().hasClass('oddComment') ? "evenComment" : "oddComment"
let userName = !history ? x.username : lvl.username
let modNumber = x.moderator || lvl.moderator
if (x.pages) {
lastPage = x.pages
$('#pagenum').html(`Page ${page+1} of ${x.pages}`)
if (page+1 >= x.pages) $('#pageUp').hide()
else $('#pageUp').show()
}
////// NORMAL MODE //////
commentHTML = !compact ? `
<div class="commentBG ${bgCol}">
<div class="comment" commentID="${x.ID}">
<div class="commentRow">
<gdicon class="commentIcon inline" cacheID=${x.playerID} iconID=${x.icon.icon} iconForm="${x.icon.form}" col1="${x.icon.col1}" col2="${x.icon.col2}" glow="${x.icon.glow}"></gdicon>
<a href=../${x.accountID == "0" ? `search/${x.playerID}?user` : `../u/${x.accountID}.`}>
<h2 class="inline gdButton ${x.accountID == "0" ? "green unregistered" : ""}">${userName}</h2></a>
${modNumber > 0 ? `<img class="inline" src="../assets/mod${modNumber > 2 ? "-extra" : modNumber == 2 ? "-elder" : ""}.png" style="margin-left: 1%; width: 3.5%">` : ""}
<p class="commentPercent inline">${x.percent ? x.percent + "%" : ""}</p>
</div>
<div class="commentAlign">
<p class="pre commentText" style="color: rgb(${!history && x.playerID == lvl.playerID ? "255,255,75" : x.browserColor ? "255,180,255" : x.color})">${clean(x.content)}</p>
</div>
</div>
<p class="commentDate" id="date-${x.ID}">${x.date}</p>
<div class="commentLikes">
${history ? `<h3 style="margin-right: 1.5vh; pointer-events: all;" class="gold inline"><a href="../${x.levelID}">(${x.levelID})</a></h3>` : ""}
<div class="inline gdButton likeComment" commentID="${x.ID}" ${x.levelID ? `levelID="${x.levelID}"` : ""}">
<img id="thumb-${x.ID}" class="inline gdButton" ${x.likes < 0 ? "style='transform: translateY(25%); margin-right: 0.4%'" : ""} src="../assets/${x.likes < 0 ? "dis" : ""}like.png" height=20%>
</div>
<h3 id="likes-${x.ID}" class="inline">${x.likes}</h3>
</div>
</div>`
////// COMPACT MODE //////
: `
<div class="commentBG compactBG ${bgCol}">
<div class="comment compact" commentID="${x.ID}">
<div class="commentRow">
<gdicon class="commentIcon inline" cacheID=${x.playerID} iconID=${x.icon.icon} iconForm="${x.icon.form}" col1="${x.icon.col1}" col2="${x.icon.col2}" glow="${x.icon.glow}"></gdicon>
<a href=../${x.accountID == "0" ? `search/${x.playerID}?user` : `../u/${x.accountID}.`}>
<h2 class="inline gdButton ${x.accountID == "0" ? "green unregistered" : ""}">${userName}</h2></a>
${modNumber > 0 ? `<img class="inline" src="../assets/mod${modNumber > 2 ? "-extra" : modNumber == 2 ? "-elder" : ""}.png" style="margin-left: 1.2%; width: 3.2%">` : ""}
<p class="commentPercent inline">${x.percent ? x.percent + "%" : ""}</p>
</div>
<div class="commentAlign">
<p class="pre commentText" style="color: rgb(${!history && x.playerID == lvl.playerID ? "255,255,75" : x.browserColor ? "255,180,255" : x.color})">${clean(x.content)}</p>
</div>
</div>
<p class="commentDate compactDate" id="date-${x.ID}">${x.date}</p>
<div class="commentLikes">
${history ? `<h3 style="margin-right: 0.5vh; pointer-events: all;" class="gold inline"><a href="../${x.levelID}">(${x.levelID})</a></h3>` : ""}
<div class="inline gdButton likeComment" commentID="${x.ID}"${x.levelID ? `levelID="${x.levelID}"` : ""}>
<img id="thumb-${x.ID}" class="inline" ${x.likes < 0 ? "style='transform: translateY(15%); margin-right: 0.4%'" : ""} src="../assets/${x.likes < 0 ? "dis" : ""}like.png" height=27%>
</div>
<h3 id="likes-${x.ID}" class="inline">${x.likes}</h3>
</div>
</div>`
if (auto) $('#commentBox').prepend(commentHTML)
else $('#commentBox').append(commentHTML)
})
$('.commentText').each(function() {
if ($(this).text().length > 100) {
let overflow = ($(this).text().length - 100) * 0.01
$(this).css('font-size', (3.5 - (overflow)) + 'vh')
}
});
renderIcons()
$('#loading').hide()
return loadingComments = false;
}
}
loadingComments = false
appendComments()
$('#pageUp').click(function() {if (loadingComments) return; page += 1; appendComments()})
$('#pageDown').click(function() {if (loadingComments) return; page -= 1; appendComments()})
$('#lastPage').click(function() {if (loadingComments || auto) return; page = lastPage - 1; appendComments()})
function resetSort() {
page = 0
auto = false
clearInterval(interval)
commentCache = {}
$('#liveText').hide()
$('#autoMode').attr('src', `../assets/playbutton.png`)
}
$('#topSort').click(function() {
if (mode == "top" || loadingComments) return;
resetSort()
mode = "top";
$('#timeSort').attr('src', "../assets/sort-time.png")
$('#topSort').attr('src', "../assets/sort-likes-on.png")
appendComments()
})
$('#timeSort').click(function() {
if (mode == "time" || loadingComments) return;
resetSort()
mode = "time";
$('#timeSort').attr('src', "../assets/sort-time-on.png")
$('#topSort').attr('src', "../assets/sort-likes.png")
appendComments()
})
$('#compactMode').click(function() {
if (loadingComments) return;
compact = !compact
lastPage = 0;
page = 0;
$('#compactMode').attr('src', `../assets/compact-${compact ? "on" : "off"}.png`)
appendComments()
})
$('#autoMode').click(function() {
if (loadingComments) return;
auto = !auto
mode = "time"
page = 0;
$('#timeSort').attr('src', "../assets/sort-time-on.png")
$('#topSort').attr('src', "../assets/sort-likes.png")
if (auto) {
document.title = "[LIVE] " + document.title
$('#liveText').show()
$('#autoMode').attr('src', `../assets/stopbutton.png`)
interval = setInterval(function() { appendComments(true) }, 3000)
}
else {
document.title = document.title.slice(6)
$('#liveText').hide()
$('#autoMode').attr('src', `../assets/playbutton.png`)
clearInterval(interval)
}
appendComments(true, true)
})
$(document).on('click', '.refreshBtn', function () {
if (loadingComments) return
lastPage = 0;
page = 0;
appendComments(false, true)
})
$('#content').on('input', function() {
let remaining = 150-$('#content').val().length
$('#charcount').text(remaining)
})
$('#submitComment').click(function() {
let comment = $('#content').val()
let username = $('#username').val()
let password = $('#password').val()
let levelID = window.location.pathname.split('/')[2]
let accountID = 0
if (!content || !username || !password || loadingComments) return $('#postComment').hide()
$('#message').text("Posting comment...")
$('.postbutton').hide()
allowEsc = false
fetch(`../api/profile/${username}`).then(res => res.json()).then(res => {
if (!res || res == "-1") {allowEsc = true; $('.postbutton').show(); return $('#message').text("The username you provided doesn't exist!")}
else accountID = res.accountID
$.post("../postComment", {comment, username, password, levelID, accountID, color: true})
.done(x => {
$('#content').val("")
$('#postComment').hide()
$('.postbutton').show()
$('#message').html(messageText)
$('#timeSort').attr('src', "../assets/sort-time-on.png")
$('#topSort').attr('src', "../assets/sort-likes.png")
allowEsc = true
mode = "time"
page = 0
appendComments()
})
.fail(e => {allowEsc = true; $('.postbutton').show();$('#message').text(e.responseText.includes("DOCTYPE") ? "Something went wrong..." : e.responseText)})
})
})
$('#likebtn').click(function() {
$('#likebtn').removeClass('youAreNotTheOne')
$('#dislikebtn').addClass('youAreNotTheOne')
like = true
})
$('#dislikebtn').click(function() {
$('#likebtn').addClass('youAreNotTheOne')
$('#dislikebtn').removeClass('youAreNotTheOne')
like = false
})
let commentID = 0
let lvID = 0
let likeCount, likeImg;
let likedComments;
$(document).on('click', '.likeComment', function(cmnt) {
if (gdps) return
commentID = $(this).attr('commentID')
likedComments = localStorage.likedComments ? JSON.parse(localStorage.likedComments) : []
if (likedComments.includes(commentID)) return;
lvID = $(this).attr('levelID') || 0
likeImg = $(this).find('img')
likeCount = $(this).parent().find('h3:not(.gold)')
$('#likeComment').show()
})
$('#submitVote').click(function() {
if (likedComments.includes(commentID)) return $('#likeMessage').text("You've already liked/disliked this comment!");
let ID = commentID
let username = $('#like-username').val()
let password = $('#like-password').val()
let extraID = lvID || window.location.pathname.split('/')[2]
let accountID = 0
let likeType = like ? "1" : "0"
if (!ID || !username || !password || loadingComments) return $('#postComment').hide()
$('#likeMessage').text(like ? "Liking..." : "Disliking... :(")
$('.postbutton').hide()
allowEsc = false
fetch(`../api/profile/${username}`).then(res => res.json()).then(res => {
if (!res || res == "-1") {allowEsc = true; $('.postbutton').show(); return $('#likeMessage').text("The username you provided doesn't exist!")}
else accountID = res.accountID
$.post("../like", { ID, accountID, password, like: likeType, type: 2, extraID })
.done(x => {
let newCount = parseInt(likeCount.text()) + (like ? 1 : -1)
likeCount.text(newCount)
if (newCount < 0) likeImg.attr('src', '../assets/dislike.png').css('transform', compact ? 'translateY(15%)' : 'translateY(25%)')
else likeImg.attr('src', '../assets/like.png').removeAttr('style')
$('#likeComment').hide()
$('#likebtn').trigger('click')
$('.postbutton').show()
$('#likeMessage').html(messageText.replace("posting", "liking").replace("postComment", "like"))
allowEsc = true
likedComments.push(commentID)
localStorage.setItem('likedComments', JSON.stringify(likedComments))
})
.fail(e => {allowEsc = true; $('.postbutton').show();$('#likeMessage').text(e.responseText.includes("DOCTYPE") ? "Something went wrong..." : e.responseText)})
})
})
$(window).on('beforeunload ', function() {
localStorage.setItem('commentPreset', JSON.stringify({mode, compact}))
})
$('#postComment').on("change keyup keydown paste click", "textarea", function () {
$('#content').val($('#content').val().replace(/[^\S ]+/g, ""))
})
$(document).keydown(function(k) {
if ($('#content').is(':visible')) {
if (k.which == 13) k.preventDefault() //enter
}
if (loadingComments || $('.popup').is(":visible")) return;
if (k.which == 37 && $('#pageDown').is(":visible")) { //left
$('#pageDown').trigger('click')
}
if (k.which == 39 && $('#pageUp').is(":visible")) { //right
$('#pageUp').trigger('click')
}
});
};
</script>