const mapping = {
    'lib.Application': './app.html',
    'lib.Capabilities': './capabilities.html',
    'lib.Card': './card/index.html',
    'lib.Pixi': './pixi/index.html',
    'pixi.App': './pixi/app.html'
}

function menu(event) {
    let key = event.target.innerText
    let html = ''

    for (let k of Object.keys(mapping)) {
        if (k.startsWith(key)) {
            let rest = k.slice(key.length)
            let url = mapping[k]
            html += `<a href="${url}">${rest}</a>`
        }
    }
    event.preventDefault()
    let contextMenu = document.createElement('div')
    contextMenu.id = 'ctxmenu'
    contextMenu.style = `top:${event.pageY - 10}px;left:${event.pageX - 40}px`
    contextMenu.onmouseleave = () => (contextMenu.outerHTML = '')
    contextMenu.innerHTML = html
    document.body.appendChild(contextMenu)
}