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

Add manual mode, fix some bugs

Browse source
This commit is contained in:
MeowcaTheoRange 2024-03-19 12:30:37 -05:00
parent 967f6bc1e7
commit 98c4cd1a03
2 changed files with 225 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -35,6 +35,7 @@
<hr />
<button id="submitwhoami_followers">Play (Followers)</button>
<button id="submitwhoami_following">Play (Following)</button>
<button id="submitwhoami_manual">Play (Manual)</button>
<p id="errorwhoami"></p>
</section>
<section id="followers" hidden>
@ -79,12 +80,40 @@
<button id="deselectrandomfollowing">Deselect random</button>
</div>
<div>
<button id="morefollowing">Load more</button>
<button id="savehandlesfollowing">Save selection</button>
<button id="loadhandlesfollowing">Load selection</button>
</div>
<button id="morefollowing">Load more</button>
<button id="submitfollowing" disabled>Done</button>
</section>
<section id="manual" hidden>
<h3>Manual list</h3>
<p id="loadingmanual"></p>
<table id="listmanual" hidden>
<tr id="listmanualvalues">
<th>S.</th>
<th>Av.</th>
<th>User</th>
<th>Handle</th>
</tr>
</table>
<div>
<button id="selectallmanual">Select all</button>
<button id="selectnomanual">Select none</button>
<button id="selectrandommanual">Select random</button>
<button id="deselectrandommanual">Deselect random</button>
</div>
<div>
<span class="userinputbox">
<span>@</span>
<input type="text" name="user" id="manualuser" class="userinstance" />
<span>@</span>
<input type="text" name="instance" id="manualinstance" class="userinstance" />
</span>
<button id="moremanual">Fetch</button>
</div>
<button id="submitmanual" disabled>Done</button>
</section>
<section id="game" hidden>
<h3>Fight!</h3>
<p id="gameBracketLevel">Bracket Level ...</p>

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

