Some testing

src/app.js

@@ -71,17 +71,14 @@ var TimerApp = /** @class */ (function () {
         this.timers = [];
         this.displayedTimerIndex = 0;
         this.timeTextY = this.height * (2.0 / 5.0);
+        this.lastTickTimeMS = Date.now();
         this.loadStateOrDefault();
         this.initializeButtons();
         this.initializeScreen();
         this.initApp();
     }
     TimerApp.prototype.run = function () {
-        this.draw();
+        this.startTimer();
-        var self = this;
-        this.updateInterval = setInterval(function () {
-            self.draw();
-        }, UPDATE_DELAY_MS);
     };
     TimerApp.prototype.initApp = function () {
         var self = this;
@@ -90,28 +87,18 @@ var TimerApp = /** @class */ (function () {
             mode: "custom",
             btn: function () { return load(); },
             touch: function (button, point) {
-                var x = point.x;
+                var x = Math.min(self.width, Math.max(0, point.x));
-                var y = point.y;
+                var y = Math.min(self.height, Math.max(0, point.y));
-                // adjust for outside the dimension of the screen
+                if (self.displayedTimerIsRunning()) {
-                // http://forum.espruino.com/conversations/371867/#comment16406025
+                    self.largeButton.onClick(x, y);
-                if (y > self.height)
+                }
-                    y = self.height;
+                else if (!self.displayedTimerIsRunning() && !self.displayedTimerHasStarted()) {
-                if (y < 0)
+                    self.largeButton.onClick(x, y);
-                    y = 0;
+                }
-                if (x > self.width)
+                else {
-                    x = self.width;
+                    self.leftButton.onClick(x, y);
-                if (x < 0)
+                    self.rightButton.onClick(x, y);
-                    x = 0;
+                }
-                // not running, and reset
-                var timer = self.displayedTimer();
-                self.largeButton.onClick(x, y);
-                // if (!running && tCurrent == tTotal && bigPlayPauseBtn.check(x, y)) return;
-                // // paused and hit play
-                // if (!running && tCurrent != tTotal && smallPlayPauseBtn.check(x, y)) return;
-                // // paused and press reset
-                // if (!running && tCurrent != tTotal && resetBtn.check(x, y)) return;
-                // // must be running
-                // if (running && bigPlayPauseBtn.check(x, y)) return;
             },
             remove: function () {
                 self.pauseTimer();
@@ -121,34 +108,89 @@ var TimerApp = /** @class */ (function () {
         });
     };
     TimerApp.prototype.initializeScreen = function () {
-        Bangle.loadWidgets();
+        g.setTheme({ bg: "#000", fg: "#fff", dark: true }).clear();
-        Bangle.drawWidgets();
         g.setColor(BLACK_COLOR);
         g.fillRect(0, 0, this.width, this.height);
+        Bangle.loadWidgets();
+        Bangle.drawWidgets();
     };
     TimerApp.prototype.initializeButtons = function () {
-        function largeButtonClick() {
+        var self = this;
-            console.log("BIG BUTTON");
+        function startOrPauseTimer() {
+            if (self.displayedTimerIsRunning()) {
+                self.pauseDisplayedTimer();
+            }
+            else {
+                self.playDisplayedTimer();
+            }
         }
-        function leftButtonClick() {
+        function resetTimer() {
-            console.log("LEFT BUTTON");
+            self.resetDisplayedTimer();
         }
-        function rightButtonClick() {
+        function resumeTimer() {
-            console.log("RIGHT BUTTON");
+            self.resumeDisplayedTimer();
         }
-        this.largeButton = new Button(0.0, (3.0 / 4.0) * this.height, this.width, this.height / 4.0, BLUE_COLOR, largeButtonClick, PLAY_IMG);
+        this.largeButton = new Button(0.0, (3.0 / 4.0) * this.height, this.width, this.height / 4.0, BLUE_COLOR, startOrPauseTimer, PLAY_IMG);
-        this.leftButton = new Button(0.0, (3.0 / 4.0) * this.height, this.width / 2.0, this.height / 4.0, BLUE_COLOR, leftButtonClick, PLAY_IMG);
+        this.leftButton = new Button(0.0, (3.0 / 4.0) * this.height, this.width / 2.0, this.height / 4.0, YELLOW_COLOR, resetTimer, PLAY_IMG);
-        this.rightButton = new Button(this.width / 2.0, (3.0 / 4.0) * this.height, this.width / 2.0, this.height / 4.0, BLUE_COLOR, rightButtonClick, PAUSE_IMG);
+        this.rightButton = new Button(this.width / 2.0, (3.0 / 4.0) * this.height, this.width / 2.0, this.height / 4.0, BLUE_COLOR, resumeTimer, PAUSE_IMG);
     };
-    TimerApp.prototype.resumeTimer = function () {
+    TimerApp.prototype.startTimer = function () {
         var self = this;
         this.updateInterval = setInterval(function () {
-            self.draw();
+            var now = Date.now();
+            var dt = now - self.lastTickTimeMS;
+            self.lastTickTimeMS = now;
+            self.update(dt);
         }, UPDATE_DELAY_MS);
     };
     TimerApp.prototype.displayedTimer = function () {
         return this.timers[this.displayedTimerIndex];
     };
+    TimerApp.prototype.update = function (dt) {
+        this.updateTimers(dt);
+        this.updateButtons();
+        this.draw();
+        this.save();
+    };
+    TimerApp.prototype.updateTimers = function (dt) {
+        for (var _i = 0, _a = this.timers; _i < _a.length; _i++) {
+            var timer = _a[_i];
+            if (timer.running) {
+                timer.elapsedTime += dt;
+            }
+        }
+    };
+    TimerApp.prototype.updateButtons = function () {
+        if (this.displayedTimerIsRunning()) {
+            this.largeButton.setImage(PAUSE_IMG);
+            this.leftButton.setImage(RESET_IMG);
+            this.rightButton.setImage(PLAY_IMG);
+        }
+        else {
+            this.largeButton.setImage(PLAY_IMG);
+            this.leftButton.setImage(RESET_IMG);
+            this.rightButton.setImage(PLAY_IMG);
+        }
+    };
+    TimerApp.prototype.pauseDisplayedTimer = function () {
+        this.displayedTimer().running = false;
+    };
+    TimerApp.prototype.resetDisplayedTimer = function () {
+        this.displayedTimer().elapsedTime = 0.0;
+        this.displayedTimer().running = false;
+    };
+    TimerApp.prototype.resumeDisplayedTimer = function () {
+        this.displayedTimer().running = true;
+    };
+    TimerApp.prototype.playDisplayedTimer = function () {
+        this.displayedTimer().running = true;
+    };
+    TimerApp.prototype.displayedTimerIsRunning = function () {
+        return this.displayedTimer().running;
+    };
+    TimerApp.prototype.displayedTimerHasStarted = function () {
+        return this.displayedTimer().elapsedTime > 0.0;
+    };
     TimerApp.prototype.save = function () {
         require("Storage").writeJSON(STORAGE_FILE, {
             displayedTimerIndex: this.displayedTimerIndex,
@@ -158,17 +200,26 @@ var TimerApp = /** @class */ (function () {
     TimerApp.prototype.loadStateOrDefault = function () {
         this.timers = [
             {
-                startTime: 0.0,
+                elapsedTime: 0.0,
-                currentTime: 3000.0,
+                running: false
-                totalTime: 5000.0,
+            },
-                running: true
+            {
+                elapsedTime: 0.0,
+                running: false
+            },
+            {
+                elapsedTime: 0.0,
+                running: false
+            },
+            {
+                elapsedTime: 0.0,
+                running: false
             },
         ];
     };
     TimerApp.prototype.drawButtons = function () {
         console.log("DRAW BUTTONS", JSON.stringify(this.timers));
-        var timer = this.displayedTimer();
+        if (this.displayedTimerIsRunning() || !this.displayedTimerHasStarted()) {
-        if (timer.running) {
             this.largeButton.draw();
         }
         else {
@@ -178,8 +229,7 @@ var TimerApp = /** @class */ (function () {
     };
     TimerApp.prototype.drawTime = function () {
         var timer = this.displayedTimer();
-        var totalTime = Date.now();
+        var timeText = convertTimeToText(timer.elapsedTime);
-        var timeText = convertTimeToText(totalTime);
         g.setFont("Vector", 38);
         g.setFontAlign(0, 0);
         g.clearRect(0, this.timeTextY - 21, this.width, this.timeTextY + 21);

src/app.ts

@@ -32,9 +32,7 @@ function convertTimeToText(time: number): string {
 }
 
 interface TimerState {
-    totalTime: number
+    elapsedTime: number
-    startTime: number
-    currentTime: number
     running: boolean
 }
 
@@ -118,6 +116,7 @@ class TimerApp {
     leftButton!: Button
     rightButton!: Button
     updateInterval: undefined | any
+    lastTickTimeMS: number
 
     constructor() {
         this.width = g.getWidth()
@@ -125,6 +124,7 @@ class TimerApp {
         this.timers = []
         this.displayedTimerIndex = 0
         this.timeTextY = this.height * (2.0 / 5.0)
+        this.lastTickTimeMS = Date.now()
         this.loadStateOrDefault()
         this.initializeButtons()
         this.initializeScreen()
@@ -132,11 +132,7 @@ class TimerApp {
     }
 
     run() {
-        this.draw()
+        this.startTimer()
-        const self = this
-        this.updateInterval = setInterval(function () {
-            self.draw()
-        }, UPDATE_DELAY_MS)
     }
 
     initApp() {
@@ -147,29 +143,17 @@ class TimerApp {
             mode: "custom",
             btn: () => load(),
             touch: (button, point) => {
-                let x = point.x
+                const x = Math.min(self.width, Math.max(0, point.x))
-                let y = point.y
+                const y = Math.min(self.height, Math.max(0, point.y))
 
-                // adjust for outside the dimension of the screen
+                if (self.displayedTimerIsRunning()) {
-                // http://forum.espruino.com/conversations/371867/#comment16406025
+                    self.largeButton.onClick(x, y)
-                if (y > self.height) y = self.height
+                } else if (!self.displayedTimerIsRunning() && !self.displayedTimerHasStarted()) {
-                if (y < 0) y = 0
+                    self.largeButton.onClick(x, y)
-                if (x > self.width) x = self.width
+                } else {
-                if (x < 0) x = 0
+                    self.leftButton.onClick(x, y)
-
+                    self.rightButton.onClick(x, y)
-                // not running, and reset
+                }
-                const timer = self.displayedTimer()
-                self.largeButton.onClick(x, y)
-                // if (!running && tCurrent == tTotal && bigPlayPauseBtn.check(x, y)) return;
-
-                // // paused and hit play
-                // if (!running && tCurrent != tTotal && smallPlayPauseBtn.check(x, y)) return;
-
-                // // paused and press reset
-                // if (!running && tCurrent != tTotal && resetBtn.check(x, y)) return;
-
-                // // must be running
-                // if (running && bigPlayPauseBtn.check(x, y)) return;
             },
             remove: () => {
                 self.pauseTimer()
@@ -180,21 +164,29 @@ class TimerApp {
     }
 
     initializeScreen() {
-        Bangle.loadWidgets()
+        g.setTheme({ bg: "#000", fg: "#fff", dark: true }).clear()
-        Bangle.drawWidgets()
         g.setColor(BLACK_COLOR)
         g.fillRect(0, 0, this.width, this.height)
+        Bangle.loadWidgets()
+        Bangle.drawWidgets()
     }
 
     initializeButtons() {
-        function largeButtonClick() {
+        const self = this
-            console.log("BIG BUTTON")
+        function startOrPauseTimer() {
+            if (self.displayedTimerIsRunning()) {
+                self.pauseDisplayedTimer()
+            } else {
+                self.playDisplayedTimer()
+            }
         }
-        function leftButtonClick() {
+
-            console.log("LEFT BUTTON")
+        function resetTimer() {
+            self.resetDisplayedTimer()
         }
-        function rightButtonClick() {
+
-            console.log("RIGHT BUTTON")
+        function resumeTimer() {
+            self.resumeDisplayedTimer()
         }
 
         this.largeButton = new Button(
@@ -203,7 +195,7 @@ class TimerApp {
             this.width,
             this.height / 4.0,
             BLUE_COLOR,
-            largeButtonClick,
+            startOrPauseTimer,
             PLAY_IMG
         )
 
@@ -212,8 +204,8 @@ class TimerApp {
             (3.0 / 4.0) * this.height,
             this.width / 2.0,
             this.height / 4.0,
-            BLUE_COLOR,
+            YELLOW_COLOR,
-            leftButtonClick,
+            resetTimer,
             PLAY_IMG
         )
 
@@ -223,15 +215,18 @@ class TimerApp {
             this.width / 2.0,
             this.height / 4.0,
             BLUE_COLOR,
-            rightButtonClick,
+            resumeTimer,
             PAUSE_IMG
         )
     }
 
-    resumeTimer() {
+    startTimer() {
         const self = this
         this.updateInterval = setInterval(function () {
-            self.draw()
+            const now = Date.now()
+            const dt = now - self.lastTickTimeMS
+            self.lastTickTimeMS = now
+            self.update(dt)
         }, UPDATE_DELAY_MS)
     }
 
@@ -239,6 +234,58 @@ class TimerApp {
         return this.timers[this.displayedTimerIndex]
     }
 
+    update(dt: number) {
+        this.updateTimers(dt)
+        this.updateButtons()
+        this.draw()
+        this.save()
+    }
+
+    updateTimers(dt: number) {
+        for (let timer of this.timers) {
+            if (timer.running) {
+                timer.elapsedTime += dt
+            }
+        }
+    }
+
+    updateButtons() {
+        if (this.displayedTimerIsRunning()) {
+            this.largeButton.setImage(PAUSE_IMG)
+            this.leftButton.setImage(RESET_IMG)
+            this.rightButton.setImage(PLAY_IMG)
+        } else {
+            this.largeButton.setImage(PLAY_IMG)
+            this.leftButton.setImage(RESET_IMG)
+            this.rightButton.setImage(PLAY_IMG)
+        }
+    }
+
+    pauseDisplayedTimer() {
+        this.displayedTimer().running = false
+    }
+
+    resetDisplayedTimer() {
+        this.displayedTimer().elapsedTime = 0.0
+        this.displayedTimer().running = false
+    }
+
+    resumeDisplayedTimer() {
+        this.displayedTimer().running = true
+    }
+
+    playDisplayedTimer() {
+        this.displayedTimer().running = true
+    }
+
+    displayedTimerIsRunning(): boolean {
+        return this.displayedTimer().running
+    }
+
+    displayedTimerHasStarted(): boolean {
+        return this.displayedTimer().elapsedTime > 0.0
+    }
+
     save() {
         require("Storage").writeJSON(STORAGE_FILE, {
             displayedTimerIndex: this.displayedTimerIndex,
@@ -249,18 +296,27 @@ class TimerApp {
     loadStateOrDefault() {
         this.timers = [
             {
-                startTime: 0.0,
+                elapsedTime: 0.0,
-                currentTime: 3000.0,
+                running: false,
-                totalTime: 5000.0,
+            },
-                running: true,
+            {
+                elapsedTime: 0.0,
+                running: false,
+            },
+            {
+                elapsedTime: 0.0,
+                running: false,
+            },
+            {
+                elapsedTime: 0.0,
+                running: false,
             },
         ]
     }
 
     drawButtons() {
         console.log("DRAW BUTTONS", JSON.stringify(this.timers))
-        const timer = this.displayedTimer()
+        if (this.displayedTimerIsRunning() || !this.displayedTimerHasStarted()) {
-        if (timer.running) {
             this.largeButton.draw()
         } else {
             this.leftButton.draw()
@@ -270,8 +326,7 @@ class TimerApp {
 
     drawTime() {
         const timer = this.displayedTimer()
-        const totalTime = Date.now()
+        const timeText = convertTimeToText(timer.elapsedTime)
-        const timeText = convertTimeToText(totalTime)
 
         g.setFont("Vector", 38)
         g.setFontAlign(0, 0)