mirror of
https://github.com/AndrioCelos/TableturfBattleApp.git
synced 2026-03-21 17:34:28 -05:00
317 lines
12 KiB
HTML
317 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8"/>
|
|
<base href="https://tableturf.andriocelos.net/tableturf/"/>
|
|
<script>
|
|
baseUrl = window.location.toString().replace(/\/(?:index.html|deckeditor|game\/[^/]*|replay\/[^/]*)$/, '/');
|
|
document.getElementsByTagName('base')[0].href = baseUrl;
|
|
</script>
|
|
<title>Tableturf Battle</title>
|
|
<link rel="apple-touch-icon" sizes="180x180" href="assets/apple-touch-icon.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicon-16x16.png">
|
|
<link rel="manifest" href="assets/site.webmanifest">
|
|
<link rel="stylesheet" href="tableturf.css"/>
|
|
<script src="config/config.js"></script>
|
|
<script src="qrcodejs/qrcode.js"></script>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<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://tableturf.andriocelos.net/"/>
|
|
<meta name="theme-color" content="#e7b427" data-react-helmet="true"/>
|
|
</head>
|
|
<body>
|
|
<div id="noJSPage">This application requires JavaScript.</div>
|
|
<div id="preGamePage" 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">
|
|
<button type="submit" id="preGameImplicitSubmitButton" tabindex="-1"></button>
|
|
<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> |
|
|
<a id="preGameReplayButton" href="replay">Replay</a>
|
|
</p>
|
|
<div id="preGameLoadingSection" class="loadingContainer" hidden>
|
|
<div class="lds-ripple"><div></div><div></div></div> <span id="preGameLoadingLabel"></span>
|
|
</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><span id="discordSection"> | <a id="discordLink">Discord</a></span></p>
|
|
</footer>
|
|
</div>
|
|
<div id="lobbyPage" hidden>
|
|
<section id="lobbyPlayerListSection">
|
|
<p>Other players can join using a link to this page.<br/>
|
|
<button type="button" id="shareLinkButton">Share link</button><button type="button" id="showQrCodeButton">Show QR code</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">
|
|
<div class="submitButtonContainer">
|
|
<button type="submit" id="submitStageButton">Submit</button>
|
|
<div class="loadingContainer">
|
|
<div class="lds-ripple"><div></div><div></div></div>
|
|
</div>
|
|
</div>
|
|
<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"><div class="lds-ripple"><div></div><div></div></div> Loading stages...</p>
|
|
</form>
|
|
</section>
|
|
<div id="lobbyDeckSection" hidden>
|
|
<h3>Choose your deck.</h3>
|
|
<form id="deckSelectionForm">
|
|
<div class="submitButtonContainer">
|
|
<button type="submit" id="submitDeckButton" disabled>Submit</button>
|
|
<div class="loadingContainer">
|
|
<div class="lds-ripple"><div></div><div></div></div>
|
|
</div>
|
|
</div>
|
|
<div id="lobbyDeckList" class="deckList"></div>
|
|
</form>
|
|
</div>
|
|
<dialog id="qrCodeDialog">
|
|
<form method="dialog">
|
|
<p>Scan this QR code to join the game.</p>
|
|
<div id="qrCode"></div>
|
|
<button type="submit">Close</button>
|
|
</form>
|
|
</dialog>
|
|
</div>
|
|
<div id="gamePage" hidden>
|
|
<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="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 id="playControls">
|
|
<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>
|
|
<button id="shareReplayLinkButton">Copy replay link</button>
|
|
<br/>
|
|
<a id="resultLeaveButton" href="#">Leave game</a>
|
|
</div>
|
|
<div id="replayControls" hidden>
|
|
<button id="replayNextButton">Next turn</button>
|
|
<a id="replayLeaveButton" href="#">Exit replay</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="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="showDeckContainer" hidden>
|
|
<div id="showDeck">
|
|
<ul id="showDeckList"></ul>
|
|
<div>
|
|
<button type="button" id="showDeckCloseButton">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="turnNumberContainer" hidden>
|
|
<p>Turns left</p>
|
|
<div id="turnNumberLabel">12</div>
|
|
</div>
|
|
<div id="scoreSection">
|
|
<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="gameButtonsContainer">
|
|
<button id="rotateLeftButton" title="Rotate card anticlockwise (Shift+R)">↶</button>
|
|
<button id="rotateRightButton" title="Rotate card clockwise (R)">↷</button>
|
|
<button id="gameDeckButton" title="Show deck (D)">🂠</button>
|
|
</div>
|
|
|
|
<div class="playContainer" data-index="1"></div>
|
|
<div class="playContainer" data-index="3"></div>
|
|
<div class="playContainer" data-index="0"></div>
|
|
<div class="playContainer" data-index="2"></div>
|
|
</div>
|
|
<div id="deckListPage" hidden>
|
|
<section id="deckEditordeckListPage">
|
|
<a id="deckListBackButton" href=".">Back</a>
|
|
<h3>Deck list</h3>
|
|
<div id="deckList" class="deckList">
|
|
<div id="addDeckControls">
|
|
<button id="newDeckButton">New deck</button>
|
|
<button id="importDeckButton">Import deck</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section id="deckEditorDeckViewSection" hidden>
|
|
<a id="deckViewBackButton" href="#">Back</a>
|
|
<h3 id="deckName">Deck</h3>
|
|
<div>
|
|
<button type="button" id="deckEditButton">Edit</button>
|
|
<button type="button" id="deckExportButton">Export</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>
|
|
<dialog id="deckImportDialog">
|
|
<form id="deckImportForm" method="dialog">
|
|
<textarea id="deckImportTextBox" rows="24" cols="45"></textarea>
|
|
<div id="deckImportErrorBox" class="error" hidden></div>
|
|
<div>
|
|
<button type="submit" id="deckImportOkButton">OK</button>
|
|
<button type="submit" id="deckImportCancelButton">Cancel</button>
|
|
</div>
|
|
</form>
|
|
</dialog>
|
|
<dialog id="deckExportDialog">
|
|
<form method="dialog">
|
|
<textarea id="deckExportTextBox" readonly rows="24" cols="45"></textarea>
|
|
<div>
|
|
<button type="button" id="deckExportCopyButton">Copy</button>
|
|
<button type="submit">Close</button>
|
|
</div>
|
|
</form>
|
|
</dialog>
|
|
</div>
|
|
<div id="deckEditPage" hidden>
|
|
<section id="deckEditordeckEditPage">
|
|
<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">
|
|
<a id="deckCardListBackButton" href="#">Back</a>
|
|
<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 id="deckEditorCardListBackdrop"></div>
|
|
</div>
|
|
<dialog id="errorDialog">
|
|
<div id="errorMessage"></div>
|
|
<form id="errorDialogForm" method="dialog">
|
|
<button type="submit">OK</button>
|
|
</form>
|
|
</dialog>
|
|
<script src="build/tsbuild.js"></script>
|
|
</body>
|
|
</html>
|