diff --git a/package-lock.json b/package-lock.json
index e029a42..f345d98 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -379,11 +379,6 @@
"mime-db": "1.40.0"
}
},
- "moment": {
- "version": "2.24.0",
- "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
- "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg=="
- },
"ms": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
diff --git a/package.json b/package.json
index bbc8fd3..898f2ed 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,6 @@
"license": "ISC",
"dependencies": {
"express": "^4.17.1",
- "moment": "^2.24.0",
"socket.io": "^2.2.0"
}
}
diff --git a/server.js b/server.js
index d9984d5..f601d5c 100644
--- a/server.js
+++ b/server.js
@@ -5,7 +5,6 @@ const socketIO = require('socket.io');
const app = express();
const server = http.Server(app);
const io = socketIO(server);
-const moment = require('moment');
var activeGames = {};
diff --git a/static/game.js b/static/game.js
index e8fb926..3fc886d 100644
--- a/static/game.js
+++ b/static/game.js
@@ -3,6 +3,7 @@ import {utility} from './util.js'
const socket = io();
let clock;
let currentGame = null;
+let cardFlippedOver = false;
// respond to the game state received from the server
socket.on('state', function(game) {
@@ -68,15 +69,21 @@ function renderGame() {
"
" + getLiveCount() + "/" + currentGame.size + " alive
" +
"" +
"" +
- "" +
- "
" +
+ "
" +
"
" +
"
" + card.role + "
" +
"
" + card.description + "
" +
+ "
Click to flip
" +
"
" +
"
" +
"
" +
"
";
+
+ // initially flip the card over for a reveal, allow it to be flipped on click/tap
+ flipCard();
+ document.getElementById("game-card").addEventListener("click", flipCard);
+
let killedBtn = document.createElement("button");
killedBtn.setAttribute("id", "dead-btn");
@@ -92,6 +99,13 @@ function renderGame() {
document.getElementById("dead-btn").addEventListener("click", killPlayer);
}
+function flipCard() {
+ cardFlippedOver ?
+ document.getElementById("game-card").setAttribute("class", "flip-down")
+ : document.getElementById("game-card").setAttribute("class", "flip-up");
+ cardFlippedOver = !cardFlippedOver;
+}
+
function renderClock() {
clock = setInterval(function() {
const now = new Date().getTime();
diff --git a/static/styles.css b/static/styles.css
index 618bfaa..9d87d64 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -296,7 +296,7 @@ label {
/* GAME */
-@keyframes flip {
+@keyframes flip-up {
0% {
transform: rotateY(0deg);
}
@@ -305,7 +305,17 @@ label {
}
}
-.game-card {
+@keyframes flip-down {
+ 0% {
+ transform: rotateY(0deg);
+ }
+ 100% {
+ transform: rotateY(180deg);
+ }
+}
+
+
+#game-card {
border: 1px solid #7d0b0b;
background-color: #f0f0f0;
display: flex;
@@ -318,19 +328,27 @@ label {
width: 72%;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
perspective: 1000px;
- animation: flip 0.7s;
- animation-fill-mode: forwards;
- animation-direction: reverse;
transform-style: preserve-3d;
}
-.game-card h2 {
+.flip-up {
+ animation: flip-up 0.7s;
+ animation-fill-mode: forwards;
+ animation-direction: reverse;
+}
+
+.flip-down {
+ animation: flip-down 0.7s;
+ animation-fill-mode: forwards;
+}
+
+#game-card h2 {
font-size: 2em;
color: #7d0b0b;
font-family: 'diavlo', sans-serif;
}
-.game-card p {
+#game-card p {
padding: 1em;
}
@@ -384,7 +402,13 @@ label {
margin-bottom: 0.5em;
}
+#flip-instruction {
+ margin: 7em 0 0 0;
+ color: gray;
+}
+
.game-header {
display: flex;
+ margin: 0 auto;
justify-content: space-evenly;
}