91 lines
4.3 KiB
HTML
91 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset='utf-8'>
|
|
<title>Schafkopf</title>
|
|
<meta name='viewport' content='width=device-width, initial-scale=1'>
|
|
<link rel='stylesheet' type='text/css' media='screen' href='style.css'>
|
|
<script src='elements.js'></script>
|
|
<script src='api.js'></script>
|
|
<script src='game.js'></script>
|
|
</head>
|
|
<body>
|
|
<div id="top-bar">
|
|
<div id="player-info">
|
|
<div id="player-name"></div>
|
|
<button id="logout-button" class="standard-button" onclick="logoutUser()">Log out</button>
|
|
</div>
|
|
<div id="table-list-bar">
|
|
<input type="text" id="table-name-field" name="tablename" placeholder="Create new table..." required>
|
|
<input type="checkbox" id="table-public-checkbox" name="public-table" checked="checked">
|
|
<span id="table-public-label">Public</span>
|
|
<button id="create-table-button" class="standard-button" onclick="createTable()">Create table</button>
|
|
<button id="refresh-tables" class="standard-button" onclick="refreshTables()">Refresh list</button>
|
|
</div>
|
|
<div id="game-bar">
|
|
<button id="leave-table" class="standard-button" onclick="leaveTable()">Leave table</button>
|
|
<span id="table-connected-label">Disconnected</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="main">
|
|
<div id="main-spacer"></div>
|
|
<div id="table-list">
|
|
</div>
|
|
<div id="table-players">
|
|
<button id="deal-button" class="standard-button" onclick="dealCards()">Deal cards</button>
|
|
<button id="bid-button" class="standard-button" onclick="increaseBid()">Bid</button>
|
|
<button id="fold-button" class="standard-button" onclick="fold()">Fold</button>
|
|
<div id="table-player-card1" class="table-card"></div>
|
|
<div id="table-player-card2" class="table-card"></div>
|
|
<div id="table-player-card3" class="table-card"></div>
|
|
<div id="table-player-card4" class="table-card"></div>
|
|
<div id="table-player-info1">
|
|
<div id="table-player-name1">Player 1</div>
|
|
<div id="table-player-state1" class="player-connection-state">Offline</div>
|
|
</div>
|
|
<div id="table-player-info2">
|
|
<div id="table-player-name2">Player 2</div>
|
|
<div id="table-player-state2" class="player-connection-state">Offline</div>
|
|
</div>
|
|
<div id="table-player-info3">
|
|
<div id="table-player-name3">Player 3</div>
|
|
<div id="table-player-state3" class="player-connection-state">Offline</div>
|
|
</div>
|
|
<div id="table-player-info4">
|
|
<div id="table-player-name4">Player 4</div>
|
|
<div id="table-player-state4" class="player-connection-state">Offline</div>
|
|
</div>
|
|
</div>
|
|
<div id="player-cards">
|
|
<button id="player-card1" class="player-card" disabled></button>
|
|
<button id="player-card2" class="player-card" disabled></button>
|
|
<button id="player-card3" class="player-card" disabled></button>
|
|
<button id="player-card4" class="player-card" disabled></button>
|
|
<button id="player-card5" class="player-card" disabled></button>
|
|
<button id="player-card6" class="player-card" disabled></button>
|
|
<button id="player-card7" class="player-card" disabled></button>
|
|
<button id="player-card8" class="player-card" disabled></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="login-window">
|
|
<div id="login-window-vertical-center">
|
|
<div id="login-window-inner">
|
|
<label for="usrname">Username</label>
|
|
<input type="text" id="user-name" name="usrname" required>
|
|
|
|
<label for="psw">Password</label>
|
|
<input type="password" id="user-pwd" name="psw" required>
|
|
|
|
<button class="login-buttons standard-button" onclick="registerUser()">Register</button>
|
|
<button class="login-buttons standard-button" onclick="loginUser()">Log in</button>
|
|
<div id="login-error"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
loadExistingSession()
|
|
</script>
|
|
</body>
|
|
</html> |