const address = document.querySelector('#address').innerHTML
const socket = new ReconnectingWebSocket(location.origin.replace(/^http/, "ws") + address);

socket.onopen = (event) => {
    socket.send(JSON.stringify({type:'hello'}))
}

const join = document.querySelector('#join')
join.addEventListener('click', ()=>{
    startPlay()
    setTimeout(()=>stopPlay(), 250)
})

const functions = {
    start_play: (msg) => startPlay(),
    stop_play: (msg) => stopPlay(),
    tune: (msg) => tune(msg.freq, msg.gain)
}

socket.onmessage = (e) => {
    let message

    try {
        message = JSON.parse(e.data)
    } catch (e) {
        console.log(e)
    }

    if (!message) return
    
    functions[message?.type](message)
}



const WIDTH = window.innerWidth
const HEIGHT = window.innerHeight

const canvas = document.querySelector("#draw")
const canvasContext = canvas.getContext("2d")
canvas.width = WIDTH
canvas.height = HEIGHT

const audioContext = new AudioContext()
const oscillator = audioContext.createOscillator()
const gainNode = audioContext.createGain()


oscillator.connect(gainNode)


const maxFreq = 6000
const maxVol = 0.2
const initialVol = 0.001

oscillator.start(0)
oscillator.detune.value = 100

oscillator.addEventListener('end', () => {
    console.log("Your tone has stopped")
})

gainNode.gain.value = initialVol
gainNode.gain.minValue = initialVol
gainNode.gain.maxValue = initialVol

let pressed = false
let cursorX
let cursorY


const startPlay = () => {
    gainNode.connect(audioContext.destination)
}

const stopPlay = () => {
   
    gainNode.disconnect(audioContext.destination)
}

const tune = (freq, gain) => {

    oscillator.frequency.value = freq;
    gainNode.gain.value = gain;

    let x = WIDTH / maxFreq * freq
    let y = HEIGHT / maxVol * gain
    canvasContext.fillStyle = "rgb(0,0,0)"
    canvasContext.fillRect(x, y, 5,5)
}