flashwave
e32eabea1f
UI is extremely shoddy right now, redo will follow. Enjoy LoadingOverlay while you still can.
63 lines
2 KiB
JavaScript
63 lines
2 KiB
JavaScript
const MamiPingIndicator = function(initialStrength) {
|
|
const bars = [];
|
|
const html = <div class="ping">
|
|
<div class="ping-colour ping-colour-top"/>
|
|
<div class="ping-colour ping-colour-bottom"/>
|
|
<div class="ping-background"/>
|
|
<div class="ping-antenna"/>
|
|
<div class="ping-antenna-dot"/>
|
|
<div class="ping-antenna-over ping-antenna-left"/>
|
|
<div class="ping-antenna-over ping-antenna-right"/>
|
|
</div>;
|
|
|
|
for(let i = 1; i <= 3; ++i)
|
|
bars.push(html.appendChild(<div class={`ping-bar ping-bar-${i}`}/>));
|
|
|
|
let interval;
|
|
|
|
const setStrength = strength => {
|
|
if(typeof strength !== 'number')
|
|
throw 'strength must be a number';
|
|
|
|
if(strength < 0) {
|
|
if(interval === undefined) {
|
|
const cyclesMax = bars.length * 2;
|
|
let cycles = -1;
|
|
|
|
const updateCycle = () => {
|
|
let curCycle = ++cycles % cyclesMax;
|
|
if(curCycle > bars.length)
|
|
curCycle = cyclesMax - curCycle;
|
|
|
|
for(const i in bars)
|
|
bars[i].classList.toggle('ping-bar-on', curCycle === (parseInt(i) + 1));
|
|
};
|
|
|
|
interval = setInterval(updateCycle, 200);
|
|
updateCycle();
|
|
}
|
|
} else {
|
|
if(interval !== undefined) {
|
|
clearInterval(interval);
|
|
interval = undefined;
|
|
}
|
|
|
|
for(const i in bars)
|
|
bars[i].classList.toggle('ping-bar-on', i < strength);
|
|
}
|
|
|
|
html.classList.toggle('ping-state-good', strength > 1);
|
|
html.classList.toggle('ping-state-warn', strength == 1);
|
|
html.classList.toggle('ping-state-poor', strength < 1);
|
|
};
|
|
|
|
if(typeof initialStrength !== 'number')
|
|
initialStrength = bars.length;
|
|
|
|
setStrength(initialStrength);
|
|
|
|
return {
|
|
getElement: () => html,
|
|
setStrength: setStrength,
|
|
};
|
|
};
|