plateforme-tfjm2/draw/static/draw.js

(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 => {
            if ('#' + elem.innerText.toLowerCase() === document.location.hash.toLowerCase()) {
                elem.click()
            }
        })
    }

    document.querySelectorAll('button[data-bs-toggle="tab"]').forEach(
        elem => elem.addEventListener(
            'click', () => document.location.hash = '#' + elem.innerText.toLowerCase()))

    for (let tournament of tournaments) {
        let socket = new WebSocket(
            (document.location.protocol === 'https:' ? 'wss' : 'ws') + '://' + window.location.host
            + '/ws/draw/' + tournament.id + '/'
        )
        sockets[tournament.id] = socket

        function addMessage(message, type, timeout = 0) {
            const wrapper = document.createElement('div')
            wrapper.innerHTML = [
                `<div class="alert alert-${type} alert-dismissible" role="alert">`,
                `<div>${message}</div>`,
                '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
            ].join('\n')
            messages.append(wrapper)

            if (timeout)
                setTimeout(() => wrapper.remove(), timeout)
        }

        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)

            switch (data.type) {
                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':
                    drawStart()
                    break
                case 'dice':
                    updateDiceInfo(data.team, data.result)
                    break
                case 'dice_visibility':
                    updateDiceVisibility(data.visible)
                    break
            }
        })

        socket.addEventListener('close', e => {
            console.error('Chat socket closed unexpectedly')
        })

        socket.addEventListener('open', e => {})

        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
                }))
            })
        }
    }
})