From 635d4a76249c988445e4b710208bd39f89ae6fb9 Mon Sep 17 00:00:00 2001
From: Peli de Halleux <pelikhan@users.noreply.github.com>
Date: Wed, 31 Jan 2018 11:48:53 -0800
Subject: [PATCH] Fixing race condition of button animation (#292)

---
 sim/visuals/nodes/brickView.ts | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/sim/visuals/nodes/brickView.ts b/sim/visuals/nodes/brickView.ts
index 6a732713..30ae7d83 100644
--- a/sim/visuals/nodes/brickView.ts
+++ b/sim/visuals/nodes/brickView.ts
@@ -47,14 +47,17 @@ namespace pxsim.visuals {
         }
 
         private lastLightPattern: number = -1;
-        private lastLightAnimationId: any;
+        private lastLightAnimationId: any = undefined;
         private updateLight() {
             let state = ev3board().getBrickNode().lightState;
 
             const lightPattern = state.lightPattern;
             if (lightPattern == this.lastLightPattern) return;
             this.lastLightPattern = lightPattern;
-            if (this.lastLightAnimationId) cancelAnimationFrame(this.lastLightAnimationId);
+            if (this.lastLightAnimationId) {
+                cancelAnimationFrame(this.lastLightAnimationId);
+                delete this.lastLightAnimationId;
+            }
             switch (lightPattern) {
                 case 0:  // LED_BLACK
                     this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-black`));
@@ -94,6 +97,7 @@ namespace pxsim.visuals {
         }
 
         private flashLightAnimation(id: string) {
+            const pattern = this.lastLightPattern;
             let fps = 3;
             let now;
             let then = Date.now();
@@ -101,8 +105,9 @@ namespace pxsim.visuals {
             let delta;
             let that = this;
             function draw() {
+                if (that.lastLightPattern != pattern) return;
                 that.lastLightAnimationId = requestAnimationFrame(draw);
-                now = Date.now();
+                now = pxsim.U.now();
                 delta = now - then;
                 if (delta > interval) {
                     then = now - (delta % interval);
@@ -124,6 +129,7 @@ namespace pxsim.visuals {
 
 
         private pulseLightAnimation(id: string) {
+            const pattern = this.lastLightPattern;
             let fps = 8;
             let now;
             let then = Date.now();
@@ -131,8 +137,9 @@ namespace pxsim.visuals {
             let delta;
             let that = this;
             function draw() {
+                if (that.lastLightPattern != pattern) return;
                 that.lastLightAnimationId = requestAnimationFrame(draw);
-                now = Date.now();
+                now = pxsim.U.now();
                 delta = now - then;
                 if (delta > interval) {
                     // update time stuffs