- 
+
diff --git a/client/math.js b/client/math.js
index 2d38e62..b11ffd9 100644
--- a/client/math.js
+++ b/client/math.js
@@ -166,9 +166,9 @@ function stroke_intersects_region(points, bbox) {
}
function color_to_u32(color_str) {
- const r = parseInt(color_str.substring(1, 3), 16);
- const g = parseInt(color_str.substring(3, 5), 16);
- const b = parseInt(color_str.substring(5, 7), 16);
+ const r = parseInt(color_str.substring(0, 2), 16);
+ const g = parseInt(color_str.substring(2, 4), 16);
+ const b = parseInt(color_str.substring(4, 6), 16);
return (r << 16) | (g << 8) | b;
}
diff --git a/client/tools.js b/client/tools.js
index 55b7eb7..adedbac 100644
--- a/client/tools.js
+++ b/client/tools.js
@@ -1,26 +1,35 @@
-function tools_switch(state, tool) {
+function switch_tool(state, item) {
+ const tool = item.getAttribute('data-tool');
+
if (state.tools.active_element) {
state.tools.active_element.classList.remove('active');
}
state.tools.active = tool;
- state.tools.active_element = document.querySelector(`.tool[data-tool="${tool}"]`);
+ state.tools.active_element = item;
state.tools.active_element.classList.add('active');
}
-function init_tools(state, context) {
- const pencil = document.querySelector('.tool[data-tool="pencil"]');
- const ruler = document.querySelector('.tool[data-tool="ruler"]');
- const eraser = document.querySelector('.tool[data-tool="eraser"]');
- const undo = document.querySelector('.tool[data-tool="undo"]');
-
- pencil.addEventListener('click', () => tools_switch(state, 'pencil'));
- ruler.addEventListener('click', () => tools_switch(state, 'ruler'));
- eraser.addEventListener('click', () => tools_switch(state, 'eraser'));
- undo.addEventListener('click', () => {
- pop_stroke(state, context);
- window.requestAnimationFrame(() => draw(state, context));
- });
-
- tools_switch(state, 'pencil');
+function switch_color(state, item) {
+ const color = item.getAttribute('data-color');
+
+ if (state.colors.active_element) {
+ state.colors.active_element.classList.remove('active');
+ }
+
+ state.colors.active = color_to_u32(color);
+ state.colors.active_element = item;
+ state.colors.active_element.classList.add('active');
+}
+
+function init_tools(state) {
+ const tools = document.querySelectorAll('.tools .tool');
+ const colors = document.querySelectorAll('.pallete .color');
+
+ tools.forEach((item) => { item.addEventListener('click', () => switch_tool(state, item)); });
+ colors.forEach((item) => { item.addEventListener('click', () => switch_color(state, item)); });
+
+ // TODO: from localstorage
+ switch_tool(state, document.querySelector('.tool[data-tool="pencil"]'));
+ switch_color(state, document.querySelector('.color[data-color="000000"]'));
}
\ No newline at end of file
diff --git a/client/webgl.js b/client/webgl.js
index 6a108ee..5524884 100644
--- a/client/webgl.js
+++ b/client/webgl.js
@@ -163,7 +163,6 @@ function main() {
'lsn': 0,
'server_lsn': 0,
- 'color': 0,
'stroke_width': 8,
'touch': {
@@ -193,6 +192,11 @@ function main() {
'active_element': null,
},
+ 'colors': {
+ 'active': null,
+ 'active_element': null,
+ },
+
'timers': {
'ws_reconnect': null,
},
@@ -231,7 +235,7 @@ function main() {
init_webgl(state, context);
init_listeners(state, context);
- init_tools(state, context);
+ init_tools(state);
ws_connect(state, context, true);
diff --git a/client/webgl_geometry.js b/client/webgl_geometry.js
index e8cb430..0b573e7 100644
--- a/client/webgl_geometry.js
+++ b/client/webgl_geometry.js
@@ -141,15 +141,28 @@ function recompute_dynamic_data(state, context) {
context.dynamic_positions_f32 = new Float32Array(total_dynamic_length);
context.dynamic_colors_u8 = new Uint8Array(total_dynamic_length / 2 * 3);
+ // TODO: preview stroke colors for other users
+ context.dynamic_colors_u8.fill(0);
+
let at = 0;
for (const player_id in context.dynamic_positions) {
context.dynamic_positions_f32.set(context.dynamic_positions[player_id], at);
+
+ if (parseInt(player_id) === state.me) {
+ const color_u32 = state.colors.active;
+ const r = (color_u32 >> 16) & 0xFF;
+ const g = (color_u32 >> 8) & 0xFF;
+ const b = color_u32 & 0xFF;
+ for (let i = 0; i < context.dynamic_positions[player_id].length; ++i) {
+ context.dynamic_colors_u8[at / 2 * 3 + i * 3 + 0] = r;
+ context.dynamic_colors_u8[at / 2 * 3 + i * 3 + 1] = g;
+ context.dynamic_colors_u8[at / 2 * 3 + i * 3 + 2] = b;
+ }
+ }
+
at += context.dynamic_positions[player_id].length;
}
-
- // TODO: preview stroke colors
- context.dynamic_colors_u8.fill(0);
}
function update_dynamic_stroke(state, context, player_id, point) {
@@ -157,7 +170,7 @@ function update_dynamic_stroke(state, context, player_id, point) {
state.current_strokes[player_id] = {
'points': [],
'width': 8, // TODO
- 'color': 0, // TODO
+ 'color': state.colors.active,
};
context.dynamic_positions[player_id] = [];
@@ -177,6 +190,7 @@ function update_dynamic_stroke(state, context, player_id, point) {
function clear_dynamic_stroke(state, context, player_id) {
if (player_id in state.current_strokes) {
state.current_strokes[player_id].points.length = 0;
+ state.current_strokes[player_id].color = state.colors.active;
context.dynamic_positions[player_id].length = 0;
recompute_dynamic_data(state, context);
}
diff --git a/client/webgl_listeners.js b/client/webgl_listeners.js
index b975b9e..cbfac86 100644
--- a/client/webgl_listeners.js
+++ b/client/webgl_listeners.js
@@ -102,7 +102,7 @@ function mouseup(e, state, context) {
if (state.drawing) {
const stroke = {
- 'color': state.color,
+ 'color': state.colors.active,
'width': state.stroke_width,
'points': process_stroke(state.current_strokes[state.me].points),
'user_id': state.me,
@@ -229,6 +229,7 @@ function touchmove(e, state, context) {
if (state.touch.buffered.length > 0) {
clear_dynamic_stroke(state, context, state.me);
+ // BUG: can't see these on other clients!!
for (const p of state.touch.buffered) {
update_dynamic_stroke(state, context, state.me, p);
fire_event(predraw_event(canvasp.x, canvasp.y));
@@ -314,7 +315,7 @@ function touchend(e, state, context) {
// await queue_event(event);
const stroke = {
- 'color': state.color,
+ 'color': state.colors.active,
'width': state.stroke_width,
'points': process_stroke(state.current_strokes[state.me].points),
'user_id': state.me,