<!DOCTYPE html>
<html scroll-behavior="smooth" style="height: 100%">
    <head>
        <!-- nunito font, copying wynndata -->
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">

        <link rel="stylesheet" href="/css/styles.css">
        <link rel="stylesheet" href="/css/article.css">
        <link rel="icon" href="./media/memes/agony.png">
        <link rel="manifest" href="manifest.json">
        <title>Base DPS Visualizer</title>
    </head>
    <body class="all" style="height: 95%; overflow: auto; display: flex; flex-direction: column">
        <header class="header nomarginp">
            <div class="headerleft" id = "headerleft">
            </div>
            <div class="headercenter" id = "headercenter">
                <div>
                    <p class="itemp" id="header">Base DPS Visualization</p>
                </div>
            </div>
            <div class="headerright" id = "headerright">
            </div>
        </header>
        <table style="padding-bottom:20px">
            <tr>
                <td>
                    <button class = "button-narrow" id = "wand" onclick = "setData('wand')">
                        wands
                    </button>
                </td>
                <td>
                    <button class = "button-narrow" id = "spear" onclick = "setData('spear')">
                        spears
                    </button>
                </td>
                <td>
                    <button class = "button-narrow" id = "dagger" onclick = "setData('dagger')">
                        daggers
                    </button>
                </td>
                <td>
                    <button class = "button-narrow" id = "bow" onclick = "setData('bow')">
                        bows
                    </button>
                </td>
                <td>
                    <button class = "button-narrow" id = "relik" onclick = "setData('relik')">
                        reliks
                    </button>
                </td>
                <td>
                </td>
                <td>
                    <button class = "button-narrow" id = "powderToggle" onclick = "togglePowder()">
                        prepowder (true)
                    </button>
                </td>
            </tr>
        </table>
        <p id="info">
            SELECTED ITEM TYPE: wand
        </p>

        <script src="https://d3js.org/d3.v7.js"></script>
        <script type="text/javascript" src="/js/utils.js"></script>
        <script type="text/javascript" src="/js/loadheader.js"></script>
        <script type="text/javascript" src="/js/icons.js"></script>
        <script type="text/javascript" src="/js/debug/dps_vis.js"></script>
    </body>
</html>