Last thing to do is clean the score box and input, also auto foucs on input when click start.
const starters$ = Observable.merge( start$.mapTo(1000), half$.mapTo(500), quarter$.mapTo(250) ); // Clear the score box input and focus on input starters$.subscribe( () => { document.querySelector('#score').innerHTML = ""; input.value = ""; input.focus(); })
--------------------------
const Observable = Rx.Observable; const startButton = document.querySelector('#start'); const halfButton = document.querySelector('#half'); const quarterButton = document.querySelector('#quarter'); const stopButton = document.querySelector('#stop'); const resetButton = document.querySelector('#reset'); const input = document.querySelector('#input'); const start$ = Observable.fromEvent(startButton, 'click'); const half$ = Observable.fromEvent(halfButton, 'click'); const quarter$ = Observable.fromEvent(quarterButton, 'click'); const stop$ = Observable.fromEvent(stopButton, 'click'); const reset$ = Observable.fromEvent(resetButton, 'click'); const input$ = Observable.fromEvent(input, 'input') .map(event => event.target.value); const data = {count:0}; const inc = (acc)=> ({count: acc.count + 1}); const reset = (acc)=> data; const starters$ = Observable.merge( start$.mapTo(1000), half$.mapTo(500), quarter$.mapTo(250) ); // Clear the score box input and focus on input starters$.subscribe( () => { document.querySelector('#score').innerHTML = ""; input.value = ""; input.focus(); }) const intervalActions = (time)=> Observable.merge( Observable.interval(time) .takeUntil(stop$).mapTo(inc), reset$.mapTo(reset) ); const timer$ = starters$ .switchMap(intervalActions) .startWith(data) .scan((acc, curr)=> curr(acc)) const runningGame$ = timer$ .do((x)=> console.log(x)) .takeWhile((data)=> data.count <= 3) .withLatestFrom( input$.do((x)=> console.log(x)), (timer, input)=> ({count: timer.count, text: input}) ) .share(); // To clean the input runningGame$ .repeat() .subscribe( (x) => input.value = ""); runningGame$ .filter((data)=> data.count === parseInt(data.text)) .reduce((acc, curr)=> acc + 1, 0) .repeat() .subscribe( (x)=> document.querySelector('#score').innerHTML = ` ${x} `, err=> console.log(err), ()=> console.log('complete') );
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <script src="https://npmcdn.com/@reactivex/rxjs@5.0.0-beta.1/dist/global/Rx.umd.js"></script> <title>JS Bin</title> </head> <body> <button id="start">Start</button> <button id="half">Half</button> <button id="quarter">Quarter</button> <button id="stop">Stop</button> <button id="reset">Reset</button> <hr> <input type="text" id="input"> <div>Score: <span id="score"></span></div> </body> </html>