diff options
| -rw-r--r-- | draughts/app.js | 10 | ||||
| -rw-r--r-- | draughts/public/splash.html | 1 | ||||
| -rw-r--r-- | draughts/public/stylesheets/splash.css | 23 | ||||
| -rw-r--r-- | draughts/routes/index.js | 20 | ||||
| -rw-r--r-- | draughts/statTracker.js | 9 | ||||
| -rw-r--r-- | draughts/views/splash.ejs | 51 |
6 files changed, 107 insertions, 7 deletions
diff --git a/draughts/app.js b/draughts/app.js index c736a4a..11a01f0 100644 --- a/draughts/app.js +++ b/draughts/app.js @@ -17,9 +17,13 @@ if (!port) { /* Initialize the routes */ const app = Express() -app.get("/", indexRouter) -app.get("/play", indexRouter) -app.use(Express.static(__dirname + "/public")) + +app.set("view engine", "ejs"); +app.use(Express.static(__dirname + "/public")); + +app.get("/play", indexRouter); +app.get("/", indexRouter); + /* Initialize the server and websocket server */ const server = Http.createServer(app) diff --git a/draughts/public/splash.html b/draughts/public/splash.html index 57a44d8..05cbcad 100644 --- a/draughts/public/splash.html +++ b/draughts/public/splash.html @@ -4,6 +4,7 @@ <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> diff --git a/draughts/public/stylesheets/splash.css b/draughts/public/stylesheets/splash.css new file mode 100644 index 0000000..69a9dbf --- /dev/null +++ b/draughts/public/stylesheets/splash.css @@ -0,0 +1,23 @@ +/* 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; +} + +body { + /* Set the default font */ + font-family: "Saira Condensed"; + background-color: var(--dark-blue); + color: white; + + /* Remove the margin on the sides of the screen */ + margin: 0; +} + + diff --git a/draughts/routes/index.js b/draughts/routes/index.js index 6a8e9ff..a593029 100644 --- a/draughts/routes/index.js +++ b/draughts/routes/index.js @@ -1,8 +1,20 @@ -const router = require("express").Router() -const root = "./public" +const express = require("express"); +const router = express.Router(); + +var gameStatus = require("../statTracker"); + +// Get game screen +router.get("/play", function(req, res) { + res.sendFile("game.html", { root: "./public" }); + }); /* GET home page */ -router.get("/", (_, res) => res.sendFile("splash.html", { root: root })) -router.get("/play", (_, res) => res.sendFile("game.html", { root: root })) +router.get("/", function(req, res) { + res.render("splash.ejs", { + minimumMoves: gameStatus.minimumMoves, + averageMoves: gameStatus.averageMoves, + totalGames: gameStatus.totalGames + }); +}); module.exports = router diff --git a/draughts/statTracker.js b/draughts/statTracker.js new file mode 100644 index 0000000..29f68c0 --- /dev/null +++ b/draughts/statTracker.js @@ -0,0 +1,9 @@ +const 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 + }; + + module.exports = gameStatus; +
\ No newline at end of file diff --git a/draughts/views/splash.ejs b/draughts/views/splash.ejs new file mode 100644 index 0000000..710f3dd --- /dev/null +++ b/draughts/views/splash.ejs @@ -0,0 +1,51 @@ +<!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> + <section id="left"> + <h1>Draughts</h1> + <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 + <% } else { %> + move + <% } %> + </p> + <p>There are <%= totalGames %> + <%if (totalGames != 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"> + <img src="images/oude-kerk.png"></img> + <img src="images/raadshuis.png"></img> + <img src="images/mill.png"></img> + </div> + </section> + +</body> +</html> |