Add explicit thead/tbody/tfoot tags to tables.

12 files changed, 210 insertions, 192 deletions

diff --git a/public/style.css b/public/style.css
index b5a69ad..5d99512 100644
--- a/public/style.css
+++ b/public/style.css
@@ -50,18 +50,19 @@ div.logo img {
 table {
 	min-width: min(50rem,100%);
 	border-collapse: collapse;
+	border: 1px solid black;
 }
-th, td {
+thead, tfoot {
+	background-color: gainsboro;
 	border: 1px solid black;
-	padding: 3px 1ex;
 }
-th {
+th, td {
+	vertical-align: top;
 	text-align: left;
-	background-color: gainsboro;
+	padding: 5px 10px;
 }
-td.body {
-	white-space: pre-wrap;
-	padding: 10px 10px;
+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; }
diff --git a/server.js b/server.js
index 2cc5cca..74ee072 100644
--- a/server.js
+++ b/server.js
@@ -1911,5 +1911,6 @@ app.get('/stats', function (req, res) {
 	res.render('stats.pug', {
 		user: req.user,
 		stats: stats,
+		titles: TITLES,
 	});
 });
diff --git a/views/chat.pug b/views/chat.pug
index dfe6f25..15d99df 100644
--- a/views/chat.pug
+++ b/views/chat.pug
@@ -12,8 +12,8 @@ html
 			table { border: 1px solid black; }
 			td { border: none; }
 			td a { text-decoration: none; color: black; }
-			tr { background-color: white; }
-			tr.me { background-color: aliceblue; }
+			tbody tr { background-color: white !important; }
+			tbody tr.me { background-color: aliceblue !important; }
 	body
 		include header
 		article
diff --git a/views/forum_view.pug b/views/forum_view.pug
index 8afd1e4..ae51945 100644
--- a/views/forum_view.pug
+++ b/views/forum_view.pug
@@ -5,37 +5,43 @@ html
 		include head
 		title Forum
 		meta(http-equiv="refresh" content=900)
-		style tfoot { background-color: gainsboro }
+		style.
+			tbody a { display: block }
+			td:nth-child(3) { text-align: right }
 	body
 		include header
 		article
 			h1 Forum
 
 			table
-				tr
-					th Subject
-					th Author
-					th Replies
-					th Time
-				each row in threads
+				thead
 					tr
-						td: a(href="/forum/thread/"+row.thread_id)= row.subject
-						td: a(href="/user/"+row.author_name)= row.author_name
-						td= row.replies
-						td= row.mtime
-				tfoot: tr: td(colspan=4)
-					if current_page > 1
-						| #[a(href="/forum/page/"+(current_page-1)) ←]
-						|
-					- for (let p=1; p<=page_count && p<=30; ++p)
-						if p === current_page
-							| (#{p})
-							|
-						else
-							| #[a(href="/forum/page/"+p)= p]
-							|
-					if current_page < page_count
-						| #[a(href="/forum/page/"+(current_page+1)) &#x2192;]
+						th Subject
+						th Author
+						th Replies
+						th Time
+				tbody
+					each row in threads
+						tr
+							td: a(href="/forum/thread/"+row.thread_id)= row.subject
+							td: a(href="/user/"+row.author_name)= row.author_name
+							td= row.replies
+							td= row.mtime
+				tfoot
+					tr
+						td(colspan=4)
+							if current_page > 1
+								| #[a(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]
+									|
+							if current_page < page_count
+								| #[a(href="/forum/page/"+(current_page+1)) &#x2192;]
 
 			if user
 				p: a(href="/forum/post") New thread
diff --git a/views/head.pug b/views/head.pug
index cb5ab49..1fb90c6 100644
--- a/views/head.pug
+++ b/views/head.pug
@@ -36,68 +36,70 @@ mixin forumpost(row,show_buttons)
 
 mixin gametable(status,table,hide_title=0)
 	table
-		tr
-			th ID
-			unless hide_title
-				th Title
-			th Scenario
-			th Players
-			th Description
-			case status
-				when 0
-					th Created
-				when 1
-					th Changed
-					th Turn
-				when 2
-					th Finished
-					th Result
-			th
-		each row in table
+		thead
 			tr
-				td= row.game_id
+				th ID
 				unless hide_title
-					td.w: a(href="/"+row.title_id)= row.title_name
-				td.w= row.scenario
-				if row.player_names
-					td!= row.player_names
-				else
-					td.error Nobody
-				td= row.description
+					th Title
+				th Scenario
+				th Players
+				th Description
 				case status
 					when 0
-						td.w= row.ctime
+						th Created
 					when 1
-						td.w= row.mtime
-						if (row.is_active)
-							td.is_active= row.active
-						else
-							td= row.active
+						th Changed
+						th Turn
 					when 2
-						td.w= row.mtime
-						td= row.result
-				td.command
-					if status === 0
-						if row.is_ready
-							a(href="/join/"+row.game_id) Enter
-						else
-							a(href="/join/"+row.game_id) Join
-					else if status === 1
-						if row.is_yours
-							if row.is_shared
-								a(href="/join/"+row.game_id)= "Play"
+						th Finished
+						th Result
+				th
+		tbody
+			each row in table
+				tr
+					td= row.game_id
+					unless hide_title
+						td.w: a(href="/"+row.title_id)= row.title_name
+					td.w= row.scenario
+					if row.player_names
+						td!= row.player_names
+					else
+						td.error Nobody
+					td= row.description
+					case status
+						when 0
+							td.w= row.ctime
+						when 1
+							td.w= row.mtime
+							if (row.is_active)
+								td.is_active= row.active
 							else
-								a(href=`/${row.title_id}/play:${row.game_id}:${row.your_role}`)= "Play"
-						else
-							a(href=`/${row.title_id}/play:${row.game_id}`) View
-					else if status >= 2
-						a(href=`/${row.title_id}/replay:${row.game_id}`) View
-		else
-			tr
-				case status
-					when 0
-						td(colspan=7-hide_title) No open games.
-					when 1
-						td(colspan=8-hide_title) No active games.
-					when 2
-						td(colspan=8-hide_title) No finished games.
+								td= row.active
+						when 2
+							td.w= row.mtime
+							td= row.result
+					td.command
+						if status === 0
+							if row.is_ready
+								a(href="/join/"+row.game_id) Enter
+							else
+								a(href="/join/"+row.game_id) Join
+						else if status === 1
+							if row.is_yours
+								if row.is_shared
+									a(href="/join/"+row.game_id)= "Play"
+								else
+									a(href=`/${row.title_id}/play:${row.game_id}:${row.your_role}`)= "Play"
+							else
+								a(href=`/${row.title_id}/play:${row.game_id}`) View
+						else if status >= 2
+							a(href=`/${row.title_id}/replay:${row.game_id}`) View
+			else
+				tr
+					case status
+						when 0
+							td(colspan=7-hide_title) No open games.
+						when 1
+							td(colspan=8-hide_title) No active games.
+						when 2
+							td(colspan=8-hide_title) No finished games.
diff --git a/views/join.pug b/views/join.pug
index a982b93..8232645 100644
--- a/views/join.pug
+++ b/views/join.pug
@@ -9,7 +9,7 @@ html
 		title= game.title_name
 		style.
 			table { min-width: auto; }
-			th,td { min-width: 10em; }
+			th,td { min-width: 10em; border: 1px solid black; }
 			table td a.red { text-decoration: none; color: brown; font-size: 14px; }
 			td a { text-decoration: underline; color: blue; }
 			.hide { display: none; }
@@ -45,14 +45,16 @@ html
 
 			p
 			table
-				tr
-					each role in roles
-						th.command(id="role_"+role.replace(/ /g, "_")+"_name")= role
-				tr
-					each role in roles
-						td.command(id="role_"+role.replace(/ /g, "_")) -
-				tr
-					td.command#message(colspan=roles.length) -
+				thead
+					tr
+						each role in roles
+							th.command(id="role_"+role.replace(/ /g, "_")+"_name")= role
+				tbody
+					tr
+						each role in roles
+							td.command(id="role_"+role.replace(/ /g, "_")) -
+					tr
+						td.command#message(colspan=roles.length) -
 
 			p
 				button.hide#delete_button(onclick="confirm_delete()") Delete
diff --git a/views/message_inbox.pug b/views/message_inbox.pug
index 9b0a1ab..29bd4d3 100644
--- a/views/message_inbox.pug
+++ b/views/message_inbox.pug
@@ -4,7 +4,9 @@ html
 	head
 		include head
 		title Inbox
-		style .unread { background-color: lightyellow }
+		style.
+			.unread { background-color: lightyellow }
+			td a { display: block }
 	body
 		include header
 		article
@@ -14,18 +16,20 @@ html
 				a(href="/message/send") Send message
 
 			table
-				tr
-					th From
-					th Subject
-					th Date
-				each row in messages
-					tr(class=row.is_read?"read":"unread")
-						td: a(href="/user/"+row.from_name)= row.from_name
-						td: a(href="/message/read/"+row.message_id)= row.subject
-						td= row.time
-				else
+				thead
 					tr
-						td(colspan=3) No messages.
+						th From
+						th Subject
+						th Date
+				tbody
+					each row in messages
+						tr(class=row.is_read?"read":"unread")
+							td: a(href="/user/"+row.from_name)= row.from_name
+							td: a(href="/message/read/"+row.message_id)= row.subject
+							td= row.time
+					else
+						tr
+							td(colspan=3) No messages.
 
 			p
 				a(href="/outbox") Outbox
diff --git a/views/message_outbox.pug b/views/message_outbox.pug
index ee19a2f..57d6d60 100644
--- a/views/message_outbox.pug
+++ b/views/message_outbox.pug
@@ -4,6 +4,8 @@ html
 	head
 		include head
 		title Outbox
+		style.
+			td a { display: block }
 		script.
 			function delete_all() {
 				let warning = "Are you sure you want to delete ALL the messages?";
@@ -19,18 +21,20 @@ html
 				a(href="/message/send") Send message
 
 			table
-				tr
-					th From
-					th Subject
-					th Date
-				each row in messages
+				thead
 					tr
-						td: a(href="/user/"+row.to_name)= row.to_name
-						td: a(href="/message/read/"+row.message_id)= row.subject
-						td= row.time
-				else
-					tr
-						td(colspan=3) No messages.
+						th From
+						th Subject
+						th Date
+				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= row.time
+					else
+						tr
+							td(colspan=3) No messages.
 
 			p
 				button(onclick="delete_all()") Delete all
diff --git a/views/message_read.pug b/views/message_read.pug
index 65b845d..db43423 100644
--- a/views/message_read.pug
+++ b/views/message_read.pug
@@ -4,7 +4,8 @@ html
 	head
 		include head
 		title= message.subject
-		style th { font-weight: normal; width: 4em; }
+		style.
+			.head {white-space:pre-wrap}
 		script.
 			function delete_message(id) {
 				let warning = "Are you sure you want to DELETE this message?";
@@ -19,18 +20,13 @@ html
 		article
 			h1= message.subject
 
-			table
-				tr
-					th From:
-					td: a(href="/user/"+message.from_name)= message.from_name
-				tr
-					th To:
-					td: a(href="/user/"+message.to_name)= message.to_name
-				tr
-					th Date:
-					td= message.time
-				tr
-					td.body(colspan=2)!= message.body
+			div.post
+				div.head
+					div.
+						From: #[a(href="/user/"+message.from_name)= message.from_name]
+						To: #[a(href="/user/"+message.to_name)= message.to_name]
+					div= message.time
+				div.body!= message.body
 
 			p
 				if message.from_id !== user.user_id
diff --git a/views/stats.pug b/views/stats.pug
index b6c8673..9e625b8 100644
--- a/views/stats.pug
+++ b/views/stats.pug
@@ -5,29 +5,32 @@ html
 		include head
 		title Game Statistics
 		style.
-			table { table-layout: fixed; min-width: auto; }
-			td:not(:nth-child(1)) { text-align: right; }
-			td:nth-child(1) { width: 240px; }
+			table { table-layout: fixed; min-width: auto; margin-bottom: 30px; }
+			td:not(:first-child) { text-align: right; }
+			th:not(:first-child) { text-align: right; }
 			td { width: 100px; }
-			tr+tr.blank { height: 2rem; border: none; }
+			td:first-child { width: 240px; }
 	body
 		include header
 		article
 			h1 Game Statistics
-			table
-				- function p(t,r) { return r > 0 ? Math.round(r*100/t) + "%" : "" }
-				- function drawn(x) { return x.total-(x.r1+x.r2+x.r3+x.r4+x.r5+x.r6+x.r7) }
-				each row in stats
-					unless row.scenario
-						tr.blank
+			- function p(t,r) { return r > 0 ? Math.round(r*100/t) + "%" : "" }
+			- function drawn(x) { return x.total-(x.r1+x.r2+x.r3+x.r4+x.r5+x.r6+x.r7) }
+			each title in titles
+				table
+					thead
 						tr
-							th= row.title_name
-							th= row.r1
-							th= row.r2
-							th Draw
-					else
-						tr
-							td #{row.scenario} (#{row.total})
-							td= p(row.total, row.r1)
-							td= p(row.total, row.r2)
-							td= p(row.total, drawn(row))
+							th: a(href="/"+title.title_id)= title.title_name
+							each row in stats
+								unless row.scenario || row.title_name !== title.title_name
+									th= row.r1
+									th= row.r2
+									th Draw
+					tbody
+						each row in stats
+							if row.scenario && row.title_name === title.title_name
+								tr
+									td #{row.scenario} (#{row.total})
+									td= p(row.total, row.r1)
+									td= p(row.total, row.r2)
+									td= p(row.total, drawn(row))
diff --git a/views/user_list.pug b/views/user_list.pug
index b4383f7..26c3f82 100644
--- a/views/user_list.pug
+++ b/views/user_list.pug
@@ -13,14 +13,16 @@ html
 			h1 User List
 
 			table
-				tr
-					th Avatar
-					th Name
-					th Member since
-					th Last seen
-				each row in user_list
+				thead
 					tr
-						td.avatar: img(src=row.avatar)
-						td.name: a(href="/user/"+row.name)= row.name
-						td= row.ctime
-						td= row.atime
+						th Avatar
+						th Name
+						th Member since
+						th Last seen
+				tbody
+					each row in user_list
+						tr
+							td.avatar: img(src=row.avatar)
+							td.name: a(href="/user/"+row.name)= row.name
+							td= row.ctime
+							td= row.atime
diff --git a/views/user_stats.pug b/views/user_stats.pug
index 865e7fd..a947b64 100644
--- a/views/user_stats.pug
+++ b/views/user_stats.pug
@@ -13,30 +13,27 @@ html
 			h1 Stats for #{who.name}
 
 			table(style="min-width:auto")
-				tr
-					th Title
-					th Scenario
-					th Role
-					th Played
-					th Won
-				each row in stats
+				thead
 					tr
-						- all_won += row.won
-						- all_total += row.total
-						td= row.title_name
-						td= row.scenario
-						td= row.role
-						td= row.total
-						td= Math.round(row.won*100/row.total) + "%"
-				tr
-					th
-					th
-					th
-					th
-					th
-				tr
-					td
-					td
-					td
-					td= all_total
-					td= Math.round(all_won*100/all_total) + "%"
+						th Title
+						th Scenario
+						th Role
+						th Played
+						th Won
+				tbody
+					each row in stats
+						tr
+							- all_won += row.won
+							- all_total += row.total
+							td= row.title_name
+							td= row.scenario
+							td= row.role
+							td= row.total
+							td= Math.round(row.won*100/row.total) + "%"
+				tfoot
+					tr
+						td
+						td
+						td
+						td= all_total
+						td= Math.round(all_won*100/all_total) + "%"