JSFiddle - React, Tailwind, and code Playground

by AlexMost

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.0.6/rx.all.min.js"></script>

JavaScript

"use strict";
const
	fromEvent = Rx.Observable.fromEvent,
    merge = Rx.Observable.merge,
    signalStartsEnds = merge(
        fromEvent(document, 'keyup').filter((d) => d.keyCode === 32).map(() => "end"),
        fromEvent(document, 'keydown').filter((d) => d.keyCode === 32).map(() => "start"))
		.distinctUntilChanged(),
      
	signalStarts = signalStartsEnds.filter((ev) => ev === "start").timestamp(),
	signalEnds = signalStartsEnds.filter((ev) => ev === "end").timestamp(),

	spanStream = signalStarts.flatMap((start) => {
    	return signalEnds.map((end) => end.timestamp - start.timestamp).first();
	}),

	SPAN = 400,
	dotsStream = spanStream.filter((v) => v <= SPAN).map(() => "."),
	lineStream = spanStream.filter((v) => v > SPAN).map(() => "-");

// look to the console to see the result
dotsStream.subscribe((data) => console.log(data));
lineStream.subscribe((data) => console.log(data));