diff options
| author | MayteApolix <83069108+MayteApolix@users.noreply.github.com> | 2022-01-13 02:02:22 +0100 |
|---|---|---|
| committer | MayteApolix <83069108+MayteApolix@users.noreply.github.com> | 2022-01-13 02:02:22 +0100 |
| commit | c66c95e0dc5799c4ac59566af12dd5223c4b6fb8 (patch) | |
| tree | 3af7f72fe20ecda6ae52bde4f314458ab3554cf2 | |
| parent | b5f1e33139d1095aec2f12d751052ce19d26eb50 (diff) | |
ejs splash screen rendering
| -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 88b6b61..6b55c6a 100644 --- a/draughts/app.js +++ b/draughts/app.js @@ -16,9 +16,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> |