mirror of
https://github.com/AndrioCelos/TableturfBattleApp.git
synced 2026-04-19 07:07:30 -05:00
183 lines
7.2 KiB
HTML
183 lines
7.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8"/>
|
|
<title>Tableturf Battle</title>
|
|
<link rel="stylesheet" href="tableturf.css"/>
|
|
<script src="config/config.js"></script>
|
|
<meta property="og:type" content="website"/>
|
|
<meta name="title" property="og:title" content="Tableturf Battle"/>
|
|
<meta name="description" property="og:description" content="(Beta) An unofficial simulator for Tableturf Battle from Splatoon 3. Play online with friends using any in-game cards!"/>
|
|
<meta property="og:url" content="https://questers-rest.andriocelos.net/tableturf/"/>
|
|
<meta name="theme-color" content="#e7b427" data-react-helmet="true"/>
|
|
</head>
|
|
<body>
|
|
<div id="noJSSection">This application requires JavaScript.</div>
|
|
<div id="preGameSection" hidden>
|
|
<p><img title="Tableturf Battle" alt="Tableturf Battle logo" id="logo" src="assets/logo.png"></p>
|
|
<h1>Tableturf Battle</h1>
|
|
<form id="preGameForm">
|
|
<p><label for="nameBox">Choose a nickname: <input type="text" id="nameBox" required minlength="1" maxlength="20"/></label></p>
|
|
<div id="preGameDefaultSection">
|
|
<input type="submit" id="preGameImplicitSubmitButton" tabindex="-1"/>
|
|
<p>
|
|
<button type="submit" id="newGameButton">Create a room</button>
|
|
<label for="maxPlayersBox">
|
|
<select id="maxPlayersBox">
|
|
<option value="2">2 players</option>
|
|
<option value="3">3 players</option>
|
|
<option value="4">4 players</option>
|
|
</select>
|
|
</label>
|
|
</p>
|
|
<p><label for="gameIDBox">Enter a game link or ID to join a game:<br/>
|
|
<input type="text" id="gameIDBox" placeholder="Game link or ID"/></label>
|
|
<button type="submit" id="joinGameButton">Join game</button></p>
|
|
</div>
|
|
<div id="preGameJoinSection" hidden>
|
|
<p><button type="submit" id="joinGameButton2">Join game</button></p>
|
|
<a id="preGameBackButton" href="../..">Create or join a different room</a>
|
|
</div>
|
|
</form>
|
|
<footer>
|
|
<p>This website is not affiliated with Nintendo. All product names, logos, and brands are property of their respective owners.</p>
|
|
<p><a href="https://github.com/AndrioCelos/TableturfBattleApp">GitHub</a></p>
|
|
</footer>
|
|
</div>
|
|
<div id="lobbySection" hidden>
|
|
<section id="lobbyPlayerListSection">
|
|
<p>Other players can join using a link to this page. <button type="button" id="shareLinkButton">Share link</button></p>
|
|
<ul id="playerList"></ul>
|
|
</section>
|
|
<section id="lobbyStageSection" hidden>
|
|
<h3>Vote for the stage.</h3>
|
|
<form id="stageSelectionForm">
|
|
<button type="submit">Select</button>
|
|
<div id="stageList">
|
|
<label id="stageRandomLabel" for="stageRandomButton" class="stageRandom checked">
|
|
<input type="radio" id="stageRandomButton" name="stage" value="random" checked/> Random
|
|
</label>
|
|
</div>
|
|
<p id="stageListLoadingSection">Loading stages...</p>
|
|
</form>
|
|
</section>
|
|
</div>
|
|
<div id="deckSection" hidden>
|
|
<p>Choose your deck.</p>
|
|
<p><span id='countLabel'>0</span>/15 cards chosen</p>
|
|
<p><button type="button" id="submitDeckButton" disabled>Submit</button></p>
|
|
<p id="cardListLoadingSection">Loading cards...</p>
|
|
<ul id="cardList"></ul>
|
|
</div>
|
|
<div id="gameSection" hidden>
|
|
<div id="sidebarSection">
|
|
<div class="playerBar" data-index="1">
|
|
<div class="result"></div>
|
|
<div class="name">Player 2</div>
|
|
<div class="specialPoints"> </div>
|
|
<div class="playerStats">
|
|
<div class="statSpecialPoints">
|
|
<div class="statLabel">Special points</div>
|
|
<div class="statValue">0</div>
|
|
</div>
|
|
<div class="statPasses">
|
|
<div class="statLabel">Turns passed</div>
|
|
<div class="statValue">0</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="playerBar" data-index="2">
|
|
<div class="result"></div>
|
|
<div class="name">Player 3</div>
|
|
<div class="specialPoints"> </div>
|
|
<div class="playerStats">
|
|
<div class="statSpecialPoints">
|
|
<div class="statLabel">Special points</div>
|
|
<div class="statValue">0</div>
|
|
</div>
|
|
<div class="statPasses">
|
|
<div class="statLabel">Turns passed</div>
|
|
<div class="statValue">0</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="midGameContainer">
|
|
<div id="handContainer"></div>
|
|
<label for="passButton">
|
|
<input type="checkbox" id="passButton"/> Pass
|
|
</label>
|
|
<label for="specialButton">
|
|
<input type="checkbox" id="specialButton"/> Special Attack
|
|
</label>
|
|
</div>
|
|
<div id="resultContainer" hidden>
|
|
<a id="resultLeaveButton" href="#">Leave game</a>
|
|
</div>
|
|
|
|
<div class="playerBar" data-index="0">
|
|
<div class="result"></div>
|
|
<div class="name">Player 1</div>
|
|
<div class="specialPoints"> </div>
|
|
<div class="playerStats">
|
|
<div class="statSpecialPoints">
|
|
<div class="statLabel">Special points</div>
|
|
<div class="statValue">0</div>
|
|
</div>
|
|
<div class="statPasses">
|
|
<div class="statLabel">Turns passed</div>
|
|
<div class="statValue">0</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="playerBar" data-index="3">
|
|
<div class="result"></div>
|
|
<div class="name">Player 4</div>
|
|
<div class="specialPoints"> </div>
|
|
<div class="playerStats">
|
|
<div class="statSpecialPoints">
|
|
<div class="statLabel">Special points</div>
|
|
<div class="statValue">0</div>
|
|
</div>
|
|
<div class="statPasses">
|
|
<div class="statLabel">Turns passed</div>
|
|
<div class="statValue">0</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="scoreSection">
|
|
<div id="turnNumberContainer" hidden>
|
|
<p>Turns left</p>
|
|
<div id="turnNumberLabel">12</div>
|
|
</div>
|
|
<div id="pointsContainers">
|
|
<div class="pointsContainer" data-index="2"><span class="points">69</span><span class="pointsToContainer">↪ <span class="pointsTo">60</span></span><span class="pointsDelta">+1</span></div>
|
|
<div class="pointsContainer" data-index="1"><span class="points">69</span><span class="pointsToContainer">↪ <span class="pointsTo">60</span></span><span class="pointsDelta">+1</span></div>
|
|
<div class="pointsContainer" data-index="0"><span class="points">69</span><span class="pointsToContainer">↪ <span class="pointsTo">60</span></span><span class="pointsDelta">+1</span></div>
|
|
<div class="pointsContainer" data-index="3"><span class="points">69</span><span class="pointsToContainer">↪ <span class="pointsTo">60</span></span><span class="pointsDelta">+1</span></div>
|
|
</div>
|
|
</div>
|
|
<div id="boardSection">
|
|
<table id="gameBoard" tabindex="0"></table>
|
|
<div id="redrawModal" hidden>
|
|
<div id="redrawBox">
|
|
<p>Redraw your starting hand?</p>
|
|
<p><button type="button" id="redrawNoButton" data-redraw="false">Hold steady</button></p>
|
|
<p><button type="button" id="redrawYesButton" data-redraw="true">Redraw</button></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="playsSection">
|
|
<div class="playContainer" data-index="2"></div>
|
|
<div class="playContainer" data-index="1"></div>
|
|
<div class="playContainer" data-index="0"></div>
|
|
<div class="playContainer" data-index="3"></div>
|
|
</div>
|
|
</div>
|
|
<div id="errorModal" hidden>
|
|
<div id="errorModalBox">A communication error has occurred.</div>
|
|
</div>
|
|
<script src="build/tsbuild.js"></script>
|
|
</bo
|