Connect gaze data with game client

resources/js/game/GazePoint.js

 class GazePoint {
 
-  constructor(screenX, screenY, id) {
+  constructor(screenX, screenY, createdAt, id) {
     this.screenX = screenX;
     this.screenY = screenY;
-    this.createdAt = Date.now();
+    this.createdAt = createdAt;
     this.id = id || this.createdAt;
   }
 

resources/js/game/StarGazer.js

@@ -15,10 +15,10 @@ class StarGazer {
 		gm.start();
 	}
 
-	onGazeUpdate(gazeUpdate) {
-		gazeUpdate.target.linkTo(canvas);
-		if(gazeUpdate.target.hasLink) {
-			gm.addGazePoint(gazeUpdate.target);
+	onGazeUpdate(gazePoint) {
+		gazePoint.linkTo(canvas);
+		if(gazePoint.hasLink) {
+			gm.addGazePoint(gazePoint);
 		}
 	}
 

resources/js/index.js

@@ -15,7 +15,7 @@ function init() {
 function initGazeClient() {
   gclient.connect("ws://localhost:8001/gaze");
   gclient.addEventListener("connectionopened", onConnected);
-  gclient.addEventListener("dataAvailable", onGazeDataAvailable);
+  gclient.addEventListener("dataavailable", onGazeDataAvailable);
   gclient.addEventListener("connectionclosed", onDisconnected);
 }
 
@@ -33,7 +33,11 @@ function onConnected(event) {
 }
 
 function onGazeDataAvailable(event) {
-  console.log(event);
+  let eyeX = (event.data.leftEyeX + event.data.rightEyeX) / 2,
+    eyeY = (event.data.leftEyeY + event.data.rightEyeY) / 2,
+    createdAt = event.data.trackerTimeStamp,
+    gazePoint = new GazePoint(eyeX, eyeY, createdAt);
+  StarGazer.onGazeUpdate(gazePoint);
 }
 
 function onDisconnected(event) {