2019-10-15 23:42:47 -03:00
< head >
< title > Comments< / title >
< meta charset = "utf-8" >
2019-10-23 19:40:31 -03:00
< link href = "../css/browser.css" type = "text/css" rel = "stylesheet" >
2019-10-15 23:42:47 -03:00
< 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 >
2019-10-22 20:54:19 -03:00
< body class = "levelBG" onbeforeunload = "saveUrl()" >
2019-10-15 23:42:47 -03:00
< div id = "everything" >
< div style = "position:absolute; bottom: 0%; left: 0%; width: 100%" >
2019-10-18 17:48:33 -03:00
< img class = "cornerPiece" src = "../assets/corner.png" width = 7%; >
2019-10-15 23:42:47 -03:00
< / div >
< div style = "position:absolute; bottom: 0%; right: 0%; width: 100%; text-align: right;" >
2019-10-18 17:48:33 -03:00
< img class = "cornerPiece" src = "../assets/corner.png" width = 7%; style = "transform: scaleX(-1)" >
2019-10-15 23:42:47 -03:00
< / 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 >
2019-10-23 19:40:31 -03:00
< div class = "supercenter" style = "left: 3%; top: 15%; height: 10%" >
2019-10-15 23:42:47 -03:00
< img class = "gdButton" id = "topSort" src = "../assets/sort-likes.png" height = "90%" >
< / div >
2019-10-23 19:40:31 -03:00
< div class = "supercenter" style = "left: 3%; top: 25.5%; height: 10%" >
2019-10-15 23:42:47 -03:00
< img class = "gdButton" id = "timeSort" src = "../assets/sort-time-on.png" height = "90%" >
< / div >
2019-10-23 19:40:31 -03:00
< div class = "supercenter" style = "left: 3%; top: 36%; height: 10%" >
< img class = "gdButton" id = "compactMode" src = "../assets/compact-off.png" height = "90%" >
< / div >
2019-10-15 23:42:47 -03:00
< 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 >
< h2 class = "smallGold inline" id = "levelAuthor" style = "margin: 0.8vh 0 0 3vh" > < / h2 >
< / 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 >
< / 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 >
2019-10-21 12:20:25 -03:00
< 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 >
2019-10-24 23:27:09 -03:00
< script type = "text/javascript" src = "../assets/dragscroll.js" > < / script >
2019-10-15 23:42:47 -03:00
< script >
2019-10-24 01:51:20 -03:00
let {mode, compact} = JSON.parse(localStorage.getItem('commentPreset') || '{"mode": "top", "compact": true}')
2019-10-24 00:33:20 -03:00
2019-10-15 23:42:47 -03:00
let lvlID = window.location.pathname.split('/')[2]
let history = false;
2019-10-24 00:33:20 -03:00
let page = 0
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`)
2019-10-23 19:40:31 -03:00
2019-10-15 23:42:47 -03:00
let target = `../api/level/${lvlID}`
if (lvlID > 99999999 || lvlID < -99999999 ) window . location . href = window.location.href.replace("comments", " search " )
if (!Number(lvlID)) {history = true; target = `../api/profile/${lvlID}`}
fetch(target).then(res => res.json()).then(lvl => {
if (history) {
2019-10-22 12:31:04 -03:00
if (!lvl.username) return window.location.href = window.location.href.replace("comments", "search")
2019-10-15 23:42:47 -03:00
$('#levelName').text(lvl.username + "'s comments")
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 == "0") $('#levelAuthor').addClass("green")
$('#levelName').text(lvl.name || ("Nonexistent level " + lvlID))
$('#levelAuthor').text("By " + (lvl.author || "-"))
$('#levelID').text("ID: " + lvlID)
$('#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"}!`)
}
}
2019-10-23 19:40:31 -03:00
function appendComments(dontClear, bump) {
let p = compact ? ((page + 1) * 2) - 2 + (bump||0) : page
2019-10-15 23:42:47 -03:00
if (loadingComments) return;
else loadingComments = true;
2019-10-23 19:40:31 -03:00
if (!dontClear) $('#commentBox').html(`< div class = "supercenter" id = "loading" style = "height: 12%;" > < img class = "spin noSelect" src = "../assets/loading.png" height = "105%" > < / div > `)
2019-10-15 23:42:47 -03:00
if (page == 0) $('#pageDown').hide()
else $('#pageDown').show()
2019-10-23 19:40:31 -03:00
fetch(`../api${!history ? window.location.pathname : "/comments/" + lvl.playerID}?page=${p}${history ? "& type=commentHistory" : ""}${mode == "top" ? "& top" : ""}`).then(res => res.json()).then(res => {
2019-10-15 23:42:47 -03:00
2019-10-19 14:23:58 -03:00
if (res.length < 9 | | ( history & & lvl . commentHistory = = " off " ) ) $ ( ' # pageUp ' ) . hide ( )
2019-10-15 23:42:47 -03:00
else $('#pageUp').show()
if (res == -1 || (history & & lvl.commentHistory == "off")) {
return $('#loading').hide()
}
res.forEach(x => {
2019-10-23 19:40:31 -03:00
if (!compact) {
////// NORMAL MODE //////
2019-10-15 23:42:47 -03:00
$('#commentBox').append(`
< div class = "commentBG" >
< div class = "comment" >
< img class = "inline" src = "../icon/${!history ? x.username : lvl.username}?form=${x.form}" height = 21% style = "margin-right: 0.8%" >
< a $ { x . username = = " Unknown " | | x . accountID = = " 0 " ? " " : " href " } = " . . / profile / $ { ! history ? x . username : lvl . username } " > < h2 class = "inline ${x.username == " Unknown " | | x . accountID = = " 0 " ? " green " : " gdButton " } " > ${!history ? x.username : lvl.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" >
2019-10-22 12:31:04 -03:00
< p class = "commentText" style = "color: ${!history && x.playerID == lvl.authorID ? " rgb ( 255 , 255 , 75 ) " : x . playerID = = " 16 " ? " rgb ( 50 , 255 , 255 ) " : x . modColor | | lvl . moderator = = " 2 " ? ` rgb ( 75 , 255 , 75 ) ` : " white " } " > ${x.content}< / p >
2019-10-15 23:42:47 -03:00
< / 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 > ` : ""}
< img id = "likeImg" class = "inline" $ { x . likes < 0 ? " style = 'transform: translateY(25%)' " : " " } src = "../assets/${x.likes < 0 ? " dis " : " " } like . png " height = 20% style = "margin-right: 0.4%" >
< h3 class = "inline" > ${x.likes}< / h3 >
< / div >
2019-10-23 19:40:31 -03:00
< / div > `) }
else {
////// COMPACT MODE //////
$('#commentBox').append(`
< div class = "commentBG compactBG" >
< div class = "comment compact" >
< img class = "inline" src = "../icon/${!history ? x.username : lvl.username}?form=${x.form}" height = 21% style = "margin-right: 0.8%" >
< a $ { x . username = = " Unknown " | | x . accountID = = " 0 " ? " " : " href " } = " . . / profile / $ { ! history ? x . username : lvl . username } " > < h2 class = "inline ${x.username == " Unknown " | | x . accountID = = " 0 " ? " green " : " gdButton " } " > ${!history ? x.username : lvl.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: ${!history && x.playerID == lvl.authorID ? " rgb ( 255 , 255 , 75 ) " : x . playerID = = " 16 " ? " rgb ( 50 , 255 , 255 ) " : x . modColor | | lvl . moderator = = " 2 " ? ` rgb ( 75 , 255 , 75 ) ` : " white " } " > ${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 > ` : ""}
< img id = "likeImg" class = "inline" $ { x . likes < 0 ? " style = 'transform: translateY(15%)' " : " " } src = "../assets/${x.likes < 0 ? " dis " : " " } like . png " height = 27% style = "margin-right: 0.4%" >
< h3 class = "inline" > ${x.likes}< / h3 >
< / div >
< / div > `) }
2019-10-15 23:42:47 -03:00
})
$('.commentText').each(function() {
if ($(this).text().length > 100) {
let overflow = ($(this).text().length - 100) * 0.01
$(this).css('font-size', (3.5 - (overflow)) + 'vh')
}
2019-10-23 19:40:31 -03:00
});
if (compact & & p % 2 == 0) {
2019-10-24 00:33:20 -03:00
$('#loading').hide()
2019-10-23 19:40:31 -03:00
return appendComments(true, 1)
}
2019-10-24 00:33:20 -03:00
$('#loading').hide()
2019-10-23 19:40:31 -03:00
})
return loadingComments = false;
2019-10-15 23:42:47 -03:00
}
let loadingComments = false
appendComments()
$('#pageUp').click(function() {page += 1; appendComments()})
$('#pageDown').click(function() {page -= 1; appendComments()})
$('#topSort').click(function() {
if (mode == "top") 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") return;
mode = "time";
page = 0;
$('#timeSort').attr('src', "../assets/sort-time-on.png")
$('#topSort').attr('src', "../assets/sort-likes.png")
appendComments()
})
2019-10-23 19:40:31 -03:00
$('#compactMode').click(function() {
compact = !compact
page = 0;
$('#compactMode').attr('src', `../assets/compact-${compact ? "on" : "off"}.png`)
appendComments()
})
2019-10-15 23:42:47 -03:00
$('#refresh').click(function() {
page = 0;
appendComments()
})
2019-10-24 00:33:20 -03:00
$(window).on('beforeunload ',function() {
//0 - recent, 1 - top, 2 - recent/compact, 3 - top/compact
2019-10-24 01:51:20 -03:00
localStorage.setItem('commentPreset', JSON.stringify({
mode,
compact
}))
2019-10-24 00:33:20 -03:00
})
2019-10-22 20:54:19 -03:00
});
2019-10-15 23:42:47 -03:00
< / script >
