Git_Mirror/Werewolf
1
0
Fork 0
mirror of https://github.com/AlecM33/Werewolf.git synced 2025-12-27 00:07:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

double click card to flip, remove excessive margin

Browse Source
This commit is contained in:
AlecM33
2022-06-22 18:30:18 -04:00
parent 8395aabc9e
commit b98af2d68c
3 changed files with 43 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/modules/GameStateRenderer.js
View File

@@ -485,12 +485,12 @@ function renderPlayerRole (gameState) {
document.querySelector('#role-description').innerText = gameState.client.gameRoleDescription;
document.getElementById('game-role-back').addEventListener('click', () => {
document.getElementById('game-role-back').addEventListener('dblclick', () => {
document.getElementById('game-role').style.display = 'flex';
document.getElementById('game-role-back').style.display = 'none';
});
document.getElementById('game-role').addEventListener('click', () => {
document.getElementById('game-role').addEventListener('dblclick', () => {
document.getElementById('game-role-back').style.display = 'flex';
document.getElementById('game-role').style.display = 'none';
});

10
client/src/modules/HTMLFragments.js
View File

@@ -60,8 +60,8 @@ export const HTMLFragments = {
<p id='role-description'></p>
</div>
<div id='game-role-back'>
<h4>Click to show your role</h4>
<p>(click again to hide)</p>
<h4>Double-tap here to show your role</h4>
<p>(Double-tap here again to hide)</p>
</div>
<div id='game-people-container'>
<label id='players-alive-label'></label>
@@ -138,8 +138,8 @@ export const HTMLFragments = {
<p id='role-description'></p>
</div>
<div id='game-role-back'>
<h4>Click to show your role</h4>
<p>(click again to hide)</p>
<h4>Double-tap here to show your role</h4>
<p>(Double-tap here again to hide)</p>
</div>
<div id='game-people-container'>
<label id='players-alive-label'></label>
@@ -205,7 +205,7 @@ export const HTMLFragments = {
<h2>Roles in this game:</h2>
<div id='game-role-info-container'></div>
<div class='modal-button-container'>
<button id='close-role-info-modal-button' class='app-button'>Close</button>
<button id='close-role-info-modal-button' class='app-button cancel'>Close</button>
</div>
</div>`,
END_OF_GAME_VIEW:

50
client/src/styles/game.css
View File

@@ -182,10 +182,6 @@ h1 {
color: #21ba45;
}
#role-info-button {
margin-top: 1em;
}
#role-info-button img {
height: 25px;
margin-left: 10px;
@@ -256,7 +252,7 @@ h1 {
max-width: 17em;
border-radius: 3px;
height: 23em;
margin: 0 auto 2em auto;
margin: 10px 20px;
width: 100%;
box-shadow: 0 1px 1px rgba(0,0,0,0.11),
0 2px 2px rgba(0,0,0,0.11),
@@ -268,6 +264,13 @@ h1 {
/*transform-style: preserve-3d;*/
}
#game-role, #game-role-back {
user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
}
.game-role-good {
border: 5px solid #5469c5 !important;
}
@@ -277,10 +280,6 @@ h1 {
}
#game-role-back {
user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
display: flex;
align-items: center;
justify-content: center;
@@ -292,7 +291,7 @@ h1 {
max-width: 17em;
border-radius: 3px;
height: 23em;
margin: 0 auto 2em auto;
margin: 10px 20px;
width: 100%;
box-shadow: 0 1px 1px rgba(0,0,0,0.11),
0 2px 2px rgba(0,0,0,0.11),
@@ -305,7 +304,7 @@ h1 {
}
#game-role-back h4 {
font-size: 24px;
font-size: 30px;
padding: 0.5em;
text-align: center;
color: #e7e7e7;
@@ -313,7 +312,9 @@ h1 {
#game-role-back p {
color: #c3c3c3;
font-size: 20px;
font-size: 18px;
text-align: center;
padding: 10px;
}
#game-timer {
@@ -330,6 +331,7 @@ h1 {
justify-content: center;
align-items: center;
height: 43px;
margin-bottom: 0.5em;
}
#game-timer.low {
@@ -467,6 +469,7 @@ label[for='moderator'] {
#start-game-button {
background-color: #1c8a36;
animation: shadow-pulse 1.5s infinite ease-out;
}
#end-game-button {
@@ -520,6 +523,7 @@ label[for='moderator'] {
flex-wrap: wrap;
flex-direction: column;
align-items: center;
margin: 1em;
}
#game-header button {
@@ -692,6 +696,10 @@ canvas {
width: 100%;
}
#mod-transfer-button {
margin-bottom: 0.5em;
}
#transfer-mod-form .modal-button-container {
justify-content: center;
}
@@ -791,11 +799,11 @@ canvas {
}
#game-role-back p {
font-size: 16px;
font-size: 18px;
}
#game-role-back h4 {
font-size: 18px;
font-size: 24px;
}
h2 {
@@ -820,6 +828,20 @@ canvas {
}
}
@keyframes shadow-pulse {
0% {
box-shadow: 0 0 0 0 rgba(28, 138, 54, 0.7);
}
70% {
box-shadow: 0 0 0 10px rgba(28, 138, 54, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(28, 138, 54, 0);
}
}
@keyframes pulse-low {
from {
color: rgba(231, 28, 13 , 0.1);