From 67ce47407073bf5d4f485e199cc96a6a7f0efd5c Mon Sep 17 00:00:00 2001
From: Robin Steinberg <robinsteinberg92@gmail.com>
Date: Tue, 24 Aug 2021 22:26:23 +0200
Subject: [PATCH] Send paths to server

---
 ts/app.ts | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/ts/app.ts b/ts/app.ts
index bba623c..38522a1 100644
--- a/ts/app.ts
+++ b/ts/app.ts
@@ -2,6 +2,7 @@ class CanvasController {
     private canvas: HTMLCanvasElement;
     private canvasDiv: HTMLDivElement;
     private ctx: CanvasRenderingContext2D | null;
+    private ws: WebSocket;
 
     private isMouseDown: boolean = false;
     private x: number = 0;
@@ -11,18 +12,21 @@ class CanvasController {
     private currentPath: Coordinates[] = [];
 
     constructor() {
-        this.canvas = document.createElement("canvas");
-        this.canvasDiv = document.querySelector("#canvas") as HTMLDivElement;
+        this.canvas = document.createElement('canvas');
+        this.canvasDiv = document.querySelector('#canvas') as HTMLDivElement;
 
         this.canvasDiv.appendChild(this.canvas);
         this.canvas.width = this.canvas.offsetWidth;
         this.canvas.height = this.canvas.offsetHeight;
-        this.ctx = this.canvas.getContext("2d");
+        this.ctx = this.canvas.getContext('2d');
 
         // Events
-        this.canvasDiv.addEventListener("mousedown", e => this.onMouseDown(e));
-        this.canvasDiv.addEventListener("mouseup", () => this.onMouseUp());
-        this.canvasDiv.addEventListener("mousemove", e => this.onMouseMove(e));
+        this.canvasDiv.addEventListener('mousedown', e => this.onMouseDown(e));
+        this.canvasDiv.addEventListener('mouseup', () => this.onMouseUp());
+        this.canvasDiv.addEventListener('mousemove', e => this.onMouseMove(e));
+
+        this.ws = new WebSocket('ws://localhost:8081', 'json');
+        this.ws.onopen = () => this.ws.send("SENDER");
     }
 
     onMouseDown(event: MouseEvent) {
@@ -36,6 +40,7 @@ class CanvasController {
         this.isMouseDown = false;
         this.ctx?.closePath();
         this.paths.push(this.currentPath);
+        this.sendPath();
     }
 
     onMouseMove(event: MouseEvent) {
@@ -54,6 +59,10 @@ class CanvasController {
         this.x = event.clientX;
         this.y = event.clientY;
     }
+
+    sendPath() {
+        this.ws.send(JSON.stringify(this.currentPath));
+    }
 }