import "./styles.css"; import { NO_OUTPUT } from "kingly"; import emitonoff from "emitonoff"; import morph from "nanomorph"; import html from "nanohtml"; import { CLICKED_SUBMIT, TYPED_CHAR, INIT_SCREEN, GREEN_INPUT, RED_INPUT, SUBMITTED_PASSWORD, RENDER, START } from "./properties"; import { pwdFsm } from "./fsm"; const eventEmitter = emitonoff(); function buttonEventHandler(ev) { eventEmitter.emit(CLICKED_SUBMIT, void 0); } function inputEventHandler(ev) { if (ev.isComposing || ev.keyCode === 229) { return; } eventEmitter.emit(TYPED_CHAR, ev.target.value); } const screens = { [INIT_SCREEN]: () => html`

Enter password

`, [GREEN_INPUT]: input => html`

Enter password

`, [RED_INPUT]: input => html`

Enter password

`, [SUBMITTED_PASSWORD]: password => html`

That's all folks! Submitted password is ${password}

` }; // Shell [CLICKED_SUBMIT, TYPED_CHAR, START].forEach(event => { eventEmitter.on(event, arg => { const commands = pwdFsm({ [event]: arg }); if (commands) { commands .filter(x => x !== NO_OUTPUT) .forEach(({ command, params }) => { if (command === RENDER) { const { screen, props } = params; morph(rootEl, screens[screen](props)); } }); } }); }); const rootEl = document.getElementById("app"); eventEmitter.emit(START, void 0);

password-meter-nanomorph