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

base animation

Browse Source
This commit is contained in:
Maier
2020-01-03 16:32:03 -05:00
parent 0e6b669ba0
commit 5159f62693
4 changed files with 128 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
server.js
View File

@@ -169,7 +169,8 @@ io.on('connection', function(socket) {
if (game) {
let player = game.players.find((player) => player.id === id);
game.players.find((player) => player.id === id).dead = true;
game.message = player.name + ", a " + player.card.role + ", has been killed!";
game.killedPlayer = player;
game.killedRole = player.card.role;
const winCheck = teamWon(game);
if (winCheck === "wolf") {
game.winningTeam = "wolf";

7
static/game.js
View File

@@ -11,7 +11,8 @@ let cardRendered = false;
// respond to the game state received from the server
socket.on('state', function(game) {
currentGame = game;
if (game.message) {
if (game.killedPlayer && game.killedRole) {
playKilledAnimation();
document.getElementById("message-box").innerText = game.message;
}
buildGameBasedOnState();
@@ -33,6 +34,10 @@ function buildGameBasedOnState() {
}
}
function playKilledAnimation() {
}
function launchGame() {
randomlyDealCardsToPlayers();
socket.emit('startGame', { players: currentGame.players , code: currentGame.accessCode});

114
static/styles.css
View File

@@ -220,6 +220,55 @@ html, body {
}
}
@keyframes slide-fade-top {
0% {
opacity: 0;
transform: translateY(-150px)
}
50% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-150px)
}
}
@keyframes slide-fade-bottom {
0% {
opacity: 0;
transform: translateY(150px)
}
50% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(150px)
}
}
@keyframes fade-overlay {
0% {
background-color: rgba(0,0,0,0.0);
}
50% {
background-color: rgba(0,0,0,0.9);
}
100% {
background-color: rgba(0,0,0,0.0);
}
}
#app-content {
text-align: center;
margin: 0 auto;
@@ -699,6 +748,17 @@ label {
}
}
@keyframes flip-slide {
0% {
transform: rotateY(0deg);
transform: translateX(-100px);
}
100% {
transform: rotateY(-90deg);
transform: translateX(0px);
}
}
@keyframes flip-down {
0% {
transform: rotateY(0deg);
@@ -756,6 +816,12 @@ label {
animation-fill-mode: forwards;
}
.flip-slide{
animation: flip-slide 1s;
animation-fill-mode: forwards;
}
#game-card h2 {
font-size: 1.7em;
font-family: 'diavlo', sans-serif;
@@ -1015,6 +1081,54 @@ label {
color: #7d0b0b;
}
.overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.9);
z-index: 3;
animation: fade-overlay 5s;
animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
}
#killed-name {
color: white;
padding-top: 2em;
font-size: 2.5em;
margin: 0;
animation: slide-fade-top 5s;
animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
}
#killed-role {
animation: slide-fade-bottom 5s;
animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
}
.killed-card {
width: 50px;
height: 200px;
background-color: white;
position: absolute;
top: 19%;
left: 14%;
background-color: transparent;
cursor: pointer;
justify-content: space-between;
max-width: 17em;
border-radius: 3px;
height: 23em;
width: 72%;
box-shadow: 0 13px 17px rgba(0,0,0,0.6);
perspective: 1000px;
transform-style: preserve-3d;
}
@keyframes animatetop {
from {top: -300px; opacity: 0}
to {top: 0; opacity: 1}

6
views/game.html
View File

@@ -9,6 +9,12 @@
</head>
<body>
<div id="app-content">
<div id="killed-animation">
<div class='overlay'>
<h2 id="killed-name">Test was a role!</h2>
<img id="killed-role" alt="Werewolf" src="../assets/images/roles/Werewolf.png">
</div>
</div>
<div id="message-box"></div>
<div id="lobby-container"></div>
<div id="game-container"></div>