aboutsummaryrefslogtreecommitdiff
path: root/index.html
blob: 74454354f2a9f4baa77d3c73bd88bf6dd0af2b53 (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
<!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 sophisticated, but it's better than nothing.)
    </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>