Show "join" page when not logged in.

Static page showing limited info and a call to action to login or sign up.

3 files changed, 109 insertions, 41 deletions

diff --git a/public/join.js b/public/join.js
index e51b548..cc8d325 100644
--- a/public/join.js
+++ b/public/join.js
@@ -120,11 +120,11 @@ function start_event_source() {
 }
 
 function is_friend(p) {
-	return whitelist.includes(p.user_id)
+	return whitelist && whitelist.includes(p.user_id)
 }
 
 function is_enemy(p) {
-	return blacklist.includes(p.user_id)
+	return blacklist && blacklist.includes(p.user_id)
 }
 
 function is_active(player, role) {
@@ -148,10 +148,81 @@ function action_link(player, action, color, text) {
 }
 
 function update() {
+	update_common()
+	if (user_id)
+		update_login()
+	else
+		update_no_login()
+}
+
+function update_common() {
 	if (game.scenario !== "Standard")
 		document.querySelector("h1").textContent = game.title_name + " - " + game.scenario
 	else
 		document.querySelector("h1").textContent = game.title_name
+
+	let message = window.message
+	if (game.status === 0) {
+		if (ready && (game.owner_id === user_id))
+			message.innerHTML = "Ready to start..."
+		else if (ready)
+			message.innerHTML = `Waiting for ${game.owner_name} to start the game...`
+		else
+			message.innerHTML = "Waiting for players to join..."
+	} else if (game.status === 1) {
+		message.innerHTML = `<a href="/${game.title_id}/play.html?game=${game.game_id}">Observe</a>`
+	} else if (game.status === 2) {
+		message.innerHTML = `<a href="/${game.title_id}/play.html?game=${game.game_id}">Review</a>`
+	} else if (game.status === 3) {
+		message.innerHTML = "Archived"
+	}
+}
+
+function update_no_login() {
+	for (let i = 0; i < roles.length; ++i) {
+		let role = roles[i]
+		let role_id = "role_" + role.replace(/ /g, "_")
+		if (game.is_random && game.status === 0)
+			role = "Random " + (i+1)
+		document.getElementById(role_id + "_name").textContent = role
+		let player = players.find(p => p.role === role)
+		let element = document.getElementById(role_id)
+
+		if (player) {
+			element.classList.remove("is_invite")
+			switch (game.status) {
+			case 3:
+				element.innerHTML = player.name
+				break
+			case 2:
+				element.innerHTML = user_link(player)
+				break
+			case 1:
+				if (player.is_invite) {
+					element.classList.add("is_invite")
+					element.innerHTML = user_link(player) + " ?"
+				} else {
+					element.classList.toggle("is_active", is_active(player, role))
+					element.innerHTML = user_link(player)
+				}
+				break
+			case 0:
+				if (player.is_invite) {
+					element.classList.add("is_invite")
+					element.innerHTML = user_link(player) + " ?"
+				} else {
+					element.innerHTML = user_link(player)
+				}
+				break
+			}
+		} else {
+			element.classList.remove("is_invite")
+			element.innerHTML = `<i>Empty</i>`
+		}
+	}
+}
+
+function update_login() {
 	for (let i = 0; i < roles.length; ++i) {
 		let role = roles[i]
 		let role_id = "role_" + role.replace(/ /g, "_")
@@ -257,22 +328,6 @@ function update() {
 		}
 	}
 
-	let message = window.message
-	if (game.status === 0) {
-		if (ready && (game.owner_id === user_id))
-			message.innerHTML = "Ready to start..."
-		else if (ready)
-			message.innerHTML = `Waiting for ${game.owner_name} to start the game...`
-		else
-			message.innerHTML = "Waiting for players to join..."
-	} else if (game.status === 1) {
-		message.innerHTML = `<a href="/${game.title_id}/play.html?game=${game.game_id}">Observe</a>`
-	} else if (game.status === 2) {
-		message.innerHTML = `<a href="/${game.title_id}/play.html?game=${game.game_id}">Review</a>`
-	} else if (game.status === 3) {
-		message.innerHTML = "Archived"
-	}
-
 	if (game.owner_id === user_id) {
 		window.start_button.disabled = !ready
 		window.start_button.classList = (game.status === 0) ? "" : "hide"
@@ -291,7 +346,7 @@ function update() {
 
 window.onload = function () {
 	update()
-	if (game.status < 2) {
+	if (user_id && game.status < 2) {
 		start_event_source()
 		timer = setInterval(start_event_source, 15000)
 	}
diff --git a/server.js b/server.js
index 7f87bf5..d964048 100644
--- a/server.js
+++ b/server.js
@@ -1789,7 +1789,7 @@ function update_join_clients_players(game_id) {
 	}
 }
 
-app.get('/join/:game_id', must_be_logged_in, function (req, res) {
+app.get('/join/:game_id', function (req, res) {
 	let game_id = req.params.game_id | 0
 	let game = SQL_SELECT_GAME_VIEW.get(game_id)
 	if (!game)
@@ -1800,17 +1800,24 @@ app.get('/join/:game_id', must_be_logged_in, function (req, res) {
 
 	let roles = get_game_roles(game.title_id, game.scenario, options)
 	let players = SQL_SELECT_PLAYERS_JOIN.all(game_id)
-	let whitelist = SQL_SELECT_CONTACT_WHITELIST.all(req.user.user_id)
-	let blacklist = SQL_SELECT_CONTACT_BLACKLIST.all(req.user.user_id)
+
+	let whitelist = null
+	let blacklist = null
 	let friends = null
-	if (game.owner_id === req.user.user_id)
-		friends = SQL_SELECT_CONTACT_FRIEND_NAMES.all(req.user.user_id)
+
+	if (req.user) {
+		whitelist = SQL_SELECT_CONTACT_WHITELIST.all(req.user.user_id)
+		blacklist = SQL_SELECT_CONTACT_BLACKLIST.all(req.user.user_id)
+		if (game.owner_id === req.user.user_id)
+			friends = SQL_SELECT_CONTACT_FRIEND_NAMES.all(req.user.user_id)
+	}
+
 	let ready = (game.status === STATUS_OPEN) && is_game_ready(game.player_count, players)
 	game.ctime = human_date(game.ctime)
 	game.mtime = human_date(game.mtime)
 	res.render('join.pug', {
 		user: req.user, game, roles, players, ready, whitelist, blacklist, friends,
-		limit: check_join_game_limit(req.user)
+		limit: req.user ? check_join_game_limit(req.user) : null
 	})
 })
 
diff --git a/views/join.pug b/views/join.pug
index d75ef4d..280e2e6 100644
--- a/views/join.pug
+++ b/views/join.pug
@@ -22,7 +22,7 @@ html
 			let game = !{ JSON.stringify(game) }
 			let roles = !{ JSON.stringify(roles) }
 			let players = !{ JSON.stringify(players) }
-			let user_id = !{ user.user_id }
+			let user_id = !{ user ? user.user_id : 0 }
 			let whitelist = !{ JSON.stringify(whitelist) }
 			let blacklist = !{ JSON.stringify(blacklist) }
 			let friends = !{ JSON.stringify(friends) }
@@ -37,13 +37,15 @@ html
 			else
 				h1 #{game.title_name} - #{game.scenario}
 
+			div.logo
+				+gamecover(game.title_id)
+
 			if limit && game.status < 1
 				p.error= limit
+			if !user
+				p.error You are not logged in!
 			p.error#error
 
-			div.logo
-				+gamecover(game.title_id)
-
 			if game.owner_id
 				if game.is_private
 					p Created #{game.ctime} by <a class="black" href="/user/#{game.owner_name}">#{game.owner_name}</a> (private).
@@ -54,7 +56,7 @@ html
 
 			if game.status > 1
 				p Finished #{game.mtime}.
-			else if game.mtime !== "never"
+			else if game.status > 0
 				p Last changed #{game.mtime}.
 
 			unless game.human_options === "None"
@@ -72,17 +74,18 @@ html
 				p
 					i= game.notice
 
-			dialog(id="invite")
-				| Invite a friend:
-				br
-				input(id="invite_user" type="text" list="friends" onchange="send_invite()")
-				datalist(id="friends")
-					if friends
-						each who in friends
-							option= who
-				br
-				button(onclick="send_invite()") Invite
-				button(onclick="hide_invite()") Cancel
+			if user
+				dialog(id="invite")
+					| Invite a friend:
+					br
+					input(id="invite_user" type="text" list="friends" onchange="send_invite()")
+					datalist(id="friends")
+						if friends
+							each who in friends
+								option= who
+					br
+					button(onclick="send_invite()") Invite
+					button(onclick="hide_invite()") Cancel
 
 			p
 			table
@@ -98,3 +101,6 @@ html
 			p
 				button.hide#delete_button(onclick="confirm_delete()") Delete
 				button.hide#start_button(onclick="start()" disabled) Start
+
+			if !user && !ready
+				p <a href="/login">Login</a> or <a href="/signup">sign up</a> to play this game.