aboutsummaryrefslogtreecommitdiff
path: root/index.html
blob: cb5aa8c237274c462b95b73d74b76cda8b1145b8 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>queue go brrr</title>
    <style>
    #canvas {
        display:none;
    }

    video, img {
        max-width: 100%;
    }

    #video-preview-container {
        position: relative;
    }

    #target-marker {
        position: absolute;
        border: 1px solid red;
        pointer-events: none;
    }
    </style>
</head>
<body>
<canvas id="canvas">
</canvas>
<main>
    <h1>queue go brrr<span id="eta"></span></h1>
    <h2>For tracking your Login Queue (Extreme) raid progression.</h2>
    <p>
        Share your FFXIV window, and then this tool will try to calculate how much longer you probably have to wait.
        (The actual calculation isn't very well-designed, but it's better than nothing.)
        (Also this is incredibly janky; if anything breaks or misbehaves try reloading the page.)
    </p>
    <h2><button id="bootbutton">Start!</button></h2>
    <div class="output">
        <h3>Queue Position Preview (it looks like this says <span id="current-queue-position">something once you hit the button</span>)</h3>
        <img id="photo" alt="The screen capture will appear in this box.">
    </div>
    <h3>Live Window View (click to move the queue position box if it's misaligned)</h3>
    <div id="video-preview-container">
        <video id="video">Video stream not available.</video>
        <div id="target-marker"></div>
    </div>
    <p>brought to you by <a href="https://www.boringcactus.com">boringcactus</a>. source code <a href="https://code.boringcactus.com/queue-go-brrr/tree/">available</a>.</p>
</main>
<!-- Note the usage of `type=module` here as this is an ES6 module -->
<script type="module">
    // Use ES module import syntax to import functionality from the module
    // that we have compiled.
    //
    // Note that the `default` import is an initialization function which
    // will "boot" the module and make it ready to use. Currently browsers
    // don't support natively imported WebAssembly as an ES module, but
    // eventually the manual initialization won't be required!
    import init, { boot } from './pkg/queue_go_brrr.js';

    async function run() {
        await init();

        const bootButton = document.getElementById('bootbutton');
        bootButton.addEventListener('click', () => {
            bootButton.remove();
            boot();
        });
    }

    run();
</script>
</body>
</html>