import type { IObjectOf } from "@thi.ng/api" ; import { dropdown } from "@thi.ng/hdom-components/dropdown" ; import { clamp } from "@thi.ng/math/interval" ; import type { ISubscriber } from "@thi.ng/rstream" ; import { reactive , Stream } from "@thi.ng/rstream/stream" ; import { sync } from "@thi.ng/rstream/sync" ; import { bits } from "@thi.ng/transducers-binary/bits" ; import { updateDOM } from "@thi.ng/transducers-hdom" ; import { comp } from "@thi.ng/transducers/comp" ; import { map } from "@thi.ng/transducers/map" ; import { multiplex } from "@thi.ng/transducers/multiplex" ; import { partition } from "@thi.ng/transducers/partition" ; import { pluck } from "@thi.ng/transducers/pluck" ; import { range } from "@thi.ng/transducers/range" ; import { str } from "@thi.ng/transducers/str" ; import { transduce } from "@thi.ng/transducers/transduce" ; import { zip } from "@thi.ng/transducers/zip" ; import { FONT } from "./font" ; const emitOnStream = ( stream ) => ( e ) => stream . next ( ( < HTMLSelectElement > e . target ) . value ) ; const lookupChar = ( c ) => FONT [ clamp ( c . charCodeAt ( 0 ) - 32 , 0 , FONT . length - 1 ) ] ; const xfJoin = map ( ( x ) => x . join ( "" ) ) ; const xfChar = ( i , on , off ) => comp ( pluck < number [ ] , number > ( i ) , bits ( 8 ) , map ( ( x ) => ( x ? on : off ) ) , partition ( 8 ) , xfJoin ) ; const banner = ( { input , on , off } ) => transduce ( comp ( multiplex . apply ( null , [ ... map ( ( i ) => xfChar ( i , on , off ) , range ( input . length ) ) , ] ) , xfJoin ) , str ( "\n" ) , zip . apply ( null , [ ... map ( lookupChar , input || " " ) ] ) ) ; const charSelector = ( stream ) => [ dropdown , { class : "ml3" , onchange : emitOnStream ( stream ) , } , [ [ "#" , "#" ] , [ "@" , "@" ] , [ "*" , "*" ] , [ "X" , "X" ] , [ "/" , "/" ] , [ "=" , "=" ] , [ "-" , "-" ] , [ "^" , "^" ] , [ "." , "." ] , [ " " , "space" ] , ] , stream . deref ( ) , ] ; const app = ( { raw , result } ) => [ "div" , [ "div" , [ "input" , { oninput : emitOnStream ( input ) , value : raw , } , ] , charSelector ( on ) , charSelector ( off ) , ] , [ "pre.code.w-100.pa2.overflow-x-auto.bg-washed-yellow" , result ] , ] ; const input = reactive ( "8BIT POWER!" ) ; const on = reactive ( "/" ) ; const off = reactive ( " " ) ; const xformer = sync ( { src : { input , on , off } } ) . transform ( map ( banner ) ) ; const main = sync ( { src : { raw : input , result : xformer } } ) ; main . transform ( map ( app ) , updateDOM ( ) ) ;