Add manual mode, fix some bugs

views/projects/item/fediverse-madness/index.html

@@ -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>

views/projects/item/fediverse-madness/scripts/game.js

@@ -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) => {
+async function doVerif() {
-    el_id_errorwhoami.innerHTML = "";
     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;
+    gamemodeFollowers = "followers";
-    getFollowers();
+    startFollowers();
 })
 
 el_id_submitwhoamiFollowing.addEventListener("click", async (e) => {
     el_id_errorwhoami.innerHTML = "";
-    el_id_submitwhoamiFollowers.disabled = true;
+    await doVerif();
-    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!";
         return false;
     }
 
-    gamemodeFollowers = false;
+    gamemodeFollowers = "following";
-    getFollowing();
+    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) => {
+    out.forEach((cuser) => {
-        return pv + `<tr>
+        const element = document.createElement("tr");
-        <td><input type="checkbox" class="follower_checkbox" checked /></td>
+        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="followers_namelabel">
+    <td class="follower_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>
+    <td class="follower_namelabel follower_checkname">@${cuser.fqn}</td>`;
-</tr>`
+        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) => {
+    out.forEach((cuser) => {
-        return pv + `<tr>
+        const element = document.createElement("tr");
-        <td><input type="checkbox" class="following_checkbox" checked /></td>
+        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>
+    <td class="following_namelabel following_checkname">@${cuser.fqn}</td>`;
-</tr>`
+        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)
+    switch (gamemodeFollowers) {
-        getFollowers(true);
+        case "followers":
-    else
+            startFollowers(false);
-        getFollowing(true);
+            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", {