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>
|
