485 lines
No EOL
18 KiB
JavaScript
485 lines
No EOL
18 KiB
JavaScript
function escapeHtml(unsafe)
|
|
{
|
|
return unsafe
|
|
.replace(/<\/?script\/?>/g, "")
|
|
.replace(/<\/?img\/?>/g, "")
|
|
.replace(/<\/?iframe\/?>/g, "")
|
|
.replace(/<\/?xml\/?>/g, "")
|
|
.replace(/<\/?audio\/?>/g, "")
|
|
.replace(/<\/?video\/?>/g, "")
|
|
.replace(/<\/?object\/?>/g, "");
|
|
}
|
|
|
|
const n=x=>null;
|
|
|
|
const el_id_user = document.querySelector("#user");
|
|
const el_id_instance = document.querySelector("#instance");
|
|
const el_id_whoami = document.querySelector("#whoami");
|
|
const el_id_submitwhoamiFollowers = document.querySelector("#submitwhoami_followers");
|
|
const el_id_submitwhoamiFollowing = document.querySelector("#submitwhoami_following");
|
|
const el_id_errorwhoami = document.querySelector("#errorwhoami");
|
|
let gamemodeFollowers;
|
|
|
|
el_id_user.addEventListener("input", (e) => {
|
|
console.log(e);
|
|
// User types @ Chrome autofill
|
|
if (e.data === "@" || e.data === undefined) {
|
|
el_id_user.value =
|
|
el_id_user.value.replace(/@/gim, "");
|
|
el_id_instance.focus();
|
|
}
|
|
})
|
|
|
|
async function verify() {
|
|
const username = el_id_user.value.replace(/[^a-z0-9_]/gim, "");
|
|
const instance = el_id_instance.value.replace(/@/gim, "");
|
|
el_id_user.value = username;
|
|
el_id_instance.value = instance;
|
|
if (username.length < 1) return null;
|
|
if (instance.length < 1) return null;
|
|
|
|
// webfinger domain delegation
|
|
const domain = await fetch(`https://${instance}/.well-known/webfinger?resource=acct:${username}@${instance}`).catch(n);
|
|
if (domain == null || !domain.ok) return null;
|
|
const domain_json = (await domain.json());
|
|
const domain_url = new URL(domain_json.links.find(x=>x.type=="application/activity+json").href).hostname;
|
|
|
|
const user_req = await fetch(`https://${domain_url}/api/v1/accounts/lookup?acct=${username}`).catch(n);
|
|
if (user_req == null || !domain.ok) return null;
|
|
const user_json = await user_req.json();
|
|
|
|
return {
|
|
USER_ID: user_json.id,
|
|
INSTANCE: domain_url
|
|
};
|
|
}
|
|
|
|
el_id_submitwhoamiFollowers.addEventListener("click", async (e) => {
|
|
el_id_errorwhoami.innerHTML = "";
|
|
el_id_submitwhoamiFollowers.disabled = true;
|
|
el_id_submitwhoamiFollowing.disabled = true;
|
|
const result = await verify();
|
|
el_id_submitwhoamiFollowers.disabled = false;
|
|
el_id_submitwhoamiFollowing.disabled = false;
|
|
if (result == null) {
|
|
el_id_errorwhoami.innerHTML = "Invalid user!";
|
|
return false;
|
|
}
|
|
game = {
|
|
...game,
|
|
...result
|
|
};
|
|
|
|
gamemodeFollowers = true;
|
|
getFollowers();
|
|
})
|
|
|
|
el_id_submitwhoamiFollowing.addEventListener("click", async (e) => {
|
|
el_id_errorwhoami.innerHTML = "";
|
|
const result = await verify();
|
|
if (result == null) {
|
|
el_id_errorwhoami.innerHTML = "Invalid user!";
|
|
return false;
|
|
}
|
|
game = {
|
|
...game,
|
|
...result
|
|
};
|
|
|
|
gamemodeFollowers = false;
|
|
getFollowing();
|
|
})
|
|
|
|
// Followers
|
|
|
|
const el_id_followers = document.querySelector("#followers");
|
|
const el_id_loadingfollowers = document.querySelector("#loadingfollowers");
|
|
const el_id_listfollowers = document.querySelector("#listfollowers");
|
|
const el_id_listfollowersvalues = document.querySelector("#listfollowersvalues");
|
|
const el_id_selectallfollowers = document.querySelector("#selectallfollowers");
|
|
const el_id_selectrandomfollowers = document.querySelector("#selectrandomfollowers");
|
|
const el_id_deselectrandomfollowers = document.querySelector("#deselectrandomfollowers");
|
|
const el_id_selectnofollowers = document.querySelector("#selectnofollowers");
|
|
const el_id_morefollowers = document.querySelector("#morefollowers");
|
|
const el_id_submitfollowers = document.querySelector("#submitfollowers");
|
|
let selectboxes = [];
|
|
let userList = [];
|
|
let lastId = "";
|
|
let selectedUsers = [];
|
|
|
|
function renderNameHTML(name, user) {
|
|
return escapeHtml(name).replace(/:([a-z0-9_-]+?):/gim, (m, p1) => {
|
|
const emoji = user.emojis.find(x => x.shortcode == p1);
|
|
if (emoji == null) return null;
|
|
return `<img src="${emoji.url}" width="16" height="16" title=":${emoji.shortcode}:" />`;
|
|
});
|
|
}
|
|
|
|
async function getFollowers(dontLoadNew = false) {
|
|
el_id_whoami.hidden = true;
|
|
el_id_followers.hidden = false;
|
|
el_id_submitfollowers.disabled = true;
|
|
el_id_morefollowers.disabled = true;
|
|
let res;
|
|
let out;
|
|
if (!dontLoadNew) {
|
|
el_id_loadingfollowers.innerHTML = `Retrieving followers... Please wait.`;
|
|
res = await fetch(`https://${game.INSTANCE}/api/v1/accounts/${game.USER_ID}/followers${lastId.length > 0 ? `?max_id=${lastId}` : ""}`);
|
|
out = await res.json();
|
|
}
|
|
el_id_submitfollowers.disabled = false;
|
|
el_id_morefollowers.disabled = false;
|
|
if (dontLoadNew) return false;
|
|
if (out.length < 1) {
|
|
el_id_loadingfollowers.innerHTML = `No followers found.`;
|
|
return false;
|
|
}
|
|
el_id_listfollowers.hidden = false;
|
|
el_id_listfollowers.innerHTML += out.reduce((pv, cuser) => {
|
|
return pv + `<tr>
|
|
<td><input type="checkbox" class="follower_checkbox" checked /></td>
|
|
<td><img src="${cuser.avatar}" width="32" height="32" /></td>
|
|
<td class="followers_namelabel">
|
|
<a href="${cuser.url}" target="_blank">
|
|
${renderNameHTML(cuser.display_name, cuser)}
|
|
</a>
|
|
</td>
|
|
<td class="followers_namelabel">@${cuser.fqn || cuser.acct}</td>
|
|
</tr>`
|
|
}, "");
|
|
userList.push(...out.map(user => ({
|
|
fqn: user.fqn || user.acct,
|
|
avatar: user.avatar,
|
|
bot: user.bot,
|
|
created_at: user.created_at,
|
|
display_name: user.display_name,
|
|
emojis: user.emojis,
|
|
fields: user.fields,
|
|
id: user.id,
|
|
note: user.note,
|
|
username: user.url,
|
|
username: user.username
|
|
})));
|
|
lastId = userList.at(-1).id;
|
|
selectboxes = Array.from(el_id_listfollowers.querySelectorAll(".follower_checkbox"));
|
|
selectboxes.forEach(x => x.addEventListener("change", checkSelectedAmtFollowers));
|
|
checkSelectedAmtFollowers();
|
|
}
|
|
|
|
el_id_selectallfollowers.addEventListener("click", () => {
|
|
selectboxes.forEach(x => x.checked = true);
|
|
checkSelectedAmtFollowers();
|
|
})
|
|
|
|
el_id_selectrandomfollowers.addEventListener("click", () => {
|
|
const unselectedPick = selectboxes.filter(x => !x.checked);
|
|
const selected = unselectedPick[Math.floor(Math.random() * (unselectedPick.length - 1))];
|
|
if (selected == null) return;
|
|
selected.checked = true;
|
|
checkSelectedAmtFollowers();
|
|
})
|
|
|
|
el_id_deselectrandomfollowers.addEventListener("click", () => {
|
|
const selectedPick = selectboxes.filter(x => x.checked);
|
|
const selected = selectedPick[Math.floor(Math.random() * (selectedPick.length - 1))];
|
|
if (selected == null) return;
|
|
selected.checked = false;
|
|
checkSelectedAmtFollowers();
|
|
})
|
|
|
|
el_id_selectnofollowers.addEventListener("click", () => {
|
|
selectboxes.forEach(x => x.checked = false);
|
|
checkSelectedAmtFollowers();
|
|
})
|
|
|
|
el_id_morefollowers.addEventListener("click", () => getFollowers());
|
|
|
|
el_id_submitfollowers.addEventListener("click", () => {
|
|
console.log(selectedUsers);
|
|
selectboxes.forEach(({checked}, i) => {
|
|
if (checked) selectedUsers.push(userList.at(i));
|
|
});
|
|
if (selectedUsers.length < 2) {
|
|
selectedUsers = [];
|
|
el_id_loadingfollowers.innerHTML = `Selected user count is less than 2! (${selectboxes.filter(x => x.checked).length} selected)`;
|
|
return;
|
|
}
|
|
sortSelectedUsers();
|
|
})
|
|
|
|
function checkSelectedAmtFollowers() {
|
|
el_id_loadingfollowers.innerHTML = `${selectboxes.filter(x => x.checked).length} selected`;
|
|
}
|
|
|
|
// Following
|
|
|
|
const el_id_following = document.querySelector("#following");
|
|
const el_id_loadingfollowing = document.querySelector("#loadingfollowing");
|
|
const el_id_listfollowing = document.querySelector("#listfollowing");
|
|
const el_id_listfollowingvalues = document.querySelector("#listfollowingvalues");
|
|
const el_id_selectallfollowing = document.querySelector("#selectallfollowing");
|
|
const el_id_selectrandomfollowing = document.querySelector("#selectrandomfollowing");
|
|
const el_id_deselectrandomfollowing = document.querySelector("#deselectrandomfollowing");
|
|
const el_id_selectnofollowing = document.querySelector("#selectnofollowing");
|
|
const el_id_morefollowing = document.querySelector("#morefollowing");
|
|
const el_id_submitfollowing = document.querySelector("#submitfollowing");
|
|
|
|
async function getFollowing(dontLoadNew = false) {
|
|
el_id_whoami.hidden = true;
|
|
el_id_following.hidden = false;
|
|
el_id_submitfollowing.disabled = true;
|
|
el_id_morefollowing.disabled = true;
|
|
let res;
|
|
let out;
|
|
if (!dontLoadNew) {
|
|
el_id_loadingfollowing.innerHTML = `Retrieving following... Please wait.`;
|
|
res = await fetch(`https://${game.INSTANCE}/api/v1/accounts/${game.USER_ID}/following?limit=68${lastId.length > 0 ? `&max_id=${lastId}` : ""}`);
|
|
out = await res.json();
|
|
}
|
|
el_id_submitfollowing.disabled = false;
|
|
el_id_morefollowing.disabled = false;
|
|
if (dontLoadNew) return false;
|
|
if (out.length < 1) {
|
|
el_id_loadingfollowing.innerHTML = `No following found.`;
|
|
return false;
|
|
}
|
|
el_id_listfollowing.hidden = false;
|
|
el_id_listfollowing.innerHTML += out.reduce((pv, cuser) => {
|
|
return pv + `<tr>
|
|
<td><input type="checkbox" class="follower_checkbox" checked /></td>
|
|
<td><img src="${cuser.avatar}" width="32" height="32" /></td>
|
|
<td class="following_namelabel">
|
|
<a href="${cuser.url}" target="_blank">
|
|
${renderNameHTML(cuser.display_name, cuser)}
|
|
</a>
|
|
</td>
|
|
<td class="following_namelabel">@${cuser.fqn}</td>
|
|
</tr>`
|
|
}, "");
|
|
userList.push(...out.map(user => ({
|
|
fqn: user.fqn,
|
|
avatar: user.avatar,
|
|
bot: user.bot,
|
|
created_at: user.created_at,
|
|
display_name: user.display_name,
|
|
emojis: user.emojis,
|
|
fields: user.fields,
|
|
id: user.id,
|
|
note: user.note,
|
|
username: user.url,
|
|
username: user.username
|
|
})));
|
|
lastId = userList.at(-1).id;
|
|
selectboxes = Array.from(el_id_listfollowing.querySelectorAll(".follower_checkbox"));
|
|
selectboxes.forEach(x => x.addEventListener("change", checkSelectedAmtFollowing));
|
|
checkSelectedAmtFollowing();
|
|
}
|
|
|
|
el_id_selectallfollowing.addEventListener("click", () => {
|
|
selectboxes.forEach(x => x.checked = true);
|
|
checkSelectedAmtFollowing();
|
|
})
|
|
|
|
el_id_selectrandomfollowing.addEventListener("click", () => {
|
|
const unselectedPick = selectboxes.filter(x => !x.checked);
|
|
const selected = unselectedPick[Math.floor(Math.random() * (unselectedPick.length - 1))];
|
|
if (selected == null) return;
|
|
selected.checked = true;
|
|
checkSelectedAmtFollowing();
|
|
})
|
|
|
|
el_id_deselectrandomfollowing.addEventListener("click", () => {
|
|
const selectedPick = selectboxes.filter(x => x.checked);
|
|
const selected = selectedPick[Math.floor(Math.random() * (selectedPick.length - 1))];
|
|
if (selected == null) return;
|
|
selected.checked = false;
|
|
checkSelectedAmtFollowing();
|
|
})
|
|
|
|
el_id_selectnofollowing.addEventListener("click", () => {
|
|
selectboxes.forEach(x => x.checked = false);
|
|
checkSelectedAmtFollowing();
|
|
})
|
|
|
|
el_id_morefollowing.addEventListener("click", () => getFollowing());
|
|
|
|
el_id_submitfollowing.addEventListener("click", () => {
|
|
console.log(selectedUsers);
|
|
selectboxes.forEach(({checked}, i) => {
|
|
if (checked) selectedUsers.push(userList.at(i));
|
|
});
|
|
if (selectedUsers.length < 2) {
|
|
selectedUsers = [];
|
|
el_id_loadingfollowing.innerHTML = `Selected user count is less than 2! (${selectboxes.filter(x => x.checked).length} selected)`;
|
|
return;
|
|
}
|
|
sortSelectedUsers();
|
|
})
|
|
|
|
function checkSelectedAmtFollowing() {
|
|
el_id_loadingfollowing.innerHTML = `${selectboxes.filter(x => x.checked).length} selected`;
|
|
}
|
|
|
|
// Brackets
|
|
|
|
function shuf(array) {
|
|
var count = array.length,
|
|
randomnumber,
|
|
temp;
|
|
while (count) {
|
|
randomnumber = Math.random() * count-- | 0;
|
|
temp = array[count];
|
|
array[count] = array[randomnumber];
|
|
array[randomnumber] = temp
|
|
}
|
|
return array;
|
|
}
|
|
|
|
function chunk(arr, size) {
|
|
return Array.from({ length: Math.ceil(arr.length / size) }, (v, i) =>
|
|
arr.slice(i * size, i * size + size)
|
|
);
|
|
}
|
|
|
|
const el_id_game = document.querySelector("#game");
|
|
const el_id_gameUserOne = document.querySelector("#gameUserOne");
|
|
const el_id_gameUserOneImage = document.querySelector("#gameUserOneImage");
|
|
const el_id_gameUserOneName = document.querySelector("#gameUserOneName");
|
|
const el_id_gameUserOneId = document.querySelector("#gameUserOneId");
|
|
const el_id_gameUserOneNote = document.querySelector("#gameUserOneNote");
|
|
const el_id_gameUserOneFields = document.querySelector("#gameUserOneFields");
|
|
const el_id_gameUserTwo = document.querySelector("#gameUserTwo");
|
|
const el_id_gameUserTwoImage = document.querySelector("#gameUserTwoImage");
|
|
const el_id_gameUserTwoName = document.querySelector("#gameUserTwoName");
|
|
const el_id_gameUserTwoId = document.querySelector("#gameUserTwoId");
|
|
const el_id_gameUserTwoNote = document.querySelector("#gameUserTwoNote");
|
|
const el_id_gameUserTwoFields = document.querySelector("#gameUserTwoFields");
|
|
const el_id_gameSubmitLeft = document.querySelector("#gameSubmitLeft");
|
|
const el_id_gameSubmitRight = document.querySelector("#gameSubmitRight");
|
|
const el_id_gameBracketLevel = document.querySelector("#gameBracketLevel");
|
|
const el_id_gameBracketFight = document.querySelector("#gameBracketFight");
|
|
|
|
let state = [];
|
|
let curDepth = 0;
|
|
let curFight = 0;
|
|
|
|
function sortSelectedUsers() {
|
|
if (gamemodeFollowers)
|
|
el_id_followers.hidden = true;
|
|
else
|
|
el_id_following.hidden = true;
|
|
el_id_game.hidden = false;
|
|
state.push(chunk(shuf(selectedUsers), 2));
|
|
state.push([]);
|
|
prepareGameStage();
|
|
}
|
|
|
|
function prepareGameStage() {
|
|
el_id_gameSubmitLeft.disabled = true;
|
|
el_id_gameSubmitRight.disabled = true;
|
|
el_id_gameSubmitLeft.innerHTML = "Please wait...";
|
|
el_id_gameSubmitRight.innerHTML = "Please wait...";
|
|
el_id_gameUserOneImage.src = "";
|
|
el_id_gameUserTwoImage.src = "";
|
|
el_id_gameBracketLevel.innerHTML = "Bracket Level " + (curDepth + 1);
|
|
el_id_gameBracketFight.innerHTML = "Round " + (curFight + 1);
|
|
const curSubStage = state[curDepth][curFight];
|
|
el_id_gameUserOneImage.src = curSubStage[0].avatar;
|
|
el_id_gameUserOneName.innerHTML = renderNameHTML(escapeHtml(curSubStage[0].display_name), curSubStage[0]);
|
|
el_id_gameUserOneId.innerHTML = "@" + curSubStage[0].fqn;
|
|
el_id_gameUserOneNote.innerHTML = escapeHtml(curSubStage[0].note);
|
|
el_id_gameUserOneFields.innerHTML = curSubStage[0].fields.reduce((pv, fields) => pv + `<tr><td>${escapeHtml(fields.name)}</td><td>${escapeHtml(fields.value)}</td></tr>`, "");
|
|
el_id_gameUserTwoImage.src = curSubStage[1].avatar;
|
|
el_id_gameUserTwoName.innerHTML = renderNameHTML(escapeHtml(curSubStage[1].display_name), curSubStage[1]);
|
|
el_id_gameUserTwoId.innerHTML = "@" + curSubStage[1].fqn;
|
|
el_id_gameUserTwoNote.innerHTML = escapeHtml(curSubStage[1].note);
|
|
el_id_gameUserTwoFields.innerHTML = curSubStage[1].fields.reduce((pv, fields) => pv + `<tr><td>${escapeHtml(fields.name)}</td><td>${escapeHtml(fields.value)}</td></tr>`, "");
|
|
el_id_gameSubmitLeft.disabled = false;
|
|
el_id_gameSubmitRight.disabled = false;
|
|
el_id_gameSubmitLeft.innerHTML = "Pick " + "@" + curSubStage[0].fqn;
|
|
el_id_gameSubmitRight.innerHTML = "Pick " + "@" + curSubStage[1].fqn;
|
|
}
|
|
|
|
function addNewThingy(thingy) {
|
|
if (state[curDepth + 1] == null) state.push([]);
|
|
if (curFight % 2 == 0)
|
|
state[curDepth + 1][Math.floor(curFight / 2)] = [];
|
|
state[curDepth + 1][Math.floor(curFight / 2)].push(thingy);
|
|
}
|
|
|
|
el_id_gameSubmitLeft.addEventListener("click", () => {
|
|
addNewThingy(state[curDepth][curFight][0]);
|
|
nextStage();
|
|
})
|
|
|
|
el_id_gameSubmitRight.addEventListener("click", () => {
|
|
addNewThingy(state[curDepth][curFight][1]);
|
|
nextStage();
|
|
})
|
|
|
|
function nextStage() {
|
|
if (curFight >= state[curDepth].length - 1) {
|
|
curDepth++;
|
|
curFight = 0;
|
|
} else curFight++;
|
|
console.log(state, curFight, curDepth);
|
|
if (state[curDepth][curFight].length < 2) {
|
|
if (state[curDepth].length < 2) {
|
|
endGame();
|
|
return;
|
|
}
|
|
addNewThingy(state[curDepth][curFight][0]);
|
|
curDepth++;
|
|
curFight = 0;
|
|
}
|
|
prepareGameStage();
|
|
}
|
|
|
|
// End
|
|
|
|
const el_id_winner = document.querySelector("#winner");
|
|
const el_id_winnerUser = document.querySelector("#winnerUser");
|
|
const el_id_winnerUserImage = document.querySelector("#winnerUserImage");
|
|
const el_id_winnerUserName = document.querySelector("#winnerUserName");
|
|
const el_id_winnerUserId = document.querySelector("#winnerUserId");
|
|
const el_id_winnerUserNote = document.querySelector("#winnerUserNote");
|
|
const el_id_winnerUserFields = document.querySelector("#winnerUserFields");
|
|
const el_id_winnermessage = document.querySelector("#winnermessage");
|
|
const el_id_winnerusers = document.querySelector("#winnerusers");
|
|
const el_id_winnerPlayAgain = document.querySelector("#winnerPlayAgain");
|
|
|
|
function endGame() {
|
|
el_id_game.hidden = true;
|
|
el_id_winner.hidden = false;
|
|
const winningPlayer = state[curDepth][curFight][0];
|
|
el_id_winnerUserImage.src = winningPlayer.avatar;
|
|
el_id_winnerUserName.innerHTML = renderNameHTML(escapeHtml(winningPlayer.display_name), winningPlayer);
|
|
el_id_winnerUserId.innerHTML = "@" + winningPlayer.fqn;
|
|
el_id_winnerUserNote.innerHTML = escapeHtml(winningPlayer.note);
|
|
el_id_winnerUserFields.innerHTML = winningPlayer.fields.reduce((pv, fields) => pv + `<tr><td>${escapeHtml(fields.name)}</td><td>${escapeHtml(fields.value)}</td></tr>`, "");
|
|
|
|
el_id_winnermessage.innerHTML = `Congratulations, ${renderNameHTML(escapeHtml(winningPlayer.display_name), winningPlayer)}! You won the bracket!`;
|
|
el_id_winnerusers.innerHTML = `<div>${state.reduce((pv, cs) => {
|
|
return pv + `<div class="flexUser">${cs.reduce((pvus, cus) => {
|
|
return pvus + cus.reduce((pvu, cu) => {
|
|
return pvu + `<div class="flexUserUser">
|
|
<img src="${cu.avatar}" width="64" height="64" />
|
|
<h3>${renderNameHTML(escapeHtml(cu.display_name), cu)}</h3>
|
|
<p>@${cu.fqn}</p>
|
|
</div>`
|
|
}, "")
|
|
}, "")}</div>`
|
|
}, "")}</div>`
|
|
}
|
|
|
|
el_id_winnerPlayAgain.addEventListener("click", (x) => {
|
|
el_id_winner.hidden = true;
|
|
state = [];
|
|
selectedUsers = [];
|
|
curDepth = 0;
|
|
curFight = 0;
|
|
if (gamemodeFollowers)
|
|
getFollowers(true);
|
|
else
|
|
getFollowing(true);
|
|
}) |