aclock refactor and updates

To get my feet wet with Espruino and my new Bangle.js, I dove into the analog clock code and enhanced and refactored a few things to simplify the interface, fix a few bugs, and improve readability: 

added date
added distinct hour markers
refactor timers down to a single timer
add elapsed seconds display
add date

apps/aclock/clock-analog.js

@@ -1,94 +1,146 @@
-const p = Math.PI/2;
+let g;
-const PRad = Math.PI/180;
+let Bangle;
 
-let intervalRefMin = null;
+const p = Math.PI / 2;
-let intervalRefSec = null;
+const pRad = Math.PI / 180;
+const faceWidth = 100; // watch face radius
+let timer = null;
+let currentDate = new Date();
+const centerPx = g.getWidth() / 2;
 
-let minuteDate = new Date();
+const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat'];
-let secondDate = new Date();
 
-function seconds(angle, r) {
+const seconds = (angle) => {
-  const a = angle*PRad;
+  const a = angle * pRad;
-  const x = 120+Math.sin(a)*r;
+  const x = centerPx + Math.sin(a) * faceWidth;
-  const y = 120-Math.cos(a)*r;
+  const y = centerPx - Math.cos(a) * faceWidth;
-  g.fillRect(x-1,y-1,x+1,y+1);
+
-}
+  // if 15 degrees, make hour marker larger
-function hand(angle, r1,r2) {
+  const radius = (angle % 15) ? 2 : 4;
-  const a = angle*PRad;
+  g.fillCircle(x, y, radius);
+};
+
+const hand = (angle, r1, r2) => {
+  const a = angle * pRad;
   const r3 = 3;
-  g.fillPoly([
-    120+Math.sin(a)*r1,
-    120-Math.cos(a)*r1,
-    120+Math.sin(a+p)*r3,
-    120-Math.cos(a+p)*r3,
-    120+Math.sin(a)*r2,
-    120-Math.cos(a)*r2,
-    120+Math.sin(a-p)*r3,
-    120-Math.cos(a-p)*r3]);
-}
 
-function drawAll() {
+  g.fillPoly([
+    Math.round(centerPx + Math.sin(a) * r1),
+    Math.round(centerPx - Math.cos(a) * r1),
+    Math.round(centerPx + Math.sin(a + p) * r3),
+    Math.round(centerPx - Math.cos(a + p) * r3),
+    Math.round(centerPx + Math.sin(a) * r2),
+    Math.round(centerPx - Math.cos(a) * r2),
+    Math.round(centerPx + Math.sin(a - p) * r3),
+    Math.round(centerPx - Math.cos(a - p) * r3)
+  ]);
+};
+
+const drawAll = () => {
   g.clear();
-  secondDate = minuteDate = new Date();
+  currentDate = new Date();
   // draw hands first
   onMinute();
   // draw seconds
-  g.setColor(0,0,0.6);
+  const currentSec = currentDate.getSeconds();
-  for (let i=0;i<60;i++)
+  // draw all secs
-    seconds(360*i/60, 90);
+
+  for (let i = 0; i < 60; i++) {
+    if (i > currentSec) {
+      g.setColor(0, 0, 0.6);
+    } else {
+      g.setColor(0.3, 0.3, 1);
+    }
+    seconds((360 * i) / 60);
+  }
   onSecond();
-}
+};
 
-function onSecond() {
+const resetSeconds = () => {
-  g.setColor(0,0,0.6);
+  g.setColor(0, 0, 0.6);
-  seconds(360*secondDate.getSeconds()/60, 90);
+  for (let i = 0; i < 60; i++) {
-  g.setColor(1,0,0);
+    seconds((360 * i) / 60);
-  secondDate = new Date();
+  }
-  seconds(360*secondDate.getSeconds()/60, 90);
+};
-  g.setColor(1,1,1);
 
-}
+const onSecond = () => {
+  g.setColor(0.3, 0.3, 1);
+  seconds((360 * currentDate.getSeconds()) / 60);
+  if (currentDate.getSeconds() === 59) {
+    resetSeconds();
+    onMinute();
+  }
+  g.setColor(1, 0.7, 0.2);
+  currentDate = new Date();
+  seconds((360 * currentDate.getSeconds()) / 60);
+  g.setColor(1, 1, 1);
+};
 
