<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Detonating Cats</title>
<link rel="icon" type="image/png" href="/assets/favicon.png">
<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" class="container">
<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="container reveal">
<div class="row">
<div class="col-md-8">
<div class="welcome-pane">
<h1>Welcome to DETONATING CATS <small>(beta)</small></h1>
<div class="login-form">
<div class="form-group">
<label class="col-form-label col-form-label-lg mt-4" for="welcome-username">Input nickname</label>
<input class="form-control form-control-lg" type="text" placeholder="Nickname" id="welcome-username">
</div>
<div class="form-group">
<label class="col-form-label col-form-label-lg mt-4" for="welcome-lobby">Lobby name</label>
<input class="form-control form-control-lg" type="text" placeholder="Lobby" id="welcome-lobby">
</div>
</div>
<button class="btn btn-primary" id="welcome-join">Join!</button>
</div>
<div id="privacy">
<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>
</div>
</div>
<div class="col-md-4">
<div class="welcome-pane changelog-wrap">
<h3>Changelog</h3>
<div id="changelog-container"></div>
</div>
</div>
</div>
</div>
<div id="game-view" class="reveal">
<div class="game-log-wrap show">
<button class="btn-close"></button>
<div id="game-log-container">
<h3>Game log</h3>
<div id="game-log"></div>
</div>
<div id="chat-container">
<textarea class="form-control" id="chat-message" rows="2" placeholder="Chat message..."></textarea>
</div>
</div>
<div class="float-btns">
<button class="btn btn-light toggle-gamebar">
<span class="iconify" data-icon="mdi-menu-open"></span>
</button>
<button class="btn btn-light toggle-gamelog">
<span class="iconify" data-icon="mdi-message-reply-text-outline"></span>
</button>
</div>
<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 class="draw-pile-container">
<div id="draw-pile"></div>
<span id="draw-pile-counter" class="reveal">
Left:
<span id="remaining-card-count"></span>
</span>
</div>
<div id="draw-pile-animation" class="reveal">
<img src="assets/card_back.png" class="card" />
</div>
<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 class="buttons-container">
<button id="sort-button" class="btn btn-primary" title="Sort Cards">
<span class="iconify" data-icon="mdi-sort"></span>
</button>
<button id="2x-button" class="btn btn-primary combo-btn">2x</button>
<button id="3x-button" class="btn btn-primary combo-btn">3x</button>
<button id="mute-button" style="display: none !important">Mute sound</button>
<div class="bottom-notify-container"> >Your turn< </div>
</div>
<div id="sidebar" class="show">
<button class="btn-close"></button>
<div class="sidebar-box">
<ul id="player-list"></ul>
</div>
<div class="sidebar-box">
<h4>Spectators</h4>
<ul id="spectator-list"></ul>
</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="//code.iconify.design/1/1.0.6/iconify.min.js"></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>
