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 keyUps = Rx.Observable.fromEvent(document, 'keyup');
const keyDowns = Rx.Observable.fromEvent(document, 'keydown');

// getting space events
const spaceKeyUps = keyUps.filter((data) => data.keyCode === 32);
const spaceKeyDowns = keyDowns.filter((data) => data.keyCode === 32);

// signal start/end events (possible multiple same events)
const signalStartsRaw = spaceKeyDowns.map(() => "start");
const signalEndsRaw = spaceKeyUps.map(() => "end");
const signalStartsEnds = Rx.Observable.merge(signalStartsRaw, signalEndsRaw).distinctUntilChanged();

// signal star/end with toggle logic
const signalStarts = signalStartsEnds.filter((ev) => ev === "start")
const signalEnds = signalStartsEnds.filter((ev) => ev === "end")

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