diff options
Diffstat (limited to 'lib/wallet')
-rw-r--r-- | lib/wallet/chromeBadge.ts | 67 | ||||
-rw-r--r-- | lib/wallet/wxMessaging.ts | 6 |
2 files changed, 41 insertions, 32 deletions
diff --git a/lib/wallet/chromeBadge.ts b/lib/wallet/chromeBadge.ts index 21e56a4b2..6586f7e6e 100644 --- a/lib/wallet/chromeBadge.ts +++ b/lib/wallet/chromeBadge.ts @@ -26,7 +26,7 @@ import { function rAF(cb: (ts: number) => void) { window.setTimeout(() => { cb(performance.now()); - }, 100 /* 100 ms delay between frames */ ); + }, 100 /* 100 ms delay between frames */); } @@ -99,37 +99,47 @@ export class ChromeBadge implements Badge { * Draw the badge based on the current state. */ private draw() { - // Reset to identity + this.ctx.setTransform(1, 0, 0, 1, 0, 0); this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); - // move into the center, off by 1 for aligning the "T" with the bottom + + this.ctx.translate(this.canvas.width / 2, this.canvas.height / 2); + + this.ctx.beginPath(); + this.ctx.arc(0, 0, this.canvas.width / 2 - 2, 0, 2 * Math.PI); + this.ctx.fillStyle = "white"; + this.ctx.fill(); + + // move into the center, off by 2 for aligning the "T" with the bottom // of the circle. - this.ctx.translate(this.canvas.width / 2, this.canvas.height / 2 + 1); + this.ctx.translate(0, 2); + // pick sans-serif font; note: 14px is based on the 32px width above! - this.ctx.font = "14px sans-serif"; + this.ctx.font = "bold 24px sans-serif"; // draw the "T" perfectly centered (x and y) to the current position this.ctx.textAlign = "center"; this.ctx.textBaseline = "middle"; - this.ctx.strokeText("T", 0, 0); + this.ctx.fillStyle = "black"; + this.ctx.fillText("T", 0, 0); // now move really into the center - this.ctx.translate(0, -1); + this.ctx.translate(0, -2); // start drawing the (possibly open) circle this.ctx.beginPath(); + this.ctx.lineWidth = 2.5; if (this.animationRunning) { - /* Draw circle around the "T" with an opening of this.gapWidth */ - this.ctx.arc (0, 0, - this.canvas.width / 4, /* radius */ - this.rotationAngle / ChromeBadge.rotationAngleMax * Math.PI * 2, - ((this.rotationAngle + ChromeBadge.rotationAngleMax - this.gapWidth) / ChromeBadge.rotationAngleMax) * Math.PI * 2, - false); + /* Draw circle around the "T" with an opening of this.gapWidth */ + this.ctx.arc(0, 0, + this.canvas.width / 2 - 2, /* radius */ + this.rotationAngle / ChromeBadge.rotationAngleMax * Math.PI * 2, + ((this.rotationAngle + ChromeBadge.rotationAngleMax - this.gapWidth) / ChromeBadge.rotationAngleMax) * Math.PI * 2, + false); } - else - { - /* Draw full circle */ - this.ctx.arc (0, 0, - this.canvas.width / 4, /* radius */ - 0, - Math.PI * 2, - false); + else { + /* Draw full circle */ + this.ctx.arc(0, 0, + this.canvas.width / 2 - 2, /* radius */ + 0, + Math.PI * 2, + false); } this.ctx.stroke(); // go back to the origin @@ -165,17 +175,16 @@ export class ChromeBadge implements Badge { } else { this.rotationAngle = (this.rotationAngle + (timestamp - start) * ChromeBadge.rotationSpeed) % ChromeBadge.rotationAngleMax; } - if (this.isBusy) - { - if (this.gapWidth < ChromeBadge.openMax) + if (this.isBusy) { + if (this.gapWidth < ChromeBadge.openMax) { this.gapWidth += ChromeBadge.openSpeed * (timestamp - start); - if (this.gapWidth > ChromeBadge.openMax) + } + if (this.gapWidth > ChromeBadge.openMax) { this.gapWidth = ChromeBadge.openMax; + } } - else - { - if (this.gapWidth > 0) - { + else { + if (this.gapWidth > 0) { this.gapWidth--; this.gapWidth *= ChromeBadge.closeSpeed; } diff --git a/lib/wallet/wxMessaging.ts b/lib/wallet/wxMessaging.ts index 2e3659429..1bed80ca4 100644 --- a/lib/wallet/wxMessaging.ts +++ b/lib/wallet/wxMessaging.ts @@ -289,6 +289,7 @@ export let badge: ChromeBadge|undefined = undefined; export function wxMain() { chrome.browserAction.setBadgeText({text: ""}); + badge = new ChromeBadge(); chrome.tabs.query({}, function(tabs) { for (let tab of tabs) { @@ -314,14 +315,13 @@ export function wxMain() { }) .then((db: IDBDatabase) => { let http = new BrowserHttpLib(); - badge = new ChromeBadge(); let notifier = new ChromeNotifier(); console.log("setting wallet"); - wallet = new Wallet(db, http, badge, notifier); + wallet = new Wallet(db, http, badge!, notifier); // Handlers for messages coming directly from the content // script on the page - let handlers = makeHandlers(db, wallet); + let handlers = makeHandlers(db, wallet!); chrome.runtime.onMessage.addListener((req, sender, sendResponse) => { try { return dispatch(handlers, req, sender, sendResponse) |