placer request

src/client/canvas.ts

@@ -1,6 +1,6 @@
 import { convertHex } from '../common/convert';
 import { clamp, debounce } from '../common/helper';
-import { Placement } from '../common/types/canvas';
+import { CanvasRecord, Placement } from '../common/types/canvas';
 import { IcyNetUser } from '../server/types/user';
 import { Picker } from './picker';
 import { $ } from './utils/dom';
@@ -9,7 +9,8 @@ export class ViewCanvas {
   public picker = new Picker();
   private _user?: IcyNetUser;
 
-  private _fn?: (placement: Placement) => void;
+  private _placeFn?: (placement: Placement) => void;
+  private _getPlacerFn?: (x: number, y: number) => Promise<CanvasRecord>;
   private _canvas = $('<canvas class="canvas">') as HTMLCanvasElement;
   private _ctx = this._canvas.getContext('2d');
   private _wrapper = $('<div class="canvas__wrapper">');
@@ -41,6 +42,8 @@ export class ViewCanvas {
   private _dragging = false;
   private _pinching = false;
   private _previousPinchLength = 0;
+  private _placerTag: HTMLElement | null = null;
+  private _placerRequestTime: number = 0;
 
   constructor() {}
 
@@ -61,6 +64,8 @@ export class ViewCanvas {
   }
 
   public moveCursor(): void {
+    this._resetPlacerTag();
+
     // Zoom multiplier
     // Apparent size of the canvas after scaling it
     const realSize = this._zoom * this._size;
@@ -93,6 +98,10 @@ export class ViewCanvas {
     }) ${this._zoom.toFixed(2)}x`;
 
     this._updateURL();
+
+    if (this._zoom > 40) {
+      this._getPlacerAt(this._relcursorx, this._relcursory);
+    }
   }
 
   public initialize(): void {
@@ -218,8 +227,8 @@ export class ViewCanvas {
     });
 
     this.picker.registerOnPlace((color) => {
-      if (this._fn) {
+      if (this._placeFn) {
-        this._fn({
+        this._placeFn({
           x: this._relcursorx,
           y: this._relcursory,
           c: color,
@@ -302,7 +311,13 @@ export class ViewCanvas {
   }
 
   public registerOnPlace(fn: (placement: Placement) => void): void {
-    this._fn = fn;
+    this._placeFn = fn;
+  }
+
+  public registerGetPlacer(
+    fn: (x: number, y: number) => Promise<CanvasRecord>,
+  ): void {
+    this._getPlacerFn = fn;
   }
 
   public setUser(user: IcyNetUser): void {
@@ -324,6 +339,46 @@ export class ViewCanvas {
     );
   }, 500);
 
+  private _getPlacerAtWaiter = debounce(
+    (x: number, y: number, order: number) => {
+      console.log(this._placerRequestTime);
+      if (this._placerRequestTime === order) {
+        this._getPlacerFn(x, y).then((placer) => {
+          if (placer && this._placerRequestTime === order) {
+            this._showPlacerTag(placer);
+          }
+        });
+      }
+    },
+    1000,
+  );
+
+  private _getPlacerAt(x: number, y: number) {
+    if (!this._getPlacerFn) {
+      return;
+    }
+
+    const stamp = Date.now();
+    this._placerRequestTime = +stamp;
+    this._getPlacerAtWaiter(x, y, stamp);
+  }
+
+  private _showPlacerTag(placer: CanvasRecord): void {
+    this._placerTag = $('<div class="canvas__cursor-placer">');
+    this._placerTag.innerText = placer.user;
+    this._placerTag.style.setProperty('--base-size', `${this._zoom / 1.5}px`);
+    this._placerTag.style.setProperty('--base-scale', `${this._zoom / 100}`);
+    this._cursor.append(this._placerTag);
+  }
+
+  private _resetPlacerTag(): void {
+    this._placerRequestTime = 0;
+    if (this._placerTag) {
+      this._cursor.removeChild(this._placerTag);
+      this._placerTag = null;
+    }
+  }
+
   private _resetPositionOrCenter(): void {
     const search = window.location.search.substring(1);
     if (!search?.length) {

src/client/index.ts

@@ -4,6 +4,9 @@ import { ViewCanvas } from './canvas';
 
 const socket = SocketIO();
 const canvas = new ViewCanvas();
+let placerRequestResolve: any;
+let placerRequest: any;
+
 canvas.initialize();
 
 socket.on('connect', () => {
@@ -32,6 +35,25 @@ socket.on('colorack', ({ x, y, c }: Placement) => {
   canvas.setPixel(x, y, c);
 });
 
+socket.on('placerat', (response: CanvasRecord) => {
+  if (placerRequest) {
+    placerRequestResolve(response);
+  }
+});
+
 canvas.registerOnPlace((placement) => {
   socket.emit('color', placement);
 });
+
+canvas.registerGetPlacer((x: number, y: number) => {
+  if (placerRequest) {
+    placerRequestResolve(null);
+  }
+
+  placerRequest = new Promise((resolve) => {
+    placerRequestResolve = resolve;
+  });
+
+  socket.emit('getplacer', { x, y, reqt: Date.now() });
+  return placerRequest;
+});

src/server/index.ts

@@ -157,6 +157,17 @@ io.on('connection', (socket) => {
     socket.emit('colorack', { c, x, y, t });
   });
 
+  socket.on('getplacer', ({ x, y, reqt }) => {
+    canvas.history
+      .getPlacerAt(x, y)
+      .then((placer) => {
+        if (placer) {
+          socket.emit('placerat', { ...placer, reqt });
+        }
+      })
+      .catch((e) => console.error(e));
+  });
+
   socket.on('disconnect', () => {
     connections.splice(connections.indexOf(socket), 1);
   });

src/server/object/canvas.ts

@@ -6,16 +6,16 @@ import { Imager } from './imager';
 export class Canvas {
   private _fn?: (change: CanvasRecord) => void;
   private _canvas!: Uint32Array;
-
-  private _history = new History();
   private _imager = new Imager(this.size);
 
+  public history = new History();
+
   constructor(public size = 1000) {}
 
   public async initialize(): Promise<void> {
     this._imager.registerGetCanvas(() => this._canvas);
 
-    await this._history.initialize();
+    await this.history.initialize();
 
     const image = await this._imager.load();
     if (!image) {
@@ -51,7 +51,7 @@ export class Canvas {
       ts: Date.now(),
     };
 
-    this._history.insert(record);
+    this.history.insert(record);
     this._canvas[index] = color;
 
     if (this._fn) {

src/server/object/history.ts

@@ -35,4 +35,12 @@ export class History {
       user,
     );
   }
+
+  async getPlacerAt(x: number, y: number): Promise<CanvasRecord | undefined> {
+    return this.db.get<CanvasRecord>(
+      `SELECT * FROM Placement WHERE x = ? AND y = ? ORDER BY ts DESC`,
+      x,
+      y,
+    );
+  }
 }