implement a timer in the presenter view

src/templates/bespoke/bespoke.scss

@@ -362,6 +362,10 @@ $progress-height: 5px;
           color: #999;
           order: 3;
           text-align: right;
+
+          &:hover {
+            cursor: pointer;
+          }
         }
       }
     }

src/templates/bespoke/presenter/presenter-view.tsx

@@ -57,7 +57,7 @@ const presenterView = (deck) => {
             </button>
           </div>
           <time class={classes.infoTime} title="Current time"></time>
-          <div class={classes.infoTimer}>{/* TODO: Implement timer */}</div>
+          <time class={classes.infoTimer} title="Timer"></time>
         </div>
       </>
     )
@@ -76,6 +76,10 @@ const presenterView = (deck) => {
   const subscribe = (deck) => {
     // Next slide view
     $(classes.nextContainer).addEventListener('click', () => deck.next())
+    $(classes.infoTimer).addEventListener(
+      'click',
+      () => (startTime = new Date())
+    )
 
     const nextIframe = $(classes.next) as HTMLIFrameElement
     const nextNav = createNavigateFunc(nextIframe)
@@ -133,8 +137,22 @@ const presenterView = (deck) => {
     })
 
     // Current time
-    const update = () =>
-      ($(classes.infoTime).textContent = new Date().toLocaleTimeString())
+    let startTime = new Date()
+    const update = () => {
+      const time = new Date()
+
+      const formatTime = (time: number) =>
+        `${Math.floor(time)}`.padStart(2, '0')
+
+      const diff = time.getTime() - startTime.getTime()
+
+      const seconds = formatTime((diff / 1000) % 60)
+      const minutes = formatTime((diff / 1000 / 60) % 60)
+      const hours = formatTime((diff / (1000 * 60 * 60)) % 24)
+
+      $(classes.infoTime).textContent = time.toLocaleTimeString()
+      $(classes.infoTimer).textContent = `${hours}:${minutes}:${seconds}`
+    }
 
     update()
     setInterval(update, 250)

test/templates/bespoke.ts

@@ -909,7 +909,24 @@ describe("Bespoke template's browser context", () => {
           })
         })
       })
-
+      describe('Presenter timer', () => {
+        it('timer should start at 00:00:00', () =>
+          testPresenterView(() => {
+            expect($p(classes.infoTimer).textContent).toBe('00:00:00')
+          }))
+        it('timer should be at 00:00:01 after one second', () =>
+          testPresenterView(() => {
+            jest.advanceTimersByTime(12000)
+            expect($p(classes.infoTimer).textContent).toBe('00:00:12')
+          }))
+        it('timer should be at 00:00:00 after clicking', () =>
+          testPresenterView(() => {
+            jest.advanceTimersByTime(12000)
+            $p(classes.infoTimer).click()
+            jest.advanceTimersByTime(1200)
+            expect($p(classes.infoTimer).textContent).toBe('00:00:01')
+          }))
+      })
       describe('Presenter note', () => {
         it('marks element with bespoke-marp-note class and current slide index as active', () =>
           testPresenterView(({ deck }) => {