Add user links to join page.

10 files changed, 60 insertions, 63 deletions

diff --git a/public/join.js b/public/join.js
index 85445dc..362800d 100644
--- a/public/join.js
+++ b/public/join.js
@@ -135,8 +135,12 @@ function is_solo() {
 	return players.every(p => p.user_id === players[0].user_id)
 }
 
+function user_link(player) {
+	return `<a class="black" href="/user/${player.name}">${player.name}</a>`
+}
+
 function play_link(player) {
-	return `<a href="/${game.title_id}/play.html?game=${game.game_id}&role=${encodeURIComponent(player.role)}">${player.name}</a>`
+	return `\xbb <a href="/${game.title_id}/play.html?game=${game.game_id}&role=${encodeURIComponent(player.role)}">Play</a>`
 }
 
 function action_link(player, action, color, text) {
@@ -162,16 +166,16 @@ function update() {
 				if (player.user_id === user_id)
 					element.innerHTML = play_link(player)
 				else
-					element.innerHTML = player.name
+					element.innerHTML = user_link(player)
 				break
 			case 1:
 				element.classList.toggle("is_active", is_active(player, role))
 				if (player.user_id === user_id)
 					element.innerHTML = play_link(player) + action_link(player, "part", "red", "\u274c")
 				else if (game.owner_id === user_id)
-					element.innerHTML = player.name + action_link(player, "kick", "red", "\u274c")
+					element.innerHTML = user_link(player) + action_link(player, "kick", "red", "\u274c")
 				else
-					element.innerHTML = player.name
+					element.innerHTML = user_link(player)
 				break
 			case 0:
 				if (player.is_invite) {
@@ -180,22 +184,18 @@ function update() {
 						element.innerHTML = player.name + " ?" +
 							action_link(player, "part", "red", "\u274c") +
 							action_link(player, "accept", "green", "\u2714")
-					else if (player.user_id === user_id)
-						element.innerHTML = player.name + " ?" + action_link(player, "part", "red", "\u274c")
 					else if (game.owner_id === user_id)
-						element.innerHTML = player.name + " ?" + action_link(player, "kick", "red", "\u274c")
+						element.innerHTML = user_link(player) + " ?" + action_link(player, "kick", "red", "\u274c")
 					else
-						element.innerHTML = player.name + " ?"
+						element.innerHTML = user_link(player) + " ?"
 				} else {
 					element.classList.remove("is_invite")
-					if (player.user_id === user_id && player.is_invite)
-						element.innerHTML = player.name + action_link(player, "part", "red", "\u274c")
-					else if (player.user_id === user_id)
+					if (player.user_id === user_id)
 						element.innerHTML = player.name + action_link(player, "part", "red", "\u274c")
 					else if (game.owner_id === user_id)
-						element.innerHTML = player.name + action_link(player, "kick", "red", "\u274c")
+						element.innerHTML = user_link(player) + action_link(player, "kick", "red", "\u274c")
 					else
-						element.innerHTML = player.name
+						element.innerHTML = user_link(player)
 				}
 				break
 			}
@@ -212,13 +212,11 @@ function update() {
 				element.innerHTML = `<i>Empty</i>`
 				break
 			case 1:
-				element.innerHTML = `<a class="join" href="javascript:join('${role}')">Join</a>`
-				break
 			case 0:
 				if (game.owner_id === user_id)
-					element.innerHTML = `<a class="join" href="javascript:join('${role}')">Join</a><a class="green" href="javascript:show_invite('${role}')">\u{2795}</a>`
+					element.innerHTML = `\xbb <a class="join" href="javascript:join('${role}')">Join</a><a class="green" href="javascript:show_invite('${role}')">\u{2795}</a>`
 				else
-					element.innerHTML = `<a class="join" href="javascript:join('${role}')">Join</a>`
+					element.innerHTML = `\xbb <a class="join" href="javascript:join('${role}')">Join</a>`
 				break
 			}
 			element.classList.remove("friend")
diff --git a/public/style.css b/public/style.css
index 5d8940c..0a950e6 100644
--- a/public/style.css
+++ b/public/style.css
@@ -12,6 +12,8 @@ h1 { margin: 16px 0 16px -1px; font-size: 24px; }
 h2 { margin: 16px 0 16px -1px; font-size: 20px; }
 h3 { margin: 16px 0 8px -1px; font-size: 16px; }
 a { color: blue; }
+a.black { text-decoration: none; color: black; }
+a.black:hover { text-decoration: underline; color: blue; }
 .w { white-space: nowrap; }
 .r { text-align: right; }
 
@@ -31,8 +33,8 @@ header nav {
 	flex-wrap: wrap;
 	justify-content: end;
 }
-header nav a { display: block; margin: 0 16px; color: black; }
-header nav a:hover { color: blue; }
+header nav a { display: block; margin: 0 12px; color: black }
+header nav a:hover { color: blue }
 article { margin: 2em; }
 article p, article dl, article ul { max-width: 50rem; }
 
@@ -47,6 +49,7 @@ div.logo img {
 
 input[type="checkbox"], input[type="radio"] {
 	margin-right: 7px;
+	accent-color: black;
 }
 input[type="text"], input[type="password"], input[type="email"], textarea {
 	padding: 5px;
@@ -106,8 +109,6 @@ th, td {
 tbody tr:nth-child(2n) {
 	background-color: whitesmoke;
 }
-table a:not(:hover) { text-decoration: none; color: black; }
-td.command a { text-decoration: underline; color: blue; }
 td.is_active { background-color: lemonchiffon; }
 
 /* FORUM AND MESSAGE POSTS */
@@ -154,6 +155,7 @@ article hr + p { font-style: italic; }
 }
 .game_head {
 	border-bottom: 1px solid black;
+	line-height: 23px;
 }
 .game_info {
 	font-family: "Source Serif SmText", "Georgia", "Noto Emoji", "Dingbats", serif;
@@ -207,8 +209,6 @@ article hr + p { font-style: italic; }
 .game_item.your_turn .game_main { background-color: lightyellow }
 .game_item.your_turn a:hover { color: #860 }
 
-.game_item.unread .game_head div::after { content: " \1f4dd  "; }
-
 /* DARK MODE */
 @media (prefers-color-scheme: dark) {
 	body { background-color: silver }
diff --git a/views/contacts.pug b/views/contacts.pug
index 62840f9..78f1f5b 100644
--- a/views/contacts.pug
+++ b/views/contacts.pug
@@ -25,7 +25,7 @@ html
 					each who in friends
 						tr
 							td
-								a(href="/user/"+who.name)= who.name
+								a.black(href="/user/"+who.name)= who.name
 							td= who.atime
 							td.r
 								a.blue(href="/message/send/"+who.name) &#x1f4dd;
@@ -46,7 +46,7 @@ html
 						each who in enemies
 							tr
 								td
-									a(href="/user/"+who.name)= who.name
+									a.black(href="/user/"+who.name)= who.name
 								td.r
 									a.red(href="/contact/remove/"+who.name) &#x274c;
 						else
diff --git a/views/forum_search.pug b/views/forum_search.pug
index 1301b76..f7d1b42 100644
--- a/views/forum_search.pug
+++ b/views/forum_search.pug
@@ -18,8 +18,8 @@ html
 				tobdy
 					each row in results
 						tr
-							td: a(href="/user/"+row.author)= row.author
-							td: a(href="/forum/thread/"+row.thread_id+"#"+row.post_id)= row.subject
+							td: a.black(href="/user/"+row.author)= row.author
+							td: a.black(href="/forum/thread/"+row.thread_id+"#"+row.post_id)= row.subject
 							td= row.snippet
 
 			if user
diff --git a/views/forum_view.pug b/views/forum_view.pug
index ac9201d..1f70c8c 100644
--- a/views/forum_view.pug
+++ b/views/forum_view.pug
@@ -23,24 +23,24 @@ html
 					each row in threads
 						tr(class=row.is_read?"read":"unread")
 							td
-								a(href="/forum/thread/"+row.thread_id)= row.subject
+								a.black(href="/forum/thread/"+row.thread_id)= row.subject
 							td.r= row.count
 							td.w= row.mtime
 				tfoot
 					tr
 						td(colspan=4)
 							if current_page > 1
-								| #[a(href="/forum/page/"+(current_page-1)) &#x2190;]
+								| #[a.black(href="/forum/page/"+(current_page-1)) &#x2190;]
 								|
 							- for (let p=1; p<=page_count && p<=30; ++p)
 								if p === current_page
 									| (#{p})
 									|
 								else
-									| #[a(href="/forum/page/"+p)= p]
+									| #[a.black(href="/forum/page/"+p)= p]
 									|
 							if current_page < page_count
-								| #[a(href="/forum/page/"+(current_page+1)) &#x2192;]
+								| #[a.black(href="/forum/page/"+(current_page+1)) &#x2192;]
 
 			if user
 				p
diff --git a/views/head.pug b/views/head.pug
index fa2b042..0fc415b 100644
--- a/views/head.pug
+++ b/views/head.pug
@@ -43,8 +43,8 @@ mixin gamelist(list,hide_title=0)
 			div
 				-
 					let className = "game_item"
+					let chat_icon = ""
 					if (item.your_turn) className += " your_turn"
-					if (item.is_unread) className += " unread"
 					if (item.status === 0 && item.join_count === 0) className += " open replacement"
 					else if (item.status === 0 && item.join_count !== item.player_count) className += " open"
 					else if (item.status === 0 && item.join_count === item.player_count) className += " ready"
@@ -52,15 +52,16 @@ mixin gamelist(list,hide_title=0)
 					else if (item.status === 1 && item.join_count === item.player_count) className += " active"
 					else if (item.status === 2) className += " finished"
 					else if (item.status === 3) className += " archived"
+					if (item.is_unread) chat_icon = "\u{1f4dd}"
 
 				div(class=className)
 					div.game_head
 						if item.scenario.length <= 2
 							div
-								| <a href="/join/#{item.game_id}">#{item.game_id} &#x2013; #{item.title_name} (#{item.scenario})</a>
+								| <a href="/join/#{item.game_id}">#{item.game_id} &#x2013; #{item.title_name} (#{item.scenario})</a> #{chat_icon}
 						else
 							div
-								| <a href="/join/#{item.game_id}">#{item.game_id} &#x2013; #{item.title_name}</a>
+								| <a href="/join/#{item.game_id}">#{item.game_id} &#x2013; #{item.title_name}</a> #{chat_icon}
 
 						case item.status
 							when 0
diff --git a/views/join.pug b/views/join.pug
index 2e6bf08..ced1fe3 100644
--- a/views/join.pug
+++ b/views/join.pug
@@ -10,14 +10,13 @@ html
 		style.
 			table { min-width: 0; }
 			th,td { border: 1px solid black; }
-			td a.red { text-decoration: none; color: brown; font-size: 15px; float: right; }
-			td a.green { text-decoration: none; color: green; font-size: 15px; float: right; }
-			td a { text-decoration: underline; color: blue; }
+			a.red { text-decoration: none; color: brown; font-size: 15px; float: right; }
+			a.green { text-decoration: none; color: green; font-size: 15px; float: right; }
 			th { white-space: nowrap; background-color: gainsboro; }
 			td { width: 180px; background-color: white; }
 			#message { background-color: whitesmoke; }
 			.hide { display: none; }
-			td.is_invite { color: gray }
+			td.is_invite { background-color: honeydew }
 			td.enemy { background-color: #f66 }
 			td.enemy::before { content: "\1f6ab    "; color: #000; font-size: 15px; }
 		script.
@@ -33,34 +32,33 @@ html
 	body
 		include header
 		article
-			h1= game.title_name
+			if game.scenario === "Standard"
+				h1 #{game.title_name}
+			else
+				h1 #{game.title_name} - #{game.scenario}
 			p.error#error
 
 			div.logo
 				+gamecover(game.title_id)
 
-			div Scenario: #{game.scenario}
-
-			unless game.human_options === "None"
-				div Options: #{game.human_options}
-
 			if game.owner_id
-				div
-					if game.is_private
-						| Owner: <a href="/user/#{game.owner_name}">#{game.owner_name}</a> (private)
-					else
-						| Owner: <a href="/user/#{game.owner_name}">#{game.owner_name}</a>
+				if game.is_private
+					p Created #{game.ctime} by <a class="black" href="/user/#{game.owner_name}">#{game.owner_name}</a> (private).
+				else
+					p Created #{game.ctime} by <a class="black" href="/user/#{game.owner_name}">#{game.owner_name}</a>.
+			else
+				p Created #{game.ctime}.
 
-			div Created: #{game.ctime}
-			unless game.mtime === "never"
-				div Changed: #{game.mtime}
+			if game.status > 1
+				p Finished #{game.mtime}.
+			else if game.mtime !== "never"
+				p Last changed #{game.mtime}.
 
-			if game.status === 2
-				div Result: #{game.result}
+			unless game.human_options === "None"
+				p Options: #{game.human_options}.
 
 			if game.notice
-				br
-				div
+				p
 					i= game.notice
 
 			br(clear="left")
@@ -83,9 +81,9 @@ html
 					each role in roles
 						tr
 							th(id="role_"+role.replace(/ /g, "_")+"_name")= role
-							td.command(id="role_"+role.replace(/ /g, "_")) -
+							td(id="role_"+role.replace(/ /g, "_")) -
 					tr
-						td.command#message(colspan=2) -
+						td#message(colspan=2) -
 
 			p
 				button.hide#delete_button(onclick="confirm_delete()") Delete
diff --git a/views/message_inbox.pug b/views/message_inbox.pug
index 10c4626..0e39ea2 100644
--- a/views/message_inbox.pug
+++ b/views/message_inbox.pug
@@ -25,9 +25,9 @@ html
 					each row in messages
 						tr
 							td
-								a(href="/user/"+row.from_name)= row.from_name
+								a.black(href="/user/"+row.from_name)= row.from_name
 							td(class=row.is_read?"read":"unread")
-								a(href="/message/read/"+row.message_id)= row.subject
+								a.black(href="/message/read/"+row.message_id)= row.subject
 							td= row.time
 					else
 						tr
diff --git a/views/message_outbox.pug b/views/message_outbox.pug
index 5da84c6..267a8b3 100644
--- a/views/message_outbox.pug
+++ b/views/message_outbox.pug
@@ -29,8 +29,8 @@ html
 				tbody
 					each row in messages
 						tr
-							td: a(href="/user/"+row.to_name)= row.to_name
-							td: a(href="/message/read/"+row.message_id)= row.subject
+							td: a.black(href="/user/"+row.to_name)= row.to_name
+							td: a.black(href="/message/read/"+row.message_id)= row.subject
 							td= row.time
 					else
 						tr
diff --git a/views/stats.pug b/views/stats.pug
index 4d275b0..6c8a268 100644
--- a/views/stats.pug
+++ b/views/stats.pug
@@ -20,7 +20,7 @@ html
 					thead
 						tr
 							th
-								a(href="/"+row.title_id)= row.title_name
+								a.black(href="/"+row.title_id)= row.title_name
 								unless row.scenario === "Standard"
 									|  &#x2013; #{row.scenario}
 							th= row.total