From 41796113aab42a97af2fb5b0091053db96732f4c Mon Sep 17 00:00:00 2001 From: MayteApolix <83069108+MayteApolix@users.noreply.github.com> Date: Sun, 16 Jan 2022 23:02:51 +0100 Subject: comments for splash.css --- draughts/public/stylesheets/splash.css | 183 +++++++++++++++++++-------------- draughts/public/stylesheets/style.css | 18 ++++ 2 files changed, 124 insertions(+), 77 deletions(-) diff --git a/draughts/public/stylesheets/splash.css b/draughts/public/stylesheets/splash.css index 050afac..a1a8d3b 100644 --- a/draughts/public/stylesheets/splash.css +++ b/draughts/public/stylesheets/splash.css @@ -10,6 +10,23 @@ body { margin: 0; } +/* Resizes body to fit the viewport and ensures position is absolute*/ +body > div { + width: 95%; + height: 90vh; + margin-top:8vh; + position: absolute; +} + +/* Adjusts standard rendering of our images. Adds drop shadow and ensures it fits the container*/ +div > img { + object-fit: contain; + width: 100%; + max-height: 100%; + filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); +} + +/* set the container class to a 4x3 grid with named areas*/ .container { display: grid; grid-template-columns: repeat(4, 25%); @@ -20,66 +37,14 @@ body { "players button how-to-3 windmill"; } +/* Sets the header class to the header grid-area.*/ .header { grid-area: header; justify-self: left; margin-left:10%; } -.stats { - grid-area: stats; - justify-self: left; - margin-left:10%; - margin-top: 2%; -} - -.icon { - grid-area: players; -} - -.button { - grid-area: button; -} - -.how-to-1 { - grid-area: how-to-1; - display: grid; - justify-content:left; - margin-left: 20%; -} - -.how-to-2 { - grid-area: how-to-2; - display: grid; - justify-content:left; - margin-left: 20%; -} - -.how-to-3 { - grid-area: how-to-3; - display: grid; - justify-content:left; - margin-left: 20%; -} - -.church { - grid-area: church; -} - -.raadhuis { - grid-area: raadhuis; -} - -.windmill { - grid-area: windmill; -} - -.icon > img { - margin-left: 15%; - height: 75%; - width: 90%; -} - +/* Formats the title according to our wireframe*/ h1 { justify-content: start; font-family: Saira; @@ -87,14 +52,7 @@ h1 { filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); } -h2 { - font-family: inherit; - font-size: 30px; - font-weight: normal; - font-style: normal; - filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); -} - +/* Adds line under title*/ h1::after{ display: block; content: ""; @@ -105,25 +63,38 @@ h1::after{ transform: translateY(-2rem); } -body > div { - width: 95%; - height: 90vh; - margin-top:8vh; - position: absolute; +/* Sets the stats class to the stats grid-area. */ +.stats { + grid-area: stats; + justify-self: left; + margin-left:10%; + margin-top: 2%; } +/* Overrides font-size for paragraphs (particularly those that contain the stats) */ div > p { font-size:24px; margin: 0; } -div > img { - object-fit: contain; - width: 100%; - max-height: 100%; - filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); +/* Sets the icon class to the icon area */ +.icon { + grid-area: players; +} + +/* Alligns the icon image within the icon div*/ +.icon > img { + margin-left: 15%; + height: 75%; + width: 90%; +} + +/* Sets button class to button grid area*/ +.button { + grid-area: button; } +/* Play button fade in animation*/ @keyframes fadeIn { 0% { opacity: 0; @@ -133,6 +104,7 @@ div > img { } } +/* Formats our button using the button element id selector*/ #button { background-color: var(--light-blue); color: inherit; @@ -147,45 +119,102 @@ div > img { filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); } +/* change text to bold when clicked*/ #button:active { font-weight: bold; } +/* changes background color of play button when hovered*/ #button:hover { cursor: pointer; background-color: var(--darker-blue) } +/* configures the standard setting for our how-to section headers*/ +h2 { + font-family: inherit; + font-size: 30px; + font-weight: normal; + font-style: normal; + filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); +} + +/* Sets the how-to class to the grid area */ +.how-to-1 { + grid-area: how-to-1; + display: grid; + justify-content:left; + margin-left: 20%; +} + +/* Adds labeling and formattnig for the header*/ +.how-to-1 > h2::before { + content: "1 - "; + display: list-item; + font-weight: lighter; +} + +/* some specific adjustments for each image within the how-to section to ensure proper allignment*/ .how-to-1 > img { justify-self: center; width: fit-content; height: 75%; } -.how-to-1 > h2::before { - content: "1 - "; +/* Sets the how-to class to the grid area */ +.how-to-2 { + grid-area: how-to-2; + display: grid; + justify-content:left; + margin-left: 20%; +} + +/* Adds labeling and formattnig for the header*/ +.how-to-2 > h2::before { + content: "2 - "; + display: list-item; font-weight: lighter; } +/* some specific adjustments for each image within the how-to section to ensure proper allignment*/ .how-to-2 > img { justify-self: center; height: 85%; } -.how-to-2 > h2::before { - content: "2 - "; - font-weight: lighter; +/* Sets the how-to class to the grid area */ +.how-to-3 { + grid-area: how-to-3; + display: grid; + justify-content:left; + margin-left: 20%; } +/* some specific adjustments for each image within the how-to section to ensure proper allignment*/ .how-to-3> img { justify-self: center; height: 45%; opacity: 0.8; } +/* Adds labeling and formattnig for the header*/ .how-to-3 > h2::before { + display: list-item; content: "3 - "; font-weight: lighter; } +/* Sets church class to church grid area*/ +.church { + grid-area: church; +} +/* Sets raadhuis class to raadhuis grid area*/ +.raadhuis { + grid-area: raadhuis; +} + +/* Sets windmill class to windmill grid area*/ +.windmill { + grid-area: windmill; +} \ No newline at end of file diff --git a/draughts/public/stylesheets/style.css b/draughts/public/stylesheets/style.css index b8830b8..e200e60 100644 --- a/draughts/public/stylesheets/style.css +++ b/draughts/public/stylesheets/style.css @@ -8,3 +8,21 @@ --darker-blue: #302C5D; --red: #9E3C2F; } + +/* Ensures a minimum screen resolution of 800 x 800*/ +@media (max-width: 799px), (max-height: 799px) { + body::before { + position: absolute; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + font-family: Saira; + font-size: 20px; + color: white; + padding: 20px; + content: "Your window is too small! Please zoom out or use a machine with a larger screen resolution"; + background-color: var(--red); + z-index: 100; + } + } -- cgit v1.2.3 From efcc8b13e9489ad01d31740883f5ef0bcda5f6fb Mon Sep 17 00:00:00 2001 From: MayteApolix <83069108+MayteApolix@users.noreply.github.com> Date: Sun, 16 Jan 2022 23:06:18 +0100 Subject: some more comments in statTracker --- draughts/app.js | 5 +++-- draughts/statTracker.js | 12 ++++++++---- 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/draughts/app.js b/draughts/app.js index e7fd6a1..e255308 100644 --- a/draughts/app.js +++ b/draughts/app.js @@ -37,6 +37,9 @@ wss.on("connection", ws => { * to join. */ let game = env.games.filter(g => !g.ongoing)[0] + stats.ongoingGames++ + stats.totalGames++ + if (!game) { game = new Game() env.games.push(game) @@ -47,8 +50,6 @@ wss.on("connection", ws => { game.ongoing = true game.messageClient({ head: Messages.WELCOME, body: Color.RED }, ws) game.messageOpponent({ head: Messages.START }, ws) - stats.ongoingGames++ - stats.totalGames++ game.nextTurn() } diff --git a/draughts/statTracker.js b/draughts/statTracker.js index b5a09b9..c301d9f 100644 --- a/draughts/statTracker.js +++ b/draughts/statTracker.js @@ -1,8 +1,12 @@ +/** + * The gameStatus object tracks our statics to be displayed on our splash screen. + */ + var gameStatus = { - minimumMoves: Infinity, - averageMoves: Infinity, - ongoingGames: 0, - totalGames: 0 + minimumMoves: Infinity, /* The minimum amount of moves a game was completed*/ + averageMoves: Infinity, /* The average amount of moves of all games completed*/ + ongoingGames: 0, /*How many games are ongoing*/ + totalGames: 0 /* How many games were initialized (used for calculations) */ } module.exports = gameStatus; -- cgit v1.2.3 From a169d7c6a85a9b89d0dc575b6cb7b3f42229bdc6 Mon Sep 17 00:00:00 2001 From: MayteApolix <83069108+MayteApolix@users.noreply.github.com> Date: Sun, 16 Jan 2022 23:13:02 +0100 Subject: make heading list items inline --- draughts/public/stylesheets/splash.css | 6 +++--- draughts/public/stylesheets/style.css | 3 ++- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/draughts/public/stylesheets/splash.css b/draughts/public/stylesheets/splash.css index a1a8d3b..6cce3ab 100644 --- a/draughts/public/stylesheets/splash.css +++ b/draughts/public/stylesheets/splash.css @@ -150,7 +150,7 @@ h2 { /* Adds labeling and formattnig for the header*/ .how-to-1 > h2::before { content: "1 - "; - display: list-item; + display: list-item-inline; font-weight: lighter; } @@ -172,7 +172,7 @@ h2 { /* Adds labeling and formattnig for the header*/ .how-to-2 > h2::before { content: "2 - "; - display: list-item; + display: list-item-inline; font-weight: lighter; } @@ -199,7 +199,7 @@ h2 { /* Adds labeling and formattnig for the header*/ .how-to-3 > h2::before { - display: list-item; + display: list-item-inline; content: "3 - "; font-weight: lighter; } diff --git a/draughts/public/stylesheets/style.css b/draughts/public/stylesheets/style.css index e200e60..e9f8e90 100644 --- a/draughts/public/stylesheets/style.css +++ b/draughts/public/stylesheets/style.css @@ -9,6 +9,7 @@ --red: #9E3C2F; } + /* Ensures a minimum screen resolution of 800 x 800*/ @media (max-width: 799px), (max-height: 799px) { body::before { @@ -25,4 +26,4 @@ background-color: var(--red); z-index: 100; } - } +} \ No newline at end of file -- cgit v1.2.3