diff --git a/README.md b/README.md index c21a7de..4c0068f 100644 --- a/README.md +++ b/README.md @@ -6,6 +6,7 @@ Release: - Z-prepass fringe bug (also, when do we enable the prepass?) - Textured quads (pictures, code already written in older version) - Resize and move pictures (draw handles) + - Further investigate GC pauses in Firefox - Debug - Restore ability to limit event range * Listeners/events/multiplayer @@ -13,22 +14,23 @@ Release: + Fix blinking own stroke inbetween SYN->server and SYN->client + Drag with mouse button 3 + Investigate skipped inputs on mobile (panning, zooming) [Events were not actually getting skipped. The stroke previews were just not being drawn] - - Save events to indexeddb (as some kind of a blob), restore on reconnect and page reload - Do NOT use session id as player id LUL + - Save events to indexeddb (as some kind of a blob), restore on reconnect and page reload - Local prediction for tools! - Be able to have multiple "current" strokes per player. In case of bad internet this can happen! - - Missing features I do not consider bonus + * Missing features I do not consider bonus + + Player pointers + - Player screens - Eraser - Line drawing - - Player screens/pointers - Follow player (like Ligma) - Color picker (or at the very least an Open Color color pallete) - Undo/redo - Dynamic svg cursor to represent the brush - - Polish + * Polish * Use typedvector where appropriate - Show what's happening while the desk is loading (downloading, processing, uploading to gpu) - - Settings panel (including the setting for "offline mode") + - Settings panel for config values (including the setting for "offline mode") - Set up VAOs - Presentation / "marketing" - Title @@ -50,7 +52,6 @@ Bonus: - Further optimization - Draw LOD size histogram for various cases (maybe we see that in our worst case 90% of strokes are down to 3-4 points) - If we see lots of very low detail strokes, precompute zoom level for 3,4,... points left - - Further investigate GC pauses on Mobile Firefox Bonus-bonus: - Actually infinite canvas (replace floats with something, some kind of fixed point scheme? chunks? multilevel scheme?) diff --git a/client/aux.js b/client/aux.js index e6718db..332e489 100644 --- a/client/aux.js +++ b/client/aux.js @@ -36,11 +36,13 @@ function event_size(event) { let size = 4; // type switch (event.type) { - case EVENT.PREDRAW: { + case EVENT.PREDRAW: + case EVENT.MOVE_CURSOR: { size += 4 * 2; break; } - + + case EVENT.LEAVE: case EVENT.CLEAR: { break; } @@ -153,4 +155,16 @@ function tv_clear(tv) { tv.size = 0; } +function HTML(html) { + const template = document.createElement('template'); + template.innerHTML = html.trim(); + return template.content.firstChild; +} +function insert_player_cursor(player_id) { + const color = color_from_u32(player_id); + const cursor = HTML(`
`); + cursor.style.background = color; + document.querySelector('.html-hud').appendChild(cursor); + return cursor; +} diff --git a/client/client_recv.js b/client/client_recv.js index 1987e8b..5aed22e 100644 --- a/client/client_recv.js +++ b/client/client_recv.js @@ -58,10 +58,17 @@ function des_event(d, state = null) { break; } + case EVENT.LEAVE: case EVENT.CLEAR: { break; } + case EVENT.MOVE_CURSOR: { + event.x = des_f32(d); + event.y = des_f32(d); + break; + } + case EVENT.SET_COLOR: { event.color = des_u32(d); break; @@ -137,6 +144,8 @@ function init_player_defaults(state, player_id, color = config.default_color, wi 'color': color, 'width': width, 'points': [], + 'online': false, + 'cursor': {'x': 0, 'y': 0}, }; } @@ -161,6 +170,27 @@ function handle_event(state, context, event, options = {}) { break; } + case EVENT.LEAVE: { + if (event.user_id in state.players) { + state.players[event.user_id].online = false; + draw_html(state); + } + break; + } + + case EVENT.MOVE_CURSOR: { + if (event.user_id in state.players) { + state.players[event.user_id].cursor.x = event.x; + state.players[event.user_id].cursor.y = event.y; + state.players[event.user_id].online = true; + } + + // Should we syncronize this to RAF? + draw_html(state); + + break; + } + case EVENT.SET_COLOR: { state.players[event.user_id].color = event.color; break; diff --git a/client/client_send.js b/client/client_send.js index 07d33b3..e7525d8 100644 --- a/client/client_send.js +++ b/client/client_send.js @@ -79,6 +79,12 @@ function ser_event(s, event) { break; } + case EVENT.MOVE_CURSOR: { + ser_f32(s, event.x); + ser_f32(s, event.y); + break; + } + case EVENT.SET_COLOR: { ser_u32(s, event.color); break; @@ -312,3 +318,11 @@ function clear_event(state) { 'type': EVENT.CLEAR }; } + +function movecursor_event(x, y) { + return { + 'type': EVENT.MOVE_CURSOR, + 'x': x, + 'y': y, + }; +} diff --git a/client/default.css b/client/default.css index 147c49a..8833166 100644 --- a/client/default.css +++ b/client/default.css @@ -51,6 +51,23 @@ canvas.mousemoving { cursor: move; } +.html-hud { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + z-index: 1; +} + +.html-hud .player-cursor { + position: absolute; + width: 16px; + height: 16px; + background: red; +} + .tools-wrapper { position: fixed; bottom: 0; diff --git a/client/index.html b/client/index.html index 3ceb5c8..1d9a745 100644 --- a/client/index.html +++ b/client/index.html @@ -27,6 +27,7 @@