-function onMinute() {
+const drawDate = () => {
-  g.setColor(0,0,0);
+  g.reset();
-  hand(360*(minuteDate.getHours() + (minuteDate.getMinutes()/60))/12, -10, 50);
+  g.setColor(1, 0, 0);
-  hand(360*minuteDate.getMinutes()/60, -10, 82);
+  g.setFont('6x8', 2);
-  minuteDate = new Date();
+
-  g.setColor(1,1,1);
+  const dayString = days[currentDate.getDay()];
-  hand(360*(minuteDate.getHours() + (minuteDate.getMinutes()/60))/12, -10, 50);
+  // pad left date
-  hand(360*minuteDate.getMinutes()/60, -10, 82);
+  const dateString = (currentDate.getDate() < 10) ? '0' : '' + currentDate.getDate().toString();
-  if(minuteDate.getHours() >= 0 && minuteDate.getMinutes() === 0) {
+  const dateDisplay = `${dayString}-${dateString}`;
+  // console.log(`${dayString}|${dateString}`);
+  // center date
+  const l = (g.getWidth() - g.stringWidth(dateDisplay)) / 2;
+  const t = centerPx + 37;
+  g.drawString(dateDisplay, l, t);
+  // console.log(l, t);
+};
+const onMinute = () => {
+  if (currentDate.getHours() === 0 && currentDate.getMinutes() === 0) {
+    g.clear();
+    resetSeconds();
+  }
+  // clear existing hands
+  g.setColor(0, 0, 0);
+  // Hour
+  hand((360 * (currentDate.getHours() + currentDate.getMinutes() / 60)) / 12, -8, faceWidth - 35);
+  // Minute
+  hand((360 * currentDate.getMinutes()) / 60, -8, faceWidth - 10);
+
+  // get new date, then draw new hands
+  currentDate = new Date();
+  g.setColor(1, 0.9, 0.9);
+  // Hour
+  hand((360 * (currentDate.getHours() + currentDate.getMinutes() / 60)) / 12, -8, faceWidth - 35);
+  g.setColor(1, 1, 0.9);
+  // Minute
+  hand((360 * currentDate.getMinutes()) / 60, -8, faceWidth - 10);
+  if (currentDate.getHours() >= 0 && currentDate.getMinutes() === 0) {
     Bangle.buzz();
   }
-}
+  drawDate();
+};
 
-function clearTimers() {
+const startTimers = () => {
-  if(intervalRefMin) {clearInterval(intervalRefMin);}
+  timer = setInterval(onSecond, 1000);
-  if(intervalRefSec) {clearInterval(intervalRefSec);}
+};
-}
 
-function startTimers() {
+Bangle.on('lcdPower', (on) => {
-  minuteDate = new Date();
-  secondDate = new Date();
-  intervalRefSec = setInterval(onSecond,1000);
-  intervalRefMin = setInterval(onMinute,60*1000);
-  drawAll();
-}
-
-Bangle.on('lcdPower',function(on) {
   if (on) {
-    g.clear();
+    // g.clear();
-    Bangle.drawWidgets();
+    drawAll();
     startTimers();
-  }else {
+    Bangle.drawWidgets();
-    clearTimers();
+  } else {
+    if (timer) {
+      clearInterval(timer);
+    }
   }
 });
 
 g.clear();
+resetSeconds();
+startTimers();
+drawAll();
 Bangle.loadWidgets();
 Bangle.drawWidgets();
-drawAll();
+
-startTimers();
 // Show launcher when middle button pressed
-setWatch(Bangle.showLauncher, BTN2, {repeat:false,edge:"falling"});
+setWatch(Bangle.showLauncher, BTN2, { repeat: false, edge: "falling" });