feat: ready up notification (#104)

tf2pickup-org · Dec 12, 2024 · 7d893a5 · 7d893a5
1 parent 6d12137
commit 7d893a5
Show file tree

Hide file tree

Showing 7 changed files with 126 additions and 39 deletions.
diff --git a/package.json b/package.json
@@ -75,6 +75,7 @@
     "cssnano": "7.0.6",
     "eslint": "9.16.0",
     "globals": "15.13.0",
+    "howler": "2.2.4",
     "htmx.org": "1.9.12",
     "pino-princess": "1.0.0",
     "postcss-cli": "11.0.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/public/js/main.js b/public/js/main.js
@@ -7,3 +7,4 @@ import './countdown.js'
 import './fade-scroll.js'
 import './flash-message.js'
 import './map-thumbnail.js'
+import './notification.js'
diff --git a/public/js/notification.js b/public/js/notification.js
@@ -0,0 +1,56 @@
+import htmx from './htmx.js'
+import { Howl } from 'https://cdn.jsdelivr.net/npm/howler@2.2.4/+esm'
+
+function init(/** @type {HTMLElement} */ element) {
+  const title = element.getAttribute('data-notification-title')
+  if (!title) {
+    return
+  }
+
+  const body = element.getAttribute('data-notification-body') ?? ''
+  const icon = element.getAttribute('data-notification-icon')
+  const notification = new Notification(title, { body, ...(icon ? { icon } : {}) })
+
+  let /** @type {Howl} */ howl
+  const sound = element.getAttribute('data-notification-sound')
+  if (sound) {
+    let volume = 1.0
+
+    const v = element.getAttribute('data-notification-sound-volume')
+    if (v) {
+      volume = parseFloat(v)
+    }
+
+    howl = new Howl({
+      src: sound,
+      autoplay: true,
+      volume,
+    })
+  }
+
+  function afterSwap() {
+    if (document.body.contains(element)) {
+      return
+    }
+
+    notification.close()
+    howl.stop()
+    htmx.off('htmx:afterSwap', afterSwap)
+  }
+
+  htmx.on('htmx:afterSwap', afterSwap)
+}
+
+htmx.onLoad(element => {
+  if (!(element instanceof HTMLElement)) return
+
+  if (element.hasAttribute('data-notification-title')) {
+    init(element)
+  }
+
+  element.querySelectorAll(`[data-notification-title]`).forEach(element => {
+    if (element instanceof HTMLElement) {
+      init(element)
+    }
+  })
+})
diff --git a/public/js/types.d.ts b/public/js/types.d.ts
@@ -6,6 +6,10 @@ declare module 'https://esm.sh/chart.js@4.4.6?bundle-deps&exports=Chart,PieContr
   export * from 'chart.js'
 }
 
+declare module 'https://cdn.jsdelivr.net/npm/howler@2.2.4/+esm' {
+  export { Howl } from 'howler'
+}
+
 interface Window {
   htmx: typeof import('htmx.org').default
 }
