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

Fixed bug that resets card flip state when pausing/resuming the timer, updated styling to be more consistent

Browse Source
This commit is contained in:
Alec Maier
2019-09-02 16:08:13 -04:00
parent 48cfaace74
commit e7c27a5293
7 changed files with 140 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
assets/images/pause-button.svg
View File

@@ -1,8 +1,8 @@
<svg width="263" height="271" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Layer 1</title>
<ellipse stroke="#7d0b0b" ry="131" rx="126" id="svg_5" fill="none" cy="135.237498" cx="131.999999" stroke-opacity="null" stroke-width="8"/>
<rect stroke="#7d0b0b" id="svg_1" height="123.000006" width="41" y="73.737494" x="77.5" stroke-width="0" fill="#7d0b0b"/>
<rect stroke="#7d0b0b" id="svg_3" height="123.000006" width="41" y="73.737494" x="144.5" stroke-width="0" fill="#7d0b0b"/>
<ellipse stroke="gray" ry="131" rx="126" id="svg_5" fill="none" cy="135.237498" cx="131.999999" stroke-opacity="null" stroke-width="8"/>
<rect stroke="#7d0b0b" id="svg_1" height="123.000006" width="41" y="73.737494" x="77.5" stroke-width="0" fill="gray"/>
<rect stroke="#7d0b0b" id="svg_3" height="123.000006" width="41" y="73.737494" x="144.5" stroke-width="0" fill="gray"/>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 500 B

After

Width:  |  Height:  |  Size: 491 B

4
assets/images/play-button.svg
View File

@@ -1,7 +1,7 @@
<svg width="263" height="271" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Layer 1</title>
<ellipse stroke="#7d0b0b" ry="131" rx="126" id="svg_5" cy="135.237498" cx="129.999999" fill-opacity="null" stroke-opacity="null" stroke-width="8" fill="none"/>
<path transform="rotate(90.18392181396484 140.08586120605474,135.38354492187497) " stroke="#7d0b0b" id="svg_7" d="m86.585877,180.883554l53.499995,-91.000007l53.499995,91.000007l-106.99999,0z" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#7d0b0b"/>
<ellipse stroke="gray" ry="131" rx="126" id="svg_5" cy="135.237498" cx="129.999999" fill-opacity="null" stroke-opacity="null" stroke-width="8" fill="none"/>
<path transform="rotate(90.18392181396484 140.08586120605474,135.38354492187497) " stroke="#7d0b0b" id="svg_7" d="m86.585877,180.883554l53.499995,-91.000007l53.499995,91.000007l-106.99999,0z" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="gray"/>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 541 B

After

Width:  |  Height:  |  Size: 535 B

5
create_game.html
View File

@@ -21,16 +21,15 @@
<input id="time" type="number"/>
</label>
</form>
<h3>Add cards to the deck.</h3>
<div id="card-select-header">
<button id="reset-btn">Reset Deck</button>
<button id="reset-btn" class="app-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>
<button class="app-btn">Back</button>
</a>
<button id="create-btn" class="app-btn">Create</button>
</div>

1
index.html
View File

@@ -23,6 +23,7 @@
</div>
<footer id="footer">
<img src="assets/images/vanilla_js.png">
<a href="https://github.com/AlecM33/Werewolf">Github</a>
</footer>
</body>
</html>

2
join_game.html
View File

@@ -22,7 +22,7 @@
</label>
</form>
<a href="/">
<button class="app-btn-secondary">Cancel</button>
<button class="app-btn">Back</button>
</a>
<button id="join-btn" class="app-btn">Join</button>
</div>

74
static/game.js
View File

