From 98974f3fe70cc5b85e721a56511e94d04c0bd72c Mon Sep 17 00:00:00 2001 From: Devin Leamy Date: Sat, 28 Oct 2023 14:13:55 -0400 Subject: [PATCH] Some testing --- src/app.js | 146 ++++++++++++++++++++++++++++++++---------------- src/app.ts | 159 +++++++++++++++++++++++++++++++++++------------------ 2 files changed, 205 insertions(+), 100 deletions(-) diff --git a/src/app.js b/src/app.js index 906d611..b20a820 100644 --- a/src/app.js +++ b/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(); - var self = this; - this.updateInterval = setInterval(function () { - self.draw(); - }, UPDATE_DELAY_MS); + this.startTimer(); }; 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 y = point.y; - // adjust for outside the dimension of the screen - // http://forum.espruino.com/conversations/371867/#comment16406025 - if (y > self.height) - y = self.height; - if (y < 0) - y = 0; - if (x > self.width) - x = self.width; - if (x < 0) - 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; + var x = Math.min(self.width, Math.max(0, point.x)); + var y = Math.min(self.height, Math.max(0, point.y)); + if (self.displayedTimerIsRunning()) { + self.largeButton.onClick(x, y); + } + else if (!self.displayedTimerIsRunning() && !self.displayedTimerHasStarted()) { + self.largeButton.onClick(x, y); + } + else { + self.leftButton.onClick(x, y); + self.rightButton.onClick(x, y); + } }, remove: function () { self.pauseTimer(); @@ -121,34 +108,89 @@ var TimerApp = /** @class */ (function () { }); }; TimerApp.prototype.initializeScreen = function () { - Bangle.loadWidgets(); - Bangle.drawWidgets(); + g.setTheme({ bg: "#000", fg: "#fff", dark: true }).clear(); g.setColor(BLACK_COLOR); g.fillRect(0, 0, this.width, this.height); + Bangle.loadWidgets(); + Bangle.drawWidgets(); }; TimerApp.prototype.initializeButtons = function () { - function largeButtonClick() { - console.log("BIG BUTTON"); + var self = this; + 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(0.0, (3.0 / 4.0) * this.height, this.width, this.height / 4.0, BLUE_COLOR, largeButtonClick, 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.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.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, 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, 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, - currentTime: 3000.0, - totalTime: 5000.0, - running: true + elapsedTime: 0.0, + running: false + }, + { + 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 (timer.running) { + if (this.displayedTimerIsRunning() || !this.displayedTimerHasStarted()) { 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(totalTime); + var timeText = convertTimeToText(timer.elapsedTime); g.setFont("Vector", 38); g.setFontAlign(0, 0); g.clearRect(0, this.timeTextY - 21, this.width, this.timeTextY + 21); diff --git a/src/app.ts b/src/app.ts index fb3deec..d9b5825 100644 --- a/src/app.ts +++ b/src/app.ts @@ -32,9 +32,7 @@ function convertTimeToText(time: number): string { } interface TimerState { - totalTime: number - startTime: number - currentTime: number + elapsedTime: 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() - const self = this - this.updateInterval = setInterval(function () { - self.draw() - }, UPDATE_DELAY_MS) + this.startTimer() } initApp() { @@ -147,29 +143,17 @@ class TimerApp { mode: "custom", btn: () => load(), touch: (button, point) => { - let x = point.x - let y = point.y + const x = Math.min(self.width, Math.max(0, point.x)) + const y = Math.min(self.height, Math.max(0, point.y)) - // adjust for outside the dimension of the screen - // http://forum.espruino.com/conversations/371867/#comment16406025 - if (y > self.height) y = self.height - if (y < 0) y = 0 - if (x > self.width) x = self.width - if (x < 0) x = 0 - - // 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; + if (self.displayedTimerIsRunning()) { + self.largeButton.onClick(x, y) + } else if (!self.displayedTimerIsRunning() && !self.displayedTimerHasStarted()) { + self.largeButton.onClick(x, y) + } else { + self.leftButton.onClick(x, y) + self.rightButton.onClick(x, y) + } }, remove: () => { self.pauseTimer() @@ -180,21 +164,29 @@ class TimerApp { } initializeScreen() { - Bangle.loadWidgets() - Bangle.drawWidgets() + g.setTheme({ bg: "#000", fg: "#fff", dark: true }).clear() g.setColor(BLACK_COLOR) g.fillRect(0, 0, this.width, this.height) + Bangle.loadWidgets() + Bangle.drawWidgets() } initializeButtons() { - function largeButtonClick() { - console.log("BIG BUTTON") + const self = this + 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, - leftButtonClick, + YELLOW_COLOR, + 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, - currentTime: 3000.0, - totalTime: 5000.0, - running: true, + elapsedTime: 0.0, + running: false, + }, + { + 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 (timer.running) { + if (this.displayedTimerIsRunning() || !this.displayedTimerHasStarted()) { 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(totalTime) + const timeText = convertTimeToText(timer.elapsedTime) g.setFont("Vector", 38) g.setFontAlign(0, 0)