Files
Werewolf/views/create_game.html
2020-04-11 13:43:56 -04:00

92 lines
3.7 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title>Werewolf</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel = "stylesheet" type = "text/css" href = "../static/styles.css" />
<link rel="shortcut icon" type="image/png" href="../assets/images/favicon.ico"/>
<script src="../node_modules/socket.io-client/dist/socket.io.js"></script>
</head>
<body>
<div class="modal hidden" id="role-modal">
<div class="modal-content">
<div class="modal-header">
<span class="close" class="close">&times;</span>
</div>
<div class="modal-body">
<div id="roles"></div>
</div>
</div>
</div>
<div class="modal hidden" id="custom-card-modal">
<div class="modal-content">
<div class="modal-header">
<span class="close" class="close">&times;</span>
</div>
<div class="modal-body">
<h2>Add a role for this game only.</h2>
<form id="custom-role-form">
<label for="custom-role-name">Name</label>
<input id="custom-role-name" type="text" required/>
<label for="custom-role-desc">Description</label>
<textarea rows="3" id="custom-role-desc" required></textarea>
<label for="custom-role-team">Team</label>
<select id="custom-role-team">
<option value="good">Good</option>
<option value="evil">Evil</option>
</select>
<div class="checkbox">
<input type="checkbox" id="custom-role-wolf">
<label for="custom-role-wolf">Is this role a type of Werewolf?</label>
</div>
<div class="checkbox">
<input type="checkbox" id="custom-role-remember">
<label for="custom-role-remember">Remember this role for later</label>
</div>
<br><br>
<input type="submit" class="app-btn" value="Add Role">
</form>
</div>
</div>
</div>
<div id="app-content">
<div id="create-game-container">
<h2 class="app-header-secondary">Create A Game</h2>
<label>
Your Name
<span>
<input id="name" type="text"/>
<p id="name-error"></p>
</span>
</label>
<label>
Time (Minutes, Optional)
<input id="time" type="number"/>
</label>
<div id="card-select-header">
<span>
<button id="reset-btn" class="app-btn">Reset Deck</button>
<button id="role-btn" class="app-btn">View Role Info</button>
</span>
<span>
<h3 id="game-size">0 Players</h3>
<p id="size-error"></p>
</span>
</div>
<div id="card-select">
</div>
<div id="game-start">
<a href="/">
<button class="app-btn">Back</button>
</a>
<button id="create-btn" class="app-btn">Create</button>
</div>
<p id="some-error"></p>
</div>
</div>
<script type="module" src="/static/setup.js"></script>
</body>
</html>