From 62d2f8458ddf59def2f046d05bcc47cda2d80bfe Mon Sep 17 00:00:00 2001 From: MayteApolix <83069108+MayteApolix@users.noreply.github.com> Date: Sun, 16 Jan 2022 17:21:08 +0100 Subject: Finished splash screen and stat tracking --- draughts/app.js | 23 +++++- draughts/public/images/players.png | Bin 1972840 -> 12369 bytes draughts/public/splash.html | 56 ++++++++----- draughts/public/stylesheets/game.css | 15 +--- draughts/public/stylesheets/splash.css | 144 ++++++++++++++++++++++++++++++--- draughts/public/stylesheets/style.css | 10 +++ draughts/routes/index.js | 2 +- draughts/statTracker.js | 5 +- draughts/views/splash.ejs | 65 +++++++++------ 9 files changed, 249 insertions(+), 71 deletions(-) create mode 100644 draughts/public/stylesheets/style.css diff --git a/draughts/app.js b/draughts/app.js index 5a4bab7..86a8c69 100644 --- a/draughts/app.js +++ b/draughts/app.js @@ -7,6 +7,8 @@ const Color = require("./public/javascripts/color") const Messages = require("./public/javascripts/messages") const Environment = require("./environment") const indexRouter = require("./routes/index") +const stats = require("./statTracker"); +const { stat } = require("fs") /* Get the server port, if the user doesn't provide one then print an error to STDERR and exit */ const port = process.argv[2] @@ -46,6 +48,8 @@ wss.on("connection", ws => { game.ongoing = true game.messageClient({ head: Messages.WELCOME, body: Color.RED }, ws) game.messageOpponent({ head: Messages.START }, ws) + stats.totalGames++ + stats.ongoingGames++ game.nextTurn() } @@ -57,6 +61,8 @@ wss.on("connection", ws => { ws.on("close", () => { if (game.ongoing) game.messageOpponent({ head: Messages.DISCONNECT }, ws) + stats.ongoingGames-- + stats.totalGames-- env.removeGame(game) }) @@ -66,6 +72,8 @@ wss.on("connection", ws => { case Messages.RESIGN: if (game.ongoing) game.messageOpponent(msg, ws) + stats.ongoingGames-- + stats.totalGames-- env.removeGame(game) break case Messages.MOVED: @@ -80,8 +88,21 @@ wss.on("connection", ws => { } }, ws) game.move(msg.body) - + if (!game.nextTurn()) + var totalMoves = game.history.length + /* Update minimum amount of moves in stat tracker */ + if (totalMoves < stats.minimumMoves){ + stats.minimumMoves = totalMoves + } + /* Update average amount of moves in stat tracker */ + if (stats.averageMoves != Infinity){ + stats.averageMoves = (stats.averageMoves * (stats.totalGames - 1) + totalMoves) / stats.totalGames + } else { + stats.averageMoves = totalMoves + } + /* Remove ongoing game */ + stats.ongoingGames-- env.removeGame(game) break } diff --git a/draughts/public/images/players.png b/draughts/public/images/players.png index ed67933..b175f56 100644 Binary files a/draughts/public/images/players.png and b/draughts/public/images/players.png differ diff --git a/draughts/public/splash.html b/draughts/public/splash.html index 05cbcad..6a84b54 100644 --- a/draughts/public/splash.html +++ b/draughts/public/splash.html @@ -8,31 +8,45 @@ Draughts -
-

Draughts

-

The record for the minimum amount of moves is: 32

-

The average player completes a game in 56 moves

-

There are 3 games currently ongoing

- - -
- -
-
- -
-

Move diagonally

-

Take pieces

-

Crown Kings

-
- - + diff --git a/draughts/public/stylesheets/game.css b/draughts/public/stylesheets/game.css index afec158..1255f15 100644 --- a/draughts/public/stylesheets/game.css +++ b/draughts/public/stylesheets/game.css @@ -1,23 +1,14 @@ -/* Ensure we always have good fonts */ -@import url("https://fonts.googleapis.com/css2?family=Saira&family=Saira+Condensed&display=swap"); - -/* Set some colors */ -:root { - --light-blue: #B3E0F2; - --blue: #007BBD; - --dark-blue: #204C6D; - --darker-blue: #302C5D; - --red: #9E3C2F; -} +@import "style.css"; body { /* Set the default font */ font-family: "Saira Condensed"; - + /* Remove the margin on the sides of the screen */ margin: 0; } + body > div { /* Take up exactly half the screen */ width: 50%; diff --git a/draughts/public/stylesheets/splash.css b/draughts/public/stylesheets/splash.css index 50ee578..71ba346 100644 --- a/draughts/public/stylesheets/splash.css +++ b/draughts/public/stylesheets/splash.css @@ -1,23 +1,145 @@ -/* Ensure we always have good fonts */ +@import "style.css"; @import url("https://fonts.googleapis.com/css2?family=Saira&family=Saira+Condensed&display=swap"); -/* Set some colors */ -:root { - --light-blue: #B3E0F2; - --blue: #007BBD; - --dark-blue: #204C6D; - --darker-blue: #302C5D; - --red: #9E3C2F; -} body { /* Set the default font */ font-family: "Saira Condensed"; - background-color: var(--dark-blue); + background-color: var(--dark-blue); color: white; - /* Remove the margin on the sides of the screen */ margin: 0; } +.container{ + display: grid; + grid-template-columns: repeat(4, 25%); + grid-template-rows: repeat(3, calc(100% / 3)); + grid-template-areas: + "header header how-to-1 church" + "stats stats how-to-2 raadhuis" + "players button how-to-3 windmill"; +} + +.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%; +} + +h1 { + justify-content: start; + font-family: Saira; + font-size: 100px; + 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)); +} + +body > div { + width: 95%; + height: 90vh; + margin-top:8vh; + position: absolute; +} + +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)); +} + +button { + background-color: var(--light-blue); + color: inherit; + font-size: calc(50% + 2vw); + border: none; + padding: 5%; + margin-left: 25%; + margin-top: 10%; + cursor:pointer; + filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); +} + +.how-to-1 > img { + justify-self: center; + width: fit-content; + height: 75%; +} + +.how-to-2 > img { + justify-self: center; + height: 80%; +} +.how-to-3> img { + justify-self: center; + height: 50%; + opacity: 0.9; +} \ No newline at end of file diff --git a/draughts/public/stylesheets/style.css b/draughts/public/stylesheets/style.css new file mode 100644 index 0000000..b8830b8 --- /dev/null +++ b/draughts/public/stylesheets/style.css @@ -0,0 +1,10 @@ +@import url("https://fonts.googleapis.com/css2?family=Saira&family=Saira+Condensed&display=swap"); + +/* Set some colors */ +:root { + --light-blue: #B3E0F2; + --blue: #007BBD; + --dark-blue: #204C6D; + --darker-blue: #302C5D; + --red: #9E3C2F; +} diff --git a/draughts/routes/index.js b/draughts/routes/index.js index 0e5273e..239318f 100644 --- a/draughts/routes/index.js +++ b/draughts/routes/index.js @@ -13,7 +13,7 @@ router.get("/", function(req, res) { res.render("splash.ejs", { minimumMoves: gameStatus.minimumMoves, averageMoves: gameStatus.averageMoves, - totalGames: gameStatus.totalGames + ongoingGames: gameStatus.ongoingGames }); }); diff --git a/draughts/statTracker.js b/draughts/statTracker.js index 51ad34b..4d16084 100644 --- a/draughts/statTracker.js +++ b/draughts/statTracker.js @@ -1,8 +1,9 @@ -const gameStatus = { +var gameStatus = { since: Date.now() /* since we keep it simple and in-memory, keep track of when this object was created */, minimumMoves: Infinity, averageMoves: Infinity, - totalGames: 0 + totalGames: 0, + ongoingGames: 0 } module.exports = gameStatus; diff --git a/draughts/views/splash.ejs b/draughts/views/splash.ejs index 710f3dd..1e86f53 100644 --- a/draughts/views/splash.ejs +++ b/draughts/views/splash.ejs @@ -8,9 +8,12 @@ Draughts -
-

Draughts

-

The record for the minimum amount of moves is: <%= minimumMoves %>

+
+
+

Draughts

+
+
+

The record for the minimum amount of moves is: <%= minimumMoves %>

The average player completes a game in <%= averageMoves %> <%if (averageMoves != 1) { %> moves @@ -18,34 +21,50 @@ move <% } %>

-

There are <%= totalGames %> - <%if (totalGames != 1) { %> +

There + <%if (ongoingGames < 1) { %> + are + <% } else { %> + is + <% } %> + <%= ongoingGames %> + <%if (ongoingGames < 1) { %> games <% } else { %> game <% } %> - currently ongoing

- - -
- -
-
- -
-

Move diagonally

-

Take pieces

-

Crown Kings

-
- - + - + \ No newline at end of file -- cgit v1.2.3