empires: Add an initial "choose nickname" step before joining a game

This lodges the selected nickname in the current session, (using a new
/profile API also added in this commit).

Having the nickname stored in the session has the advantage that when
playing multiple games in a row, a player won't need to keep re-typing
their own name each time.

diff --git a/empires.js b/empires.js
index 69fc7c233a64c146b40cff97bb6826cb3e01be29..a8c177109a08f409969be419951e97da59d2a96f 100644 (file)
--- a/empires.js
+++ b/empires.js
@@ -2,12 +2,18 @@ const express = require("express");
 const cors = require("cors");
 const body_parser = require("body-parser");
 const path = require("path");
+const nunjucks = require("nunjucks");
 
 const app = express();
 app.use(cors());
 app.use(body_parser.urlencoded({ extended: false }));
 app.use(body_parser.json());
 
+nunjucks.configure("templates", {
+  autoescape: true,
+  express: app
+});
+
 const GameState = {
   JOIN:    1,
   REVEAL:  2,
@@ -250,7 +256,10 @@ function handle_events(request, response) {
 }
 
 app.get('/', (request, response) => {
-  response.sendFile(path.join(__dirname, './game.html'));
+  if (! request.session.nickname)
+    response.render('choose-nickname.html');
+  else
+    response.sendFile(path.join(__dirname, './game.html'));
 });
 
 app.post('/register', (request, response) => {

diff --git a/lmno.js b/lmno.js
index f5de9eb17228c10cac827ee87f468c7fa2fca7ad..c990cac3a290be99bf16d57f7d581442970bf4f4 100644 (file)
--- a/lmno.js
+++ b/lmno.js
@@ -212,6 +212,16 @@ app.post('/login', async (request, response) => {
   return;
 });
 
+/* API to set uer profile information */
+app.put('/profile', (request, response) => {
+  const nickname = request.body.nickname;
+  if (nickname) {
+    request.session.nickname = nickname;
+    request.session.save();
+  }
+  response.send();
+});
+
 /* An admin page (only available to admin users, of course) */
 app.get('/admin/', auth_admin, (request, response) => {
   let active = [];

diff --git a/templates/choose-nickname.html b/templates/choose-nickname.html
new file mode 100644 (file)
index 0000000..86c3413
--- /dev/null
+++ b/templates/choose-nickname.html
@@ -0,0 +1,45 @@
+{% extends "base.html" %}
+
+{% block head %}
+<script>
+  function set_nickname_loadend() {
+    console.log("Attempting reload...");
+    /* Reload page to get actual game content instead of nickname form. */
+    window.location.reload(true);
+  }
+
+  function set_nickname(form) {
+    const nickname = form.nickname.value;
+
+    var request = new XMLHttpRequest();
+    request.addEventListener("loadend", () => set_nickname_loadend());
+    request.open("PUT", "/profile");
+    request.setRequestHeader("Content-Type", "application/json; charset=UTF-8");
+    request.send(`{"nickname": "${nickname}"}`);
+  }
+</script>
+{% endblock %}
+
+{% block page %}
+<h1>
+  Welcome to Empires
+</h1>
+
+<p>
+  To join the game, please set your own nickname:
+</p>
+
+<!-- The return false prevents the page from being reloaded -->
+<form id="nickname-form" onsubmit="set_nickname(this); return false">
+  <div class="form-field large">
+    <label for="nickname">Nickname</label>
+    <input type="text" id="nickname" required>
+  </div>
+
+  <div class="form-field large">
+    <button type="submit">
+      Join the game
+    </button>
+  </div>
+</form>
+{% endblock %}