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

homepage styling improvements

Browse Source
This commit is contained in:
AlecM33
2022-06-09 19:57:53 -04:00
parent 527a822839
commit b2505b7488
10 changed files with 128 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
client/src/images/copy.svg
View File

@@ -51,15 +51,15 @@
style="display:none">
<path
id="path915"
style="opacity:0.996;fill:#f9f9f9;fill-opacity:1;stroke:whitesmoke;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
style="opacity:0.996;fill:#f9f9f9;fill-opacity:1;stroke:#e7e7e7;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 109.61309,67.279762 h 52.91667 c 2.51278,0 4.53571,2.022929 4.53571,4.535714 0,2.512786 -2.02293,4.535715 -4.53571,4.535715 h -52.91667 c -2.51278,0 -4.53571,-2.022929 -4.53571,-4.535715 0,-2.512785 2.02293,-4.535714 4.53571,-4.535714 z" />
<path
id="path917"
style="opacity:0.996;fill:#f9f9f9;fill-opacity:1;stroke:whitesmoke;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
style="opacity:0.996;fill:#f9f9f9;fill-opacity:1;stroke:#e7e7e7;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 109.12738,83.424988 h 52.91667 c 2.51278,0 4.53571,2.022928 4.53571,4.535714 0,2.512786 -2.02293,4.535714 -4.53571,4.535714 h -52.91667 c -2.51278,0 -4.53571,-2.022928 -4.53571,-4.535714 0,-2.512786 2.02293,-4.535714 4.53571,-4.535714 z" />
<path
id="path919"
style="opacity:0.996;fill:#f9f9f9;fill-opacity:1;stroke:whitesmoke;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
style="opacity:0.996;fill:#f9f9f9;fill-opacity:1;stroke:#e7e7e7;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 109.12738,99.375595 h 52.91667 c 2.51278,0 4.53571,2.022925 4.53571,4.535715 0,2.51278 -2.02293,4.53571 -4.53571,4.53571 h -52.91667 c -2.51278,0 -4.53571,-2.02293 -4.53571,-4.53571 0,-2.51279 2.02293,-4.535715 4.53571,-4.535715 z" />
</g>
<path
@@ -76,15 +76,15 @@
style="display:none">
<path
id="path929"
style="opacity:0.996;fill:#f9f9f9;fill-opacity:1;stroke:whitesmoke;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
style="opacity:0.996;fill:#f9f9f9;fill-opacity:1;stroke:#e7e7e7;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 109.61309,67.279762 h 52.91667 c 2.51278,0 4.53571,2.022929 4.53571,4.535714 0,2.512786 -2.02293,4.535715 -4.53571,4.535715 h -52.91667 c -2.51278,0 -4.53571,-2.022929 -4.53571,-4.535715 0,-2.512785 2.02293,-4.535714 4.53571,-4.535714 z" />
<path
id="path931"
style="opacity:0.996;fill:#f9f9f9;fill-opacity:1;stroke:whitesmoke;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
style="opacity:0.996;fill:#f9f9f9;fill-opacity:1;stroke:#e7e7e7;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 109.12738,83.424988 h 52.91667 c 2.51278,0 4.53571,2.022928 4.53571,4.535714 0,2.512786 -2.02293,4.535714 -4.53571,4.535714 h -52.91667 c -2.51278,0 -4.53571,-2.022928 -4.53571,-4.535714 0,-2.512786 2.02293,-4.535714 4.53571,-4.535714 z" />
<path
id="path933"
style="opacity:0.996;fill:#f9f9f9;fill-opacity:1;stroke:whitesmoke;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
style="opacity:0.996;fill:#f9f9f9;fill-opacity:1;stroke:#e7e7e7;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 109.12738,99.375595 h 52.91667 c 2.51278,0 4.53571,2.022925 4.53571,4.535715 0,2.51278 -2.02293,4.53571 -4.53571,4.53571 h -52.91667 c -2.51278,0 -4.53571,-2.02293 -4.53571,-4.53571 0,-2.51279 2.02293,-4.535715 4.53571,-4.535715 z" />
</g>
<path
@@ -99,7 +99,7 @@
id="g949"
style="display:none">
<rect
style="opacity:0.996;fill:whitesmoke;stroke:#a5ccd1;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none"
style="opacity:0.996;fill:#e7e7e7;stroke:#a5ccd1;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none"
id="rect943"
width="39.498516"
height="11.483695"
@@ -107,7 +107,7 @@
y="66.357109"
d="m 116.32217,66.357109 h 39.49851 v 11.483695 h -39.49851 z" />
<rect
style="opacity:0.996;fill:whitesmoke;stroke:#a5ccd1;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none"
style="opacity:0.996;fill:#e7e7e7;stroke:#a5ccd1;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none"
id="rect945"
width="39.498516"
height="11.483695"
@@ -115,7 +115,7 @@
y="82.326607"
d="m 115.93681,82.326607 h 39.49852 v 11.483695 h -39.49852 z" />
<rect
style="opacity:0.996;fill:whitesmoke;stroke:#a5ccd1;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none"
style="opacity:0.996;fill:#e7e7e7;stroke:#a5ccd1;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none"
id="rect947"
width="39.498516"
height="11.483695"
@@ -177,30 +177,30 @@
id="g870">
<path
id="rect833"
style="opacity:0.996;fill:whitesmoke;fill-opacity:0;stroke:whitesmoke;stroke-width:8.1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
style="opacity:0.996;fill:#e7e7e7;fill-opacity:0;stroke:#e7e7e7;stroke-width:8.1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 77.863093,30.994047 h 55.940477 c 7.53836,0 13.60714,6.068786 13.60714,13.607143 v 83.91071 c 0,7.53836 -6.06878,13.60715 -13.60714,13.60715 H 77.863093 c -7.538357,0 -13.607142,-6.06879 -13.607142,-13.60715 V 44.60119 c 0,-7.538357 6.068785,-13.607143 13.607142,-13.607143 z"
clip-path="url(#clipPath941)"
inkscape:original-d="m 77.863093,30.994047 h 55.940477 c 7.53836,0 13.60714,6.068786 13.60714,13.607143 v 83.91071 c 0,7.53836 -6.06878,13.60715 -13.60714,13.60715 H 77.863093 c -7.538357,0 -13.607142,-6.06879 -13.607142,-13.60715 V 44.60119 c 0,-7.538357 6.068785,-13.607143 13.607142,-13.607143 z"
inkscape:path-effect="#path-effect923;#path-effect951" />
<path
id="rect833-1"
style="opacity:0.996;fill:whitesmoke;fill-opacity:1;stroke:whitesmoke;stroke-width:8.1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
style="opacity:0.996;fill:#e7e7e7;fill-opacity:1;stroke:#e7e7e7;stroke-width:8.1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 107.61547,56.588688 h 55.94048 c 7.53836,0 13.60714,6.068785 13.60714,13.607142 v 83.91072 c 0,7.53835 -6.06878,13.60714 -13.60714,13.60714 h -55.94048 c -7.53835,0 -13.607139,-6.06879 -13.607139,-13.60714 V 70.19583 c 0,-7.538357 6.068789,-13.607142 13.607139,-13.607142 z"
clip-path="url(#clipPath927)"
inkscape:original-d="m 107.61547,56.588688 h 55.94048 c 7.53836,0 13.60714,6.068785 13.60714,13.607142 v 83.91072 c 0,7.53835 -6.06878,13.60714 -13.60714,13.60714 h -55.94048 c -7.53835,0 -13.607139,-6.06879 -13.607139,-13.60714 V 70.19583 c 0,-7.538357 6.068789,-13.607142 13.607139,-13.607142 z"
inkscape:path-effect="#path-effect937" />
<path
style="opacity:0.996;fill:#cfced2;fill-opacity:0;stroke:whitesmoke;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
style="opacity:0.996;fill:#cfced2;fill-opacity:0;stroke:#e7e7e7;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 181.02138,183.03773 c -5.53501,-2.80025 -7.14286,-5.82668 -7.14286,-13.44493 0,-16.70234 2.35705,-17.05861 112.85714,-17.05861 110.5001,0 112.85715,0.35627 112.85715,17.05861 0,16.70235 -2.35705,17.05862 -112.85715,17.05862 -73.8022,0 -100.3663,-0.90805 -105.71428,-3.61369 z"
id="path953"
transform="matrix(0.26458333,0,0,0.26458333,60.205951,26.944047)" />
<path
style="opacity:0.996;fill:#cfced2;fill-opacity:0;stroke:whitesmoke;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
style="opacity:0.996;fill:#cfced2;fill-opacity:0;stroke:#e7e7e7;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 174.32134,241.51069 c -5.9592,-6.58484 -6.06152,-15.89102 -0.23874,-21.7138 3.92103,-3.92103 17.98077,-4.4898 110.98575,-4.4898 99.543,0 106.80467,0.34113 111.22449,5.22497 6.28388,6.94361 5.96667,13.53689 -0.98575,20.48931 -5.5075,5.5075 -9.52381,5.71429 -110.98575,5.71429 -98.35673,0 -105.58205,-0.3432 -110,-5.22497 z"
id="path955"
transform="matrix(0.26458333,0,0,0.26458333,60.205951,26.944047)" />
<path
style="opacity:0.996;fill:#cfced2;fill-opacity:0;stroke:whitesmoke;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
style="opacity:0.996;fill:#cfced2;fill-opacity:0;stroke:#e7e7e7;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 174.32134,301.51069 c -6.21551,-6.86807 -5.99825,-15.59745 0.53536,-21.51029 4.74851,-4.29734 15.71793,-4.69038 112.03415,-4.01425 l 106.77025,0.74951 4.22446,7.52791 c 3.7896,6.753 3.72048,8.29708 -0.67144,15 l -4.8959,7.47209 H 285.68405 c -99.6769,0 -106.94268,-0.3409 -111.36271,-5.22497 z"
id="path957"
transform="matrix(0.26458333,0,0,0.26458333,60.205951,26.944047)" />
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

