diff options
| -rw-r--r-- | draughts/app.js | 28 | ||||
| -rw-r--r-- | draughts/environment.js | 7 | ||||
| -rw-r--r-- | draughts/public/splash.html | 52 | ||||
| -rw-r--r-- | draughts/public/stylesheets/game.css | 31 | ||||
| -rw-r--r-- | draughts/statTracker.js | 5 | ||||
| -rw-r--r-- | draughts/views/splash.ejs | 16 |
6 files changed, 48 insertions, 91 deletions
diff --git a/draughts/app.js b/draughts/app.js index 6d4901a..94dca46 100644 --- a/draughts/app.js +++ b/draughts/app.js @@ -1,14 +1,14 @@ const Http = require("http") const WebSocket = require("ws") const Express = require("express") +const { stat } = require("fs") const Game = require("./game") 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") +const stats = require("./statTracker") /* Get the server port, if the user doesn't provide one then print an error to STDERR and exit */ const port = process.argv[2] @@ -24,7 +24,6 @@ app.use(Express.static(__dirname + "/public")) app.get("/", indexRouter) app.get("/play", indexRouter) - /* Initialize the server and websocket server */ const server = Http.createServer(app) const wss = new WebSocket.Server({ server }) @@ -48,8 +47,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++ + stats.totalGames++ game.nextTurn() } @@ -59,9 +58,10 @@ wss.on("connection", ws => { * array. */ ws.on("close", () => { - if (game.ongoing) + if (game.ongoing) { game.messageOpponent({ head: Messages.DISCONNECT }, ws) - stats.ongoingGames-- + stats.ongoingGames-- + } stats.totalGames-- env.removeGame(game) }) @@ -89,18 +89,18 @@ wss.on("connection", ws => { }, ws) game.move(msg.body) - if (!game.nextTurn()){ - var totalMoves = game.history.length + if (!game.nextTurn()) { + const totalMoves = game.history.length + /* Update minimum amount of moves in stat tracker */ - if (totalMoves < stats.minimumMoves){ - stats.minimumMoves = totalMoves - } + stats.minimumMoves = Math.min(totalMoves, stats.minimumMoves) + /* Update average amount of moves in stat tracker */ - if (stats.averageMoves != Infinity){ + if (stats.averageMoves != Infinity) stats.averageMoves = (stats.averageMoves * (stats.totalGames - 1) + totalMoves) / stats.totalGames - } else { + else stats.averageMoves = totalMoves - } + /* Remove ongoing game */ stats.ongoingGames-- env.removeGame(game) diff --git a/draughts/environment.js b/draughts/environment.js index 7f1e997..7518185 100644 --- a/draughts/environment.js +++ b/draughts/environment.js @@ -1,10 +1,5 @@ -/* A class representing the complete environment. It holds all the games as well as some statistics - * to be displayed on the splash screen. - */ +/* A class representing the complete environment. It holds all the games currently being played. */ const Environment = function() { - this.minimumMoves = Infinity, - this.averageMoves = Infinity, - this.totalGames = 0, this.games = [] } diff --git a/draughts/public/splash.html b/draughts/public/splash.html deleted file mode 100644 index cdb627e..0000000 --- a/draughts/public/splash.html +++ /dev/null @@ -1,52 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8"> - <meta http-equiv="X-UA-Compatible" content="IE=edge"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <link rel="stylesheet" type="text/css" href="stylesheets/splash.css" /> - <title>Draughts</title> -</head> -<body> - <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 id="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> - </div> - -</body> -</html> diff --git a/draughts/public/stylesheets/game.css b/draughts/public/stylesheets/game.css index 1255f15..e1dc996 100644 --- a/draughts/public/stylesheets/game.css +++ b/draughts/public/stylesheets/game.css @@ -1,20 +1,31 @@ @import "style.css"; +@keyframes spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +html, body { + /* Make the body take up the entire screen */ + margin: 0; + height: 100%; +} + body { /* Set the default font */ font-family: "Saira Condensed"; - - /* Remove the margin on the sides of the screen */ - margin: 0; + + /* Split up the body into 2 halves with a grid */ + display: grid; + grid-template-columns: 50% 50%; } body > div { - /* Take up exactly half the screen */ - width: 50%; - height: 100%; - position: absolute; - /* Center all children */ display: flex; align-items: center; @@ -134,6 +145,10 @@ body > div { cursor: pointer; } +#resign:active { + animation: spin 1s 5 linear; +} + #resign p { /* Make the resign text look nice */ font-style: normal; diff --git a/draughts/statTracker.js b/draughts/statTracker.js index 4d16084..b5a09b9 100644 --- a/draughts/statTracker.js +++ b/draughts/statTracker.js @@ -1,9 +1,8 @@ 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, - ongoingGames: 0 + ongoingGames: 0, + totalGames: 0 } module.exports = gameStatus; diff --git a/draughts/views/splash.ejs b/draughts/views/splash.ejs index 335a347..55a24bd 100644 --- a/draughts/views/splash.ejs +++ b/draughts/views/splash.ejs @@ -16,22 +16,22 @@ <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 + moves <% } else { %> move <% } %> </p> <p>There - <%if (ongoingGames < 1) { %> - are - <% } else { %> + <%if (ongoingGames == 1) { %> is + <% } else { %> + are <% } %> <%= ongoingGames %> - <%if (ongoingGames < 1) { %> - games - <% } else { %> + <%if (ongoingGames == 1) { %> game + <% } else { %> + games <% } %> currently ongoing</p> </div> @@ -67,4 +67,4 @@ </div> </body> -</html>
\ No newline at end of file +</html> |