mirror of
https://github.com/AndrioCelos/TableturfBattleApp.git
synced 2026-04-16 22:05:48 -05:00
d4e8d86571
The server will now send a sync message when the client connects via WebSocket. This removes the need to send another GET request to sync game data.
285 lines
11 KiB
HTML
285 lines
11 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="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://questers-rest.andriocelos.net/tableturf/"/>
|
|
<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>
|
|
<div id="preGameLoadingSection" class="loadingContainer" hidden>
|
|
<div class="lds-ripple"><div></div><div></div></div> <span id="preGameLoadingLabel"></span>
|
|
</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="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">
|
|
<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" class="deckList"></div>
|
|
</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>
|
|
<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="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="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>
|
|
<div id="errorModal" hidden>
|
|
<div id="errorModalBox">A communication error has occurred.</div>
|
|
</div>
|
|
<script src="build/tsbuild.js"></script>
|
|
</body>
|
|
</html>
|