BIN
client/src/images/framed-phone-screenshot.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 767 KiB

2
client/src/modules/GameCreationStepManager.js
View File

@@ -217,7 +217,7 @@ function renderModerationTypeStep (game, containerId, stepNumber) {
stepContainer.innerHTML =
"<div tabindex=\"0\" id='moderation-dedicated'>I will be the <strong>dedicated mod.</strong> Don't deal me a card.</div>" +
"<div tabindex=\"0\" id='moderation-self'>The <strong>first person out</strong> will mod. Deal me into the game <span>(mod will be assigned automatically).</span></div>";
"<div tabindex=\"0\" id='moderation-self'>The <strong>first person out</strong> will mod. Deal me into the game.</div>";
const dedicatedOption = stepContainer.querySelector('#moderation-dedicated');
if (game.hasDedicatedModerator) {

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

@@ -52,7 +52,7 @@ h1 {
}
h2 {
color: whitesmoke;
color: #e7e7e7;
font-size: 25px;
font-weight: bold;
}
@@ -197,7 +197,7 @@ button {
padding: 10px;
background-color: #13762b;
border-radius: 3px;
color: whitesmoke;
color: #e7e7e7;
font-size: 18px;
cursor: pointer;
border: 2px solid transparent;
@@ -312,7 +312,7 @@ input {
padding: 5px 0;
width: 100%;
background-color: #333243;
height: 51px;
height: 45px;
z-index: 53000;
}
@@ -381,7 +381,7 @@ input {
.hamburger-light {
min-width: auto;
color: whitesmoke;
color: #e7e7e7;
}
.hamburger-dark {

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

@@ -141,7 +141,7 @@
}
#custom-role-hamburger .hamburger-inner, #custom-role-hamburger .hamburger-inner::before, #custom-role-hamburger .hamburger-inner::after {
background-color: whitesmoke;
background-color: #e7e7e7;
width: 28px;
height: 3px;
}
@@ -167,7 +167,7 @@
#custom-role-actions {
display: none;
color: whitesmoke;
color: #e7e7e7;
position: absolute;
top: 38px;
right: 29px;
@@ -325,7 +325,7 @@ select {
}
label[for="game-time"], label[for="add-card-to-deck-form"], label[for="deck"] {
color: whitesmoke;
color: #e7e7e7;
font-size: 20px;
border-radius: 3px;
margin-bottom: 10px;
@@ -343,7 +343,7 @@ input[type="number"] {
#create-game {
background-color: #1c8a36;
color: whitesmoke;
color: #e7e7e7;
font-size: 30px;
padding: 10px 50px;
}
@@ -413,12 +413,12 @@ input[type="number"] {
height: 20px;
background-color: transparent;
border-radius: 50%;
border: 2px solid whitesmoke;
border: 2px solid #e7e7e7;
margin: 0 0.5em;
}
.creation-step-filled {
background-color: whitesmoke;
background-color: #e7e7e7;
}
#creation-step-container {
@@ -496,7 +496,7 @@ input[type="number"] {
#step-1 div {
background-color: #191920;
color: whitesmoke;
color: #e7e7e7;
padding: 1em;
max-width: 20em;
margin: 0.5em;
@@ -507,7 +507,7 @@ input[type="number"] {
}
#step-1 div.option-selected {
border: 2px solid whitesmoke;
border: 2px solid #e7e7e7;
background-color: #3a3c46;
}
@@ -516,13 +516,13 @@ input[type="number"] {
}
#step-1 div:hover {
border: 2px solid whitesmoke;
border: 2px solid #e7e7e7;
}
.review-option {
background-color: #191920;
border: 2px solid #333243;
color: whitesmoke;
color: #e7e7e7;
padding: 10px;
font-size: 18px;
width: fit-content;

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

@@ -4,7 +4,7 @@
align-items: center;
justify-content: space-between;
background-color: black;
color: whitesmoke;
color: #e7e7e7;
padding: 10px;
border-radius: 3px;
font-size: 17px;
@@ -66,7 +66,7 @@
}
#restart-game:hover {
border-color: whitesmoke;
border-color: #e7e7e7;
}
#lobby-header {
@@ -138,14 +138,14 @@ h1 {
border-radius: 3px;
background-color: #121314;
border: 2px solid #333243;
color: whitesmoke;
color: #e7e7e7;
align-items: center;
display: flex;
transition: background-color 0.2s;
max-width: 20em;
}
#game-code {
color: whitesmoke;
color: #e7e7e7;
margin-top: 5px;
}
@@ -309,7 +309,7 @@ h1 {
padding: 10px;
margin-top: 5px;
background-color: #262626;
color: whitesmoke;
color: #e7e7e7;
border-radius: 3px;
font-size: 35px;
text-shadow: 0 3px 4px rgb(0 0 0 / 85%);
@@ -390,7 +390,7 @@ h1 {
}
#client-name {
color: whitesmoke;
color: #e7e7e7;
font-family: 'signika-negative', sans-serif;
font-size: 30px;
margin: 0.25em 2em 0.25em 0;
@@ -446,7 +446,7 @@ label[for='moderator'] {
font-family: 'signika-negative', sans-serif !important;
padding: 10px;
border-radius: 3px;
color: whitesmoke;
color: #e7e7e7;
cursor: pointer;
border: 2px solid transparent;
transition: background-color, border 0.3s ease-out;
@@ -551,7 +551,7 @@ label[for='moderator'] {
.kill-player-button, .reveal-role-button {
font-family: 'signika-negative', sans-serif !important;
border-radius: 3px;
color: whitesmoke;
color: #e7e7e7;
font-size: 16px;
cursor: pointer;
border: 2px solid transparent;

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

@@ -9,7 +9,40 @@ body {
button#home-create-button {
padding: 20px;
margin-bottom: 1em;
}
#framed-phone-screenshot {
max-width: 250px;
width: 40vw;
min-width: 175px;
margin: 0;
}
#about-container {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: center;
padding: 0 1em;
margin-top: 25px;
}
#join-container form {
margin: 0;
}
#about-container h2 {
max-width: 17em;
font-size: 22px;
}
#about-container img {
margin-bottom: 20px;
}
#homepage-logos {
display: flex;
align-items: center;
}
#home-page-top-section {
@@ -40,7 +73,7 @@ a button {
min-width: 6em;
max-height: 3em;
background-color: #1c8a36;
color: whitesmoke;
color: #e7e7e7;
font-size: 16px;
}
@@ -50,7 +83,7 @@ a button {
}
#join-form div:nth-child(1) {
margin-right: 1em;
margin-right: 0.5em;
}
h3 {
@@ -62,24 +95,38 @@ h3 {
}
img[src='../images/logo_cropped.gif'] {
max-width: 400px;
width: 63vw;
max-width: 360px;
width: 50vw;
min-width: 250px;
margin: 3em 0 1em 0;
margin: 1em 0 1em 0;
}
form > div {
margin: 15px 0;
}
#create-join {
width: 100%;
max-width: 900px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-evenly;
margin-bottom: 1em;
}
#join-container {
max-width: 90%;
background-color: #0f0f10;
padding: 0.5em;
border-radius: 3px;
margin: 20px;
}
#join-container > label {
font-size: 35px;
font-family: 'signika-negative', sans-serif;
color: #b1afcd;
color: #e7e7e7;
filter: drop-shadow(2px 2px 4px black);
}
@@ -96,9 +143,18 @@ label[for="room-code"], label[for="player-name"] {
@media (max-width: 701px) {
button#home-create-button {
font-size: 5vw;
padding: 15px;
}
#join-container > label {
font-size: 26px;
}
#room-code {
max-width: 9em;
}
#about-container h2 {
font-size: 18px;
}
}

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

