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

140 lines
5.4 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Fediverse Madness - abtmtr.link</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/styles/normal.css" />
<link rel="stylesheet" href="/styles/myapp.css" />
<link rel="stylesheet" href="./style.css" />
<style>
:root {
--base-color: 60, 40%;
}
</style>
</head>
<body>
<header>
<section>
<h1>Fediverse Madness</h1>
<p>Competitive bracket-based comparisons of Fediverse users.</p>
</section>
<section id="accessibility" hidden></section>
</header>
<main>
<section id="whoami">
<h3>Who are you?</h3>
<span class="userinputbox">
<span>@</span>
<input type="text" name="user" id="user" class="userinstance" />
<span>@</span>
<input type="text" name="instance" id="instance" class="userinstance" />
</span>
<br />
<hr />
<button id="submitwhoami_followers">Play (Followers)</button>
<button id="submitwhoami_following">Play (Following)</button>
<p id="errorwhoami"></p>
</section>
<section id="followers" hidden>
<h3>Followers list</h3>
<p id="loadingfollowers">Retrieving followers... Please wait.</p>
<table id="listfollowers" hidden>
<tr id="listfollowersvalues">
<th>S.</th>
<th>Av.</th>
<th>User</th>
<th>Handle</th>
</tr>
</table>
<div>
<button id="selectallfollowers">Select all</button>
<button id="selectnofollowers">Select none</button>
<button id="selectrandomfollowers">Select random</button>
<button id="deselectrandomfollowers">Deselect random</button>
</div>
<button id="morefollowers">Load more</button>
<button id="submitfollowers" disabled>Done</button>
</section>
<section id="following" hidden>
<h3>Following list</h3>
<p id="loadingfollowing">Retrieving following... Please wait.</p>
<table id="listfollowing" hidden>
<tr id="listfollowingvalues">
<th>S.</th>
<th>Av.</th>
<th>User</th>
<th>Handle</th>
</tr>
</table>
<div>
<button id="selectallfollowing">Select all</button>
<button id="selectnofollowing">Select none</button>
<button id="selectrandomfollowing">Select random</button>
<button id="deselectrandomfollowing">Deselect random</button>
</div>
<button id="morefollowing">Load more</button>
<button id="submitfollowing" disabled>Done</button>
</section>
<section id="game" hidden>
<h3>Fight!</h3>
<p id="gameBracketLevel">Bracket Level ...</p>
<p id="gameBracketFight">Round ...</p>
<div class="gridUsersVert">
<div class="gridUser" id="gameUserOne">
<img src="" id="gameUserOneImage" width="128" height="128" />
<div>
<h3 id="gameUserOneName"></h3>
<p id="gameUserOneId"></p>
<p id="gameUserOneNote"></p>
<table id="gameUserOneFields">
</table>
</div>
</div>
<div class="gridUser" id="gameUserTwo">
<img src="" id="gameUserTwoImage" width="128" height="128" />
<div>
<h3 id="gameUserTwoName"></h3>
<p id="gameUserTwoId"></p>
<p id="gameUserTwoNote"></p>
<table id="gameUserTwoFields">
</table>
</div>
</div>
</div>
<hr />
<button id="gameSubmitLeft" disabled>Please wait...</button>
<button id="gameSubmitRight" disabled>Please wait...</button>
</section>
<section id="winner" hidden>
<h3>Winner</h3>
<p id="winnermessage">Congratulations, ...</p>
<div class="gridUser" id="winnerUser">
<img src="" id="winnerUserImage" width="128" height="128" />
<div>
<h3 id="winnerUserName"></h3>
<p id="winnerUserId"></p>
<p id="winnerUserNote"></p>
<table id="winnerUserFields">
</table>
</div>
</div>
<h3>Bracket</h3>
<div class="flexUsersVert" id="winnerusers">
</div>
<hr />
<button id="winnerPlayAgain">Play Again</button>
</section>
</main>
<section id="accessibility" hidden></section>
<script src="/scripts/accessibility.js"></script>
<script>
let game = {
USER_ID: "Abg3KCIlHi1Q2Gzx0y",
INSTANCE: "local.abtmtr.link"
};
</script>
<script src="./script.js"></script>
<script src="./scripts/game.js"></script>
</body>
</html>