90 lines
2.3 KiB
JavaScript
90 lines
2.3 KiB
JavaScript
import { withComponent, props } from 'skatejs';
|
|
import interpolate from 'color-interpolate';
|
|
|
|
const Component = withComponent();
|
|
class UserList extends Component {
|
|
static props = {
|
|
data: props.array,
|
|
interval: props.number,
|
|
};
|
|
|
|
connected() {
|
|
this.fetchData();
|
|
if (!this.interval) {
|
|
return;
|
|
}
|
|
this.runInterval = window.setInterval(() => {
|
|
this.fetchData();
|
|
}, this.interval * 1000);
|
|
}
|
|
|
|
disconnecting() {
|
|
if (this.runInterval) {
|
|
window.clearInterval(this.runInterval);
|
|
delete this.runInterval;
|
|
}
|
|
}
|
|
|
|
fetchData() {
|
|
const url = 'https://c-beam.cbrp3.c-base.org/mechblast_json';
|
|
fetch(url)
|
|
.then(data => data.json())
|
|
.then((data) => {
|
|
this.data = data.userlist;
|
|
});
|
|
}
|
|
|
|
renderer(renderRoot, render) {
|
|
const root = renderRoot;
|
|
while (root.firstChild) {
|
|
root.removeChild(root.firstChild);
|
|
}
|
|
root.appendChild(render());
|
|
const styles = document.createElement('style');
|
|
styles.appendChild(document.createTextNode(`
|
|
@-webkit-keyframes blinker {
|
|
from {opacity: 1.0;}
|
|
to {opacity: 0.0;}
|
|
}
|
|
blink{
|
|
text-decoration: blink;
|
|
-webkit-animation-name: blinker;
|
|
-webkit-animation-duration: 0.6s;
|
|
-webkit-animation-iteration-count:infinite;
|
|
-webkit-animation-timing-function:ease-in-out;
|
|
-webkit-animation-direction: alternate;
|
|
}
|
|
.long .deco {
|
|
display: none;
|
|
}
|
|
.long .output {
|
|
font-size: smaller;
|
|
}
|
|
span.output {
|
|
color: #fff;
|
|
}
|
|
span.prompt {
|
|
color: #a0a0a0;
|
|
}
|
|
`));
|
|
root.appendChild(styles);
|
|
}
|
|
|
|
render({ data }) {
|
|
const el = document.createElement('div');
|
|
const colormap = interpolate(['#3465a4', '#729fcf', '#8ae234', '#fce94f', '#ef2929']);
|
|
const colorAtIndex = val => colormap(Math.min(val / 22, 22));
|
|
el.className = 'terminal';
|
|
el.innerHTML = `
|
|
<div class="deco"><span class="prompt">user@c-beam></span> #who</div>
|
|
<div><span class="output" style="color: ${colorAtIndex(data.length)}">${data.join(', ')}</span></div>
|
|
<div class="deco"><span class="prompt">user@c-beam></span> <blink>_</blink></div>
|
|
`;
|
|
if (data.join(', ').length > 100) {
|
|
el.classList.add('long');
|
|
}
|
|
return el;
|
|
}
|
|
}
|
|
|
|
customElements.define('cbase-userlist', UserList);
|