@@ -61,6 +61,8 @@
margin: 2em 0;
max-height: 10em;
overflow: auto;
padding-top: 10px;
border-top: 1px solid whitesmoke
}
#custom-role-info-modal-name {

4
client/src/views/game.html
View File

@@ -4,8 +4,8 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Active Game</title>
<meta name="description" content="Spectate this game of Werewolf">
<meta property="og:title" content="Werewolf Utility - Active Game">
<meta name="description" content="View this game of Werewolf">
<meta property="og:title" content="Play Werwolf (Mafia) - Active Game">
<meta property="og:type" content="website">
<meta property="og:description" content="Spectate this game of Werewolf">
<meta property="og:image" content="image.png">

44
client/src/views/home.html
View File

@@ -4,12 +4,12 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Werewolf Utility</title>
<meta name="description" content="A utility to deal Werewolf cards and run games in any setting, on any device.">
<meta property="og:title" content="Play Werewolf">
<title>Play Werewolf (Mafia)</title>
<meta name="description" content="An app to run games of Werewolf (Mafia) smoothly in a real or virtual social setting.">
<meta property="og:title" content="Play Werewolf (Mafia)">
<meta property="og:type" content="website">
<meta property="og:url" content="https://playwerewolf.uk.r.appspot.com/">
<meta property="og:description" content="A utility to deal Werewolf cards and run games in any setting, on any device.">
<meta property="og:url" content="https://play-werewolf.app">
<meta property="og:description" content="An app to run games of Werewolf (Mafia) smoothly in a real or virtual social setting.">
<meta property="og:image" content="image.png">
<link rel="icon" href="/favicon.ico">
@@ -25,24 +25,28 @@
<div id="navbar"></div>
<div id="home-page-top-section">
<img src="../images/logo_cropped.gif"/>
<h3>A tool to run werewolf when not in-person, or in any setting without a deck of cards.</h3>
<a href="/create">
<button id="home-create-button" class="app-button">Create A Game</button>
</a>
</div>
<div id="join-container">
<label for="join-form">Join A Game</label>
<form id="join-form">
<div>
<label for="room-code">Room Code</label>
<input id="room-code" type="text" placeholder="four-character code..." autocomplete="off" required/>
<h3>A tool to run the social deception game Werewolf (aka Mafia) smoothly in a real or virtual social setting.</h3>
<div id="create-join">
<a href="/create">
<button id="home-create-button" class="app-button">Create A Game</button>
</a>
<div id="join-container">
<label for="join-form">Join A Game</label>
<form id="join-form">
<div>
<label for="room-code">Room Code</label>
<input id="room-code" type="text" placeholder="four-character code..." autocomplete="off" required/>
</div>
<input id="join-button" type="submit" value="Join"/>
</form>
</div>
<input id="join-button" type="submit" value="Join"/>
</form>
</div>
</div>
<div id="about-container">
<img id="framed-phone-screenshot" alt="framed phone screenshot" src="../images/framed-phone-screenshot.png"/>
<h2>Create your game, have everyone join, and deal a role to their device.</h2>
</div>
<footer id="footer">
<a href="https://www.buymeacoffee.com/alecm33"><img src="https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&emoji=&slug=alecm33&button_colour=333243&font_colour=ffffff&font_family=Lato&outline_colour=b1afcd&coffee_colour=b1afcd" /></a>
<div>
<a href="https://github.com/AlecM33/Werewolf"><img src='/images/GitHub-Mark-Light-120px-plus.png'/></a>