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

Merge pull request #176 from AlecM33/more-styling

Browse Source 
More subtle UI/styling improvements
This commit is contained in:
Alec
2023-08-19 13:04:23 -04:00
committed by GitHub
parent 761de97c50 c53951803f
commit 682844d241
9 changed files with 54 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
client/src/modules/front_end_components/HTMLFragments.js
View File

@@ -49,11 +49,9 @@ export const HTMLFragments = {
<button id='edit-timer-button'>Edit Timer</button>
<button id='start-game-button'>Start Game</button>`,
LEAVE_GAME_PROMPT:
'<button id=\'leave-game-button\'>Leave Room</button>',
GAME_CONTROL_PROMPT:
`<div id='game-control-prompt'>
<button id='end-game-button'>End Game</button>
</div>`,
'<button id=\'leave-game-button\' class="app-button">Leave Room</button>',
END_GAME_BUTTON:
'<button id=\'end-game-button\' class=\'app-button\'>End Game</button>',
ROLE_EDIT_BUTTONS:
`<button class="app-button cancel" id="cancel-role-changes-button">Cancel</button>
<button class="app-button" id="save-role-changes-button">

11
client/src/modules/game_state/states/Ended.js
View File

@@ -15,7 +15,7 @@ export class Ended {
gameState.client.userType === USER_TYPES.MODERATOR
|| gameState.client.userType === USER_TYPES.TEMPORARY_MODERATOR
) {
document.getElementById('end-of-game-buttons').prepend(SharedStateUtil.createReturnToLobbyButton(this.stateBucket));
createPromptComponent(this.socket, this.stateBucket);
}
SharedStateUtil.displayCurrentModerator(this.stateBucket.currentGameState.people
.find((person) => person.userType === USER_TYPES.MODERATOR
@@ -45,6 +45,15 @@ export class Ended {
}
}
function createPromptComponent (socket, stateBucket) {
if (document.querySelector('#game-control-prompt') === null) {
const div = document.createElement('div');
div.id = 'game-control-prompt';
div.prepend(SharedStateUtil.createReturnToLobbyButton(stateBucket));
document.getElementById('game-content').appendChild(div);
}
}
function renderGroupOfPlayers (
people,
accessCode = null,

7
client/src/modules/game_state/states/InProgress.js
View File

@@ -501,7 +501,8 @@ function removeExistingPlayerElements (killPlayerHandlers, revealRoleHandlers) {
function createEndGamePromptComponent (socket, stateBucket) {
if (document.querySelector('#game-control-prompt') === null) {
const div = document.createElement('div');
div.innerHTML = HTMLFragments.GAME_CONTROL_PROMPT;
div.id = 'game-control-prompt';
div.innerHTML = HTMLFragments.END_GAME_BUTTON;
div.querySelector('#end-game-button').addEventListener('click', (e) => {
e.preventDefault();
Confirmation('End the game?', () => {
@@ -511,12 +512,12 @@ function createEndGamePromptComponent (socket, stateBucket) {
stateBucket.currentGameState.accessCode,
null,
() => {
document.querySelector('#game-control-prompt')?.remove();
toast('Game ended.', 'success', true);
}
);
});
});
div.querySelector('#game-control-prompt').prepend(SharedStateUtil.createReturnToLobbyButton(stateBucket));
div.prepend(SharedStateUtil.createReturnToLobbyButton(stateBucket));
document.getElementById('game-content').appendChild(div);
}
}

4
client/src/modules/page_handlers/gameHandler.js
View File

@@ -177,6 +177,9 @@ function processGameState (
inProgressGame.setUserView(currentGameState.client.userType);
break;
case STATUS.ENDED: {
if (refreshPrompt) {
document.querySelector('#game-control-prompt')?.remove();
}
const ended = new Ended('game-state-container', stateBucket, socket);
ended.renderEndOfGame(currentGameState);
break;
@@ -261,6 +264,7 @@ function setClientSocketHandlers (stateBucket, socket) {
});
socket.on(EVENT_IDS.END_GAME, (people) => {
document.querySelector('#game-control-prompt')?.remove();
stateBucket.currentGameState.people = people;
stateBucket.currentGameState.status = STATUS.ENDED;
processGameState(

10
client/src/styles/GLOBAL.css
View File

@@ -236,22 +236,22 @@ button {
color: #e7e7e7;
font-size: 18px;
cursor: pointer;
border: 2px solid #0c541d;
border: 3px solid transparent;
text-shadow: 0 3px 4px rgb(0 0 0 / 55%);
}
.app-button:active, input[type=submit]:active {
border: 2px solid #21ba45;
border: 3px solid #21ba45;
}
.cancel {
background-color: #7a1a1a !important;
border: 2px solid #540c0c !important;
border: 3px solid transparent !important;
}
.cancel:hover {
background-color: #623232 !important;
border: 2px solid #7a1a1a !important;
border: 3px solid #7a1a1a !important;
}
.submitted {
@@ -278,7 +278,7 @@ button {
.app-button:hover, input[type="submit"]:hover, #game-link:hover {
background-color: #326243;
border: 2px solid #1a7a31;
border: 3px solid #1a7a31;
}
.emphasized {

4
client/src/styles/confirmation.css
View File

@@ -52,7 +52,3 @@
display: flex;
justify-content: center;
}
#confirmation-cancel-button {
background-color: #762323 !important;
}

25
client/src/styles/create.css
View File

@@ -102,8 +102,8 @@
}
.template-option {
background-color: #4645525c;
border: 2px solid #46455299;
background-color: #000000;
border: 1px solid #4b4b4b;
color: #d7d7d7;
display: flex;
justify-content: space-between;
@@ -129,7 +129,7 @@
}
.template-option:hover, .template-option:active {
border: 2px solid #e7e7e7;
border: 1px solid #e7e7e7;
background-color: #33343c;
cursor: pointer;
}
@@ -538,7 +538,7 @@ input[type="number"] {
}
#creation-step-container > div:nth-child(2) {
animation: fade-in 0.5s ease-out;
animation: fade-in 0.5s ease-in-out;
}
#step-title {
@@ -572,7 +572,7 @@ input[type="number"] {
width: 100%;
height: 50px;
position: relative;
max-width: 30em;
max-width: 28em;
}
#upload-custom-roles-modal input[type='file'] {
@@ -599,8 +599,8 @@ input[type="number"] {
#step-forward-button, #step-back-button {
padding: 0 !important;
width: 50px;
height: 44px;
width: 65px;
height: 50px;
user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
@@ -623,16 +623,18 @@ input[type="number"] {
}
#step-forward-button {
right: 30px;
right: 12px;
}
#create-game {
right: 5%;
right: -5px;
position: absolute;
font-size: 20px;
height: 50px;
}
#step-back-button {
left: 30px;
left: 12px;
}
#step-1 div {
@@ -697,13 +699,14 @@ input[type="number"] {
height: 13px;
}
#step-forward-button, #step-back-button, #create-game {
#step-forward-button, #step-back-button {
padding: 10px 15px;
font-size: 16px;
}
#create-game {
width: 80px;
right: 5px;
}
.role-name {

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

@@ -45,7 +45,7 @@
border-radius: 5px;
color: #d7d7d7;
background-color: #1e1e1e;
padding: 0 10px;
padding: 2px 10px;
width: 90%;
margin-bottom: 0.5em;
}
@@ -128,7 +128,7 @@
}
#role-edit-prompt button, #timer-edit-prompt button {
margin: 0 20px;
margin: 0 15px;
}
#save-role-changes-button img, #save-timer-changes-button img {
@@ -144,7 +144,7 @@
#edit-timer-button,
#save-timer-changes-button {
background-color: #045ea6;
border: 2px solid #024070;
border: 3px solid transparent;
}
#return-to-lobby-button:hover,
@@ -155,7 +155,7 @@
#edit-timer-button:hover,
#save-timer-changes-button:hover {
background-color: rgba(0, 120, 215, 0.45);
border: 2px solid #045EA6;
border: 3px solid #045EA6;
}
#mid-game-role-editor, #mid-game-timer-editor {
@@ -178,7 +178,7 @@
border-radius: 5px;
margin: 1em;
background-color: #1e1e1e;
border: 2px solid #4b4b4b;
border: 1px solid #4b4b4b;
}
#timer-parameters {
@@ -267,7 +267,7 @@ h1 {
#end-of-game-header h2 {
border: 1px solid #4b4b4b;
border-radius: 5px;
background-color: #1a1726;
background-color: #232328;
padding: 7px;
margin: 0.5em;
}
@@ -709,7 +709,6 @@ label[for='moderator'] {
border-radius: 5px;
color: #e7e7e7;
cursor: pointer;
border: 2px solid transparent;
transition: background-color, border 0.3s ease-out;
text-shadow: 0 3px 4px rgb(0 0 0 / 85%);
font-size: 22px;
@@ -721,6 +720,7 @@ label[for='moderator'] {
#start-game-button {
background-color: #1c8a36;
border: 3px solid transparent
}
#end-game-button, #leave-game-button {
@@ -729,12 +729,12 @@ label[for='moderator'] {
#start-game-button:hover {
background-color: #326243;
border: 2px solid #1c8a36;
border: 3px solid #1c8a36;
}
#end-game-button:hover, #leave-game-button:hover {
background-color: #623232;
border: 2px solid #8a1c1c;
border: 3px solid #8a1c1c;
}
#play-pause {
@@ -835,7 +835,7 @@ canvas {
height: 25px;
font-size: 16px;
cursor: pointer;
border: 2px solid transparent;
border: 3px solid transparent;
transition: background-color, border 0.2s ease-out;
text-shadow: 0 3px 4px rgb(0 0 0 / 55%);
margin: 5px 0 5px 25px;
@@ -846,7 +846,7 @@ canvas {
}
.kill-player-button:hover, .reveal-role-button:hover {
border: 2px solid #b1afcd;
border: 3px solid #b1afcd;
}
#game-players-container {
@@ -1023,7 +1023,7 @@ canvas {
@media(max-width: 500px) {
#game-control-prompt button, #start-game-prompt button, #leave-game-prompt button {
margin: 0 10px;
margin: 0 12px;
}
#client-container button img {
@@ -1103,7 +1103,7 @@ canvas {
#edit-roles-button,
#leave-game-button,
#edit-timer-button {
font-size: 20px;
font-size: 18px;
padding: 5px;
}

2
client/src/styles/home.css
View File

@@ -109,7 +109,7 @@ h3 {
img[src='../images/new-logo.png'], #new-logo-container {
max-width: 250px;
width: 25vw;
min-width: 180px;
min-width: 150px;
margin: 1em 0 1em 0;
aspect-ratio: 500 / 641;
}