Pretty(er) player cursor: bright colors and an actual icon

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)

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(`<div class="player-cursor" data-player-id="${player_id}"></div>`);
-    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(`<svg viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" class="player-cursor" data-player-id="${player_id}">${path_copy.outerHTML}</svg>`);
     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;
+}

client/default.css

@@ -65,7 +65,6 @@ canvas.mousemoving {
     position: absolute;
     width: 16px;
     height: 16px;
-    background: red;
 }
 
 .tools-wrapper {

client/icons/player-cursor.svg

@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="23"
+   height="27"
+   viewBox="0 0 23 27"
+   version="1.1"
+   id="svg5"
+   sodipodi:docname="player-cursor.svg"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="px"
+     showgrid="true"
+     inkscape:zoom="26.910887"
+     inkscape:cx="10.962106"
+     inkscape:cy="13.488965"
+     inkscape:window-width="2558"
+     inkscape:window-height="1412"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="layer1">
+    <inkscape:grid
+       type="xygrid"
+       id="grid256"
+       originx="-4.5000348"
+       originy="-4.5000845" />
+  </sodipodi:namedview>
+  <defs
+     id="defs2" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <path
+       style="fill:#ff0000;fill-opacity:1;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="m 1.4999652,25.999915 9.9999998,-24.9999995 10,24.9999995 c -9.905078,-3.040471 -10,-3 -19.9999998,0 z"
+       id="path371"
+       sodipodi:nodetypes="cccc" />
+  </g>
+</svg>

client/index.html

@@ -29,10 +29,6 @@
         <canvas id="c"></canvas>
         <div class="html-hud"></div>
 
-        <!-- <svg viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg"  style="position: absolute; left:0; top: 0; pointer-events: none;">
-          <polyline points="150,150 225,230 280,120" / fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="5">
-        </svg> -->
-
         <div class="debug-window dhide">
             <div id="debug-stats" class="flexcol"></div>
             <div class="debug-timings flexcol">

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);

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}%)`;
+}

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)`;
         }
     }
 }