aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorThomas Voss <thomasvoss@live.com> 2022-01-13 11:32:13 +0100
committerThomas Voss <thomasvoss@live.com> 2022-01-13 11:32:13 +0100
commit0e6b99d40c7cd5c2d96ff0316c2721b393c27f90 (patch)
treeab31dc9f469183a53da65848408cd1b742d1b3e0
parent99b531521c990a9fad08a231ba53a81cde70ce78 (diff)
parentc66c95e0dc5799c4ac59566af12dd5223c4b6fb8 (diff)
Merge branch 'main' of github.com:MayteSteeghs/draughts
-rw-r--r--draughts/app.js10
-rw-r--r--draughts/public/splash.html1
-rw-r--r--draughts/public/stylesheets/splash.css23
-rw-r--r--draughts/routes/index.js20
-rw-r--r--draughts/statTracker.js9
-rw-r--r--draughts/views/splash.ejs51
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>