diff --git a/index.html b/index.html
index c41c2cb..0b7915e 100644
--- a/index.html
+++ b/index.html
@@ -1,8 +1,8 @@
- Canvas Demo
-
+ Canvas Sender
+
@@ -15,4 +15,6 @@
border: 1px solid black;
}
+
+ Open receiver
diff --git a/receiver.html b/receiver.html
new file mode 100644
index 0000000..ca1f11d
--- /dev/null
+++ b/receiver.html
@@ -0,0 +1,18 @@
+
+
+
+ Canvas Receiver
+
+
+
+
+
+
+
+
diff --git a/ts/canvasReceiver.ts b/ts/canvasReceiver.ts
new file mode 100644
index 0000000..5b26b27
--- /dev/null
+++ b/ts/canvasReceiver.ts
@@ -0,0 +1,84 @@
+import CanvasUtil from './canvas-util/canvasUtil.js';
+import Coordinates from './canvas-util/coordinates.js';
+
+class CanvasReceiverController {
+ private canvas!: HTMLCanvasElement;
+ private canvasDiv: HTMLDivElement;
+ private canvasUtil: CanvasUtil;
+ private ws: WebSocket;
+
+ /**
+ * Represents whether the app is waiting for the first coordinates of a draw path. If lineTo
+ * is called with the first pair of coordinates, every path will be connected. Therefore this
+ * variable is needed to prevent drawing a line to the first pair of coordinates.
+ */
+ private firstCoordinates: boolean = false;
+
+ constructor() {
+ this.canvasDiv = document.querySelector('#canvas') as HTMLDivElement;
+ this.canvasUtil = new CanvasUtil(this.canvasDiv.offsetWidth, this.canvasDiv.offsetHeight);
+
+ this.createCanvas();
+ if (!this.canvasUtil.isCanvasApiSupported) {
+ alert('Canvas API unavailable, drawing will not work!');
+ }
+
+ this.ws = new WebSocket('ws://localhost:8081', 'json');
+
+ this.ws.onmessage = message => this.processMessage(message);
+ this.ws.onopen = () => this.ws.send('RECEIVER');
+ }
+
+ createCanvas() {
+ const canvas = this.canvasUtil.getCanvas();
+ this.canvasDiv.appendChild(canvas);
+ }
+
+ processMessage(message: MessageEvent) {
+ switch (message.data) {
+ case 'CLEAR':
+ this.clear();
+ break;
+ case 'START':
+ this.startDrawing();
+ break;
+ case 'STOP':
+ this.stopDrawing();
+ break;
+ default:
+ this.draw(JSON.parse(message.data));
+ break;
+ }
+ }
+
+ startDrawing() {
+ console.log('Received START command');
+ this.firstCoordinates = true;
+ }
+
+ stopDrawing() {
+ console.log('Received STOP command');
+ this.canvasUtil.stopPath();
+ }
+
+ clear() {
+ console.log('Received CLEAR command');
+ this.canvasDiv.removeChild(this.canvasDiv.firstChild!);
+ this.canvasUtil.recreateCanvas();
+ this.createCanvas();
+ }
+
+ draw(coordinates: Coordinates) {
+ if (this.firstCoordinates) {
+ this.firstCoordinates = false;
+ this.canvasUtil.startPath(coordinates);
+ }
+
+ this.canvasUtil.draw(coordinates);
+ }
+}
+
+
+const app = new CanvasReceiverController();
+
+export { app };
diff --git a/ts/app.ts b/ts/canvasSender.ts
similarity index 96%
rename from ts/app.ts
rename to ts/canvasSender.ts
index b5e1f17..15b25d5 100644
--- a/ts/app.ts
+++ b/ts/canvasSender.ts
@@ -1,7 +1,7 @@
-import Coordinates from "./canvas-util/coordinates.js";
import CanvasUtil from "./canvas-util/canvasUtil.js";
+import Coordinates from "./canvas-util/coordinates.js";
-class CanvasController {
+class CanvasSenderController {
private canvasUtil: CanvasUtil;
private canvasDiv: HTMLDivElement;
private ws: WebSocket;
@@ -60,6 +60,6 @@ class CanvasController {
}
-const app = new CanvasController();
+const app = new CanvasSenderController();
export { app };