Git_Mirror/Werewolf
1
0
Fork 0
mirror of https://github.com/AlecM33/Werewolf.git synced 2026-01-02 01:03:24 +01:00
Code Issues Packages Projects Releases Wiki Activity

join purposefully as spectator, various improvements

Browse Source
This commit is contained in:
AlecM33
2022-12-29 15:38:40 -05:00
parent 63b1157c7d
commit e0dffe17b6
22 changed files with 221 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -572,7 +572,7 @@ input {
}
.good, .compact-card.good .card-role {
color: #4b6bfa;
color: #5f7cfb;
}
.good-players, #deck-good {
@@ -786,7 +786,7 @@ input {
display:inline-flex !important;
align-items: center !important;
color:#ffffff !important;
background-color:#333243 !important;
background-color:#2d2c3a !important;
border-radius: 5px !important;
border: 1px solid transparent !important;
padding: 7px 15px 7px 10px !important;

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

@@ -2,13 +2,12 @@
border-radius: 2px;
text-align: center;
position: fixed;
border: 2px solid #333243;
width: 85%;
z-index: 100001;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #191920;
background-color: #292834;
align-items: center;
justify-content: center;
max-width: 25em;
@@ -32,6 +31,12 @@
font-size: 20px;
color: #e7e7e7;
margin: 1em 0 2em 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
max-height: 20em;
overflow-y: auto;
}
.confirmation-buttons button, .confirmation-buttons-centered button {

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

@@ -106,7 +106,7 @@
display: flex;
justify-content: space-between;
background-color: #0f0f10;
border: 2px solid #333243;
border: 2px solid #2d2c3a;
padding: 5px;
border-radius: 3px;
font-size: 16px;
@@ -159,7 +159,7 @@
background-color: #191920;
padding: 10px;
border-radius: 3px;
border: 2px solid #333243;
border: 2px solid #2d2c3a;
position: relative;
}
@@ -173,7 +173,7 @@
#deck-count {
font-size: 30px;
background-color: #333243;
background-color: #2d2c3a;
width: fit-content;
padding: 0 5px;
border-radius: 3px;
@@ -236,7 +236,7 @@
z-index: 25;
top: 38px;
right: 29px;
background-color: #333243;
background-color: #2d2c3a;
border-radius: 3px;
box-shadow: -3px -3px 6px rgb(0 0 0 / 60%);
}
@@ -245,7 +245,7 @@
display: flex;
width: 100%;
padding: 10px;
background-color: #333243;
background-color: #2d2c3a;
text-align: center;
justify-content: center;
align-items: center;
@@ -362,7 +362,7 @@ select {
display: flex;
flex-wrap: wrap;
background-color: #191920;
border: 2px solid #333243;
border: 2px solid #2d2c3a;
border-radius: 3px;
}
@@ -593,7 +593,7 @@ input[type="number"] {
max-width: 20em;
margin: 0.5em;
cursor: pointer;
border: 2px solid #333243;
border: 2px solid #2d2c3a;
border-radius: 3px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6);
}
@@ -613,7 +613,7 @@ input[type="number"] {
.review-option {
background-color: #191920;
border: 2px solid #333243;
border: 2px solid #2d2c3a;
color: #e7e7e7;
padding: 10px;
font-size: 18px;

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

@@ -1,18 +1,20 @@
.lobby-player, #moderator {
.lobby-player, #moderator, .spectator, .potential-moderator {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
background-color: black;
background-color: #171522;
color: #e7e7e7;
padding: 5px;
border-radius: 3px;
font-size: 17px;
width: fit-content;
min-width: 15em;
width: 17em;
border: 2px solid transparent;
margin: 0.25em 0;
box-shadow: 2px 2px 5px rgb(0 0 0 / 40%);
margin: 0 auto 0.25em auto;
}
.potential-moderator {
margin: 0.5em auto;
}
#lobby-players {
@@ -29,13 +31,17 @@
#spectator-count {
color: #b1afcd;
text-decoration: underline;
font-size: 17px;
margin: 5px 0;
cursor: pointer;
}
.lobby-player-client {
border: 2px solid #21ba45;
}
.lobby-player div:nth-child(2) {
.lobby-player div:nth-child(2), .spectator div:nth-child(2), .potential-moderator div:nth-child(2) {
color: #21ba45;
}
@@ -122,7 +128,7 @@ h1 {
}
#end-of-game-header h2 {
border: 1px solid #333243;
border: 1px solid #2d2c3a;
border-radius: 5px;
background-color: #1a1726;
padding: 7px;
@@ -141,19 +147,6 @@ h1 {
padding: 10px;
}
.potential-moderator {
display: flex;
color: #d7d7d7;
background-color: black;
border: 2px solid transparent;
align-items: center;
padding: 10px;
border-radius: 3px;
justify-content: space-between;
margin: 0.5em 0;
position: relative;
}
.potential-moderator:hover {
border: 2px solid #d7d7d7;
cursor: pointer;
@@ -170,7 +163,7 @@ h1 {
padding: 7px;
border-radius: 3px;
background-color: #121314;
border: 2px solid #333243;
border: 2px solid #2d2c3a;
color: #e7e7e7;
align-items: center;
display: flex;
@@ -243,7 +236,7 @@ h1 {
font-size: 20px;
font-family: signika-negative, sans-serif;
margin: 0.5em 0;
background-color: black;
background-color: #171522;
}
#role-info-modal h2 {
@@ -423,7 +416,7 @@ h1 {
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
background-color: #333243;
background-color: #2d2c3a;
border-radius: 3px;
min-width: 15em;
}
@@ -431,7 +424,7 @@ h1 {
#client-name {
color: #e7e7e7;
font-family: 'signika-negative', sans-serif;
font-size: 30px;
font-size: 25px;
margin: 0.25em 2em 0.25em 0;
}
@@ -439,7 +432,7 @@ h1 {
color: #21ba45;
font-family: 'signika-negative', sans-serif;
font-size: 25px;
background-color: black;
background-color: #171522;
border-radius: 3px;
display: block;
padding: 0 5px;
@@ -608,7 +601,7 @@ label[for='moderator'] {
margin-bottom: 1em;
padding: 0.5em;
border-radius: 3px;
background-color: #333243;
background-color: #2d2c3a;
}
canvas {
@@ -620,13 +613,12 @@ canvas {
border-left: 3px solid #21ba45;
display: flex;
color: #d7d7d7;
background-color: black;
background-color: #171522;
align-items: center;
padding: 0 5px;
justify-content: space-between;
margin: 0.25em 0;
position: relative;
box-shadow: 2px 3px 6px rgb(0 0 0 / 50%);
border-radius: 3px;
}
@@ -634,18 +626,20 @@ canvas {
justify-content: flex-end;
}
.game-player-name {
.game-player-name, .lobby-player-name, .spectator-name, .potential-mod-name {
position: relative;
min-width: 6em;
max-width: 10em;
overflow: hidden;
white-space: nowrap;
font-weight: bold;
font-size: 18px;
font-size: 16px;
text-overflow: ellipsis;
text-align: left;
}
.kill-player-button, .reveal-role-button {
background-color: #333243;
background-color: #434156;
font-family: 'signika-negative', sans-serif !important;
border-radius: 3px;
color: #e7e7e7;
@@ -750,7 +744,7 @@ canvas {
}
#game-parameters {
background-color: #333243;
background-color: #2d2c3a;
border-radius: 3px;
padding: 5px 20px;
}
@@ -765,12 +759,11 @@ canvas {
#game-player-list > div {
padding: 2px 10px;
border-radius: 3px;
margin-bottom: 0.5em;
margin-bottom: 0.25em;
}
#players-alive-label {
display: block;
margin-bottom: 10px;
font-size: 25px;
}
@@ -795,10 +788,10 @@ canvas {
}
#lobby-people-container , #game-people-container {
background-color: #333243;
padding: 10px;
border-radius: 3px;
min-height: 25em;
background-color: #292834;
max-width: 35em;
min-width: 17em;
margin-top: 1em;

19
client/src/styles/join.css
View File

@@ -6,6 +6,25 @@
z-index: 1 !important;
}
#join-game-form .modal-button-container {
justify-content: flex-end;
margin-top: 2em;
}
#join-game-form .modal-button-container input {
width: 5em;
margin: 0 10px;
}
#join-game-form .modal-button-container #submit-join-as-spectator {
background-color: #045EA6;
}
#join-game-form .modal-button-container #submit-join-as-spectator:hover {
background-color: #0078D773;
border: 2px solid #045EA6;
}
#player-new-name {
max-width: 17em;
}

3
client/src/styles/modal.css
View File

@@ -7,7 +7,7 @@
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #191920;
background-color: #292834;
align-items: center;
justify-content: center;
max-width: 25em;
@@ -15,7 +15,6 @@
flex-direction: column;
padding: 1em;
display: none;
border: 2px solid #333243;
}
.modal-background {