diff --git a/src/html/layout.tsx b/src/html/layout.tsx
@@ -18,7 +18,7 @@ export function Layout(
   const title = <title safe>{props?.title ?? environment.WEBSITE_NAME}</title>
   const body = (
     <>
-      {props?.embedStyle && <style type="text/css">{embed(props.embedStyle)}</style>}
+      {props?.embedStyle ? <style type="text/css">{embed(props.embedStyle)}</style> : <></>}
       <div class="flex h-full flex-col">{props?.children}</div>
       <div id="notify-container"></div>
       <ReadyUpDialog />
@@ -44,6 +44,7 @@ export function Layout(
         <head>
           <meta charset="UTF-8" />
           <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+          <link rel="icon" type="image/x-icon" href="/favicon.ico" />
           <script src="/js/main.js" type="module"></script>
           <link href={mainCss} rel="stylesheet" hx-preserve></link>
           {title}

diff --git a/src/queue/views/html/ready-up-dialog.tsx b/src/queue/views/html/ready-up-dialog.tsx
@@ -4,60 +4,76 @@ const dialogId = 'ready-up-dialog'
 
 export function ReadyUpDialog() {
   return (
-    <dialog
-      class="w-[616px] rounded-xl bg-abru-dark-29 px-[59px] py-[42px] shadow-xl"
-      id={dialogId}
-      _={`
+    <>
+      <dialog
+        class="w-[616px] rounded-xl bg-abru-dark-29 px-[59px] py-[42px] shadow-xl"
+        id={dialogId}
+        _={`
         on show remove [@disabled] from <#${dialogId} button/> then me.showModal() end
         on close me.close() end
       `}
-    >
-      <form
-        class="flex flex-col items-center gap-11"
-        ws-send
-        _={`on submit add [@disabled] to <#${dialogId} button/>`}
       >
-        <div class="flex flex-col items-center text-[32px] font-bold text-abru-light-75">
-          <span>Game is starting!</span>
-          <span>Are you ready to play?</span>
-        </div>
+        <form
+          class="flex flex-col items-center gap-11"
+          ws-send
+          _={`on submit add [@disabled] to <#${dialogId} button/>`}
+        >
+          <div class="flex flex-col items-center text-[32px] font-bold text-abru-light-75">
+            <span>Game is starting!</span>
+            <span>Are you ready to play?</span>
+          </div>
 
-        <div class="flex flex-col gap-4">
-          <button
-            name="ready"
-            value=""
-            class="w-[242px] rounded bg-accent-600 py-[12px] text-xl font-bold uppercase text-gray-50"
-            autofocus=""
-          >
-            I'm ready
-          </button>
-          <button
-            name="leave"
-            value=""
-            class="w-[242px] rounded bg-abru-light-5 py-[12px] text-xl font-bold text-gray-50"
-          >
-            No, I can't play now
-          </button>
-        </div>
-      </form>
-    </dialog>
+          <div class="flex flex-col gap-4">
+            <button
+              name="ready"
+              value=""
+              class="w-[242px] rounded bg-accent-600 py-[12px] text-xl font-bold uppercase text-gray-50"
+              autofocus=""
+            >
+              I'm ready
+            </button>
+            <button
+              name="leave"
+              value=""
+              class="w-[242px] rounded bg-abru-light-5 py-[12px] text-xl font-bold text-gray-50"
+            >
+              No, I can't play now
+            </button>
+          </div>
+        </form>
+      </dialog>
+      <div id="ready-up-notification-container" class="hidden"></div>
+    </>
   )
 }
 
 ReadyUpDialog.show = () => {
   const id = nanoid()
   return (
-    <div id="notify-container" hx-swap-oob="beforeend">
-      <div id={id} _={`on load trigger show on #${dialogId} then remove me`}></div>
-    </div>
+    <>
+      <div id="notify-container" hx-swap-oob="beforeend">
+        <div id={id} _={`on load trigger show on #${dialogId} then remove me`}></div>
+      </div>
+      <div id="ready-up-notification-container">
+        <div
+          data-notification-title="Ready up!"
+          data-notification-body="A game is starting"
+          data-notification-icon="/favicon.png"
+          data-notification-sound="/sounds/ready_up.webm"
+        ></div>
+      </div>
+    </>
   )
 }
 
 ReadyUpDialog.close = () => {
   const id = nanoid()
   return (
-    <div id="notify-container" hx-swap-oob="beforeend">
-      <div id={id} _={`on load trigger close on #${dialogId} then remove me`}></div>
-    </div>
+    <>
+      <div id="notify-container" hx-swap-oob="beforeend">
+        <div id={id} _={`on load trigger close on #${dialogId} then remove me`}></div>
+      </div>
+      <div id="ready-up-notification-container"></div>
+    </>
   )
 }