JOIN event, send online info for users in init message

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

client/aux.js

@@ -47,6 +47,7 @@ function event_size(event) {
             break;
         }
 
+        case EVENT.USER_JOINED:
         case EVENT.LEAVE:
         case EVENT.CLEAR: {
             break;

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;
         }
 

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

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);
 }
 

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,

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);
         }
     }
 

server/serializer.js

@@ -67,6 +67,7 @@ export function event(s, event) {
             break;
         }
 
+        case EVENT.USER_JOINED:
         case EVENT.LEAVE:
         case EVENT.CLEAR: {
             break;

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) {