diff options
Diffstat (limited to 'public')
| -rw-r--r-- | public/common/client.js | 75 | ||||
| -rw-r--r-- | public/join.js | 20 | ||||
| -rw-r--r-- | public/style.css | 37 |
3 files changed, 74 insertions, 58 deletions
diff --git a/public/common/client.js b/public/common/client.js index 9ef89e5..c516880 100644 --- a/public/common/client.js +++ b/public/common/client.js @@ -11,7 +11,8 @@ let chat_is_visible = false; let chat_text = null; let chat_key = null; let chat_last_day = null; -let chat_log = null; +let chat_log = 0; +let chat_seen = 0; function scroll_with_middle_mouse(panel_sel, multiplier) { let panel = document.querySelector(panel_sel); @@ -104,7 +105,19 @@ function stop_blinker() { window.addEventListener("focus", stop_blinker); -function add_chat_lines(log) { +function load_chat(game_id) { + chat_key = "chat/" + game_id; + chat_text = document.querySelector(".chat_text"); + chat_last_day = null; + chat_log = 0; + chat_seen = window.localStorage.getItem(chat_key) | 0; +} + +function save_chat() { + window.localStorage.setItem(chat_key, chat_log); +} + +function update_chat(chat_id, utc_date, user, message) { function format_time(date) { let mm = date.getMinutes(); let hh = date.getHours(); @@ -124,10 +137,9 @@ function add_chat_lines(log) { chat_text.appendChild(line); chat_text.scrollTop = chat_text.scrollHeight; } - for (let entry of log) { - chat_log.push(entry); - let [date, user, message] = entry; - date = new Date(date); + if (chat_id > chat_log) { + chat_log = chat_id; + let date = new Date(utc_date + "Z"); let day = date.toDateString(); if (day !== chat_last_day) { add_date_line(day); @@ -135,37 +147,14 @@ function add_chat_lines(log) { } add_chat_line(format_time(date), user, message); } -} - -function load_chat(game_id) { - chat_key = "chat/" + game_id; - chat_text = document.querySelector(".chat_text"); - chat_last_day = null; - chat_log = []; - let save = JSON.parse(window.localStorage.getItem(chat_key)); - if (save) { - if (Date.now() < save.expires) - add_chat_lines(save.chat); + if (chat_id > chat_seen) { + let button = document.querySelector(".chat_button"); + start_blinker("NEW MESSAGE"); + if (!chat_is_visible) + button.classList.add("new"); else - window.localStorage.removeItem(chat_key); - } - return chat_log.length; -} - -function save_chat() { - const DAY = 86400000; - let save = { expires: Date.now() + 7 * DAY, chat: chat_log }; - window.localStorage.setItem(chat_key, JSON.stringify(save)); -} - -function update_chat(log_start, log) { - if (log_start === 0) { - chat_last_day = null; - chat_log = []; - while (chat_text.firstChild) - chat_text.removeChild(chat_text.firstChild); + save_chat(); } - add_chat_lines(log); } function init_client(roles) { @@ -209,7 +198,7 @@ function init_client(roles) { socket.on('connect', () => { console.log("CONNECTED"); document.querySelector(".grid_top").classList.remove('disconnected'); - socket.emit('getchat', chat_log.length); // only send new messages when we reconnect! + socket.emit('getchat', chat_log); // only send new messages when we reconnect! }); socket.on('disconnect', () => { @@ -226,7 +215,7 @@ function init_client(roles) { document.querySelector("body").classList.add(player); for (let i = 0; i < roles.length; ++i) { let pr = players.find(p => p.role === roles[i]); - document.querySelector(USER_SEL[i]).textContent = pr ? pr.user_name : "NONE"; + document.querySelector(USER_SEL[i]).textContent = pr ? pr.name : "NONE"; } }); @@ -261,15 +250,9 @@ function init_client(roles) { document.getElementById("prompt").textContent = msg; }); - socket.on('chat', function (log_start, log) { - console.log("CHAT UPDATE", log_start, log.length); - update_chat(log_start, log); - let button = document.querySelector(".chat_button"); - start_blinker("NEW MESSAGE"); - if (!chat_is_visible) - button.classList.add("new"); - else - save_chat(); + socket.on('chat', function (item) { + console.log("CHAT MESSAGE", JSON.stringify(item)); + update_chat(item[0], item[1], item[2], item[3]); }); document.querySelector(".chat_form").addEventListener("submit", e => { diff --git a/public/join.js b/public/join.js index a5a2e3a..ce3d0d0 100644 --- a/public/join.js +++ b/public/join.js @@ -76,8 +76,12 @@ function start_event_source() { } } -function is_your_turn(player, role) { - return (game.active_role === role || game.active_role === "Both" || game.active_role === "All"); +function is_active(player, role) { + return (game.active === role || game.active === "Both" || game.active === "All"); +} + +function is_solo() { + return players.every(p => p.user_id === players[0].user_id); } function update() { @@ -94,19 +98,19 @@ function update() { let element = document.getElementById(role_id); if (player) { if (game.status > 0) { - if (is_your_turn(player, role)) - element.className = "is_your_turn"; + if (is_active(player, role)) + element.className = "is_active"; else element.className = ""; if (player.user_id === user_id) element.innerHTML = `<a href="/play/${game.game_id}/${role}">Play</a>`; else - element.innerHTML = player.user_name; + element.innerHTML = player.name; } else { if ((player.user_id === user_id) || (game.owner_id === user_id)) - element.innerHTML = `<a class="red" href="javascript:send('/part/${game.game_id}/${role}')">\u274c</a> ${player.user_name}`; + element.innerHTML = `<a class="red" href="javascript:send('/part/${game.game_id}/${role}')">\u274c</a> ${player.name}`; else - element.innerHTML = player.user_name; + element.innerHTML = player.name; } } else { if (game.status === 0) @@ -131,7 +135,7 @@ function update() { if (game.owner_id === user_id) { window.start_button.disabled = !ready; window.start_button.classList = (game.status === 0) ? "" : "hide"; - window.delete_button.classList = (game.status === 0 || game.is_solo) ? "" : "hide"; + window.delete_button.classList = (game.status === 0 || is_solo()) ? "" : "hide"; if (game.status === 0 && ready) start_blinker("READY TO START"); else diff --git a/public/style.css b/public/style.css index 20865a4..f72cdb7 100644 --- a/public/style.css +++ b/public/style.css @@ -24,22 +24,51 @@ h2 { margin-left: -1px; } .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; } -table.wide { min-width: 50rem; } +.is_active { background-color: lemonchiffon; } .error { color: brown; font-style: italic; white-space: pre-wrap; } .warning { color: brown; } .warning::before { content: "\26a0"; } -.logo { float: left; margin: 0 20px 5px 0; box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5); height: 200px; } +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; +} + table { border-collapse: collapse; } +tfoot td { background-color: gainsboro; } th { text-align: left; background-color: gainsboro; } th, td { border: 1px solid black; } th, td { 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; } + label { user-select: none; } button, input, select { font-size: 1rem; margin: 5px 0; } input[type="text"], input[type="password"], textarea { padding: 5px; } select { padding-right: 20px; } form { display: inline; } -.nowrap { white-space: nowrap; } -.is_your_turn { background-color: lemonchiffon; } button, select { margin: 5px 10px 5px 0; padding: 1px 10px; |