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

Merge pull request #1 from AlecM33/develop

Browse Source 
Develop
This commit is contained in:
Alec Maier
2019-08-29 23:53:51 -04:00
committed by GitHub
parent 638314e702 b141e33919
commit 1fba0edda8
5 changed files with 179 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
create_game.html
View File

@@ -16,12 +16,20 @@
<input type="text"/>
</label>
</form>
<h3>Add cards to the deck.</h3>
<div id="card-select-header">
<button id="reset-btn">Reset Deck</button>
<h3 id="game-size">0 Players</h3>
</div>
<div id="card-select">
</div>
<a href="/">
<button class="app-btn-secondary">Cancel</button>
</a>
<button class="app-btn" onclick="generateAccessCode()">Create</button>
<button id="create-btn" class="app-btn">Create</button>
</div>
</div>
<script src="/static/setup.js"></script>
<script type="module" src="/static/setup.js"></script>
</body>
</html>

32
static/cards.js Normal file
View File

@@ -0,0 +1,32 @@
export const cards = [
{
role: "Villager",
team: "village",
description: "During the day, find the wolves and kill them.",
powerRole: false
},
{
role: "Seer",
team: "village",
description: "During the night, choose one person. The moderator will tell you whether that player is evil.",
powerRole: true
},
{
role: "Hunter",
team: "village",
description: "If you are alive with a wolf at the end of the game, the village wins.",
powerRole: true
},
{
role: "Werewolf",
team: "wolf",
description: "During the night, choose a villager to kill. Don't get killed.",
powerRole: false
},
{
role: "Minion",
team: "wolf",
description: "You are villager, but you know who the wolves are - and want them to win.",
powerRole: true
}
];

29
static/cards.json
View File

@@ -1,29 +0,0 @@
{
"cards": {
"1": {
"role": "Villager",
"team": "village",
"description": "During the day, find the wolves and kill them."
},
"2": {
"role": "Seer",
"team": "village",
"description": "During the night, choose one person. The moderator will tell you whether that player is evil."
},
"3": {
"role": "Hunter",
"team": "village",
"description": "If you are alive with a wolf at the end of the game, the village wins."
},
"4": {
"role": "Werewolf",
"team": "wolf",
"description": "During the night, choose a villager to kill. Don't get killed."
},
"5": {
"role": "Minion",
"team": "wolf",
"description": "You are villager, but you know who the wolves are - and want them to win."
}
}
}

58
static/setup.js
View File

@@ -1,11 +1,65 @@
import {cards} from './cards.js'
// important declarations
class Card {
constructor(name, team, description) {
this.name = name;
constructor(role, team, description, powerRole) {
this.role = role;
this.team = team;
this.description = description;
this.quantity = 0;
this.powerRole = powerRole;
}
}
var deck = [];
// register event listeners on buttons
document.getElementById("reset-btn").addEventListener("click", resetCardQuantities);
document.getElementById("create-btn").addEventListener("click", generateAccessCode);
// render all of the available cards to the user
window.onload = function() {
for (const card of cards) {
const newCard = new Card(card.role, card.team, card.description, card.powerRole);
const cardContainer = document.createElement("div");
deck.push(newCard);
cardContainer.setAttribute("class", "card");
cardContainer.innerHTML = "<p class='card-role'>" + newCard.role + "</p><br><p class='card-quantity'>" + newCard.quantity + "</p>";
cardContainer.addEventListener("click", function() {
if(!newCard.powerRole || (newCard.powerRole && newCard.quantity === 0)) {
newCard.quantity += 1;
}
console.log(newCard);
cardContainer.getElementsByClassName("card-quantity")[0].innerHTML = newCard.quantity;
updateGameSize();
});
document.getElementById("card-select").appendChild(cardContainer)
}
};
function updateGameSize() {
let totalQuantity = 0;
for (let card of deck) {
totalQuantity += card.quantity;
}
document.getElementById("game-size").innerText = totalQuantity + " Players";
}
function resetCardQuantities() {
for (let card of deck) {
card.quantity = 0;
}
updateGameSize();
Array.prototype.filter.call(document.getElementsByClassName("card-quantity"), function(quantities){
return quantities.innerHTML = 0;
});
}
function generateAccessCode() {
let code = "";
let charPool = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";

82
static/styles.css
View File

@@ -1,3 +1,23 @@
@media(max-width: 750px) {
.app-header {
font-size: 35px;
}
h3 {
font-size: 20px;
}
}
@media(min-width: 750.01px) {
.app-header {
font-size: 50px;
}
h3 {
font-size: 30px;
}
}
body {
margin: 0 auto;
width: 100vw;
@@ -13,9 +33,11 @@ body {
.app-header {
color: #7d0b0b;
letter-spacing: 0.1em;
font-size: 50px;
}
h3 {
color: gray;
}
.app-btn {
background-color: #7d0b0b;
color: white;
@@ -25,6 +47,43 @@ body {
margin-bottom: 1em;
}
.card {
text-align: center;
height: 8em;
cursor: pointer;
width: 4.5em;
color: gray;
border: 1px solid #7d0b0b;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
border-radius: 3px;
padding: 1em;
margin: 0.5em;
user-select: none;
}
.card:hover {
background-color: rgba(0, 0, 0, 0.05);
}
.card-quantity {
font-weight: bold;
color: #7d0b0b;
font-size: 2.5em;
margin: 0;
}
.card-role {
color: gray;
font-size: 1.1em;
margin: 0;
}
#card-select {
display: flex;
flex-wrap: wrap;
margin-bottom: 3em;
}
.app-btn-secondary {
background-color: transparent;
color: #7d0b0b;
@@ -51,6 +110,27 @@ body {
justify-content: center;
}
#card-select-header {
display: flex;
align-items: center;
margin-bottom: 1em;
}
#card-select-header h3 {
margin: 0;
font-size: 1.2em;
color: #7d0b0b;
}
#reset-btn {
background-color: transparent;
color: #7d0b0b;
border: 1px solid #7d0b0b;
width: 8em;
padding: 0.5em;
margin: 0 1em 0 0;
}
#create-game-container {
display: inline-block;
text-align: left;