Jaggilines/default.html

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <title>Beyond the jaggy lines</title>
        <link rel="stylesheet" type="text/css" href="default.css"/>
        <link rel="shortcut icon" href="./assets/Valkyrie.png"> 
    </head>
    <body>
        <div class="status-band">
            <span class="status-message"></span>
            <span class="score"></span>
        </div>
        <div class="compass-band">
            <span class="compass-box">
                <span class="compass">W.▪.N.▪.E.▪.S.▪.W.▪.</span>
            </span>
        </div>
        <div class="viewport-container">
            <canvas id="viewport"></canvas>
            <img class="cockpit" src="assets/cockpit.png"></div>
        </div>
        <div class="dashboard">
            <div class="map-container">
                <canvas class="map"></canvas>
                <img class="ship" src="assets/Valkyrie.png"/>
            </div>
            <div class="coord-container">
                X: <span class="coord-x"></span>
                Y: <span class="coord-y"></span>
            </div>
            <div class="jog-container">
                <button class="step-back-btn" title="Backup the ship by one frame">┃◀</button>
                <button class="backwards-btn" title="Make the ship move backwards">◀</button>
                <button class="pause-btn" title="Pause the game">⏸</button>
                <button class="redraw-btn" title="Redraw the current frame">↻</button>
                <button class="play-btn" title="Unpause the game">▶</button>
                <button class="step-forward-btn" title="Advance the ship by one frame">▶┃</button>
            </div>
            <div class="dirpad">
                <span class="btn-col other">
                    <button class="land-btn small">Land</button>
                    <button class="systems-btn small">Systems</button>
                    <button class="Boosters-btn small">Boosters</button>
                </span>
                <span class="btn-col">
                    <button class="increase-thrust-btn">+</button>
                    <button class="decrease-thrust-btn">-</button>
                </span>
                <button class="left-btn btn-col">⮜</button>
                <span class="btn-col">
                    <button class="up-btn">⮝</button>
                    <button class="down-btn">⮟</button>
                </span>
                <button class="right-btn btn-col">⮞</button>
            </div>
        </div>
        <div id="testSection">
            <button id="runTests">Run tests</button>
        </div>
        <script type="module" src="./default.js"></script>
    </body>
</html>