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; }