MeowcaTheoRange/abtmtr-v4
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix some stuff about Fediverse Madness

Browse source 
Add pagination
This commit is contained in:
MeowcaTheoRange 2024-03-19 10:08:44 -05:00
parent a21bbd9a0a
commit 967f6bc1e7
2 changed files with 173 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
views/projects/item/fediverse-madness/index.html
View file

@ -18,11 +18,12 @@
<section> <section>
<h1>Fediverse Madness</h1> <h1>Fediverse Madness</h1>
<p>Competitive bracket-based comparisons of Fediverse users.</p> <p>Competitive bracket-based comparisons of Fediverse users.</p>
<p>Requires JavaScript.</p>
</section> </section>
<section id="accessibility" hidden></section> <section id="accessibility" hidden></section>
</header> </header>
<main> <main>
<section id="whoami"> <section id="whoami" hidden>
<h3>Who are you?</h3> <h3>Who are you?</h3>
<span class="userinputbox"> <span class="userinputbox">
<span>@</span> <span>@</span>
@ -53,7 +54,11 @@
<button id="selectrandomfollowers">Select random</button> <button id="selectrandomfollowers">Select random</button>
<button id="deselectrandomfollowers">Deselect random</button> <button id="deselectrandomfollowers">Deselect random</button>
</div> </div>
<button id="morefollowers">Load more</button> <div>
<button id="morefollowers">Load more</button>
<button id="savehandlesfollowers">Save selection</button>
<button id="loadhandlesfollowers">Load selection</button>
</div>
<button id="submitfollowers" disabled>Done</button> <button id="submitfollowers" disabled>Done</button>
</section> </section>
<section id="following" hidden> <section id="following" hidden>
@ -73,6 +78,10 @@
<button id="selectrandomfollowing">Select random</button> <button id="selectrandomfollowing">Select random</button>
<button id="deselectrandomfollowing">Deselect random</button> <button id="deselectrandomfollowing">Deselect random</button>
</div> </div>
<div>
<button id="savehandlesfollowing">Save selection</button>
<button id="loadhandlesfollowing">Load selection</button>
</div>
<button id="morefollowing">Load more</button> <button id="morefollowing">Load more</button>
<button id="submitfollowing" disabled>Done</button> <button id="submitfollowing" disabled>Done</button>
</section> </section>
@ -86,9 +95,9 @@
<div> <div>
<h3 id="gameUserOneName"></h3> <h3 id="gameUserOneName"></h3>
<p id="gameUserOneId"></p> <p id="gameUserOneId"></p>
<p id="gameUserOneNote"></p> <!-- <p id="gameUserOneNote"></p>
<table id="gameUserOneFields"> <table id="gameUserOneFields">
</table> </table> -->
</div> </div>
</div> </div>
<div class="gridUser" id="gameUserTwo"> <div class="gridUser" id="gameUserTwo">
@ -96,9 +105,9 @@
<div> <div>
<h3 id="gameUserTwoName"></h3> <h3 id="gameUserTwoName"></h3>
<p id="gameUserTwoId"></p> <p id="gameUserTwoId"></p>
<p id="gameUserTwoNote"></p> <!-- <p id="gameUserTwoNote"></p>
<table id="gameUserTwoFields"> <table id="gameUserTwoFields">
</table> </table> -->
</div> </div>
</div> </div>
</div> </div>
@ -114,9 +123,9 @@
<div> <div>
<h3 id="winnerUserName"></h3> <h3 id="winnerUserName"></h3>
<p id="winnerUserId"></p> <p id="winnerUserId"></p>
<p id="winnerUserNote"></p> <!-- <p id="winnerUserNote"></p>
<table id="winnerUserFields"> <table id="winnerUserFields">
</table> </table> -->
</div> </div>
</div> </div>
<h3>Bracket</h3> <h3>Bracket</h3>
@ -129,10 +138,7 @@
<section id="accessibility" hidden></section> <section id="accessibility" hidden></section>
<script src="/scripts/accessibility.js"></script> <script src="/scripts/accessibility.js"></script>
<script> <script>
let game = { let game = null;
USER_ID: "Abg3KCIlHi1Q2Gzx0y",
INSTANCE: "local.abtmtr.link"
};
</script> </script>
<script src="./script.js"></script> <script src="./script.js"></script>
<script src="./scripts/game.js"></script> <script src="./scripts/game.js"></script>

