[zlodiak]

пробую работать в библиотекой rxjs и вот набросал простейшую игру. в ней нужно выбирать кубики с номерами в порядке возрастания.

скажите оправдано ли здесь применение библиотеки rxjs? мне кажется, если приложение разрастётся, то удобнее работать с потоками событий чем с eventListener-ми.

Можно ли упростить этот код(но не отказываясь от RX)?

и если не трудно, скажите, хорошо ли скомпонован код, читать такое удобно? как можно улучшить читабельность?

jsfiddle

js:

document.addEventListener("DOMContentLoaded", ready);

let currNum;
let step;
let startContent = 'Это простейший тренажёр для детей, он проверяет способность считать. Предполагается, что: \
<br>дети от 1 до 3 лет должны уметь считать до 5 \
<br>дети от 4 до 5 лет должны уметь считать до 10 \
<br>дети от 6 до 7 лет должны уметь считать до 30 \
<br>дети от 7 до 9 лет должны уметь считать до 100 \
	<br><br>Чтобы проверить знания участнику предлагается последовательно в порядке возрастания выбрать кубики с цифрами \
';

function init() {
	currNum = -1;
	step = 0
	let startBtn = document.getElementById('start');
	startBtn.click();
};

function clearContent() {
	let contentInner = document.getElementById('contentInner');
	contentInner.innerHTML = '';
};

function deletePoint(id) {
	let pointEl = document.getElementById(id);
	pointEl.parentNode.removeChild(pointEl);
};

function createPoints(count) {
	let contentInner = document.getElementById('contentInner');

	for(let i = 0; i <= 2; i++) {
		let num_ = Math.random() * count;
		let num = Math.ceil(num_);

		let pointEl = document.createElement('div');
		pointEl.className = 'point';
		pointEl.id = 'point_' + i;
		pointEl.setAttribute('data-num', num);
		pointEl.innerHTML = num;		

		contentInner.appendChild(pointEl);
	};
};


function ready() {
	let ulEl = document.getElementById('ul');
	let contentInnerEl = document.getElementById('contentInner');

	let menu = Rx.Observable.fromEvent(ulEl, 'click');
	let contentInner = Rx.Observable.fromEvent(contentInnerEl, 'click');

	let subscription = menu
	.map(e => e.target)
	.filter(t => t.className === 'start' || t.className === 'li')
	.subscribe(function (t) {
		clearContent();
    switch (t.className) {
      case 'start':
				document.getElementById('contentInner').innerHTML = startContent;
        break;
      case 'li':				
				createPoints(t.getAttribute('data-count'));
        break;
    }
	});

	let subscription3 = contentInner
	.map(e => e.target)
	.filter(t => t.className === 'point')
	.subscribe(function (t) {
		let val = +document.getElementById(t.id).innerHTML;

		++step;
		deletePoint(t.id);

		if(currNum > val) { 
			alert('Not correct'); 
			init();
		} else {
			currNum = val;
			if(step > 2) { 
				alert('Correct'); 
				init();
			}
		}	
	});									
	
	init();
};