From ee1d1471f4829849b7429672dfa06cc3248f1c02 Mon Sep 17 00:00:00 2001 From: "A.Olokhtonov" Date: Tue, 9 Jan 2024 22:47:57 +0300 Subject: [PATCH] Pretty(er) player cursor: bright colors and an actual icon --- README.md | 3 +- client/aux.js | 19 +++++++++--- client/default.css | 1 - client/icons/player-cursor.svg | 54 ++++++++++++++++++++++++++++++++++ client/index.html | 4 --- client/index.js | 3 +- client/math.js | 16 ++++++++++ client/webgl_draw.js | 4 +-- 8 files changed, 91 insertions(+), 13 deletions(-) create mode 100644 client/icons/player-cursor.svg diff --git a/README.md b/README.md index 4c0068f..aa482a4 100644 --- a/README.md +++ b/README.md @@ -20,7 +20,8 @@ Release: - Be able to have multiple "current" strokes per player. In case of bad internet this can happen! * Missing features I do not consider bonus + Player pointers - - Player screens + - Player list + - Follow player - Eraser - Line drawing - Follow player (like Ligma) diff --git a/client/aux.js b/client/aux.js index 332e489..7b81a18 100644 --- a/client/aux.js +++ b/client/aux.js @@ -161,10 +161,21 @@ function HTML(html) { return template.content.firstChild; } -function insert_player_cursor(player_id) { - const color = color_from_u32(player_id); - const cursor = HTML(`
`); - cursor.style.background = color; +function insert_player_cursor(state, player_id) { + const color = random_bright_color_from_seed(parseInt(player_id)); + const path_copy = state.cursor_path.cloneNode(); + path_copy.style.fill = color; + const cursor = HTML(`${path_copy.outerHTML}`); document.querySelector('.html-hud').appendChild(cursor); return cursor; } + +async function load_player_cursor_template(state) { + const resp = await fetch('icons/player-cursor.svg'); + const text = await resp.text(); + const parser = new DOMParser(); + const parsed_xml = parser.parseFromString(text, 'image/svg+xml'); + const path = parsed_xml.querySelector('path'); + + state.cursor_path = path; +} diff --git a/client/default.css b/client/default.css index 8833166..bd9507b 100644 --- a/client/default.css +++ b/client/default.css @@ -65,7 +65,6 @@ canvas.mousemoving { position: absolute; width: 16px; height: 16px; - background: red; } .tools-wrapper { diff --git a/client/icons/player-cursor.svg b/client/icons/player-cursor.svg new file mode 100644 index 0000000..e7afe8f --- /dev/null +++ b/client/icons/player-cursor.svg @@ -0,0 +1,54 @@ + + + + + + + + + + + + diff --git a/client/index.html b/client/index.html index 1d9a745..2723500 100644 --- a/client/index.html +++ b/client/index.html @@ -29,10 +29,6 @@
- -
diff --git a/client/index.js b/client/index.js index 4787a4e..f4a6633 100644 --- a/client/index.js +++ b/client/index.js @@ -261,7 +261,8 @@ function main() { 'gpu_timer_ext': null, 'active_image': null, }; - + + load_player_cursor_template(state); start_spinner(state); const url = new URL(window.location.href); diff --git a/client/math.js b/client/math.js index 84bb4bc..95b8d97 100644 --- a/client/math.js +++ b/client/math.js @@ -341,3 +341,19 @@ function quad_union(a, b) { function box_area(box) { return (box.x2 - box.x1) * (box.y2 - box.y1); } + +// https://stackoverflow.com/a/47593316 +function mulberry32(seed) { + let t = seed + 0x6D2B79F5; + t = Math.imul(t ^ t >>> 15, t | 1); + t ^= t + Math.imul(t ^ t >>> 7, t | 61); + return ((t ^ t >>> 14) >>> 0) / 4294967296; +} + +function random_bright_color_from_seed(seed) { + const h = Math.round(mulberry32(seed) * 360); + const s = 75; + const l = 50; + + return `hsl(${h}deg ${s}% ${l}%)`; +} diff --git a/client/webgl_draw.js b/client/webgl_draw.js index 1c81b9b..0f41335 100644 --- a/client/webgl_draw.js +++ b/client/webgl_draw.js @@ -54,7 +54,7 @@ function draw_html(state) { let player_cursor_element = document.querySelector(`.player-cursor[data-player-id="${player_id}"]`); if (player_cursor_element === null && player.online) { - player_cursor_element = insert_player_cursor(player_id); + player_cursor_element = insert_player_cursor(state, player_id); } if (!player.online && player_cursor_element !== null) { @@ -63,7 +63,7 @@ function draw_html(state) { if (player_cursor_element && player.online) { const screenp = canvas_to_screen(state, player.cursor); - player_cursor_element.style.transform = `translate(${Math.round(screenp.x)}px, ${Math.round(screenp.y)}px)`; + player_cursor_element.style.transform = `translate(${Math.round(screenp.x)}px, ${Math.round(screenp.y)}px) rotate(-30deg)`; } } }