@@ -4,7 +4,7 @@ const socket = io();
let clock;
let currentGame = null;
let cardFlippedOver = false;
let cardDealt = false;
let cardRendered = false;
// respond to the game state received from the server
socket.on('state', function(game) {
@@ -56,29 +56,29 @@ function getLiveCount() {
function renderGame() {
const player = currentGame.players.find((player) => player.id === sessionStorage.getItem("id"));
const card = player.card;
// render the players card
// render the header
document.getElementById("lobby-container").setAttribute("class", "hidden");
document.getElementById("launch").setAttribute("class", "hidden");
document.getElementById("game-container").setAttribute("class", "game-container");
document.getElementById("game-container").innerHTML =
"<div id='game-header'>" +
const gameHeader = document.createElement("div");
gameHeader.setAttribute("id", "game-header");
gameHeader.innerHTML =
"<div id='players-remaining'>" + getLiveCount() + "/" + currentGame.size + " alive</div>" +
"<div id='clock'></div>" +
"<div id='pause-container'></div>" +
"</div>" +
"<div id='game-card'>" +
"<div class='game-card-inner'>" +
"<div class='game-card-front'>" +
"<h2>" + card.role + "</h2>" +
"<p>" + card.description + "</p>" +
"<p id='flip-instruction'>Click to flip</p>" +
"</div>" +
"<div class='game-card-back'></div>" +
"</div>" +
"</div>";
"<div id='pause-container'></div>";
if (document.getElementById("game-header")) {
document.getElementById("game-container").removeChild(document.getElementById("game-header"));
}
document.getElementById("game-container").prepend(gameHeader);
// render the card if it hasn't been yet
if (!cardRendered) {
renderPlayerCard(player);
cardRendered = true;
}
// build the clock
if (currentGame.time) {
renderClock();
document.getElementById("pause-container").innerHTML = currentGame.paused ?
@@ -87,28 +87,43 @@ function renderGame() {
document.getElementById("play-pause").addEventListener("click", pauseOrResumeGame)
}
// initially flip the card over for a reveal, allow it to be flipped on click/tap
if (!cardDealt) {
flipCard();
cardDealt = true;
}
document.getElementById("game-card").addEventListener("click", flipCard);
// add the "I'm dead" button
let killedBtn = document.createElement("button");
killedBtn.setAttribute("id", "dead-btn");
// render the "I'm dead" button based on the player's state
if (player.dead) {
killedBtn.setAttribute("class", "app-btn-secondary killed-btn disabled");
killedBtn.setAttribute("class", "app-btn killed-btn disabled");
killedBtn.innerText = "Killed"
} else {
killedBtn.setAttribute("class", "app-btn-secondary killed-btn");
killedBtn.setAttribute("class", "app-btn killed-btn");
killedBtn.innerText = "I'm dead";
}
if (document.getElementById("dead-btn")) {
document.getElementById("game-container").removeChild(document.getElementById("dead-btn"));
}
document.getElementById("game-container").appendChild(killedBtn);
document.getElementById("dead-btn").addEventListener("click", killPlayer);
}
function renderPlayerCard(player) {
const card = player.card;
const cardClass = player.card.team === "village" ? "game-card-inner village" : "game-card-inner wolf";
const playerCard = document.createElement("div");
playerCard.setAttribute("id", "game-card");
playerCard.setAttribute("class", getFlipState());
playerCard.innerHTML =
"<div class='" + cardClass + "'>" +
"<div class='game-card-front'>" +
"<h2>" + card.role + "</h2>" +
"<p>" + card.description + "</p>" +
"<p id='flip-instruction'>Click to flip</p>" +
"</div>" +
"<div class='game-card-back'></div>" +
"</div>";
document.getElementById("game-container").appendChild(playerCard);
document.getElementById("game-card").addEventListener("click", flipCard);
}
function pauseOrResumeGame() {
if (currentGame.paused) {
socket.emit('resumeGame', currentGame.accessCode);
@@ -117,6 +132,11 @@ function pauseOrResumeGame() {
}
}
function getFlipState() {
console.log(cardFlippedOver);
return cardFlippedOver ? "flip-down" : "flip-up";
}
function flipCard() {
cardFlippedOver ?
document.getElementById("game-card").setAttribute("class", "flip-down")

116
static/styles.css
View File

@@ -9,11 +9,6 @@
margin: 0.3em 0;
}
.card {
height: 7.5em;
width: 4em;
}
h3 {
font-size: 20px;
}
@@ -21,6 +16,14 @@
.app-content {
width: 92%;
}
.card {
padding: 0.5em;
width: 5em;
height: 7.5em;
font-size: 0.9em;
margin: 0 0.7em 0.7em 0;
}
}
@media(min-width: 750.01px) {
@@ -37,6 +40,9 @@
.card {
height: 8.5em;
width: 5em;
padding: 1em;
font-size: 1.1em;
margin: 0.5em;
}
h3 {
@@ -65,8 +71,15 @@ html, body {
}
@keyframes fadein {
from { opacity: 0 }
to { opacity: 1 }
from {
opacity: 0;
left: -200px;
}
to {
opacity: 1;
left: 0;
}
}
.app-content {
text-align: center;
@@ -79,6 +92,21 @@ html, body {
width: 100%;
height: 5rem;
text-align: center;
align-items: center;
display: flex;
justify-content: center;
}
#footer a {
font-size: 0.9em;
color: #bd2a2a;
text-decoration: #bd2a2a;
cursor: pointer;
margin-left: 1em;
}
#footer a:hover {
color: rgba(23, 20, 105, 0.4);
}
.app-header, .app-header-secondary {
@@ -95,9 +123,9 @@ button {
}
.app-btn {
background-color: white;
background-color: #f8f8f8;
color: #bd2a2a;
border: 1px solid #7d0b0b;
border: 1px solid #d3d3d3;
width: 10em;
padding: 1em;
border-radius: 3px;
@@ -111,8 +139,6 @@ button {
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;
}
@@ -150,7 +176,7 @@ button {
.app-btn:hover, .app-btn:focus {
cursor: pointer;
background-color: rgba(24, 9, 82, 0.15);
background-color: rgba(23, 20, 105, 0.15);
}
.app-btn-secondary:hover, .app-btn-secondary:focus {
@@ -178,14 +204,19 @@ button {
color: #7d0b0b;
}
#card-select-header button {
margin-right: 1em;
}
#reset-btn {
background-color: transparent;
color: #7d0b0b;
border: 1px solid #7d0b0b;
width: 8em;
padding: 0.5em;
margin: 0 1em 0 0;
cursor: pointer;
/*background-color: transparent;*/
/*color: #7d0b0b;*/
/*border-radius: 5px;*/
/*border: 1px solid #7d0b0b;*/
/*width: 8em;*/
/*padding: 0.5em;*/
/*margin: 0 1em 0 0;*/
/*cursor: pointer;*/
}
#reset-btn:hover {
@@ -199,7 +230,7 @@ button {
}
#create-game-container, #lobby-container, #join-game-container, #game-container, #launch, #message-box {
animation: fadein 0.8s;
animation: fadein 0.8s ease-in;
}
a {
@@ -209,28 +240,30 @@ a {
input[type=text] {
background-color: transparent;
border: 2px solid #7d0b0b;
border: 1px solid #171469;
caret-color: gray;
margin: 0.5em 0 1em 0;
color: gray;
padding: 0.5rem;
width: 8em;
padding: 0.7em;
width: 9em;
border-radius: 5px;
font-size: 1.1em;
}
input[type=number] {
background-color: transparent;
border: 2px solid #7d0b0b;
border: 1px solid #171469;
border-radius: 5px;
caret-color: gray;
margin: 0.5em 0 1em 0;
color: gray;
padding: 0.5rem;
width: 3em;
padding: 0.7em;
width: 4em;
font-size: 1.1em;
}
input[type=text]:hover {
background-color: rgba(24, 9, 82, 0.15);;
background-color: rgba(23, 20, 105, 0.15);
}
label {
@@ -261,7 +294,7 @@ label {
color: #7d0b0b;
border-radius: 3px;
font-size: 1.2em;
background-color: rgba(0, 0, 0, .1);
background-color: rgba(23, 20, 105, 0.1);
padding: 0.5em;
margin: 0.5em 0;
text-align: left;
@@ -324,21 +357,37 @@ label {
#game-card {
border: 1px solid #7d0b0b;
background-color: #f0f0f0;
display: flex;
flex-direction: column;
cursor: pointer;
justify-content: space-between;
max-width: 17em;
border-radius: 3px;
height: 23em;
margin: 0 auto 2em auto;
width: 72%;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
box-shadow: 0 13px 17px rgba(0,0,0,0.6);
perspective: 1000px;
transform-style: preserve-3d;
}
.village {
border: 2px solid rgba(23, 20, 105, 0.5);
}
.village h2 {
color: #171469;
}
.wolf {
border: 2px solid rgba(125, 11, 11, 0.5);
}
.wolf h2 {
color: #7d0b0b;
}
.flip-up {
animation: flip-up 0.7s;
animation-fill-mode: forwards;
@@ -352,7 +401,6 @@ label {
#game-card h2 {
font-size: 2em;
color: #7d0b0b;
font-family: 'diavlo', sans-serif;
}
@@ -372,7 +420,6 @@ label {
margin: auto auto;
border-radius: 3px;
text-align: center;
border: 1px solid gray;
}
.game-card:hover {
@@ -425,6 +472,11 @@ label {
#play-pause {
width: 2.5em;
height: 2.5em;
cursor: pointer;
}
#play-pause:hover {
opacity: 0.5;
}
#play-pause:hover {