221
views/projects/item/fediverse-madness/scripts/game.js
View file

@ -48,27 +48,35 @@ async function verify() {
if (user_req == null || !domain.ok) return null; if (user_req == null || !domain.ok) return null;
const user_json = await user_req.json(); const user_json = await user_req.json();
window.localStorage.setItem("fediversemadness_game", JSON.stringify({ username, instance }));
return { return {
USER_ID: user_json.id, USER_ID: user_json.id,
INSTANCE: domain_url INSTANCE: domain_url
}; };
} }
async function lookupUser() {
const lsGame = JSON.parse(window.localStorage.getItem("fediversemadness_game"));
if (lsGame != null) {
el_id_user.value = lsGame.username;
el_id_instance.value = lsGame.instance;
}
}
lookupUser();
el_id_submitwhoamiFollowers.addEventListener("click", async (e) => { el_id_submitwhoamiFollowers.addEventListener("click", async (e) => {
el_id_errorwhoami.innerHTML = ""; el_id_errorwhoami.innerHTML = "";
el_id_submitwhoamiFollowers.disabled = true; el_id_submitwhoamiFollowers.disabled = true;
el_id_submitwhoamiFollowing.disabled = true; el_id_submitwhoamiFollowing.disabled = true;
const result = await verify(); game = await verify();
el_id_submitwhoamiFollowers.disabled = false; el_id_submitwhoamiFollowers.disabled = false;
el_id_submitwhoamiFollowing.disabled = false; el_id_submitwhoamiFollowing.disabled = false;
if (result == null) { if (game == null) {
el_id_errorwhoami.innerHTML = "Invalid user!"; el_id_errorwhoami.innerHTML = "Invalid user!";
return false; return false;
} }
game = {
...game,
...result
};
gamemodeFollowers = true; gamemodeFollowers = true;
getFollowers(); getFollowers();
@ -76,15 +84,15 @@ el_id_submitwhoamiFollowers.addEventListener("click", async (e) => {
el_id_submitwhoamiFollowing.addEventListener("click", async (e) => { el_id_submitwhoamiFollowing.addEventListener("click", async (e) => {
el_id_errorwhoami.innerHTML = ""; el_id_errorwhoami.innerHTML = "";
const result = await verify(); el_id_submitwhoamiFollowers.disabled = true;
if (result == null) { el_id_submitwhoamiFollowing.disabled = true;
game = await verify();
el_id_submitwhoamiFollowers.disabled = false;
el_id_submitwhoamiFollowing.disabled = false;
if (game == null) {
el_id_errorwhoami.innerHTML = "Invalid user!"; el_id_errorwhoami.innerHTML = "Invalid user!";
return false; return false;
} }
game = {
...game,
...result
};
gamemodeFollowers = false; gamemodeFollowers = false;
getFollowing(); getFollowing();
@ -102,22 +110,49 @@ const el_id_deselectrandomfollowers = document.querySelector("#deselectrandomfol
const el_id_selectnofollowers = document.querySelector("#selectnofollowers"); const el_id_selectnofollowers = document.querySelector("#selectnofollowers");
const el_id_morefollowers = document.querySelector("#morefollowers"); const el_id_morefollowers = document.querySelector("#morefollowers");
const el_id_submitfollowers = document.querySelector("#submitfollowers"); const el_id_submitfollowers = document.querySelector("#submitfollowers");
const el_id_savehandlesfollowers = document.querySelector("#savehandlesfollowers");
const el_id_loadhandlesfollowers = document.querySelector("#loadhandlesfollowers");
let selectboxes = []; let selectboxes = [];
let userList = []; let userList = [];
let lastId = ""; let lastId = "";
let selectedUsers = []; let selectedUsers = [];
function renderNameHTML(name, user) { function generateFollowersMap() {
return escapeHtml(name).replace(/:([a-z0-9_-]+?):/gim, (m, p1) => { const checks = Array.from(el_id_listfollowers.querySelectorAll(".followers_checkbox"));
const emoji = user.emojis.find(x => x.shortcode == p1); let codeMap = {};
if (emoji == null) return null; checks.forEach((checkbox) => {
return `<img src="${emoji.url}" width="16" height="16" title=":${emoji.shortcode}:" />`; const handle = checkbox.parentElement.parentElement.querySelector(".followers_checkname");
codeMap[handle.innerHTML] = checkbox.checked;
});
return Object.fromEntries(codeMap.entries());
}
function readFollowersMap(m) {
if (m == null) return;
const handles = Array.from(el_id_listfollowers.querySelectorAll(".followers_checkname"));
handles.forEach((handle) => {
const checkbox = handle.parentElement.parentElement.querySelector(".followers_checkbox");
checkbox.checked = m[handle.innerHTML];
}); });
} }
function renderNameHTML(name, user) {
return `<span>${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}:" />`;
})}</span>`;
}
async function getFollowers(dontLoadNew = false) { async function getFollowers(dontLoadNew = false) {
el_id_whoami.hidden = true; goToState("followers");
el_id_followers.hidden = false; if (!dontLoadNew) {
selectboxes = [];
userList = [];
lastId = "";
selectedUsers = [];
el_id_listfollowers.innerHTML = "";
}
el_id_submitfollowers.disabled = true; el_id_submitfollowers.disabled = true;
el_id_morefollowers.disabled = true; el_id_morefollowers.disabled = true;
let res; let res;
@ -144,7 +179,7 @@ async function getFollowers(dontLoadNew = false) {
${renderNameHTML(cuser.display_name, cuser)} ${renderNameHTML(cuser.display_name, cuser)}
</a> </a>
</td> </td>
<td class="followers_namelabel">@${cuser.fqn || cuser.acct}</td> <td class="followers_namelabel follower_checkname">@${cuser.fqn || cuser.acct}</td>
</tr>` </tr>`
}, ""); }, "");
userList.push(...out.map(user => ({ userList.push(...out.map(user => ({
@ -157,8 +192,7 @@ async function getFollowers(dontLoadNew = false) {
fields: user.fields, fields: user.fields,
id: user.id, id: user.id,
note: user.note, note: user.note,
username: user.url, url: user.url
username: user.username
}))); })));
lastId = userList.at(-1).id; lastId = userList.at(-1).id;
selectboxes = Array.from(el_id_listfollowers.querySelectorAll(".follower_checkbox")); selectboxes = Array.from(el_id_listfollowers.querySelectorAll(".follower_checkbox"));
@ -192,15 +226,17 @@ el_id_selectnofollowers.addEventListener("click", () => {
checkSelectedAmtFollowers(); checkSelectedAmtFollowers();
}) })
el_id_savehandlesfollowers.addEventListener("click", () => window.localStorage.setItem("fediversemadness_followerssel", JSON.stringify(generateFollowersMap())));
el_id_loadhandlesfollowers.addEventListener("click", () => readFollowersMap(JSON.parse(window.localStorage.getItem("fediversemadness_followerssel"))));
el_id_morefollowers.addEventListener("click", () => getFollowers()); el_id_morefollowers.addEventListener("click", () => getFollowers());
el_id_submitfollowers.addEventListener("click", () => { el_id_submitfollowers.addEventListener("click", () => {
console.log(selectedUsers); selectedUsers = [];
selectboxes.forEach(({checked}, i) => { selectboxes.forEach(({checked}, i) => {
if (checked) selectedUsers.push(userList.at(i)); if (checked) selectedUsers.push(userList.at(i));
}); });
if (selectedUsers.length < 2) { if (selectedUsers.length < 2) {
selectedUsers = [];
el_id_loadingfollowers.innerHTML = `Selected user count is less than 2! (${selectboxes.filter(x => x.checked).length} selected)`; el_id_loadingfollowers.innerHTML = `Selected user count is less than 2! (${selectboxes.filter(x => x.checked).length} selected)`;
return; return;
} }
@ -223,17 +259,44 @@ const el_id_deselectrandomfollowing = document.querySelector("#deselectrandomfol
const el_id_selectnofollowing = document.querySelector("#selectnofollowing"); const el_id_selectnofollowing = document.querySelector("#selectnofollowing");
const el_id_morefollowing = document.querySelector("#morefollowing"); const el_id_morefollowing = document.querySelector("#morefollowing");
const el_id_submitfollowing = document.querySelector("#submitfollowing"); const el_id_submitfollowing = document.querySelector("#submitfollowing");
const el_id_savehandlesfollowing = document.querySelector("#savehandlesfollowing");
const el_id_loadhandlesfollowing = document.querySelector("#loadhandlesfollowing");
function generateFollowingMap() {
const checks = Array.from(el_id_listfollowing.querySelectorAll(".following_checkbox"));
let codeMap = new Map();
checks.forEach((checkbox) => {
const handle = checkbox.parentElement.parentElement.querySelector(".following_checkname");
codeMap.set(handle.innerHTML, checkbox.checked);
});
return Object.fromEntries(codeMap.entries());
}
function readFollowingMap(m) {
if (m == null) return;
const handles = Array.from(el_id_listfollowing.querySelectorAll(".following_checkname"));
handles.forEach((handle) => {
const checkbox = handle.parentElement.parentElement.querySelector(".following_checkbox");
checkbox.checked = m[handle.innerHTML];
});
}
async function getFollowing(dontLoadNew = false) { async function getFollowing(dontLoadNew = false) {
el_id_whoami.hidden = true; goToState("following");
el_id_following.hidden = false; if (!dontLoadNew) {
selectboxes = [];
userList = [];
lastId = "";
selectedUsers = [];
el_id_listfollowers.innerHTML = "";
}
el_id_submitfollowing.disabled = true; el_id_submitfollowing.disabled = true;
el_id_morefollowing.disabled = true; el_id_morefollowing.disabled = true;
let res; let res;
let out; let out;
if (!dontLoadNew) { if (!dontLoadNew) {
el_id_loadingfollowing.innerHTML = `Retrieving following... Please wait.`; 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}` : ""}`); res = await fetch(`https://${game.INSTANCE}/api/v1/accounts/${game.USER_ID}/following${lastId.length > 0 ? `?max_id=${lastId}` : ""}`);
out = await res.json(); out = await res.json();
} }
el_id_submitfollowing.disabled = false; el_id_submitfollowing.disabled = false;
@ -246,14 +309,14 @@ async function getFollowing(dontLoadNew = false) {
el_id_listfollowing.hidden = false; el_id_listfollowing.hidden = false;
el_id_listfollowing.innerHTML += out.reduce((pv, cuser) => { el_id_listfollowing.innerHTML += out.reduce((pv, cuser) => {
return pv + `<tr> return pv + `<tr>
<td><input type="checkbox" class="follower_checkbox" checked /></td> <td><input type="checkbox" class="following_checkbox" checked /></td>
<td><img src="${cuser.avatar}" width="32" height="32" /></td> <td><img src="${cuser.avatar}" width="32" height="32" /></td>
<td class="following_namelabel"> <td class="following_namelabel">
<a href="${cuser.url}" target="_blank"> <a href="${cuser.url}" target="_blank">
${renderNameHTML(cuser.display_name, cuser)} ${renderNameHTML(cuser.display_name, cuser)}
</a> </a>
</td> </td>
<td class="following_namelabel">@${cuser.fqn}</td> <td class="following_namelabel following_checkname">@${cuser.fqn}</td>
</tr>` </tr>`
}, ""); }, "");
userList.push(...out.map(user => ({ userList.push(...out.map(user => ({
@ -266,11 +329,10 @@ async function getFollowing(dontLoadNew = false) {
fields: user.fields, fields: user.fields,
id: user.id, id: user.id,
note: user.note, note: user.note,
username: user.url, url: user.url
username: user.username
}))); })));
lastId = userList.at(-1).id; lastId = userList.at(-1).id;
selectboxes = Array.from(el_id_listfollowing.querySelectorAll(".follower_checkbox")); selectboxes = Array.from(el_id_listfollowing.querySelectorAll(".following_checkbox"));
selectboxes.forEach(x => x.addEventListener("change", checkSelectedAmtFollowing)); selectboxes.forEach(x => x.addEventListener("change", checkSelectedAmtFollowing));
checkSelectedAmtFollowing(); checkSelectedAmtFollowing();
} }
@ -301,15 +363,17 @@ el_id_selectnofollowing.addEventListener("click", () => {
checkSelectedAmtFollowing(); checkSelectedAmtFollowing();
}) })
el_id_savehandlesfollowing.addEventListener("click", () => window.localStorage.setItem("fediversemadness_followingsel", JSON.stringify(generateFollowingMap())));
el_id_loadhandlesfollowing.addEventListener("click", () => readFollowingMap(JSON.parse(window.localStorage.getItem("fediversemadness_followingsel"))));
el_id_morefollowing.addEventListener("click", () => getFollowing()); el_id_morefollowing.addEventListener("click", () => getFollowing());
el_id_submitfollowing.addEventListener("click", () => { el_id_submitfollowing.addEventListener("click", () => {
console.log(selectedUsers); selectedUsers = [];
selectboxes.forEach(({checked}, i) => { selectboxes.forEach(({checked}, i) => {
if (checked) selectedUsers.push(userList.at(i)); if (checked) selectedUsers.push(userList.at(i));
}); });
if (selectedUsers.length < 2) { if (selectedUsers.length < 2) {
selectedUsers = [];
el_id_loadingfollowing.innerHTML = `Selected user count is less than 2! (${selectboxes.filter(x => x.checked).length} selected)`; el_id_loadingfollowing.innerHTML = `Selected user count is less than 2! (${selectboxes.filter(x => x.checked).length} selected)`;
return; return;
} }
@ -346,14 +410,14 @@ const el_id_gameUserOne = document.querySelector("#gameUserOne");
const el_id_gameUserOneImage = document.querySelector("#gameUserOneImage"); const el_id_gameUserOneImage = document.querySelector("#gameUserOneImage");
const el_id_gameUserOneName = document.querySelector("#gameUserOneName"); const el_id_gameUserOneName = document.querySelector("#gameUserOneName");
const el_id_gameUserOneId = document.querySelector("#gameUserOneId"); const el_id_gameUserOneId = document.querySelector("#gameUserOneId");
const el_id_gameUserOneNote = document.querySelector("#gameUserOneNote"); // const el_id_gameUserOneNote = document.querySelector("#gameUserOneNote");
const el_id_gameUserOneFields = document.querySelector("#gameUserOneFields"); // const el_id_gameUserOneFields = document.querySelector("#gameUserOneFields");
const el_id_gameUserTwo = document.querySelector("#gameUserTwo"); const el_id_gameUserTwo = document.querySelector("#gameUserTwo");
const el_id_gameUserTwoImage = document.querySelector("#gameUserTwoImage"); const el_id_gameUserTwoImage = document.querySelector("#gameUserTwoImage");
const el_id_gameUserTwoName = document.querySelector("#gameUserTwoName"); const el_id_gameUserTwoName = document.querySelector("#gameUserTwoName");
const el_id_gameUserTwoId = document.querySelector("#gameUserTwoId"); const el_id_gameUserTwoId = document.querySelector("#gameUserTwoId");
const el_id_gameUserTwoNote = document.querySelector("#gameUserTwoNote"); // const el_id_gameUserTwoNote = document.querySelector("#gameUserTwoNote");
const el_id_gameUserTwoFields = document.querySelector("#gameUserTwoFields"); // const el_id_gameUserTwoFields = document.querySelector("#gameUserTwoFields");
const el_id_gameSubmitLeft = document.querySelector("#gameSubmitLeft"); const el_id_gameSubmitLeft = document.querySelector("#gameSubmitLeft");
const el_id_gameSubmitRight = document.querySelector("#gameSubmitRight"); const el_id_gameSubmitRight = document.querySelector("#gameSubmitRight");
const el_id_gameBracketLevel = document.querySelector("#gameBracketLevel"); const el_id_gameBracketLevel = document.querySelector("#gameBracketLevel");
@ -364,19 +428,16 @@ let curDepth = 0;
let curFight = 0; let curFight = 0;
function sortSelectedUsers() { function sortSelectedUsers() {
if (gamemodeFollowers) goToState("game");
el_id_followers.hidden = true; state = [];
else curDepth = 0;
el_id_following.hidden = true; curFight = 0;
el_id_game.hidden = false;
state.push(chunk(shuf(selectedUsers), 2)); state.push(chunk(shuf(selectedUsers), 2));
state.push([]); state.push([]);
prepareGameStage(); prepareGameStage();
} }
function prepareGameStage() { function prepareGameStage() {
el_id_gameSubmitLeft.disabled = true;
el_id_gameSubmitRight.disabled = true;
el_id_gameSubmitLeft.innerHTML = "Please wait..."; el_id_gameSubmitLeft.innerHTML = "Please wait...";
el_id_gameSubmitRight.innerHTML = "Please wait..."; el_id_gameSubmitRight.innerHTML = "Please wait...";
el_id_gameUserOneImage.src = ""; el_id_gameUserOneImage.src = "";
@ -385,15 +446,15 @@ function prepareGameStage() {
el_id_gameBracketFight.innerHTML = "Round " + (curFight + 1); el_id_gameBracketFight.innerHTML = "Round " + (curFight + 1);
const curSubStage = state[curDepth][curFight]; const curSubStage = state[curDepth][curFight];
el_id_gameUserOneImage.src = curSubStage[0].avatar; el_id_gameUserOneImage.src = curSubStage[0].avatar;
el_id_gameUserOneName.innerHTML = renderNameHTML(escapeHtml(curSubStage[0].display_name), curSubStage[0]); el_id_gameUserOneName.innerHTML = `<a href="${curSubStage[0].url}" target="_blank">${renderNameHTML(escapeHtml(curSubStage[0].display_name), curSubStage[0])}</a>`;
el_id_gameUserOneId.innerHTML = "@" + curSubStage[0].fqn; el_id_gameUserOneId.innerHTML = "@" + curSubStage[0].fqn;
el_id_gameUserOneNote.innerHTML = escapeHtml(curSubStage[0].note); // 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_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_gameUserTwoImage.src = curSubStage[1].avatar;
el_id_gameUserTwoName.innerHTML = renderNameHTML(escapeHtml(curSubStage[1].display_name), curSubStage[1]); el_id_gameUserTwoName.innerHTML = `<a href="${curSubStage[1].url}" target="_blank">${renderNameHTML(escapeHtml(curSubStage[1].display_name), curSubStage[1])}</a>`;
el_id_gameUserTwoId.innerHTML = "@" + curSubStage[1].fqn; el_id_gameUserTwoId.innerHTML = "@" + curSubStage[1].fqn;
el_id_gameUserTwoNote.innerHTML = escapeHtml(curSubStage[1].note); // 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_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_gameSubmitLeft.disabled = false;
el_id_gameSubmitRight.disabled = false; el_id_gameSubmitRight.disabled = false;
el_id_gameSubmitLeft.innerHTML = "Pick " + "@" + curSubStage[0].fqn; el_id_gameSubmitLeft.innerHTML = "Pick " + "@" + curSubStage[0].fqn;
@ -442,21 +503,20 @@ const el_id_winnerUser = document.querySelector("#winnerUser");
const el_id_winnerUserImage = document.querySelector("#winnerUserImage"); const el_id_winnerUserImage = document.querySelector("#winnerUserImage");
const el_id_winnerUserName = document.querySelector("#winnerUserName"); const el_id_winnerUserName = document.querySelector("#winnerUserName");
const el_id_winnerUserId = document.querySelector("#winnerUserId"); const el_id_winnerUserId = document.querySelector("#winnerUserId");
const el_id_winnerUserNote = document.querySelector("#winnerUserNote"); // const el_id_winnerUserNote = document.querySelector("#winnerUserNote");
const el_id_winnerUserFields = document.querySelector("#winnerUserFields"); // const el_id_winnerUserFields = document.querySelector("#winnerUserFields");
const el_id_winnermessage = document.querySelector("#winnermessage"); const el_id_winnermessage = document.querySelector("#winnermessage");
const el_id_winnerusers = document.querySelector("#winnerusers"); const el_id_winnerusers = document.querySelector("#winnerusers");
const el_id_winnerPlayAgain = document.querySelector("#winnerPlayAgain"); const el_id_winnerPlayAgain = document.querySelector("#winnerPlayAgain");
function endGame() { function endGame() {
el_id_game.hidden = true; goToState("winner");
el_id_winner.hidden = false;
const winningPlayer = state[curDepth][curFight][0]; const winningPlayer = state[curDepth][curFight][0];
el_id_winnerUserImage.src = winningPlayer.avatar; el_id_winnerUserImage.src = winningPlayer.avatar;
el_id_winnerUserName.innerHTML = renderNameHTML(escapeHtml(winningPlayer.display_name), winningPlayer); el_id_winnerUserName.innerHTML = `<a href="${winningPlayer.url}" target="_blank">${renderNameHTML(escapeHtml(winningPlayer.display_name), winningPlayer)}</a>`;
el_id_winnerUserId.innerHTML = "@" + winningPlayer.fqn; el_id_winnerUserId.innerHTML = "@" + winningPlayer.fqn;
el_id_winnerUserNote.innerHTML = escapeHtml(winningPlayer.note); // 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_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_winnermessage.innerHTML = `Congratulations, ${renderNameHTML(escapeHtml(winningPlayer.display_name), winningPlayer)}! You won the bracket!`;
el_id_winnerusers.innerHTML = `<div>${state.reduce((pv, cs) => { el_id_winnerusers.innerHTML = `<div>${state.reduce((pv, cs) => {
@ -464,7 +524,7 @@ function endGame() {
return pvus + cus.reduce((pvu, cu) => { return pvus + cus.reduce((pvu, cu) => {
return pvu + `<div class="flexUserUser"> return pvu + `<div class="flexUserUser">
<img src="${cu.avatar}" width="64" height="64" /> <img src="${cu.avatar}" width="64" height="64" />
<h3>${renderNameHTML(escapeHtml(cu.display_name), cu)}</h3> <h3><a href="${cu.url}" target="_blank">${renderNameHTML(escapeHtml(cu.display_name), cu)}</a></h3>
<p>@${cu.fqn}</p> <p>@${cu.fqn}</p>
</div>` </div>`
}, "") }, "")
@ -473,7 +533,6 @@ function endGame() {
} }
el_id_winnerPlayAgain.addEventListener("click", (x) => { el_id_winnerPlayAgain.addEventListener("click", (x) => {
el_id_winner.hidden = true;
state = []; state = [];
selectedUsers = []; selectedUsers = [];
curDepth = 0; curDepth = 0;
@ -484,11 +543,41 @@ el_id_winnerPlayAgain.addEventListener("click", (x) => {
getFollowing(true); getFollowing(true);
}) })
function generateFollowersCode() { // Game state
return Array.from(document.querySelectorAll(".follower_checkbox")).reduce((p,x)=>p+(x.checked?"1":"0"),"");
const gameStates = new Map([
["whoami", {
state: el_id_whoami
}],
["followers", {
state: el_id_followers
}],
["following", {
state: el_id_following
}],
["game", {
state: el_id_game,
links: {
"winner": () => gamemodeFollowers ? "followers" : "following"
}
}],
["winner", {
state: el_id_winner
}]
]);
let prevState = "";
function goToState(state) {
window.location.hash = state;
const curState = gameStates.get(state);
if (curState.links != null)
if (curState.links[prevState])
return goToState(curState.links[prevState]());
gameStates.forEach(x => x.state.hidden = true);
curState.state.hidden = false;
prevState = state;
} }
function readFollowersCode(c, o = 0) { goToState("whoami");
const array = Array.from(document.querySelectorAll(".follower_checkbox"));
c.split("").forEach((x, i) => selectboxes[i + o].checked = parseInt(x)); addEventListener("popstate", () => goToState(window.location.hash.slice(1)));
}