diff --git a/client/default.css b/client/default.css
index 99b5e29..ecc94fd 100644
--- a/client/default.css
+++ b/client/default.css
@@ -15,6 +15,10 @@ html, body {
overflow: hidden;
}
+.dhide {
+ display: none !important;
+}
+
canvas {
width: 100%;
height: 100%;
@@ -243,4 +247,12 @@ input[type=range]::-moz-range-track {
.phone-extra-controls {
display: flex;
}
+}
+
+#stroke-preview {
+ position: absolute;
+ border-radius: 50%;
+ left: 50%;
+ top: 96px;
+ transform: translate(-50%, -50%);
}
\ No newline at end of file
diff --git a/client/index.html b/client/index.html
index 33f0951..0b8e6cc 100644
--- a/client/index.html
+++ b/client/index.html
@@ -6,19 +6,19 @@
-
+
-
-
-
-
-
-
-
+
+
+
+
+
+
+
-
-
-
+
+
+
@@ -27,6 +27,7 @@
+
diff --git a/client/tools.js b/client/tools.js
index 8546110..0d01ab2 100644
--- a/client/tools.js
+++ b/client/tools.js
@@ -22,9 +22,30 @@ function switch_color(state, item) {
state.colors.active_element.classList.add('active');
}
+function show_stroke_preview(state, size) {
+ const preview = document.querySelector('#stroke-preview');
+
+ preview.style.width = size * state.canvas.zoom + 'px';
+ preview.style.height = size * state.canvas.zoom + 'px';
+ preview.style.background = color_from_u32(state.colors.active);
+
+ preview.classList.remove('dhide');
+}
+
+function hide_stroke_preview() {
+ document.querySelector('#stroke-preview').classList.add('dhide');
+}
+
function switch_stroke_width(e, state) {
const value = e.target.value;
state.stroke_width = value;
+ show_stroke_preview(state, value);
+
+ if (state.hide_preview) {
+ clearTimeout(state.hide_preview);
+ }
+
+ state.hide_preview = setTimeout(hide_stroke_preview, config.brush_preview_timeout);
}
function init_tools(state) {
@@ -38,7 +59,10 @@ function init_tools(state) {
switch_tool(state, document.querySelector('.tool[data-tool="pencil"]'));
switch_color(state, document.querySelector('.color[data-color="000000"]'));
- document.querySelector('#stroke-width').value = state.stroke_width;
- document.querySelector('#stroke-width').addEventListener('input', (e) => switch_stroke_width(e, state));
+ const slider = document.querySelector('#stroke-width');
+
+ slider.value = state.stroke_width;
+ slider.addEventListener('input', (e) => switch_stroke_width(e, state));
+
document.querySelector('.phone-extra-controls').addEventListener('click', zenmode);
}
\ No newline at end of file
diff --git a/client/webgl.js b/client/webgl.js
index 2bef762..0c5b5a1 100644
--- a/client/webgl.js
+++ b/client/webgl.js
@@ -80,6 +80,7 @@ const config = {
image_url: 'http://192.168.100.2/images/',
sync_timeout: 1000,
ws_reconnect_timeout: 10000,
+ brush_preview_timeout: 1000,
second_finger_timeout: 500,
buffer_first_touchmoves: 5,
debug_print: true,
@@ -197,6 +198,7 @@ function main() {
'timers': {
'ws_reconnect': null,
+ 'hide_preview': null,
},
'players': {},