From f5ea88328ef1b4dabd5f58b4c78ad4e175c96765 Mon Sep 17 00:00:00 2001
From: Tor Andersson <tor@ccxvii.net>
Date: Mon, 11 Sep 2023 15:21:24 +0200
Subject: Add user links to join page.

---
 public/join.js   | 32 +++++++++++++++-----------------
 public/style.css | 12 ++++++------
 2 files changed, 21 insertions(+), 23 deletions(-)

(limited to 'public')

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 }
-- 
cgit v1.2.3