90 lines
2.1 KiB
JavaScript
90 lines
2.1 KiB
JavaScript
const $w = document.querySelector('.w');
|
|
const $h1 = document.querySelector('h1');
|
|
|
|
const l = ['Langstrasse', 'Waid', 'Niederdorf', 'Bellevue', 'Werdinsel', 'Wipkingen', 'Zentralstrasse', 'Lochergut', 'Höngg', 'Triemli', 'Affoltern', 'Wollishofen', 'Stauffacher', 'Zwinglihaus', 'Schiffbau'];
|
|
|
|
const c = [
|
|
['red', 'white', '#202123'],
|
|
['#eac328', '#CE6D54', '#354046'],
|
|
['#b03b5f', '#e1e6eb', '#07080b'],
|
|
['#E39E84', '#73BEDE', '#FDF8E7'],
|
|
['#fff', '#E17887', '#90C6E6'],
|
|
['#DF3F1F', '#fff', '#A61C54'],
|
|
['turquoise', 'hotpink', '#212121'],
|
|
['gold', 'darkgray', 'purple'],
|
|
['#2487c6', '#f7f7f7', '#202124']];
|
|
|
|
|
|
const rn = () => Math.round(Math.random());
|
|
|
|
const setRDC = () => {
|
|
const cl = c[Math.floor(Math.random() * c.length)];
|
|
cl.forEach((cc, i) => {
|
|
document.documentElement.style.setProperty(`--c${i + 1}`, cc);
|
|
});
|
|
};
|
|
|
|
let $es;
|
|
|
|
const da = () => {
|
|
$es = [];
|
|
$w.innerHTML = '';
|
|
$h1.innerHTML = l[Math.floor(Math.random() * l.length)];
|
|
setRDC();
|
|
|
|
function ce($p, x, y) {
|
|
$d = document.createElement('div');
|
|
$d.classList.add('c');
|
|
$d.style.setProperty('--x', x);
|
|
$d.style.setProperty('--y', y);
|
|
$p.appendChild($d);
|
|
return $d;
|
|
}
|
|
|
|
for (let i = 0; i < 4; i++) {
|
|
let $p = ce($w, rn(), rn());
|
|
if (rn()) {
|
|
for (let j = 0; j < 4; j++) {
|
|
let $p2 = ce($p, rn(), rn());
|
|
if (rn()) {
|
|
for (let l = 0; l < 4; l++) {
|
|
$es.push(ce($p2, rn(), rn()));
|
|
}
|
|
} else {
|
|
$es.push($p2);
|
|
}
|
|
}
|
|
} else {
|
|
$es.push($p);
|
|
}
|
|
};
|
|
};
|
|
|
|
da();
|
|
|
|
|
|
document.documentElement.addEventListener('pointerdown', e => {
|
|
const $t = e.target;
|
|
|
|
/*if( $t.classList.contains('c') ) {
|
|
$t.style.setProperty('--x', rn());
|
|
$t.style.setProperty('--y', rn());
|
|
e.stopPropagation();
|
|
} else {*/
|
|
da();
|
|
/*}*/
|
|
});
|
|
|
|
let i = 0;
|
|
setInterval(() => {
|
|
const l = $es.length;
|
|
let $e = $es[i++ % l];
|
|
$e.style.setProperty('--x', rn());
|
|
$e.style.setProperty('--y', rn());
|
|
|
|
if (l > 4) {
|
|
let $e2 = $es[(i + Math.floor(l * .5)) % l];
|
|
$e2.style.setProperty('--x', rn());
|
|
$e2.style.setProperty('--y', rn());
|
|
}
|
|
}, 500); |