diff options
| -rw-r--r-- | draughts/app.js | 23 | ||||
| -rw-r--r-- | draughts/public/images/players.png | bin | 1972840 -> 12369 bytes | |||
| -rw-r--r-- | draughts/public/splash.html | 56 | ||||
| -rw-r--r-- | draughts/public/stylesheets/game.css | 15 | ||||
| -rw-r--r-- | draughts/public/stylesheets/splash.css | 144 | ||||
| -rw-r--r-- | draughts/public/stylesheets/style.css | 10 | ||||
| -rw-r--r-- | draughts/routes/index.js | 2 | ||||
| -rw-r--r-- | draughts/statTracker.js | 5 | ||||
| -rw-r--r-- | draughts/views/splash.ejs | 65 |
9 files changed, 249 insertions, 71 deletions
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 Binary files differindex ed67933..b175f56 100644 --- a/draughts/public/images/players.png +++ b/draughts/public/images/players.png 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 @@ <title>Draughts</title> </head> <body> - <section id="left"> - <h1>Draughts</h1> - <p>The record for the minimum amount of moves is: 32</p> - <p>The average player completes a game in 56 moves</p> - <p>There are 3 games currently ongoing</p> - <img src="images/players.png"></img> - - <form action="/play" method="get"> - <button type="submit">PLAY</button> - </form> - </section> - - <section id="how-to"> - <p>Move diagonally</p> - <p>Take pieces</p> - <p>Crown Kings</p> - </section> - - <section id="right"> - <div id="decoration-left"> + <div class="container"> + <div class="header"> + <h1>Draughts</h1> + </div> + <div class="stats"> + <p>The record for the minimum amount of moves is: 32</p> + <p>The average player completes a game in 56 moves</p> + <p>There are 3 games currently ongoing</p> + </div> + <div class="icon"> + <img src="images/players.png"></img> + </div> + <div class="button"> + <form action="/play" method="get"> + <button type="submit">PLAY</button> + </form> + </div> + <div class="how how-to-1"> + <h2>Move diagonally</h2> + <img src="images/how-to-1.png"></img> + </div> + <div class="how how-to-2"> + <h2>Take pieces</h2> + <img src="images/how-to-2.png"></img> + </div> + <div class="how how-to-3"> + <h2>Crown Kings</h2> + <img src="images/redpiece-king.svg"></img> + </div> + <div class="right church"> <img src="images/oude-kerk.png"></img> + </div> + <div class="right raadhuis"> <img src="images/raadshuis.png"></img> + </div> + <div class="right windmill"> <img src="images/mill.png"></img> </div> - </section> + </div> </body> </html> 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 @@ <title>Draughts</title> </head> <body> - <section id="left"> - <h1>Draughts</h1> - <p>The record for the minimum amount of moves is: <%= minimumMoves %></p> + <div class="container"> + <div class="header"> + <h1>Draughts</h1> + </div> + <div class="stats"> + <p>The record for the minimum amount of moves is: <%= minimumMoves %></p> <p>The average player completes a game in <%= averageMoves %> <%if (averageMoves != 1) { %> moves @@ -18,34 +21,50 @@ move <% } %> </p> - <p>There are <%= totalGames %> - <%if (totalGames != 1) { %> + <p>There + <%if (ongoingGames < 1) { %> + are + <% } else { %> + is + <% } %> + <%= ongoingGames %> + <%if (ongoingGames < 1) { %> games <% } else { %> game <% } %> - currently ongoing</p> - <img src="images/players.png"></img> - - <form action="/play" method="get"> - <button type="submit">PLAY</button> - </form> - </section> - - <section id="how-to"> - <p>Move diagonally</p> - <p>Take pieces</p> - <p>Crown Kings</p> - </section> - - <section id="right"> - <div id="decoration-left"> + </div> + <div class="icon"> + <img src="images/players.png"></img> + </div> + <div class="button"> + <form action="/play" method="get"> + <button type="submit">PLAY</button> + </form> + </div> + <div class="how how-to-1"> + <h2>Move diagonally</h2> + <img src="images/how-to-1.png"></img> + </div> + <div class="how how-to-2"> + <h2>Take pieces</h2> + <img src="images/how-to-2.png"></img> + </div> + <div class="how how-to-3"> + <h2>Crown Kings</h2> + <img src="images/redpiece-king.svg"></img> + </div> + <div class="right church"> <img src="images/oude-kerk.png"></img> + </div> + <div class="right raadhuis"> <img src="images/raadshuis.png"></img> + </div> + <div class="right windmill"> <img src="images/mill.png"></img> </div> - </section> + </div> </body> -</html> +</html>
\ No newline at end of file |
