@ -1,16 +1,22 @@
var userID ;
var guildsCache = new Map ( ) ;
window . onload = async ( ) =>
{
const fragment = new URLSearchParams ( window . location . hash . slice ( 1 ) ) ;
const [ accessToken , tokenType ] = [ fragment . get ( 'access_token' ) , fragment . get ( 'token_type' ) ] ;
var guilds ;
if ( ! accessToken ) return window . location . href = '/' ;
updateUser ( accessToken , tokenType ) ;
updateGuildData ( accessToken , tokenType ) ;
document . getElementById ( 'RoleRules' ) . onclick = handleToggleRules ;
} ;
function updateUser ( accessToken , tokenType )
{
const avatar = document . getElementById ( 'avatar' ) ;
const userName = document . getElementById ( 'userName' ) ;
var table = document . getElementById ( 'guilds' )
if ( ! accessToken ) return window . location . href = '/' ;
fetch ( 'https://discord.com/api/users/@me' ,
fetch ( ` ${ window . location . origin } /api/getUser ` ,
{
method : "POST" ,
headers : {
authorization : ` ${ tokenType } ${ accessToken } ` ,
} ,
@ -20,129 +26,252 @@ window.onload = async () =>
{
userID = response . id ;
avatar . style . backgroundImage = ` url(https://cdn.discordapp.com/avatars/ ${ response . id } / ${ response . avatar } .jpeg) `
userName . textContent = response . username
userName . textContent = response . username + "'s servers:"
} )
. catch ( console . error ) ;
fetch ( 'https://discord.com/api/users/@me/guilds' ,
}
function updateGuildData ( accessToken , tokenType )
{
fetch ( ` ${ window . location . origin } /api/getGuildData ` ,
{
method : "POST" ,
headers : {
authorization : ` ${ tokenType } ${ accessToken } ` ,
} ,
} )
. then ( result => result . json ( ) )
. then ( response =>
. then ( guilds =>
{
guilds = response . filter ( x => x . owner == true ) ;
for ( var guild of guilds )
{
( async ( guild ) =>
{
var row = document . createElement ( 'tr' ) ;
var name = document . createElement ( 'td' ) ;
name . textContent = guild . name ;
var settings = document . createElement ( 'td' ) ;
settings . id = guild . id ;
var gear = document . createElement ( 'span' ) ;
gear . classList . add ( 'material-symbols-outlined' )
gear . onclick = handleSettigns
gear . textContent = 'settings' ;
row . appendChild ( name ) ;
var addRemData = document . createElement ( 'td' ) ;
if ( ! await hasRem ( guild . id ) )
{
var button = document . createElement ( 'div' ) ;
button . classList . add ( 'DiscordAddBtn' ) ;
addRemData . appendChild ( button ) ;
}
row . appendChild ( addRemData ) ;
settings . appendChild ( gear ) ;
row . appendChild ( settings ) ;
table . appendChild ( row )
} ) ( guild )
}
if ( guilds . Error ) return console . log ( guilds . Error )
guildsCache = new Map ( ) ;
guilds . forEach ( guild => {
guildsCache . set ( guild . id , guild )
} ) ; ;
makeCards ( guilds ) ;
} )
. catch ( console . error ) ;
} ;
}
function handleSettigns ( event )
{
var guildID = event . target . parentNode . id ;
var guildName = event . target . parentNode . parentNode . childNodes [ 0 ] . textContent ;
var popup = document . getElementById ( 'popup' ) ;
const data = { guildID }
fetch ( ` ${ window . location . origin } /api/getGuildData ` ,
var guild = guildsCache . get ( event . target . id ) ;
if ( ! guild . hasRem ) return window . open ( 'https://discord.com/api/oauth2/authorize?client_id=356104008366030863&permissions=8&scope=bot' )
popup . classList . remove ( 'hidden' ) ;
popup . children [ 1 ] . textContent = guild . name ;
popup . children [ 1 ] . id = guild . id ;
let music = document . getElementById ( 'music' )
music . textContent = guild . music ? 'check_box' : 'check_box_outline_blank' ;
let strikes = document . getElementById ( 'strikes' )
strikes . textContent = guild . strikes ? 'check_box' : 'check_box_outline_blank' ;
music . onclick = requestChange ;
strikes . onclick = requestChange ;
}
function handleClose ( element )
{
if ( element . parentNode . id == 'roleRuleWrapper' ) document . getElementById ( 'popup' ) . classList . remove ( 'hidden' ) ;
element . parentNode . classList . add ( 'hidden' ) ;
}
async function requestChange ( )
{
return await fetch ( ` ${ window . location . origin } /api/change ` ,
{
method : "POST" ,
mode : "cors" ,
headers : {
"Content-Type" : "application/json" ,
} ,
body : JSON . stringify ( data ) , // body data type must match "Content-Type" header
body : JSON . stringify ( { guil dID: event . t arge t. p rentNode. parentNode . children [ 1 ] . id , userID , property : event . target . id } ) , // body data type must match "Content-Type" header
} )
. then ( result => result . json ( ) )
. then ( res =>
{
popup . classList . remove ( 'hidden' ) ;
popup . children [ 1 ] . textContent = guildName ;
popup . children [ 1 ] . id = guildID ;
let music = document . getElementById ( 'music' )
music . textContent = res . music ? 'check_box' : 'check_box_outline_blank' ;
let strikes = document . getElementById ( 'strikes' )
strikes . textContent = res . strikes ? 'check_box' : 'check_box_outline_blank' ;
music . onclick = requestChange ;
strikes . onclick = requestChange ;
if ( ! res . error )
{
let music = document . getElementById ( 'music' )
music . textContent = res . music ? 'check_box' : 'check_box_outline_blank' ;
let strikes = document . getElementById ( 'strikes' )
strikes . textContent = res . strikes ? 'check_box' : 'check_box_outline_blank' ;
}
} )
. catch ( console . error ) ;
}
async function hasRem ( guildID )
async function makeCards ( data )
{
return await fetch ( ` ${ window . location . origin } /api/hasRem ` ,
const canvas = document . createElement ( 'div' )
canvas . classList . add ( 'cards' ) ;
canvas . id = 'cards'
for ( var item of data )
{
method : "POST" ,
( async ( ) =>
{
var card = await makeCard ( item ) ;
canvas . appendChild ( card ) ;
} ) ( item )
}
document . getElementById ( 'Guilds' ) . appendChild ( canvas )
document . getElementById ( "cards" ) . onmousemove = e => {
for ( const card of document . getElementsByClassName ( "card" ) ) {
const rect = card . getBoundingClientRect ( ) ,
x = e . clientX - rect . left ,
y = e . clientY - rect . top ;
card . style . setProperty ( "--mouse-x" , ` ${ x } px ` ) ;
card . style . setProperty ( "--mouse-y" , ` ${ y } px ` ) ;
} ;
}
document . getElementById ( 'cards' ) . onclick = handleSettigns ;
}
async function makeCard ( guild )
{
const card = document . createElement ( 'div' )
card . innerHTML = ` <div id=' ${ guild . id } 'class="card">
< div class = "card-content " >
< div class = "card-image img${guild.hasRem}" >
< img src = $ { guild . icon } > < / i m g >
< / d i v >
< div class = "card-info-wrapper ${guild.hasRem}" >
< div class = "card-info" >
< div class = "card-info-title" >
< h3 > $ { guild . name } < / h 3 >
< h4 > $ { guild . memberCount ? guild . memberCount + ' users on the server.' : 'Rem is not on this server yet.' } < / h 4 >
< / d i v >
< / d i v >
< / d i v >
< / d i v >
< / d i v > `
return card
}
async function getRules ( guildID )
{
return await fetch ( ` ${ window . location . origin } /api/getRules ` ,
{
method : "GET" ,
mode : "cors" ,
headers : {
"Content-Type" : "application/json" ,
} ,
body : JSON . stringify ( { guildID } ) , // body data type must match "Content-Type" header
headers : { guildID } ,
} )
. then ( result => result . json ( ) )
. then ( res =>
{
return res . hasRem ;
return res
} )
. catch ( console . error ) ;
}
async function handleToggleRules ( element )
{
var guildID = element . target . parentNode . getElementsByTagName ( 'h3' ) [ 0 ] . id ;
var rulesElement = document . getElementById ( 'rules' ) ;
var rules = await getRules ( guildID ) ;
if ( ! rules ) return
var ruleArr = [ ]
for ( var rule of rules )
{
ruleArr . push ( ` <p id=" ${ rule . _id } " onclick="changeRule(this)" class="addRoleName"> ${ rule . roleName } </p> ` )
}
rulesElement . innerHTML = `
< i onclick = "handleClose(this)" class = "close material-symbols-outlined" id = "close_bt" >
cancel
< / i >
< p id = "newRole" onclick = "addRule(this)" > New Role < / p >
$ { ruleArr . join ( '' ) }
`
rulesElement . classList . remove ( 'hidden' )
}
function handleClose ( element )
function addRul e( element )
{
element . parentNode . classList . add ( 'hidden' ) ;
element . parentNode . parentNode . classList . add ( 'hidden' ) ;
var ruleWrapper = document . getElementById ( 'roleRuleWrapper' ) ;
ruleWrapper . classList . remove ( 'hidden' ) ;
document . getElementsByClassName ( 'roleRuleWrapper' ) [ 0 ] . setAttribute ( 'data-before' , 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in elit vel nisi sagittis egestas. Donec a laoreet justo. Morbi interdum orci quis tempor tempor. Aenean tempus urna eget placerat maximus. Maecenas vitae condimentum felis, et mollis velit. Duis diam arcu, volutpat ut lectus et, aliquam vestibulum ante. Mauris dignissim libero quis condimentum interdum. Morbi dictum ex faucibus mi vehicula, sed blandit ex molestie. Pellentesque lacinia blandit pellentesque. Nullam at nisl dui.' )
document . getElementById ( 'roleRule' ) . innerText = 'New Rule'
document . getElementById ( 'roleID' ) . placeholder = 'Role ID'
document . getElementById ( 'emojiID' ) . placeholder = 'Emoji ID'
document . getElementById ( 'messageID' ) . placeholder = 'Message ID'
document . getElementById ( 'emojiImg' ) . src = 'images/favicon.ico' ;
}
async function requestChange ( )
function updateRule ( element )
{
return await fetch ( ` ${ window . location . origin } /api/change ` ,
var isNew = false ;
if ( element . parentNode . children [ 1 ] . innerText == 'New Rule' ) isNew = true ;
var ruleID ;
if ( ! isNew ) ruleID = document . getElementById ( 'roleRule' ) . classList [ 1 ] ;
var messageid = document . getElementById ( 'messageID' ) . value ;
var roleid = document . getElementById ( 'roleID' ) . value ;
var emojiid = document . getElementById ( 'emojiID' ) . value ;
var gid = document . getElementsByClassName ( 'guildname' ) [ 0 ] . id ;
fetch ( ` ${ window . location . origin } /api/updateRule ` ,
{
method : "POST" ,
mode : "cors" ,
headers : {
"Content-Type" : "application/json" ,
} ,
body : JSON . stringify ( { guildID : event . target . parentNode . parentNode . children [ 1 ] . id , userID , property : event . target . id } ) , // body data type must match "Content-Type" header
} )
headers : { messageid , roleid , emojiid , gid , isNew , ruleID } ,
} )
. then ( result => result . json ( ) )
. then ( res =>
{
if ( ! res . error )
console . log ( res ) ;
if ( res . success )
{
let music = document . getElementById ( 'music' )
music . textContent = res . music ? 'check_box' : 'check_box_outline_blank' ;
let strikes = document . getElementById ( 'strikes' )
strikes . textContent = res . strikes ? 'check_box' : 'check_box_outline_blank' ;
element . parentNode . classList . add ( 'hidden' )
document . getElementById ( 'popup' ) . classList . remove ( 'hidden' ) ;
}
else alert ( res . error ) ;
} )
. catch ( console . error ) ;
}
async function getRule ( id )
{
return await fetch ( ` ${ window . location . origin } /api/getRules ` ,
{
method : "GET" ,
mode : "cors" ,
headers : { id } ,
} )
. then ( result => result . json ( ) )
. then ( res =>
{
return res
} )
. catch ( console . error ) ;
}
async function getMessage ( guildid , messageid )
{
return await fetch ( ` ${ window . location . origin } /api/getMessage ` ,
{
method : "GET" ,
mode : "cors" ,
headers : { guildid , messageid } ,
} )
. then ( result => result . json ( ) )
. then ( res =>
{
return res
} )
. catch ( console . error ) ;
}
async function changeRule ( element )
{
var rule = await getRule ( element . id )
var message = await getMessage ( rule . gID , rule . mID ) ;
message = message . message ;
element . parentNode . classList . add ( 'hidden' ) ;
element . parentNode . parentNode . classList . add ( 'hidden' )
var ruleWrapper = document . getElementById ( 'roleRuleWrapper' ) ;
ruleWrapper . classList . remove ( 'hidden' ) ;
document . getElementsByClassName ( 'roleRuleWrapper' ) [ 0 ] . setAttribute ( 'data-before' , message )
document . getElementById ( 'roleRule' ) . innerText = rule . roleName ;
document . getElementById ( 'roleRule' ) . classList . add ( rule . _id ) ;
document . getElementById ( 'roleID' ) . placeholder = rule . roleID ;
document . getElementById ( 'emojiID' ) . placeholder = rule . roleEmoji ;
document . getElementById ( 'messageID' ) . placeholder = rule . mID ;
document . getElementById ( 'emojiImg' ) . src = ` https://cdn.discordapp.com/emojis/ ${ rule . roleEmoji } .webp ` ;
}
Cristiano Pires
2 years ago