diff --git a/README.md b/README.md index 6fad53b..27d8497 100644 --- a/README.md +++ b/README.md @@ -25,7 +25,6 @@ Release: + Follow player - Eraser - Line drawing - - 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 diff --git a/client/aux.js b/client/aux.js index 39acf24..7b3b837 100644 --- a/client/aux.js +++ b/client/aux.js @@ -47,6 +47,7 @@ function event_size(event) { break; } + case EVENT.USER_JOINED: case EVENT.LEAVE: case EVENT.CLEAR: { break; diff --git a/client/client_recv.js b/client/client_recv.js index f0e4d4c..a8d87f4 100644 --- a/client/client_recv.js +++ b/client/client_recv.js @@ -64,6 +64,7 @@ function des_event(d, state = null) { break; } + case EVENT.USER_JOINED: case EVENT.LEAVE: case EVENT.CLEAR: { break; @@ -172,6 +173,12 @@ function handle_event(state, context, event, options = {}) { } switch (event.type) { + case EVENT.USER_JOINED: { + state.players[event.user_id].online = true; + draw_html(state); + break; + } + case EVENT.PREDRAW: { geometry_add_point(state, context, event.user_id, {'x': event.x, 'y': event.y}); need_draw = true; @@ -410,8 +417,10 @@ async function handle_message(state, context, d) { const user_id = des_u32(d); const user_color = des_u32(d); const user_width = des_u16(d); + const user_online = des_u8(d); init_player_defaults(state, user_id, user_color, user_width); + state.players[user_id].online = user_online === 1; } des_align(d, 4); @@ -439,6 +448,8 @@ async function handle_message(state, context, d) { console.timeEnd('init'); + draw_html(state); + break; } diff --git a/client/index.js b/client/index.js index 73242ea..e033c99 100644 --- a/client/index.js +++ b/client/index.js @@ -40,6 +40,7 @@ const EVENT = Object.freeze({ MOVE_SCREEN: 15, LEAVE: 16, MOVE_CANVAS: 17, + USER_JOINED: 18, STROKE: 20, RULER: 21, // gets re-written with EVENT.STROKE before sending to server diff --git a/client/webgl_listeners.js b/client/webgl_listeners.js index c41051a..983f1ba 100644 --- a/client/webgl_listeners.js +++ b/client/webgl_listeners.js @@ -345,14 +345,14 @@ function wheel(e, state, context) { toggle_follow_player(state, state.following_player); } - fire_event(state, movecanvas_event(state)); - const zoom_offset_x = Math.round((dz * old_zoom) * canvasp.x); const zoom_offset_y = Math.round((dz * old_zoom) * canvasp.y); state.canvas.offset.x -= zoom_offset_x; state.canvas.offset.y -= zoom_offset_y; + fire_event(state, movecanvas_event(state)); + schedule_draw(state, context); } diff --git a/server/enums.js b/server/enums.js index 121d98f..97f4c29 100644 --- a/server/enums.js +++ b/server/enums.js @@ -13,6 +13,7 @@ export const EVENT = Object.freeze({ MOVE_SCREEN: 15, LEAVE: 16, MOVE_CANVAS: 17, + USER_JOINED: 18, STROKE: 20, UNDO: 30, diff --git a/server/send.js b/server/send.js index 504d984..78cecc5 100644 --- a/server/send.js +++ b/server/send.js @@ -21,6 +21,7 @@ function event_size(event) { break; } + case EVENT.USER_JOINED: case EVENT.LEAVE: case EVENT.CLEAR: { break; @@ -127,7 +128,7 @@ export async function send_init(ws) { const other_session = sessions[sid]; if (other_session.id !== session_id && other_session.desk_id === desk_id) { ++user_count; - size += 4 + 4 + 2; // user id + color + width + size += 4 + 4 + 2 + 1; // user id + color + width + online } } @@ -158,6 +159,7 @@ export async function send_init(ws) { ser.u32(s, other_session.id); ser.u32(s, other_session.color); ser.u16(s, other_session.width); + ser.u8(s, other_session.state === SESSION.READY); } } diff --git a/server/serializer.js b/server/serializer.js index 936e057..d535184 100644 --- a/server/serializer.js +++ b/server/serializer.js @@ -67,6 +67,7 @@ export function event(s, event) { break; } + case EVENT.USER_JOINED: case EVENT.LEAVE: case EVENT.CLEAR: { break; diff --git a/server/server.js b/server/server.js index aa1ca3e..edc5428 100644 --- a/server/server.js +++ b/server/server.js @@ -51,6 +51,8 @@ export function startup() { websocket: { open(ws) { send.send_init(ws); + const userjoin_event = {'type': EVENT.USER_JOINED, 'user_id': ws.data.session_id}; + send.fire_event(sessions[ws.data.session_id], userjoin_event); }, async message(ws, u8array) {