<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Detonating Cats</title>
<link rel="stylesheet" type="text/css" href="style.css?incr=3" />
</head>
<body>
<!-- This is needed for some reason, because in some cases the browser loads
a fresh copy of the JS but not the HTML (?!) -->
<input type="hidden" id="REVISION" value="9" />
<noscript><h1>You need to enable Javascript</h1></noscript>
<div id="loading">
<p>Loading assets, please wait.</p>
<p><span id="loading-assets">0</span> assets loaded.</p>
<p>(If this takes too long, try force-reloading with Ctrl+F5...)</p>
</div>
<div id="welcome" class="reveal">
<table>
<tr>
<td class="welcome-pane">
<h1>Welcome to DETONATING CATS <small>(beta)</small></h1>
<table id="login-form">
<tr>
<td><label for="welcome-username">Your name:</label></td>
<td><input id="welcome-username" placeholder="Dunce" /></td>
</tr>
<tr>
<td><label for="welcome-lobby">Lobby name:</label></td>
<td><input id="welcome-lobby" placeholder="chuff" /></td>
</tr>
</table>
<button id="welcome-join">Join!</button>
</td>
<td class="welcome-pane">
<h1>Changelog</h1>
<span id="changelog-container"></div>
</td>
</tr>
<tr id="privacy"><td>
<p>Privacy notice: game and chat messages may be logged to help with debugging.
These logs will not be shared. Your IP address and browser fingerprint are never logged.</p>
</td></tr>
</table>
</div>
<div id="game-view" class="reveal">
<div id="board">
<div id="top-bar">
<span class="left-text shade">
DETONATING CATS (<a href="about.html" target="_BLANK">info</a>)
</span>
<span class="right-text shade">
<span id="player-name"></span>@<span id="lobby-name"></span>
</span>
</div>
<div id="discard-pile"></div>
<div id="draw-pile"></div>
<div id="draw-pile-animation" class="reveal">
<img src="assets/card_back.png" class="card" />
</div>
<span id="draw-pile-counter" class="reveal">
Cards left:
<span id="remaining-card-count"></span>
</span>
<div id="message-container" class="reveal">
<span id="message"></span>
</div>
<div id="card-deck">
</div>
<div id="card-hud" class="card-hud reveal"></div>
<div id="card-hud-3-wrapper" class="card-hud reveal">
<div id="card-hud-3"></div>
</div>
<div id="modal-container"></div>
</div> <!-- /board -->
<div id="buttons-container">
<button id="sort-button">Sort Cards</button>
<button id="2x-button" class="combo-btn">2 of a kind</button>
<button id="3x-button" class="combo-btn">3 of a kind</button>
<button id="mute-button">Mute sound</button>
</div>
<div id="sidebar">
<div class="sidebar-box">
<h1>Players</h1>
<ul id="player-list"></ul>
</div>
<div class="sidebar-box">
<h1>Spectators</h1>
<ul id="spectator-list"></ul>
</div>
<div class="sidebar-box" id="game-log-container">
<h1>Game log</h1>
<div id="game-log"></div>
</div>
<div class="sidebar-box" id="chat-container">
<input type="text" id="chat-message" placeholder="Chat message..." />
</div>
</div> <!-- /sidebar -->
</div> <!-- /game-view -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js" type="text/javascript"></script>
<script src="util.js" type="text/javascript"></script>
<script src="game.js" type="text/javascript"></script>
<script src="strings.js?incr=1" type="text/javascript"></script>
<script src="init.js" type="text/javascript"></script>
</body>
</html>
