Git_Mirror/Werewolf
1
0
Fork 0
mirror of https://github.com/AlecM33/Werewolf.git synced 2025-12-26 15:57:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #46 from AlecM33/werewolf-indicator

Browse Source 
Added faq page, indicator for wolf roles
This commit is contained in:
Alec Maier
2020-04-19 16:00:26 -04:00
committed by GitHub
parent 4b2a72b9b5 230cf73207
commit aa65d9d056
7 changed files with 91 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
server.js
View File

@@ -41,6 +41,10 @@ app.get('/learn', function(request, response) {
response.sendFile(__dirname + '/views/learn.html');
});
app.get('/faq', function(request, response) {
response.sendFile(__dirname + '/views/faq.html');
});
app.get('/create', function(request, response) {
response.sendFile(__dirname + '/views/create_game.html');
});

2
static/cards.js
View File

@@ -14,7 +14,7 @@ export let cards = [
{
role: "Dream Wolf",
team: "evil",
description: "If a Werewolf dies, you become a Werewolf. You do not wake up with the Werewolves until this happens.",
description: "If a Werewolf dies, you become a Werewolf. You do not wake up with the Werewolves until this happens. You count for parity only after converting to a wolf.",
isTypeOfWerewolf: false
},
{

3
static/setup.js
View File

@@ -90,7 +90,8 @@ function renderAvailableCards() {
const quantityClass = cards[i].team === "good" ? "card-quantity quantity-village" : "card-quantity quantity-wolf";
cardContainer.setAttribute("class", "card");
let cardClass = newCard.isTypeOfWerewolf ? "card card-werewolf" : "card";
cardContainer.setAttribute("class", cardClass);
cardContainer.setAttribute("id", "card-" + i);
cardContainer.innerHTML =
"<div class='card-top'>" +

49
static/styles.css
View File

@@ -67,7 +67,7 @@
margin-right: 2em;
}
#learn-container {
#learn-container, #faq-container {
margin: 3em 1em;
}
@@ -170,7 +170,7 @@
width: 80%;
}
#learn-container {
#learn-container, #faq-container {
margin: 3em;
}
@@ -255,6 +255,16 @@
}
@media(max-width: 850px) {
#card-select-header span:nth-child(2) {
flex-direction: column;
}
#card-select-header span:nth-child(2) > div {
margin: 0.5em 0;
}
}
@media(max-width: 1225px) and (min-width: 750.01px) {
#custom-card-modal .modal-content, #edit-custom-roles-modal .modal-content {
width: 75%;
@@ -478,6 +488,10 @@ button {
user-select: none;
}
.card-werewolf {
border: 1px solid red;
}
.custom-card {
border: 1px dashed whitesmoke;
background-color: transparent;
@@ -645,6 +659,12 @@ button {
animation-delay: 0.2s;
}
#main-buttons a:nth-child(4) {
animation: fadein 0.3s ease-in;
animation-fill-mode: backwards;
animation-delay: 0.3s;
}
#main-buttons button {
width: 100%;
padding: 1.2em;
@@ -662,10 +682,21 @@ button {
display: flex;
width: 100%;
justify-content: center;
margin-bottom: 1em;
align-items: flex-start;
margin-bottom: 0.5em;
flex-direction: column;
}
#card-select-header a {
text-decoration: underline;
color: #b8c4ff;
}
#card-select-header span > div {
display: flex;
align-items: center;
}
#card-select-header h3 {
margin: 0;
font-size: 1.2em;
@@ -750,6 +781,14 @@ button {
animation: slide-fade 0.5s;
}
#create-game-container #werewolf-key {
width: 25px;
height: 25px;
border: 1px solid red;
border-radius: 3px;
margin-right: 10px;
}
#join-game-container {
display: flex;
@@ -1262,13 +1301,13 @@ label {
color: #bd2a2a;
}
#learn-container h2 {
#learn-container h2, #faq-container h2 {
font-family: 'diavlo', sans-serif;
color: #bd2a2a;
font-size: 40px;
}
#learn-container button {
#learn-container button, #faq-container button {
margin-top: 1em;
}

16
views/create_game.html
View File

@@ -48,7 +48,7 @@
</select>
<div class="checkbox">
<input type="checkbox" id="custom-role-wolf">
<label for="custom-role-wolf">Is this role a type of Werewolf?</label>
<label for="custom-role-wolf">Werewolf role (counts for parity)</label>
</div>
<div class="checkbox">
<input type="checkbox" id="custom-role-remember">
@@ -80,10 +80,16 @@
<button id="role-btn" class="app-btn">View Role Info</button>
</span>
<span>
<h3 id="game-size">0 Players</h3>
<button id="edit-role-btn" class="app-btn-secondary">Manage Custom Roles
<img src="../assets/images/pencil.svg"/>
</button>
<div>
<h3 id="game-size">0 Players</h3>
<button id="edit-role-btn" class="app-btn-secondary">Manage Custom Roles
<img src="../assets/images/pencil.svg"/>
</button>
</div>
<div>
<div id="werewolf-key"></div>
<div> = Werewolf role (counts for <a href="/faq">parity</a>)</div>
</div>
<p id="size-error"></p>
</span>
</div>

26
views/faq.html Normal file
View File

@@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</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"/>
</head>
<body>
<div id="faq-container">
<a href="/"><button class="app-btn">Back</button></a>
<h2>FAQ</h2>
<div class="faq-question">
<h3 class="faq-header" id="parity">What is Parity?</h3>
<p class="faq-answer"><i>Parity</i> means equal, and in the context of the game, this refers to an equal number of wolves and villagers.
This is a victory condition for the wolves, because if at any time during the day parity is reached, it is certain that the wolves
will be able to kill all the remaining villagers. Thus, if a standard or custom role is marked as a Werewolf, it will be considered
when the game determines if parity has been reached.
</p>
</div>
</div>
</body>
</html>

3
views/index.html
View File

@@ -24,6 +24,9 @@
<a href="/learn">
<button class="app-btn">Learn the Game</button>
</a>
<a href="/faq">
<button class="app-btn">FAQ</button>
</a>
</div>
</div>
<footer id="footer">