mirror of
https://github.com/AndrioCelos/TableturfBattleApp.git
synced 2026-07-06 20:14:15 -05:00
238 lines
9.1 KiB
HTML
238 lines
9.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8"/>
|
|
<base href="https://questers-rest.andriocelos.net/tableturf/"/>
|
|
<script>
|
|
document.getElementsByTagName('base')[0].href = window.location.toString().replace(/\/(?:index.html|deckeditor|game\/[^/]*)$/, '/');
|
|
</script>
|
|
<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>
|
|
<p>
|
|
<a id="preGameDeckEditorButton" href="deckeditor">Edit decks</a>
|
|
</p>
|
|
</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>
|
|
<div id="lobbySelectedStageSection" hidden>
|
|
<h3>Stage</h3>
|
|
</div>
|
|
</section>
|
|
<section id="lobbyStageSection" hidden>
|
|
<h3>Vote for the stage.</h3>
|
|
<form id="stageSelectionForm">
|
|
<button type="submit">Submit</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 id="lobbyDeckSection" hidden>
|
|
<h3>Choose your deck.</h3>
|
|
<p><button type="button" id="submitDeckButton" disabled>Submit</button></p>
|
|
<div id="lobbyDeckList"></div>
|
|
</div>
|
|
</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>
|
|
<div id="deckListSection" hidden>
|
|
<section id="deckEditorDeckListSection">
|
|
<a id="deckListBackButton" href=".">Back</a>
|
|
<h3>Deck list</h3>
|
|
<div id="deckList">
|
|
<button id="newDeckButton">New deck</label>
|
|
</div>
|
|
</section>
|
|
<section id="deckEditorDeckViewSection" hidden>
|
|
<h3 id="deckName">Deck</h3>
|
|
<div>
|
|
<button type="button" id="deckEditButton">Edit</button>
|
|
<button type="button" id="deckRenameButton">Rename</button>
|
|
<button type="button" id="deckCopyButton">Copy</button>
|
|
<button type="button" id="deckDeleteButton" class="danger">Delete</button>
|
|
</div>
|
|
<div class="deckSizeContainer">Total: <div id="deckViewSize">0</div></div>
|
|
<div id="deckCardListView">
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<div id="deckEditSection" hidden>
|
|
<section id="deckEditorDeckEditSection">
|
|
<h3 id="deckName2">Deck</h3>
|
|
<div>
|
|
<button type="button" id="deckTestButton">Test</button>
|
|
<button type="button" id="deckSaveButton">Save</button>
|
|
<button type="button" id="deckCancelButton">Cancel</button>
|
|
</div>
|
|
<div class="deckSizeContainer">Total: <div id="deckEditSize">0</div></div>
|
|
<div id="deckCardListEdit">
|
|
</div>
|
|
</section>
|
|
<section id="deckEditorCardListSection">
|
|
<label for="cardListSortBox">
|
|
Sort by
|
|
<select id="cardListSortBox" autocomplete="off">
|
|
<option value="number">number</option>
|
|
<option value="name">name</option>
|
|
<option value="size">size</option>
|
|
<option value="rarity">rarity</option>
|
|
</select>
|
|
</label>
|
|
<div id="cardList"></div>
|
|
</section>
|
|
</div>
|
|
<script src="build/tsbuild.js"></script>
|
|
</body>
|
|
</html>
|