Initial commit

ts/app.ts

@@ -0,0 +1,71 @@
+class CanvasReceiverController {
+    private canvasDiv: HTMLDivElement;
+    private canvas!: HTMLCanvasElement;
+    private ctx!: CanvasRenderingContext2D | null;
+    private ws: WebSocket;
+
+    constructor() {
+        this.canvasDiv = document.querySelector('#canvas') as HTMLDivElement;
+
+        this.createCanvas();
+
+        this.ws = new WebSocket('ws://localhost:8081', 'json');
+
+        this.ws.onmessage = message => this.processMessage(message);
+        this.ws.onopen = () => this.ws.send("RECEIVER");
+    }
+
+    private createCanvas() {
+        this.canvas = document.createElement('canvas');
+        this.canvasDiv.appendChild(this.canvas);
+        this.canvas.width = this.canvas.offsetWidth;
+        this.canvas.height = this.canvas.offsetHeight;
+        this.ctx = this.canvas.getContext('2d');
+    }
+
+    processMessage(message: MessageEvent<any>) {
+        if (message.data === "CLEAR") {
+            this.canvasDiv.removeChild(this.canvas);
+            this.createCanvas();
+        } else {
+            this.draw(JSON.parse(message.data));
+        }
+    }
+
+    draw(path: Coordinates[]) {
+        if (!this.ctx) {
+            return;
+        }
+
+        const first = path.shift();
+
+        if (!first) {
+            return;
+        }
+
+        this.ctx.beginPath();
+        this.ctx.moveTo(first.x, first.y);
+
+        for (const cur of path) {
+            this.ctx.lineTo(cur.x, cur.y);
+        }
+
+        this.ctx.lineWidth = 1;
+        this.ctx.stroke();
+    }
+}
+
+
+class Coordinates {
+    public x: number;
+    public y: number;
+
+    constructor(x: number, y: number) {
+        this.x = x;
+        this.y = y;
+    }
+}
+
+const app = new CanvasReceiverController();
+
+export { app };