diff options
| -rw-r--r-- | public/join.js | 4 | ||||
| -rw-r--r-- | public/style.css | 112 | ||||
| -rw-r--r-- | views/change_about.ejs | 6 | ||||
| -rw-r--r-- | views/chat.ejs | 2 | ||||
| -rw-r--r-- | views/create.ejs | 4 | ||||
| -rw-r--r-- | views/forum_edit.ejs | 5 | ||||
| -rw-r--r-- | views/forum_post.ejs | 2 | ||||
| -rw-r--r-- | views/forum_reply.ejs | 6 | ||||
| -rw-r--r-- | views/forum_thread.ejs | 17 | ||||
| -rw-r--r-- | views/forum_view.ejs | 61 | ||||
| -rw-r--r-- | views/games.ejs | 83 | ||||
| -rw-r--r-- | views/header.ejs | 61 | ||||
| -rw-r--r-- | views/info.ejs | 120 | ||||
| -rw-r--r-- | views/join.ejs | 25 | ||||
| -rw-r--r-- | views/message_inbox.ejs | 17 | ||||
| -rw-r--r-- | views/message_outbox.ejs | 17 | ||||
| -rw-r--r-- | views/message_read.ejs | 11 | ||||
| -rw-r--r-- | views/message_send.ejs | 2 | ||||
| -rw-r--r-- | views/profile.ejs | 136 |
19 files changed, 369 insertions, 322 deletions
diff --git a/public/join.js b/public/join.js index 898113b..f79eabc 100644 --- a/public/join.js +++ b/public/join.js @@ -96,9 +96,9 @@ function update() { if (player) { if (game.status > 0) { if (is_active(player, role)) - element.className = "is_active"; + element.classList.add("is_active"); else - element.className = ""; + element.classList.remove("is_active"); if (player.user_id === user_id) element.innerHTML = `<a href="/${game.title_id}/play:${game.game_id}:${role}">Play</a>`; else diff --git a/public/style.css b/public/style.css index 76d6ff2..89ba3b2 100644 --- a/public/style.css +++ b/public/style.css @@ -1,48 +1,76 @@ -html, input, textarea { font-family: "Source Serif", "Georgia", "Dingbats", "Noto Emoji", serif; font-size: 16px; } -button, select { font-family: "Source Sans", "Verdana", "Dingbats", "Noto Emoji", sans-serif; font-size: 16px; } +html, input, textarea { + font-family: "Source Serif", "Georgia", "Dingbats", "Noto Emoji", serif; + font-size: 16px; +} +button, select { + font-family: "Source Sans", "Verdana", "Dingbats", "Noto Emoji", sans-serif; + font-size: 16px; +} + html, body { margin: 0; } h1 { margin-left: -2px; } h2 { margin-left: -1px; } -.header { display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid brown; padding-right: 1em; } -.header img { display: block; margin: 4px 0 -2px 2px; } -.header span { margin: 0 1em; } -.header a { color: black; } -.main { margin: 2em; } -.main p, .main dl { max-width: 50rem; } -.main hr { max-width: 50rem; margin-right: auto; margin-left: 0; } -.main hr { border: none; border-top: 2px dotted brown; } -.main hr + p { font-style: italic; } -img.logo { float: left; margin: 0 20px 5px 0; box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5); height: 200px; } -img.avatar { float: left; margin: 0 20px 5px 0; box-shadow: 2px 2px 4px 0px rgba(0,0,0,.5); width: 80px; height: 80px; } -.is_active { background-color: lemonchiffon; } -.error { color: brown; font-style: italic; white-space: pre-wrap; } -.warning { color: brown; } -.warning::before { content: "\26a0"; } -form { display: inline; } -label { user-select: none; } -input[type="text"], input[type="password"], textarea { padding: 5px; } -select { padding-right: 20px; } -button, input, select { font-size: 1rem; margin: 5px 0; } -button, select { margin: 5px 10px 5px 0; padding: 1px 10px; background-color: gainsboro; vertical-align: top; } -button:disabled { color: gray; border: 2px solid gainsboro; outline: 1px solid gray; } -button:enabled, select { border: 2px outset white; outline: 1px solid black; } -button:enabled:active:hover, select:active { border: 2px inset white; padding: 2px 9px 0px 11px; } +a { color: blue; } +.w { white-space: nowrap; } +.r { text-align: right; } + +header { + display: flex; + align-items: center; + justify-content: space-between; + border-bottom: 2px solid brown; + padding-right: 1em; +} +header img { + display: block; + margin: 4px 0 -2px 2px; +} +header nav a { margin: 0 1em; color: black; } +article { margin: 2em; } +article p, article dl, article ul { max-width: 50rem; } + +img.avatar { + float: left; margin: 0 20px 5px 0; + box-shadow: 2px 2px 4px 0px rgba(0,0,0,.5); + width: 80px; + height: 80px; +} + +img.logo { + float: left; + margin: 0 20px 5px 0; + box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5); + height: 200px; +} + +table { min-width: min(50rem,100%); } table { border-collapse: collapse; } -tfoot { background-color: gainsboro; } th { text-align: left; background-color: gainsboro; } th, td { border: 1px solid black; padding: 3px 1ex; } -table.game { min-width: min(50rem,100%); } -table.game .title { white-space: nowrap; } -table.game .scenario { white-space: nowrap; } -table.game .role { white-space: nowrap; } -table.game .time { white-space: nowrap; } -table.game td a { text-decoration: none; color: black; } -table.game td.command a { text-decoration: underline; color: blue; } -table.post { min-width: min(50rem,100%); } -table.post .author { white-space: nowrap; width: 10rem; } -table.post .time { white-space: nowrap; text-align: right; width: 5rem; } -table.post .replies { width: 0; } -table.post .unread { background-color: lightyellow; } -table.post .body { white-space: pre-wrap; padding: 10px 10px; } -table.post th a { text-decoration: none; color: black; } -table.post td:not(.body):not(.edit) a { text-decoration: none; color: black; } +th a, td:not(.command) a { text-decoration: none; color: black; } +td.body { white-space: pre-wrap; padding: 10px 10px; } + +input[type="text"], input[type="password"], textarea { + padding: 5px; +} +button, input, select { + margin: 5px 0; +} +button, select { + margin: 5px 10px 5px 0; + padding: 1px 10px; + background-color: gainsboro; + vertical-align: top; +} +button:disabled { color: gray; border: 2px solid gainsboro; outline: 1px solid gray; } +button:enabled, select { border: 2px outset white; outline: 1px solid black; } +button:enabled:active:hover, select:active { border: 2px inset white; padding: 2px 9px 0px 11px; } + +td.is_active { background-color: lemonchiffon; } +p.error { color: brown; font-style: italic; white-space: pre-wrap; } +p.warning { color: brown; } +p.warning::before { content: "\26a0"; } + +article hr { max-width: 50rem; margin-right: auto; margin-left: 0; } +article hr { border: none; border-top: 2px dotted brown; } +article hr + p { font-style: italic; } diff --git a/views/change_about.ejs b/views/change_about.ejs index c87fc55..cbea0c5 100644 --- a/views/change_about.ejs +++ b/views/change_about.ejs @@ -1,9 +1,11 @@ -<%- include('header', { title: "Change profile text" }) %> +<%- include('header', { title: "Change profile text" }) -%> <style> textarea { width: 100%; max-width: 45em; } </style> <form action="/change_about" method="post"> -<textarea name="about" rows="20" cols="80" maxlength="32000" autofocus><%= about %></textarea> +<p> +<textarea name="about" rows="20" cols="80" maxlength="32000" autofocus> +<%= about %></textarea> <p> <button type="submit">Submit</button> </form> diff --git a/views/chat.ejs b/views/chat.ejs index 81697ee..d217857 100644 --- a/views/chat.ejs +++ b/views/chat.ejs @@ -1,4 +1,4 @@ -<%- include('header', { title: "Chat Log" }) %> +<%- include('header', { title: "Chat Log" }) -%> <style> table{width:min(60rem,100%);} td:nth-child(1),td:nth-child(2){white-space:nowrap;width:0} diff --git a/views/create.ejs b/views/create.ejs index 74f9276..36b86e2 100644 --- a/views/create.ejs +++ b/views/create.ejs @@ -3,12 +3,16 @@ <a href="/info/<%= title.title_id %>"><img class="logo" src="/<%= title.title_id %>/cover.jpg"></a> <form action="/create/<%= title.title_id %>" method="post"> <p> +<% if (scenarios.length > 1) { %> Scenario:<br> <select name="scenario"> <% scenarios.forEach((scenario) => { %> <option value="<%= scenario %>"><%= scenario %></option> <% }); %> </select> +<% } else { %> +<input type="hidden" name="scenario" value="<%= scenarios[0] %>"> +<% } %> <%- include('../public/' + title.title_id + '/create.html') %> <p> Description:<br> diff --git a/views/forum_edit.ejs b/views/forum_edit.ejs index 2f3c3ff..7ed1414 100644 --- a/views/forum_edit.ejs +++ b/views/forum_edit.ejs @@ -1,10 +1,11 @@ -<%- include('header', { title: "Edit Post" }) %> +<%- include('header', { title: "Edit Post" }) -%> <style> input, textarea { width: 100%; max-width: 45em; } </style> <form action="/forum/edit/<%- post.post_id %>" method="post"> <p> -<textarea name="body" rows="20" cols="80" maxlength="32000" required autofocus><%= post.body %></textarea> +<textarea name="body" rows="20" cols="80" maxlength="32000" required autofocus> +<%= post.body %></textarea> <p> <button type="submit">Submit</button> </form> diff --git a/views/forum_post.ejs b/views/forum_post.ejs index aa24455..98d667c 100644 --- a/views/forum_post.ejs +++ b/views/forum_post.ejs @@ -1,4 +1,4 @@ -<%- include('header', { title: "New Thread" }) %> +<%- include('header', { title: "New Thread" }) -%> <style> input, textarea { width: 100%; max-width: 45em; } </style> diff --git a/views/forum_reply.ejs b/views/forum_reply.ejs index 3e87ddd..db777b6 100644 --- a/views/forum_reply.ejs +++ b/views/forum_reply.ejs @@ -1,13 +1,15 @@ -<%- include('header', { title: thread.subject }) %> +<%- include('header', { title: thread.subject }) -%> <style> input, textarea { width: 100%; max-width: 45em; } +table { max-width: 50em; } table .author { border-right: none; } table .time { border-left: none; font-weight: normal; } +table .command { border: none; } </style> <table class="post"> <tr> <th class="author"><%= post.author_name %> -<th class="time"><%= post.ctime %> <%= post.edited ? "(edited " + post.mtime + ")" : "" %> +<th class="r time"><%= post.ctime %> <%= post.edited ? "(edited " + post.mtime + ")" : "" %> <tr> <td class="body" colspan="2"><%- post.body %></td> </table> diff --git a/views/forum_thread.ejs b/views/forum_thread.ejs index 7232bce..5c76704 100644 --- a/views/forum_thread.ejs +++ b/views/forum_thread.ejs @@ -1,21 +1,22 @@ -<%- include('header', { title: thread.subject }) %> +<%- include('header', { title: thread.subject }) -%> <style> +table { max-width: 50em; } table .author { border-right: none; } table .time { border-left: none; font-weight: normal; } -table .edit { text-align: right; border: none; } +table .command { border: none; } </style> <% posts.forEach((row) => { %> <p> <table class="post"> <tr> <th class="author"><a href="/user/<%- row.author_name %>"><%= row.author_name %></a> -<th class="time"><%= row.ctime %> +<th class="r time"><%= row.ctime %> <%= row.edited ? "(edited " + row.mtime + ")" : "" %> <tr> <td class="body" colspan="2"><%- row.body %></td> <% if (user) { %> <tr> -<td class="edit" colspan=2> +<td class="r command" colspan=2> <% if (row.author_id === user.user_id) { %> <a href="/forum/edit/<%- row.post_id %>">Edit</a> <% } %> @@ -23,8 +24,6 @@ table .edit { text-align: right; border: none; } <% } %> </table> <% }); %> -<% -if (user) { - %><p><a href="/forum/reply/<%- posts[0].post_id %>">Reply</a><% -} -%> +<% if (user) { %> +<p><a href="/forum/reply/<%- posts[0].post_id %>">Reply</a> +<% } %> diff --git a/views/forum_view.ejs b/views/forum_view.ejs index 6838803..d5ebd46 100644 --- a/views/forum_view.ejs +++ b/views/forum_view.ejs @@ -1,40 +1,37 @@ -<%- include('header', { title: "Forum", refresh: 900 }) %> -<table class="post"> -<thead> +<%- include('header', { title: "Forum", refresh: 900 }) -%> +<style> +tfoot{background-color:gainsboro} +</style> +<table> <tr> -<th class="subject">Subject -<th class="author">Author -<th class="replies">Replies -<th class="time">Time -</thead> +<th>Subject +<th>Author +<th>Replies +<th>Time <% threads.forEach((row) => { %> <tr> -<td class="subject"><a href="/forum/thread/<%- row.thread_id %>"><%= row.subject %></a> -<td class="author"><a href="/user/<%- row.author_name %>"><%= row.author_name %></a> -<td class="replies"><%= row.replies %> -<td class="time"><%= row.mtime %> +<td><a href="/forum/thread/<%- row.thread_id %>"><%= row.subject %></a> +<td><a href="/user/<%- row.author_name %>"><%= row.author_name %></a> +<td><%= row.replies %> +<td><%= row.mtime %> <% }); %> <tfoot> <tr> <td colspan="4"> -<% -if (current_page > 1) { - %><a href="/forum/page/<%= current_page-1 %>">←</a> <% -} -for (let p = 1; p <= page_count && p <= 30; ++p) { - if (p === current_page) { - %>(<%= p %>) <% - } else { - %><a href="/forum/page/<%= p %>"><%= p %></a> <% - } -} -if (current_page < page_count) { - %><a href="/forum/page/<%= current_page+1 %>">→</a> <% -} -%> +<% if (current_page > 1) { %> +<a href="/forum/page/<%- current_page-1 %>">←</a> +<% } %> +<% for (let p = 1; p <= page_count && p <= 30; ++p) { %> +<% if (p === current_page) { %> +(<%- p %>) +<% } else { %> +<a href="/forum/page/<%- p %>"><%- p %></a> +<% } %> +<% } %> +<% if (current_page < page_count) { %> +<a href="/forum/page/<%- current_page+1 %>">→</a> +<% } %> </table> -<% -if (user) { - %><p><a href="/forum/post">New thread</a><% -} -%> +<% if (user) { %> +<p><a href="/forum/post">New thread</a> +<% } %> diff --git a/views/games.ejs b/views/games.ejs index 86a2502..90b2f68 100644 --- a/views/games.ejs +++ b/views/games.ejs @@ -1,50 +1,51 @@ -<%- include('header', { title: "All Public Games", refresh: (user ? 300 : 0) }) %> +<%- include('header', { title: "All Public Games", refresh: (user ? 300 : 0) }) -%> <h2>Open</h2> -<table class="game"> -<tr><th>ID<th>Title<th>Scenario<th>Options<th>Players<th>Description<th>Created<th> -<%_ if (open_games.length > 0) { _%> -<%_ open_games.forEach((row) => { _%> +<table> +<tr><th>ID<th>Title<th>Scenario<th>Players<th>Description<th>Created<th> +<% if (open_games.length > 0) { %> +<% open_games.forEach((row) => { %> <tr> -<td class="id"><%= row.game_id %> -<td class="title"><a href="/info/<%= row.title_id %>"><%= row.title_name %></a> -<td class="scenario"><%= row.scenario %> -<td class="options"><%- row.options %> -<td class="players"><%- row.player_names %> -<td class="description"><%= row.description %> -<td class="time"><%= row.ctime %> +<td><%= row.game_id %> +<td class="w"><a href="/info/<%= row.title_id %>"><%= row.title_name %></a> +<td class="w"><%= row.scenario %> +<td><%- row.player_names %> +<td><%= row.description %> +<td class="w"><%= row.ctime %> <td class="command"><a href="/join/<%= row.game_id %>">Join</a> -<%_ }); } else { _%> -<tr><td colspan="8">No open games. -<%_ } _%> +<% }); } else { %> +<tr><td colspan="7">No open games. +<% } %> </table> <h2>Active</h2> -<table class="game"> -<tr><th>ID<th>Title<th>Scenario<th>Options<th>Players<th>Description<th>Changed<th>Active<th> -<%_ if (active_games.length > 0) { _%> -<%_ active_games.forEach((row) => { _%> +<table> +<tr><th>ID<th>Title<th>Scenario<th>Players<th>Description<th>Changed<th>Active<th> +<% if (active_games.length > 0) { %> +<% active_games.forEach((row) => { %> <tr> -<td class="id"><%= row.game_id %> -<td class="title"><a href="/info/<%= row.title_id %>"><%= row.title_name %></a> -<td class="scenario"><%= row.scenario %> -<td class="options"><%- row.options %> -<td class="players"><%- row.player_names %> -<td class="description"><%= row.description %> -<td class="time"><%= row.mtime %> -<td class="role <%= row.is_active ? "is_active" : "" %>"><%= row.active %> -<%_ - if (row.is_yours) { - if (row.is_shared) { - %><td class="command"><a href="/join/<%= row.game_id %>">View</a><% - } else { - %><td class="command"><a href="/<%- row.title_id %>/play:<%- row.game_id %>:<%- row.your_role %>">View</a><% - } - } else { - %><td class="command"><a href="/<%- row.title_id %>/play:<%- row.game_id %>">View</a><% - } -_%> -<%_ }); } else { _%> -<tr><td colspan="9">No active games. -<%_ } _%> +<td><%= row.game_id %> +<td class="w"><a href="/info/<%= row.title_id %>"><%= row.title_name %></a> +<td class="w"><%= row.scenario %> +<td><%- row.player_names %> +<td><%= row.description %> +<td class="w"><%= row.mtime %> +<% if (row.is_active) { %> +<td class="is_active"><%= row.active %> +<% } else { %> +<td><%= row.active %> +<% } %> +<% if (row.is_yours) { %> +<% if (row.is_shared) { %> +<td class="command"><a href="/join/<%= row.game_id %>">View</a> +<% } else { %> +<td class="command"><a href="/<%- row.title_id %>/play:<%- row.game_id %>:<%- row.your_role %>">View</a> +<% } %> +<% } else { %> +<td class="command"><a href="/<%- row.title_id %>/play:<%- row.game_id %>">View</a> +<% } %> +<% }); %> +<% } else { %> +<tr><td colspan="8">No active games. +<% } %> </table> diff --git a/views/header.ejs b/views/header.ejs index c8337fc..2628f8d 100644 --- a/views/header.ejs +++ b/views/header.ejs @@ -2,40 +2,35 @@ <html> <head> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1"> -<% if (typeof refresh !== 'undefined' && refresh > 0) { %><meta http-equiv="refresh" content="<%= refresh %>"><% } %> -<link rel="icon" href="/favicon.svg"> +<% if (typeof refresh !== 'undefined' && refresh > 0) { _%> +<meta http-equiv="refresh" content="<%= refresh %>"> +<% } _%> <title><%= title %></title> -<style> -<%- include('../public/fonts/fonts.css') _%> -<%- include('../public/style.css') _%> -</style> +<link rel="icon" href="/favicon.svg"> +<link rel="stylesheet" href="/fonts/fonts.css"> +<link rel="stylesheet" href="/style.css"> </head> <body> -<div class="header"> -<div><a href="/"><img src="/images/rally-the-troops.svg" width="48" height="48"></a></div> -<div> -<span><a href="/about">About</a></span> -<span><a href="/forum">Forum</a></span> -<% - if (user) { - let unread = user.unread | 0; - if (unread > 0) { - %><span><a href="/inbox">Inbox (<%= unread %>)</a></span><% - } else { - %><span><a href="/inbox">Inbox</a></span><% - } - %><span><a href="/profile">Profile (<%= user.name %>)</a></span><% - } else { - %><span><a href="/signup">Signup</a></span><% - %><span><a href="/login">Login</a></span><% - } -%> -</div> -</div> -<div class="main"> +<header> +<a href="/"><img src="/images/rally-the-troops.svg" width="48" height="48"></a> +<nav> +<a href="/about">About</a> +<a href="/forum">Forum</a> +<%_ if (user) { _%> +<%_ if (user.unread > 0) { _%> +<a href="/inbox">Inbox (<%= unread %>)</a> +<%_ } else { _%> +<a href="/inbox">Inbox</a> +<%_ } _%> +<a href="/profile">Profile (<%= user.name %>)</a> +<%_ } else { _%> +<a href="/signup">Signup</a> +<a href="/login">Login</a> +<%_ } _%> +</nav> +</header> +<article> <h1><%= title %></h1> -<% - if (typeof flash !== 'undefined' && flash.length > 0) { - %><p class="error"><%= Array.isArray(flash) ? flash.join("\n") : flash %></p><% - } -%> +<%_ if (typeof flash !== 'undefined' && flash.length > 0) { _%> +<p class="error"><%= flash %></p> +<%_ } _%> diff --git a/views/info.ejs b/views/info.ejs index 4a515ff..49625ed 100644 --- a/views/info.ejs +++ b/views/info.ejs @@ -1,84 +1,80 @@ -<%- include('header', { title: title.title_name, refresh: (user ? 300 : 0) }) _%> +<%- include('header', { title: title.title_name, refresh: (user ? 300 : 0) }) -%> <img class="logo" src="/<%= title.title_id %>/cover.jpg"> -<%- include('../public/' + title.title_id + '/about.html') %> +<%- include('../public/' + title.title_id + '/about.html') -%> <p> Read more about the game on <a href="https://boardgamegeek.com/boardgame/<%= title.bgg %>">boardgamegeek.com</a>. <h2>Open Games</h2> -<table class="game"> -<tr><th>ID<th>Scenario<th>Options<th>Players<th>Description<th>Created<th> -<%_ if (open_games.length > 0) { _%> -<%_ open_games.forEach((row) => { _%> +<table> +<tr><th>ID<th>Scenario<th>Players<th>Description<th>Created<th> +<% if (open_games.length > 0) { -%> +<% open_games.forEach((row) => { %> <tr> -<td class="id"><%= row.game_id %> -<td class="scenario"><%= row.scenario %> -<td class="options"><%- row.options %> -<td class="players"><%- row.player_names %> -<td class="description"><%= row.description %> -<td class="time"><%= row.ctime %> +<td><%= row.game_id %> +<td class="w"><%= row.scenario %> +<td><%- row.player_names %> +<td><%= row.description %> +<td class="w"><%= row.ctime %> <td class="command"><a href="/join/<%= row.game_id %>">Join</a> -<%_ }); } else { _%> -<tr><td colspan="7">No open games. -<%_ } _%> +<% }); } else { %> +<tr><td colspan="6">No open games. +<% } %> </table> <p> <a href="/create/<%= title.title_id %>">Create a new game</a>. -<%_ if (active_games.length > 0) { _%> +<% if (active_games.length > 0) { %> <h2>Active Games</h2> <table class="game"> -<tr><th>ID<th>Scenario<th>Options<th>Players<th>Description<th>Changed<th>Turn<th> -<%_ active_games.forEach((row) => { _%> +<tr><th>ID<th>Scenario<th>Players<th>Description<th>Changed<th>Turn<th> +<% active_games.forEach((row) => { %> <tr> -<td class="id"><%= row.game_id %> -<td class="scenario"><%= row.scenario %> -<td class="options"><%- row.options %> -<td class="players"><%- row.player_names %> -<td class="description"><%= row.description %> -<td class="time"><%= row.mtime %> -<td class="<%= row.is_active ? "role is_active" : "role" %>"><%= row.active %> -<%_ - if (row.is_yours) { - if (row.is_shared) { - %><td class="command"><a href="/join/<%= row.game_id %>">Play</a><% - } else { - %><td class="command"><a href="/<%- row.title_id %>/play:<%- row.game_id %>:<%- row.your_role %>">Play</a><% - } - } else { - %><td class="command"><a href="/<%- row.title_id %>/play:<%- row.game_id %>">View</a><% - - } -_%> -<%_ }); _%> +<td><%= row.game_id %> +<td class="w"><%= row.scenario %> +<td><%- row.player_names %> +<td><%= row.description %> +<td class="w"><%= row.mtime %> +<% if (row.is_active) { %> +<td class="is_active"><%= row.active %> +<% } else { %> +<td><%= row.active %> +<% } %> +<% if (row.is_yours) { %> +<% if (row.is_shared) { %> +<td class="command"><a href="/join/<%= row.game_id %>">Play</a> +<% } else { %> +<td class="command"><a href="/<%- row.title_id %>/play:<%- row.game_id %>:<%- row.your_role %>">Play</a> +<% } %> +<% } else { %> +<td class="command"><a href="/<%- row.title_id %>/play:<%- row.game_id %>">View</a> +<% } %> +<% }); %> </table> -<%_ } _%> +<% } %> -<%_ if (finished_games.length > 0) { _%> +<% if (finished_games.length > 0) { %> <h2>Finished Games</h2> <table class="game"> -<tr><th>ID<th>Scenario<th>Options<th>Players<th>Description<th>Finished<th>Result<th> -<%_ finished_games.forEach((row) => { _%> +<tr><th>ID<th>Scenario<th>Players<th>Description<th>Finished<th>Result<th> +<% finished_games.forEach((row) => { %> <tr> -<td class="id"><%= row.game_id %> -<td class="scenario"><%= row.scenario %> -<td class="options"><%- row.options %> -<td class="players"><%- row.player_names %> -<td class="description"><%= row.description %> -<td class="time"><%= row.mtime %> -<td class="result"><%= row.result %> -<%_ - if (row.is_yours) { - if (row.is_shared) { - %><td class="command"><a href="/join/<%= row.game_id %>">View</a><% - } else { - %><td class="command"><a href="/<%- row.title_id %>/play:<%- row.game_id %>:<%- row.your_role %>">View</a><% - } - } else { - %><td class="command"><a href="/<%- row.title_id %>/play:<%- row.game_id %>">View</a><% - } -_%> -<%_ }); _%> +<td><%= row.game_id %> +<td class="w"><%= row.scenario %> +<td><%- row.player_names %> +<td><%= row.description %> +<td class="w"><%= row.mtime %> +<td><%= row.result %> +<% if (row.is_yours) { %> +<% if (row.is_shared) { %> +<td class="command"><a href="/join/<%= row.game_id %>">View</a> +<% } else { %> +<td class="command"><a href="/<%- row.title_id %>/play:<%- row.game_id %>:<%- row.your_role %>">View</a> +<% } %> +<% } else { %> +<td class="command"><a href="/<%- row.title_id %>/play:<%- row.game_id %>">View</a> +<% } %> +<% }); %> </table> -<%_ } _%> +<% } %> diff --git a/views/join.ejs b/views/join.ejs index 6558745..b4e4718 100644 --- a/views/join.ejs +++ b/views/join.ejs @@ -1,7 +1,8 @@ <%- include('header', { title: game.title_name }) -%> <style> -th, td { min-width: 10em; font-size: 16px; } -a.red { text-decoration: none; color: brown; font-size: 15px; } +table { min-width: auto; } +th, td { min-width: 10em; } +a.red { text-decoration: none; color: brown; } td a { text-decoration: underline; color: blue; } .hide { display: none; } </style> @@ -20,24 +21,30 @@ let ready = <%- ready %>; <div class="info"> <p> Owner: <%= game.owner_name %> -<br> -Private: <%= game.private ? "yes" : "no" %> +<% if (game.private) { %> +(private) +<% } %> <br> Scenario: <%= game.scenario %> <br> Options: <%= game.options %> -<br> -Description: <%= game.description || "No description." %> + +<p> +<%= game.description || "No description." %> <br clear=left> <table class="small"> <tr> -<% roles.forEach((role) => { %><th id="role_<%= role.replace(/ /g, '_') %>_name"><%= role %></th><% }); %> +<% roles.forEach((role) => { %> +<th class="command" id="role_<%= role.replace(/ /g, '_') %>_name"><%= role %></th> +<% }); %> <tr> -<% roles.forEach((role) => { %><td id="role_<%= role.replace(/ /g, '_') %>">-</td><% }); %> +<% roles.forEach((role) => { %> +<td class="command" id="role_<%= role.replace(/ /g, '_') %>">-</td> +<% }); %> <tr> -<td id="message" colspan="<%= roles.length %>">-</td> +<td class="command" id="message" colspan="<%= roles.length %>">-</td> </table> <p> diff --git a/views/message_inbox.ejs b/views/message_inbox.ejs index e70e156..626662d 100644 --- a/views/message_inbox.ejs +++ b/views/message_inbox.ejs @@ -1,12 +1,19 @@ -<%- include('header', { title: "Inbox" }) %> +<%- include('header', { title: "Inbox" }) -%> +<style> +.unread { background-color: lightyellow; } +</style> <p><a href="/message/send">Send message</a> <table class="post"> <tr><th>From<th>Subject<th>Date <% if (messages.length > 0) { messages.forEach((row) => { %> -<tr class="<%- row.read ? "read" : "unread" %>"> -<td class="author"><a href="/user/<%- row.from_name %>"><%= row.from_name %></a> -<td class="subject"><a href="/message/read/<%- row.message_id %>"><%= row.subject %></a> -<td class="time"><%= row.time %> +<% if (row.read) { %> +<tr class="read"> +<% } else {%> +<tr> +<% } %> +<td><a href="/user/<%- row.from_name %>"><%= row.from_name %></a> +<td><a href="/message/read/<%- row.message_id %>"><%= row.subject %></a> +<td><%= row.time %> <% }); } else { %> <tr><td colspan="3">No messages</td> <% } %> diff --git a/views/message_outbox.ejs b/views/message_outbox.ejs index c7ff379..a5d1abd 100644 --- a/views/message_outbox.ejs +++ b/views/message_outbox.ejs @@ -1,4 +1,7 @@ -<%- include('header', { title: "Outbox" }) %> +<%- include('header', { title: "Outbox" }) -%> +<style> +.unread { background-color: lightyellow; } +</style> <script> function delete_all() { let warning = "Are you sure you want to delete ALL the messages?"; @@ -9,10 +12,14 @@ function delete_all() { <table class="post"> <tr><th>To<th>Subject<th>Date <% if (messages.length > 0) { messages.forEach((row) => { %> -<tr class="<%- row.read ? "read" : "unread" %>"> -<td class="author"><a href="/user/<%- row.to_name %>"><%= row.to_name %></a> -<td class="subject"><a href="/message/read/<%- row.message_id %>"><%= row.subject %></a> -<td class="time"><%= row.time %> +<% if (row.read) { %> +<tr class="read"> +<% } else {%> +<tr> +<% } %> +<td><a href="/user/<%- row.to_name %>"><%= row.to_name %></a> +<td><a href="/message/read/<%- row.message_id %>"><%= row.subject %></a> +<td><%= row.time %> <% }); } else { %> <tr><td colspan="3">No messages</td> <% } %> diff --git a/views/message_read.ejs b/views/message_read.ejs index 7b32eda..b2f8227 100644 --- a/views/message_read.ejs +++ b/views/message_read.ejs @@ -1,4 +1,7 @@ <%- include('header', { title: message.subject }) %> +<style> +th{font-weight:normal;width:4em;} +</style> <script> function delete_message(id) { let warning = "Are you sure you want to DELETE this message?"; @@ -9,10 +12,10 @@ function reply_message(id) { window.location.href = "/message/reply/" + id; } </script> -<table class="post"> -<tr><th>From:<td> <a href="/user/<%- message.from_name %>"><%= message.from_name %></a> -<tr><th>To:<td> <a href="/user/<%- message.to_name %>"><%= message.to_name %></a> -<tr><th>Date:<td> <%= message.time %> +<table> +<tr><th>From:<td><a href="/user/<%- message.from_name %>"><%= message.from_name %></a> +<tr><th>To:<td><a href="/user/<%- message.to_name %>"><%= message.to_name %></a> +<tr><th>Date:<td><%= message.time %> <tr><td colspan="2" class="body"><%- message.body %></td> </table> <p> diff --git a/views/message_send.ejs b/views/message_send.ejs index 4dafa3a..cea21e3 100644 --- a/views/message_send.ejs +++ b/views/message_send.ejs @@ -1,4 +1,4 @@ -<%- include('header', { title: "Send Message" }) %> +<%- include('header', { title: "Send Message" }) -%> <style> input, textarea { width: 100%; max-width: 45rem; } </style> diff --git a/views/profile.ejs b/views/profile.ejs index a001e21..a4a23fc 100644 --- a/views/profile.ejs +++ b/views/profile.ejs @@ -1,5 +1,5 @@ -<%- include('header', { title: "Rally the Troops!", refresh: (active_games.length > 0 ? 300 : 0) }) _%> -<img class="logo avatar" src="<%= avatar %>" width="80" height="80"> +<%- include('header', { title: "Rally the Troops!", refresh: (active_games.length > 0 ? 300 : 0) }) -%> +<img class="avatar" src="<%= avatar %>" width="80" height="80"> <p> Welcome, <%= user.name %>! <p> @@ -8,13 +8,11 @@ Your mail address is <%= user.mail %>. <br clear=left> <p>» -<% - if (user.notify) { - %><a href="/unsubscribe">Disable mail notifications</a><% - } else { - %><a href="/subscribe">Enable mail notifications</a><% - } -%> +<% if (user.notify) { %> +<a href="/unsubscribe">Disable mail notifications</a> +<% } else { %> +<a href="/subscribe">Enable mail notifications</a> +<% } %> <br>» Change <a href="/change_password">password</a>, @@ -26,79 +24,79 @@ or <a href="/change_about">profile text</a>. <br>» <a href="/logout">Logout</a> -<%_ if (open_games.length > 0) { _%> +<% if (open_games.length > 0) { %> <h2>Open Games</h2> -<table class="game"> -<tr><th>ID<th>Game<th>Scenario<th>Options<th>Players<th>Description<th>Created<th> -<%_ open_games.forEach((row) => { _%> +<table> +<thead> +<tr><th>ID<th>Game<th>Scenario<th>Players<th>Description<th>Created<th> +<tbody> +<% open_games.forEach((row) => { %> <tr> -<td class="id"><%= row.game_id %> -<td class="name"><a href="/info/<%= row.title_id %>"><%= row.title_name %></a> -<td class="scenario"><%= row.scenario %> -<td class="options"><%- row.options %> -<td class="players"><%- row.player_names %> -<td class="description"><%= row.description %> -<td class="time"><%= row.ctime %> +<td><%= row.game_id %> +<td class="w"><a href="/info/<%= row.title_id %>"><%= row.title_name %></a> +<td class="w"><%= row.scenario %> +<td><%- row.player_names %> +<td><%= row.description %> +<td class="w"><%= row.ctime %> <td class="command"><a href="/join/<%= row.game_id %>">Join</a> -<%_ }); _%> +<% }); %> </table> -<%_ } _%> +<% } %> -<%_ if (active_games.length > 0) { _%> +<% if (active_games.length > 0) { %> <h2>Active Games</h2> <table class="game"> -<tr><th>ID<th>Game<th>Scenario<th>Options<th>Players<th>Description<th>Changed<th>Turn<th> -<%_ active_games.forEach((row) => { _%> +<thead> +<tr><th>ID<th>Game<th>Scenario<th>Players<th>Description<th>Changed<th>Turn<th> +<tbody> +<% active_games.forEach((row) => { %> <tr> -<td class="id"><%= row.game_id %> -<td class="title"><a href="/info/<%= row.title_id %>"><%= row.title_name %></a> -<td class="scenario"><%= row.scenario %> -<td class="options"><%- row.options %> -<td class="players"><%- row.player_names %> -<td class="description"><%= row.description %> -<td class="time"><%= row.mtime %> -<%_ - if (row.is_active) { - %><td class="role is_active"><%= row.active %><% - } else { - %><td class="role"><%= row.active %><% - } - if (row.is_shared) { - %><td class="command"><a href="/join/<%= row.game_id %>">Play</a><% - } else { - %><td class="command"><a href="/<%- row.title_id %>/play:<%- row.game_id %>:<%- row.your_role %>">Play</a><% - } -_%> -<%_ }); _%> +<td><%= row.game_id %> +<td class="w"><a href="/info/<%= row.title_id %>"><%= row.title_name %></a> +<td class="w"><%= row.scenario %> +<td><%- row.player_names %> +<td><%= row.description %> +<td class="w"><%= row.mtime %> +<% if (row.is_active) { %> +<td class="is_active"><%= row.active %> +<% } else { %> +<td><%= row.active %> +<% } %> +<% if (row.is_shared) { %> +<td class="command"><a href="/join/ +<%= row.game_id %>">Play</a> +<% } else { %> +<td class="command"><a href="/<%- row.title_id %>/play:<%- row.game_id %>:<%- row.your_role %>">Play</a> +<% } %> +<% }); %> </table> -<%_ } _%> +<% } %> -<%_ if (finished_games.length > 0) { _%> +<% if (finished_games.length > 0) { %> <h2>Finished Games</h2> -<table class="game"> -<tr><th>ID<th>Game<th>Scenario<th>Options<th>Players<th>Description<th>Finished<th>Result<th> -<%_ finished_games.forEach((row) => { _%> +<table> +<thead> +<tr><th>ID<th>Game<th>Scenario<th>Players<th>Description<th>Finished<th>Result<th> +<tbody> +<% finished_games.forEach((row) => { %> <tr> -<td class="id"><%= row.game_id %> -<td class="title"><a href="/info/<%= row.title_id %>"><%= row.title_name %></a> -<td class="scenario"><%= row.scenario %> -<td class="options"><%- row.options %> -<td class="players"><%- row.player_names %> -<td class="description"><%= row.description %> -<td class="time"><%= row.mtime %> -<td class="result"><%= row.result %> -<%_ - if (row.is_shared) { - %><td class="command"><a href="/join/<%= row.game_id %>">View</a><% - } else { - %><td class="command"><a href="/<%- row.title_id %>/play:<%- row.game_id %>:<%- row.your_role %>">View</a><% - } -_%> -<%_ }); _%> +<td><%= row.game_id %> +<td class="w"><a href="/info/<%= row.title_id %>"><%= row.title_name %></a> +<td class="w"><%= row.scenario %> +<td><%- row.player_names %> +<td><%= row.description %> +<td class="w"><%= row.mtime %> +<td><%= row.result %> +<% if (row.is_shared) { %> +<td class="command"><a href="/join/<%= row.game_id %>">View</a> +<% } else { %> +<td class="command"><a href="/<%- row.title_id %>/play:<%- row.game_id %>:<%- row.your_role %>">View</a> +<% } %> +<% }); %> </table> -<%_ } _%> +<% } %> -<%_ if (open_games.length === 0 && active_games.length === 0 && finished_games.length === 0) { _%> +<% if (open_games.length === 0 && active_games.length === 0 && finished_games.length === 0) { %> <p> You don't have any current or finished games. -<%_ } _%> +<% } %> |