From 1edcc6725bf5fc00d4b24d95304286aa85dfb43b Mon Sep 17 00:00:00 2001 From: "A.Olokhtonov" Date: Mon, 24 Apr 2023 00:59:24 +0300 Subject: [PATCH] Moar better color/width sync --- client/client_recv.js | 17 ++++++++++++++--- client/index.html | 26 +++++++++++++------------- server/recv.js | 6 +++--- server/send.js | 15 +++++---------- 4 files changed, 35 insertions(+), 29 deletions(-) diff --git a/client/client_recv.js b/client/client_recv.js index 7e6bcac..c62a9b9 100644 --- a/client/client_recv.js +++ b/client/client_recv.js @@ -296,24 +296,35 @@ async function handle_message(state, context, d) { switch (message_type) { case MESSAGE.JOIN: case MESSAGE.INIT: { - state.me = des_u32(d); state.server_lsn = des_u32(d); state.online = true; - init_player_defaults(state, state.me); - if (state.server_lsn > state.lsn) { // Server knows something that we don't state.lsn = state.server_lsn; } + let color = config.default_color; + let width = config.default_width; + if (message_type === MESSAGE.JOIN) { localStorage.setItem('sessionId', des_u32(d)); if (config.debug_print) console.debug('join in'); } else { + color = des_u32(d); + width = des_u16(d); + state.me = parseInt(localStorage.getItem('sessionId')); if (config.debug_print) console.debug('init in'); } + init_player_defaults(state, state.me); + + const color_code = color_from_u32(color).substring(1); + + switch_color(state, document.querySelector(`.color[data-color="${color_code}"]`)); + document.querySelector('#stroke-width').value = width; + fire_event(state, width_event(width)); + const event_count = des_u32(d); const user_count = des_u32(d); diff --git a/client/index.html b/client/index.html index 6bd240a..77df1a3 100644 --- a/client/index.html +++ b/client/index.html @@ -7,20 +7,20 @@ - + - - - - - - - - + + + + + + + + - - - + + +
@@ -35,7 +35,7 @@
-
+
diff --git a/server/recv.js b/server/recv.js index 5cb9362..d33ea1e 100644 --- a/server/recv.js +++ b/server/recv.js @@ -33,7 +33,7 @@ async function recv_syn(d, session) { const event = des.event(d); if (i >= first) { event.desk_id = session.desk_id; - event.user_id = session.user_id; + event.user_id = session.id; handle_event(session, event); events.push(event); } @@ -60,7 +60,7 @@ async function recv_syn(d, session) { function recv_fire(d, session) { const event = des.event(d); - event.user_id = session.user_id; + event.user_id = session.id; switch (event.type) { case EVENT.SET_COLOR: { @@ -79,7 +79,7 @@ function recv_fire(d, session) { storage.queries.update_session_width.run({ '$id': session.id, - 'width': event.width + '$width': event.width }); break; diff --git a/server/send.js b/server/send.js index f76edcd..4ffd469 100644 --- a/server/send.js +++ b/server/send.js @@ -58,14 +58,8 @@ function event_size(event) { } function create_session(ws, desk_id) { - const user = { - id: math.crypto_random32(), - login: 'unnamed', - }; - const session = { id: math.crypto_random32(), - user_id: user.id, desk_id: desk_id, state: SESSION.OPENED, sn: 0, @@ -95,11 +89,12 @@ export async function send_init(ws) { const desk = desks[desk_id]; let opcode = MESSAGE.INIT; - let size = 1 + 4 + 4 + 4 + 4 + 4; // opcode + user_id + lsn + event count + stroke count + user count + let size = 1 + 4 + 4 + 4 + 4; // opcode + user_id + lsn + event count + stroke count + user count let session = null; if (session_id in sessions && sessions[session_id].desk_id == desk_id) { session = sessions[session_id]; + size += 4 + 2; // color + width } else { size += 4; // session id opcode = MESSAGE.JOIN; @@ -111,8 +106,6 @@ export async function send_init(ws) { session.ws = ws; session.sn = 0; // Always re-send everything on reconnect session.state = SESSION.OPENED; - session.color = 0x00; - session.width = 8; if (config.DEBUG_PRINT) console.log(`session ${session.id} opened`); @@ -133,11 +126,13 @@ export async function send_init(ws) { const s = ser.create(size); ser.u8(s, opcode); - ser.u32(s, session.user_id); ser.u32(s, session.lsn); if (opcode === MESSAGE.JOIN) { ser.u32(s, session.id); + } else { + ser.u32(s, session.color); + ser.u16(s, session.width); } ser.u32(s, desk.events.length);