commit 5b895621dcadc07dd97f3f35cf5557df9af1ca50
author Alex Perry <alex.perry96@gmail.com> Sat Apr 06 14:27:55 2019 -0700
committer Alex Perry <alex.perry96@gmail.com> Sat Apr 06 20:39:26 2019 -0700
tree 787a4e0b99694cda619a7bbde458b69fbca2e080
parent 73baea774a4cfd11cd814059170d578800666460

Reset the websocket when the server disconnects.

Also run clang-format over all the code. Mainly fixes spacing and line
breaks.

Change-Id: Icec138c3a0cf012b344cfc312deaf891a63474c0

y2019/vision/server/www/main.ts

diff --git a/y2019/vision/server/www/main.ts b/y2019/vision/server/www/main.ts
index beb2734..a260787 100644
--- a/y2019/vision/server/www/main.ts
+++ b/y2019/vision/server/www/main.ts
@@ -1,4 +1,4 @@
-import {FT_TO_M, FIELD_WIDTH} from './constants';
+import {FIELD_WIDTH, FT_TO_M} from './constants';
 import {drawField, drawTarget} from './field';
 import {drawRobot} from './robot';
 
@@ -23,6 +23,11 @@
     const ctx = canvas.getContext('2d');
 
     const server = location.host;
+    this.initWebSocket(server);
+    window.requestAnimationFrame(() => this.draw(ctx));
+  }
+
+  initWebSocket(server: string): void {
     const socket = new WebSocket(`ws://${server}/ws`);
     const reader = new FileReader();
     reader.addEventListener('loadend', (e) => {
@@ -32,8 +37,9 @@
       this.y = j.robotPose.y;
       this.theta = j.robotPose.theta;
 
-      if(j.lineFollowDebug) {
-        this.targetLocked = j.lineFollowDebug.frozen && j.lineFollowDebug.haveTarget;
+      if (j.lineFollowDebug) {
+        this.targetLocked =
+            j.lineFollowDebug.frozen && j.lineFollowDebug.haveTarget;
         this.targetX = j.lineFollowDebug.goalTarget.x;
         this.targetY = j.lineFollowDebug.goalTarget.y;
         this.targetTheta = j.lineFollowDebug.goalTarget.theta;
@@ -49,17 +55,21 @@
     socket.addEventListener('message', (event) => {
       reader.readAsText(event.data);
     });
-    window.requestAnimationFrame(() => this.draw(ctx));
+    socket.addEventListener('close', (event) => {
+      setTimeout(() => {
+        this.initWebSocket(server);
+      }, 1000);
+    });
   }
 
-  reset(ctx : CanvasRenderingContext2D) : void {
-    ctx.setTransform(1,0,0,1,0,0);
+  reset(ctx: CanvasRenderingContext2D): void {
+    ctx.setTransform(1, 0, 0, 1, 0, 0);
     const size = Math.min(window.innerHeight, window.innerWidth) * 0.98;
     ctx.canvas.height = size;
     ctx.canvas.width = size;
-    ctx.clearRect(0,0,size,size);
+    ctx.clearRect(0, 0, size, size);
 
-    ctx.translate(size/2, size);
+    ctx.translate(size / 2, size);
     ctx.rotate(-Math.PI / 2);
     ctx.scale(1, -1);
     const M_TO_PX = size / FIELD_WIDTH
@@ -67,7 +77,7 @@
     ctx.lineWidth = 1 / M_TO_PX;
   }
 
-  draw(ctx : CanvasRenderingContext2D) : void {
+  draw(ctx: CanvasRenderingContext2D): void {
     this.reset(ctx);
 
     drawField(ctx);