aolo2
/
desk2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Moar better color/width sync

infinite
A.Olokhtonov 2 years ago
parent
ac0d8f7605
commit
1edcc6725b
4 changed files with 35 additions and 29 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 17
      client/client_recv.js
  2. 26
      client/index.html
  3. 6
      server/recv.js
  4. 15
      server/send.js

17
client/client_recv.js
Unescape View File

@ -296,24 +296,35 @@ async function handle_message(state, context, d) { @@ -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);

26
client/index.html
Unescape View File

@ -7,20 +7,20 @@ @@ -7,20 +7,20 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="shortcut icon" href="icons/favicon.svg" id="favicon">
<link rel="stylesheet" type="text/css" href="default.css?v=19">
<link rel="stylesheet" type="text/css" href="default.css?v=22">
<script type="text/javascript" src="aux.js?v=19"></script>
<script type="text/javascript" src="math.js?v=19"></script>
<script type="text/javascript" src="tools.js?v=19"></script>
<script type="text/javascript" src="webgl_geometry.js?v=19"></script>
<script type="text/javascript" src="webgl_shaders.js?v=19"></script>
<script type="text/javascript" src="webgl_listeners.js?v=19"></script>
<script type="text/javascript" src="webgl_draw.js?v=19"></script>
<script type="text/javascript" src="index.js?v=19"></script>
<script type="text/javascript" src="aux.js?v=22"></script>
<script type="text/javascript" src="math.js?v=22"></script>
<script type="text/javascript" src="tools.js?v=22"></script>
<script type="text/javascript" src="webgl_geometry.js?v=22"></script>
<script type="text/javascript" src="webgl_shaders.js?v=22"></script>
<script type="text/javascript" src="webgl_listeners.js?v=22"></script>
<script type="text/javascript" src="webgl_draw.js?v=22"></script>
<script type="text/javascript" src="index.js?v=22"></script>
<script type="text/javascript" src="client_send.js?v=19"></script>
<script type="text/javascript" src="client_recv.js?v=19"></script>
<script type="text/javascript" src="websocket.js?v=19"></script>
<script type="text/javascript" src="client_send.js?v=22"></script>
<script type="text/javascript" src="client_recv.js?v=22"></script>
<script type="text/javascript" src="websocket.js?v=22"></script>
</head>
<body>
<div class="main">
@ -35,7 +35,7 @@ @@ -35,7 +35,7 @@
<div class="pallete-wrapper">
<div class="pallete">
<div class="color active" data-color="000000"><div class="color-pane" style="background: #000000;"></div></div>
<div class="color" data-color="000000"><div class="color-pane" style="background: #000000;"></div></div>
<div class="color" data-color="ffffff"><div class="color-pane" style="background: #ffffff;"></div></div>
<div class="color" data-color="d65c5c"><div class="color-pane" style="background: #d65c5c;"></div></div>
<div class="color" data-color="d6835c"><div class="color-pane" style="background: #d6835c;"></div></div>

6
server/recv.js
Unescape View File

@ -33,7 +33,7 @@ async function recv_syn(d, session) { @@ -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) { @@ -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) { @@ -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;

15
server/send.js
Unescape View File

@ -58,14 +58,8 @@ function event_size(event) { @@ -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) { @@ -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) { @@ -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) { @@ -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);

Write Preview
Loading…
Cancel
Save