aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorThomas Voss <thomasvoss@live.com> 2022-01-16 20:16:07 +0100
committerThomas Voss <thomasvoss@live.com> 2022-01-16 20:16:07 +0100
commit406e54709d0b04db00fcd527a6bc2989dc497047 (patch)
tree126ad75b19559789b6e59a2a9094b923e29c68a3
parente56c4fe5175c7be88e48e6cf0028891a8bb5bf30 (diff)
parent62d2f8458ddf59def2f046d05bcc47cda2d80bfe (diff)
Merge remote-tracking branch 'origin/Mayte'
Diffstat
-rw-r--r--draughts/app.js23
-rw-r--r--draughts/public/images/players.pngbin1972840 -> 12369 bytes
-rw-r--r--draughts/public/splash.html56
-rw-r--r--draughts/public/stylesheets/game.css13
-rw-r--r--draughts/public/stylesheets/splash.css144
-rw-r--r--draughts/public/stylesheets/style.css10
-rw-r--r--draughts/routes/index.js2
-rw-r--r--draughts/statTracker.js5
-rw-r--r--draughts/views/splash.ejs65
9 files changed, 248 insertions, 70 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
index ed67933..b175f56 100644
--- a/draughts/public/images/players.png
+++ b/draughts/public/images/players.png
Binary files differ
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 274689a..e1dc996 100644
--- a/draughts/public/stylesheets/game.css
+++ b/draughts/public/stylesheets/game.css
@@ -1,5 +1,4 @@
-/* Ensure we always have good fonts */
-@import url("https://fonts.googleapis.com/css2?family=Saira&family=Saira+Condensed&display=swap");
+@import "style.css";
@keyframes spin {
from {
@@ -10,15 +9,6 @@
}
}
-/* Set some colors */
-:root {
- --light-blue: #B3E0F2;
- --blue: #007BBD;
- --dark-blue: #204C6D;
- --darker-blue: #302C5D;
- --red: #9E3C2F;
-}
-
html, body {
/* Make the body take up the entire screen */
margin: 0;
@@ -34,6 +24,7 @@ body {
grid-template-columns: 50% 50%;
}
+
body > div {
/* Center all children */
display: flex;
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