@ -17,8 +17,9 @@ 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_submitwhoamiManual = document.querySelector("#submitwhoami_manual");
const el_id_errorwhoami = document.querySelector("#errorwhoami");
let gamemodeFollowers;
let gamemodeFollowers = "";
el_id_user.addEventListener("input", (e) => {
console.log(e);
@ -66,36 +67,50 @@ async function lookupUser() {
lookupUser();
el_id_submitwhoamiFollowers.addEventListener("click", async (e) => {
el_id_errorwhoami.innerHTML = "";
async function doVerif() {
el_id_submitwhoamiFollowers.disabled = true;
el_id_submitwhoamiFollowing.disabled = true;
el_id_submitwhoamiManual.disabled = true;
game = await verify();
el_id_submitwhoamiFollowers.disabled = false;
el_id_submitwhoamiFollowing.disabled = false;
el_id_submitwhoamiManual.disabled = false;
}
el_id_submitwhoamiFollowers.addEventListener("click", async (e) => {
el_id_errorwhoami.innerHTML = "";
await doVerif();
if (game == null) {
el_id_errorwhoami.innerHTML = "Invalid user!";
return false;
}
gamemodeFollowers = true;
getFollowers();
gamemodeFollowers = "followers";
startFollowers();
})
el_id_submitwhoamiFollowing.addEventListener("click", async (e) => {
el_id_errorwhoami.innerHTML = "";
el_id_submitwhoamiFollowers.disabled = true;
el_id_submitwhoamiFollowing.disabled = true;
game = await verify();
el_id_submitwhoamiFollowers.disabled = false;
el_id_submitwhoamiFollowing.disabled = false;
await doVerif();
if (game == null) {
el_id_errorwhoami.innerHTML = "Invalid user!";
return false;
}
gamemodeFollowers = false;
getFollowing();
gamemodeFollowers = "following";
startFollowing();
})
el_id_submitwhoamiManual.addEventListener("click", async (e) => {
el_id_errorwhoami.innerHTML = "";
await doVerif();
if (game == null) {
el_id_errorwhoami.innerHTML = "Invalid user!";
return false;
}
gamemodeFollowers = "manual";
startManual();
})
// Followers
@ -144,15 +159,19 @@ function renderNameHTML(name, user) {
})}</span>`;
}
async function getFollowers(dontLoadNew = false) {
function startFollowers(reload = true) {
goToState("followers");
if (!dontLoadNew) {
if (reload) {
selectboxes = [];
userList = [];
lastId = "";
selectedUsers = [];
el_id_listfollowers.innerHTML = "";
}
getFollowers(!reload);
}
async function getFollowers(dontLoadNew = false) {
el_id_submitfollowers.disabled = true;
el_id_morefollowers.disabled = true;
let res;
@ -170,18 +189,18 @@ async function getFollowers(dontLoadNew = false) {
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 follower_checkname">@${cuser.fqn || cuser.acct}</td>
</tr>`
}, "");
out.forEach((cuser) => {
const element = document.createElement("tr");
element.innerHTML = `<td><input type="checkbox" class="follower_checkbox" checked onchange="checkSelectedAmtFollowers()" /></td>
<td><img src="${cuser.avatar}" width="32" height="32" /></td>
<td class="follower_namelabel">
<a href="${cuser.url}" target="_blank">
${renderNameHTML(cuser.display_name, cuser)}
</a>
</td>
<td class="follower_namelabel follower_checkname">@${cuser.fqn}</td>`;
el_id_listfollowers.appendChild(element);
});
userList.push(...out.map(user => ({
fqn: user.fqn || user.acct,
avatar: user.avatar,
@ -196,7 +215,6 @@ async function getFollowers(dontLoadNew = false) {
})));
lastId = userList.at(-1).id;
selectboxes = Array.from(el_id_listfollowers.querySelectorAll(".follower_checkbox"));
selectboxes.forEach(x => x.addEventListener("change", checkSelectedAmtFollowers));
checkSelectedAmtFollowers();
}
@ -281,15 +299,19 @@ function readFollowingMap(m) {
});
}
async function getFollowing(dontLoadNew = false) {
function startFollowing(reload = true) {
goToState("following");
if (!dontLoadNew) {
if (reload) {
selectboxes = [];
userList = [];
lastId = "";
selectedUsers = [];
el_id_listfollowers.innerHTML = "";
el_id_listfollowing.innerHTML = "";
}
getFollowing(!reload);
}
async function getFollowing(dontLoadNew = false) {
el_id_submitfollowing.disabled = true;
el_id_morefollowing.disabled = true;
let res;
@ -307,18 +329,18 @@ async function getFollowing(dontLoadNew = false) {
return false;
}
el_id_listfollowing.hidden = false;
el_id_listfollowing.innerHTML += out.reduce((pv, cuser) => {
return pv + `<tr>
<td><input type="checkbox" class="following_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 following_checkname">@${cuser.fqn}</td>
</tr>`
}, "");
out.forEach((cuser) => {
const element = document.createElement("tr");
element.innerHTML = `<td><input type="checkbox" class="following_checkbox" checked onchange="checkSelectedAmtFollowing()" /></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 following_checkname">@${cuser.fqn}</td>`;
el_id_listfollowing.appendChild(element);
});
userList.push(...out.map(user => ({
fqn: user.fqn,
avatar: user.avatar,
@ -333,7 +355,6 @@ async function getFollowing(dontLoadNew = false) {
})));
lastId = userList.at(-1).id;
selectboxes = Array.from(el_id_listfollowing.querySelectorAll(".following_checkbox"));
selectboxes.forEach(x => x.addEventListener("change", checkSelectedAmtFollowing));
checkSelectedAmtFollowing();
}
@ -384,6 +405,122 @@ function checkSelectedAmtFollowing() {
el_id_loadingfollowing.innerHTML = `${selectboxes.filter(x => x.checked).length} selected`;
}
// Manual
const el_id_manual = document.querySelector("#manual");
const el_id_loadingmanual = document.querySelector("#loadingmanual");
const el_id_listmanual = document.querySelector("#listmanual");
const el_id_listmanualvalues = document.querySelector("#listmanualvalues");
const el_id_selectallmanual = document.querySelector("#selectallmanual");
const el_id_selectrandommanual = document.querySelector("#selectrandommanual");
const el_id_deselectrandommanual = document.querySelector("#deselectrandommanual");
const el_id_selectnomanual = document.querySelector("#selectnomanual");
const el_id_manualuser = document.querySelector("#manualuser");
const el_id_manualinstance = document.querySelector("#manualinstance");
const el_id_moremanual = document.querySelector("#moremanual");
const el_id_submitmanual = document.querySelector("#submitmanual");
function startManual(reload = true) {
goToState("manual");
if (reload) {
selectboxes = [];
userList = [];
lastId = "";
selectedUsers = [];
el_id_listmanual.innerHTML = "";
}
checkSelectedAmtManual();
}
async function addUserToManual() {
const username = el_id_manualuser.value.replace(/[^a-z0-9_]/gim, "");
const instance = el_id_manualinstance.value.replace(/@/gim, "");
el_id_manualuser.value = username;
el_id_manualinstance.value = instance;
if (username.length < 1) return null;
if (instance.length < 1) return null;
el_id_submitmanual.disabled = true;
el_id_moremanual.disabled = true;
el_id_loadingmanual.innerHTML = `Finding user...`;
let res = await fetch(`https://${game.INSTANCE}/api/v1/accounts/lookup?acct=${username}@${instance}`);
let out = await res.json();
el_id_submitmanual.disabled = false;
el_id_moremanual.disabled = false;
if (out.length < 1) {
el_id_loadingmanual.innerHTML = `No manual found.`;
return false;
}
el_id_listmanual.hidden = false;
const element = document.createElement("tr");
element.innerHTML = `<td><input type="checkbox" class="manual_checkbox" checked onchange="checkSelectedAmtManual()" /></td>
<td><img src="${out.avatar}" width="32" height="32" /></td>
<td class="manual_namelabel">
<a href="${out.url}" target="_blank">
${renderNameHTML(out.display_name, out)}
</a>
</td>
<td class="manual_namelabel manual_checkname">@${out.fqn}</td>`;
el_id_listmanual.appendChild(element);
userList.push({
fqn: out.fqn,
avatar: out.avatar,
bot: out.bot,
created_at: out.created_at,
display_name: out.display_name,
emojis: out.emojis,
fields: out.fields,
id: out.id,
note: out.note,
url: out.url
});
selectboxes = Array.from(el_id_listmanual.querySelectorAll(".manual_checkbox"));
checkSelectedAmtManual();
}
el_id_selectallmanual.addEventListener("click", () => {
selectboxes.forEach(x => x.checked = true);
checkSelectedAmtManual();
})
el_id_selectrandommanual.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;
checkSelectedAmtManual();
})
el_id_deselectrandommanual.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;
checkSelectedAmtManual();
})
el_id_selectnomanual.addEventListener("click", () => {
selectboxes.forEach(x => x.checked = false);
checkSelectedAmtManual();
})
el_id_moremanual.addEventListener("click", () => addUserToManual());
el_id_submitmanual.addEventListener("click", () => {
selectedUsers = [];
selectboxes.forEach(({checked}, i) => {
if (checked) selectedUsers.push(userList.at(i));
});
if (selectedUsers.length < 2) {
el_id_loadingmanual.innerHTML = `Selected user count is less than 2! (${selectboxes.filter(x => x.checked).length} selected)`;
return;
}
sortSelectedUsers();
})
function checkSelectedAmtManual() {
el_id_loadingmanual.innerHTML = `${selectboxes.filter(x => x.checked).length} selected`;
}
// Brackets
function shuf(array) {
@ -537,10 +674,17 @@ el_id_winnerPlayAgain.addEventListener("click", (x) => {
selectedUsers = [];
curDepth = 0;
curFight = 0;
if (gamemodeFollowers)
getFollowers(true);
else
getFollowing(true);
switch (gamemodeFollowers) {
case "followers":
startFollowers(false);
break;
case "following":
startFollowing(false);
break;
case "manual":
startManual(false);
break;
}
})
// Game state
@ -555,10 +699,13 @@ const gameStates = new Map([
["following", {
state: el_id_following
}],
["manual", {
state: el_id_manual
}],
["game", {
state: el_id_game,
links: {
"winner": () => gamemodeFollowers ? "followers" : "following"
"winner": () => gamemodeFollowers
}
}],
["winner", {