mirror of
https://github.com/AlecM33/Werewolf.git
synced 2025-12-26 15:57:50 +01:00
88 lines
3.6 KiB
HTML
88 lines
3.6 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Create A Game</title>
|
|
<meta name="description" content="Create a game of Werewolf using your custom set of roles.">
|
|
<meta property="og:title" content="Werewolf Utility - Create A Game">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://play-werewolf.herokuapp.com/create">
|
|
<meta property="og:description" content="Create a game of Werewolf using your custom set of roles.">
|
|
<meta property="og:image" content="image.png">
|
|
<link rel="icon" href="/favicon.ico">
|
|
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
|
|
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
|
|
<link rel="stylesheet" href="../styles/GLOBAL.css">
|
|
<link rel="stylesheet" href="../styles/create.css">
|
|
<link rel="stylesheet" href="../styles/modal.css">
|
|
<link rel="stylesheet" href="../styles/third_party/dropdown.min.css">
|
|
<link rel="stylesheet" href="../styles/third_party/transition.min.css">
|
|
<link rel="stylesheet" href="../styles/third_party/search.min.css">
|
|
<script src="../modules/third_party/jQuery/jquery-3.6.0.min.js"></script>
|
|
<script src="../modules/third_party/semantic-ui/transition.min.js"></script>
|
|
<script src="../modules/third_party/semantic-ui/dropdown.min.js"></script>
|
|
<script src="../modules/third_party/semantic-ui/search.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="navbar">
|
|
<a href="/">
|
|
<img alt="logo" src="../images/Werewolf_Small.png"/>
|
|
</a>
|
|
<a href="/">Home</a>
|
|
</div>
|
|
<div id="add-role-modal-background" class="modal-background" style="display: none"></div>
|
|
<div id="add-role-modal" class="modal" style="display: none">
|
|
<form id="add-role-form">
|
|
<div>
|
|
<label for="role-name">Role Name</label>
|
|
<input id="role-name" type="text" placeholder="Name your role..." required/>
|
|
</div>
|
|
<div>
|
|
<label for="role-description">Description</label>
|
|
<textarea style="resize:none" id="role-description" rows="10" cols="30" placeholder="Describe your role..." required></textarea>
|
|
</div>
|
|
<div id="modal-button-container">
|
|
<button id="close-modal-button">Close</button>
|
|
<input type="submit" id="create-role-button" value="Create Role"/>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<h1>Create A Game</h1>
|
|
<h3>
|
|
Creating a game gives you the moderator role with certain special permissions. You will not be dealt a card.
|
|
</h3>
|
|
<div id="custom-roles-container">
|
|
<label for="add-card-to-deck-form">Custom Roles</label>
|
|
<form id="add-card-to-deck-form"></form>
|
|
<button id="custom-role-btn">Create Custom Role</button>
|
|
</div>
|
|
<div id="deck-container">
|
|
<label for="deck">Game Deck: 0 Players</label>
|
|
<div id="deck"></div>
|
|
</div>
|
|
<form id="game-form">
|
|
<div>
|
|
<label for="game-time">Timer (Optional)</label>
|
|
<div id="game-time">
|
|
<label for="game-hours">Hours (max 5)</label>
|
|
<input type="number" id="game-hours" name="game-hours"
|
|
min="0" max="5" />
|
|
<label for="game-hours">Minutes</label>
|
|
<input type="number" id="game-minutes" name="game-minutes"
|
|
min="1" max="60" />
|
|
</div>
|
|
</div>
|
|
<input id="create-game" type="submit" value="Create"/>
|
|
</form>
|
|
<script type="module">
|
|
import { create } from "../scripts/create.js";
|
|
create();
|
|
</script>
|
|
<script src="/socket.io/socket.io.js"></script>
|
|
<script>
|
|
const socket = io();
|
|
</script>
|
|
</body>
|
|
</html>
|