📷 instagram.com/nestor2509
Public
Edited
Oct 23, 2022
class Joker {
constructor(num) {
this.sliders = [];
for (var i = 0; i < num; i++) {
this.sliders.push(
Inputs.range([0, 100], {
label: "",
step: 1,
value: i === 0 ? 0 : 100
})
);
}
for (let i = 0; i < num; i++) {
this.sliders[i].onchange = (e, d) => this.updateValues(e.target.value, i);
}
}
getSliders() {
return this.sliders;
}
drawSliders() {
return html`<div>${this.sliders.map((r) => r)}</div>`;
}
getTotalValue() {
let resp = 0;
this.sliders.forEach((s) => (resp += s.value));
return resp;
}
updateValues(value, index) {
if (index >= 0) {
const dif = this.getTotalValue() - (this.sliders.length - 1) * 100;
if (dif > 0) {
let randomNum = Math.floor(Math.random() * this.sliders.length);
while (randomNum === index && this.sliders[randomNum].value < dif) {
randomNum = Math.floor(Math.random() * this.sliders.length);
}
this.sliders[randomNum].value = this.sliders[randomNum].value - dif;
} else if (dif < 0) {
let temp_dif = -dif;
for (let i = 0; i < this.sliders.length && temp_dif > 0; i++) {
if (i !== index && 100 - this.sliders[i].value >= temp_dif) {
this.sliders[i].value = this.sliders[i].value + temp_dif;
temp_dif = 0;
} else if (i !== index && 100 - this.sliders[i].value < temp_dif) {
const _dif = 100 - this.sliders[i].value;
this.sliders[i].value = this.sliders[i].value + _dif;
temp_dif = temp_dif - _dif;
}
}
}
}
}
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
