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

Clicking cards to add them to game deck, and increment player number

Browse Source
This commit is contained in:
Alec Maier
2019-08-29 23:53:19 -04:00
parent 469009feaa
commit b141e33919
4 changed files with 141 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
create_game.html
View File

@@ -17,13 +17,17 @@
</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 type="module" src="/static/setup.js"></script>

51
static/cards.js
View File

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

56
static/setup.js
View File

@@ -1,17 +1,63 @@
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;
}
}
console.log(cards);
var deck = [];
document.getElementById("card-select").onload = function() {
let jsonCards = JSON.parse('')
// 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() {

58
static/styles.css
View File

@@ -47,6 +47,43 @@ h3 {
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;
@@ -73,6 +110,27 @@ h3 {
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;