8fd80d7147
Clicking on a username with a space in it (e.g. "le doge") would redirect you to the profile of the first word only (e.g. "le") also shut up i'm not writng "fix comment bug" that whole present tense thing is stupid
444 lines
18 KiB
HTML
444 lines
18 KiB
HTML
<head>
|
|
<title>Comments</title>
|
|
<meta charset="utf-8">
|
|
<link href="../css/browser.css" 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">
|
|
</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 class="brownBox center supercenter" style="width: 135vh; height: 82%; margin-top: -0.7%">
|
|
|
|
<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: 25%; height: 10%">
|
|
<img class="gdButton" id="refresh" 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-on.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" 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" id="pageUp" style="top: 4.8%; height: 10%; width: 100%;">
|
|
<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" id="pageUp" 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="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.3.1/jquery.min.js"></script>
|
|
<script async type="text/javascript" src="../assets/sizecheck.js"></script>
|
|
<script type="text/javascript" src="../assets/dragscroll.js"></script>
|
|
<script>
|
|
|
|
let {mode, compact} = JSON.parse(localStorage.getItem('commentPreset') || '{"mode": "top", "compact": true}')
|
|
let messageText = 'Your <span style="color: yellow">Geometry Dash password</span> will <span style="color: lime">not be stored</span> anywhere on the site, both <span style="color:rgb(113, 234, 255)">locally and server-side.</span> You can view the code used for posting a comment <a class="menuLink" target="_blank" href="https://github.com/GDColon/GDBrowser/blob/master/api/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
|
|
|
|
if (mode == "top") {
|
|
$('#timeSort').attr('src', "../assets/sort-time.png")
|
|
$('#topSort').attr('src', "../assets/sort-likes-on.png")
|
|
}
|
|
|
|
$('#compactMode').attr('src', `../assets/compact-${compact ? "on" : "off"}.png`)
|
|
|
|
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)
|
|
|
|
fetch(target).then(res => res.json()).then(lvl => {
|
|
|
|
if (history) {
|
|
|
|
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.authorID + "?user")
|
|
}
|
|
else $('#authorLink').attr('href', '../profile/' + lvl.author)
|
|
$('#levelName').text(lvl.name || ("Nonexistent level " + lvlID))
|
|
$('#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(dontClear, bump) {
|
|
|
|
let p = compact ? ((page + 1) * 2) - 2 + (bump||0) : page
|
|
|
|
if (loadingComments && !dontClear) return;
|
|
else loadingComments = true;
|
|
|
|
if (!dontClear) $('#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()
|
|
else $('#pageDown').show()
|
|
|
|
fetch(`../api${!history ? window.location.pathname : "/comments/" + lvl.playerID}?page=${p}${history ? "&type=commentHistory" : ""}${mode == "top" ? "&top" : ""}`).then(res => res.json()).then(res => {
|
|
|
|
if (res.length < 9 || (history && lvl.commentHistory != "all")) $('#pageUp').hide()
|
|
else $('#pageUp').show()
|
|
|
|
if (res == -1 || (history && lvl.commentHistory != "all")) {
|
|
loadingComments = false; return $('#loading').hide()
|
|
}
|
|
|
|
res.forEach(x => {
|
|
|
|
let userName = !history ? x.username : lvl.username
|
|
let userLink = encodeURI(userName)
|
|
|
|
if (!compact) {
|
|
////// NORMAL MODE //////
|
|
|
|
$('#commentBox').append(`
|
|
<div class="commentBG">
|
|
<div class="comment">
|
|
<img class="inline" src="../icon/${userLink}?form=${x.form}" height=21% style="margin-right: 0.8%">
|
|
<a href=../${x.accountID == "0" ? `search/${x.playerID}?user` : `../profile/${userLink}`}>
|
|
<h2 class="inline gdButton ${x.accountID == "0" ? "green unregistered" : ""}">${userName}</h2></a>
|
|
${x.modColor || lvl.moderator == "2" ? `<img class="inline" src="../assets/mod-elder.png" height=18% style="margin-left: 0.6%;">` : ""}
|
|
<p class="commentPercent inline">${x.percent ? x.percent + "%" : ""}</p>
|
|
|
|
<div class="commentAlign">
|
|
<p class="commentText" style="color: rgb(${!history && x.playerID == lvl.authorID ? "255, 255, 75" : x.playerID == "16" ? "50, 255, 255" : x.modColor || lvl.moderator == "2" ? "75, 255, 75" : x.browserColor ? "255, 180, 255" : "255, 255, 255"})">${x.content}</p>
|
|
</div>
|
|
</div>
|
|
<p class="commentDate">${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 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 class="inline">${x.likes}</h3>
|
|
</div>
|
|
</div>`) }
|
|
|
|
else {
|
|
////// COMPACT MODE //////
|
|
|
|
$('#commentBox').append(`
|
|
<div class="commentBG compactBG">
|
|
<div class="comment compact">
|
|
<img class="inline" src="../icon/${userLink}?form=${x.form}" height=21% style="margin-right: 0.8%">
|
|
<a href=../${x.accountID == "0" ? `search/${x.playerID}?user` : `../profile/${userLink}`}>
|
|
<h2 class="inline gdButton ${x.accountID == "0" ? "green unregistered" : ""}">${userName}</h2></a>
|
|
${x.modColor || lvl.moderator == "2" ? `<img class="inline" src="../assets/mod-elder.png" height=18% style="margin-left: 0.6%;">` : ""}
|
|
<p class="commentPercent inline">${x.percent ? x.percent + "%" : ""}</p>
|
|
|
|
<div class="commentAlign">
|
|
<p class="commentText" style="color: rgb(${!history && x.playerID == lvl.authorID ? "255, 255, 75" : x.playerID == "16" ? "50, 255, 255" : x.modColor || lvl.moderator == "2" ? "75, 255, 75" : x.browserColor ? "255, 180, 255" : "255, 255, 255"})">${x.content}</p>
|
|
</div>
|
|
</div>
|
|
<p class="commentDate compactDate">${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 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 class="inline">${x.likes}</h3>
|
|
</div>
|
|
</div>`) }
|
|
|
|
})
|
|
|
|
$('.commentText').each(function() {
|
|
if ($(this).text().length > 100) {
|
|
let overflow = ($(this).text().length - 100) * 0.01
|
|
$(this).css('font-size', (3.5 - (overflow)) + 'vh')
|
|
}
|
|
|
|
});
|
|
|
|
if (compact && p % 2 == 0) {
|
|
$('#loading').hide()
|
|
return appendComments(true, 1)
|
|
}
|
|
|
|
$('#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()})
|
|
|
|
$('#topSort').click(function() {
|
|
if (mode == "top" || loadingComments) return;
|
|
mode = "top";
|
|
page = 0;
|
|
$('#timeSort').attr('src', "../assets/sort-time.png")
|
|
$('#topSort').attr('src', "../assets/sort-likes-on.png")
|
|
appendComments()
|
|
})
|
|
|
|
$('#timeSort').click(function() {
|
|
if (mode == "time" || loadingComments) return;
|
|
mode = "time";
|
|
page = 0;
|
|
$('#timeSort').attr('src', "../assets/sort-time-on.png")
|
|
$('#topSort').attr('src', "../assets/sort-likes.png")
|
|
appendComments()
|
|
})
|
|
|
|
$('#compactMode').click(function() {
|
|
if (loadingComments) return;
|
|
compact = !compact
|
|
page = 0;
|
|
$('#compactMode').attr('src', `../assets/compact-${compact ? "on" : "off"}.png`)
|
|
appendComments()
|
|
})
|
|
|
|
$('#refresh').click(function() {
|
|
if (loadingComments) return
|
|
page = 0;
|
|
appendComments()
|
|
})
|
|
|
|
$('#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") {$('.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 => {$('.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) {
|
|
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") {$('.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 => {$('.postbutton').show();$('#likeMessage').text(e.responseText.includes("DOCTYPE") ? "Something went wrong..." : e.responseText)})
|
|
})
|
|
})
|
|
|
|
$(window).on('beforeunload ', function() {
|
|
localStorage.setItem('commentPreset', JSON.stringify({mode, compact}))
|
|
})
|
|
|
|
$('#content').keydown(function(k){
|
|
if (k.keyCode == 13) return false
|
|
})
|
|
|
|
$(document).keydown(function(k) {
|
|
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>
|
|
|