Draw dices

Signed-off-by: Emmy D'Anello <emmy.danello@animath.fr>

draw/static/draw.js

@@ -1,8 +1,23 @@
+(async () => {
+    // check notification permission
+    await Notification.requestPermission()
+})()
+
 const tournaments = JSON.parse(document.getElementById('tournaments_list').textContent)
 const sockets = {}
 
 const messages = document.getElementById('messages')
 
+function drawDice(tid, trigram = null) {
+    sockets[tid].send(JSON.stringify({'type': 'dice', 'trigram': trigram}))
+}
+
+function showNotification(title, body, timeout = 5000) {
+    let notif = new Notification(title, {'body': body, 'icon': "/static/tfjm.svg"})
+    if (timeout)
+        setTimeout(() => notif.close(), timeout)
+}
+
 document.addEventListener('DOMContentLoaded', () => {
     if (document.location.hash) {
         document.querySelectorAll('button[data-bs-toggle="tab"]').forEach(elem => {
@@ -18,7 +33,8 @@ document.addEventListener('DOMContentLoaded', () => {
 
     for (let tournament of tournaments) {
         let socket = new WebSocket(
-            'ws://' + window.location.host + '/ws/draw/' + tournament.id + '/'
+            (document.location.protocol === 'https:' ? 'wss' : 'ws') + '://' + window.location.host
+            + '/ws/draw/' + tournament.id + '/'
         )
         sockets[tournament.id] = socket
 
@@ -35,11 +51,37 @@ document.addEventListener('DOMContentLoaded', () => {
                 setTimeout(() => wrapper.remove(), timeout)
         }
 
-        function draw_start(data) {
+        function setInfo(info) {
+            document.getElementById(`messages-${tournament.id}`).innerHTML = info
+        }
+
+        function drawStart() {
             document.getElementById(`banner-not-started-${tournament.id}`).classList.add('d-none')
             document.getElementById(`draw-content-${tournament.id}`).classList.remove('d-none')
         }
 
+        function updateDiceInfo(trigram, result) {
+            let elem = document.getElementById(`dice-${tournament.id}-${trigram}`)
+            if (result === null) {
+                elem.classList.remove('text-bg-success')
+                elem.classList.add('text-bg-warning')
+                elem.innerText = `${trigram} 🎲 ??`
+            }
+            else {
+                elem.classList.remove('text-bg-warning')
+                elem.classList.add('text-bg-success')
+                elem.innerText = `${trigram} 🎲 ${result}`
+            }
+        }
+
+        function updateDiceVisibility(visible) {
+            let div = document.getElementById(`launch-dice-${tournament.id}`)
+            if (visible)
+                div.classList.remove('d-none')
+            else
+                div.classList.add('d-none')
+        }
+
         socket.addEventListener('message', e => {
             const data = JSON.parse(e.data)
             console.log(data)
@@ -48,8 +90,20 @@ document.addEventListener('DOMContentLoaded', () => {
                 case 'alert':
                     addMessage(data.message, data.alert_type)
                     break
+                case 'notification':
+                    showNotification(data.title, data.body)
+                case 'set_info':
+                    setInfo(data.information)
+                    break
                 case 'draw_start':
-                    draw_start(data)
+                    drawStart()
+                    break
+                case 'dice':
+                    updateDiceInfo(data.team, data.result)
+                    break
+                case 'dice_visibility':
+                    updateDiceVisibility(data.visible)
+                    break
             }
         })
 
@@ -59,14 +113,16 @@ document.addEventListener('DOMContentLoaded', () => {
 
         socket.addEventListener('open', e => {})
 
-        document.getElementById('format-form-' + tournament.id)
-            .addEventListener('submit', function (e) {
-            e.preventDefault()
+        let format_form = document.getElementById('format-form-' + tournament.id)
+        if (format_form !== null) {
+            format_form.addEventListener('submit', function (e) {
+                e.preventDefault()
 
-            socket.send(JSON.stringify({
-                'type': 'start_draw',
-                'fmt': document.getElementById('format-' + tournament.id).value
-            }))
-        })
+                socket.send(JSON.stringify({
+                    'type': 'start_draw',
+                    'fmt': document.getElementById('format-' + tournament.id).value
+                }))
+            })
+        }
     }
 })