mirror of
https://github.com/AlecM33/Werewolf.git
synced 2025-12-26 15:57:50 +01:00
107 lines
4.8 KiB
HTML
107 lines
4.8 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">
|
|
<img src="../images/Werewolf_Small.png"/>
|
|
<a href="/">Home</a>
|
|
</div>
|
|
<div class="container">
|
|
<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-alignment">Role Alignment</label>
|
|
<select id="role-alignment" required>
|
|
<option value="good">Good</option>
|
|
<option value="evil">Evil</option>
|
|
</select>
|
|
</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>
|
|
<div id="creation-step-tracker">
|
|
<div id="tracker-step-1" class="creation-step creation-step-filled"></div>
|
|
<div id="tracker-step-2" class="creation-step"></div>
|
|
<div id="tracker-step-3" class="creation-step"></div>
|
|
<div id="tracker-step-4" class="creation-step"></div>
|
|
</div>
|
|
<div id="creation-step-container">
|
|
<h2 id="step-title">Select your method of moderation:</h2>
|
|
<div class="placeholder-row">
|
|
<div class="animated-placeholder animated-placeholder-short"></div>
|
|
<div class="animated-placeholder animated-placeholder-short animated-placeholder-invisible"></div>
|
|
</div>
|
|
<div class="animated-placeholder animated-placeholder-long"></div>
|
|
<div class="animated-placeholder animated-placeholder-long"></div>
|
|
</div>
|
|
<div id="creation-step-buttons"></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>-->
|
|
<!-- <div>-->
|
|
<!-- <label for="mod-name">Your Name</label>-->
|
|
<!-- <input id="mod-name" type="text" maxlength="30" required/>-->
|
|
<!-- </div>-->
|
|
<!-- <input id="create-game" type="submit" value="Create"/>-->
|
|
<!-- </form>-->
|
|
</div>
|
|
<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>
|