38 lines
1.2 KiB
React
38 lines
1.2 KiB
React
|
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}`}/>));
|
||
|
|
|
||
|
|
const setStrength = strength => {
|
||
|
|
if(typeof strength !== 'number')
|
||
|
|
throw 'strength must be a number';
|
||
|
|
|
||
|
|
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,
|
||
|
|
};
|
||
|
|
};
|