export function renderSpeedPicker(speed: ZapSpeed): VNode { return div(`.speedPicker.${styles.speedPickerStyle}`, [ span(`.${styles.speedPickerLabelStyle}`, 'Speed'), button({ class: { 'slowSpeedButton': true, [styles.speedPickerSlowStyle]: true, [styles.speedPickerSelectedStyle]: speed === 'slow', }, }, '\u003E'), button({ class: { 'normalSpeedButton': true, [styles.speedPickerNormalStyle]: true, [styles.speedPickerSelectedStyle]: speed === 'normal', }, }, '\u226B'), button({ class: { 'fastSpeedButton': true, [styles.speedPickerFastStyle]: true, [styles.speedPickerSelectedStyle]: speed === 'fast', }, }, '\u22D9'), ]); }
DOM: stuff$.map(([products, selected]) => products ? div('.container', [ hr(), button('.btn.btn-sm', 'Reload eWinery JSON Feed'), h1('Digivino Marketing Shortcodes'), `You have selected ${selected.length || 0} of the ${products.length || 0} products provided by eWinery`, hr(), div('.form-group', [ label('Search'), input('#search.form-control', {props: {type: 'search'}}), ]), br(), ul('.list-unstyled.list-group', [ li('list-group-item', div(['what the f**k'])), ...selected.map(each => li([ b(each.PRODUCTNAME), span(` SKU ${each.PRODUCTSKU} (${each.TYPE})`), br(), ul('.list-unstyled.list-group', [ ...each.TYPE === 'Kit' ? [ li('.list-group-item', `[Buy1Kit id="${each.PRODUCTID}" price="${each.PRICE1}]"`), li('.list-group-item', `[ReturnToSpecials]`) ] : [ li('.list-group-item', `[Buy1Bottle id="${each.PRODUCTID}" price="${each.PRICE1}"]`), li('.list-group-item', `[Buy1Case id="${each.PRODUCTID}" price="${each.PRICE2}"]`), li('.list-group-item', `[ReturnToShop]`) ] ]) ])) ]) ]) : div('.container.jumbotron', [ h1('Loading eWinery JSON stream...') ])
function view([actor, nameVtree]: [Actor, VNode]): VNode { return div(".actor-panel.flex-column", [ div(".attributes.flex-column", [ nameVtree, "Width", input(".width", { props: { value: actor.width } }), "Height", input(".height", { props: { value: actor.height } }), "Color", input(".color", { props: { value: actor.color } }), button(".add-to-scenario", "Add to scenario") ]), div(".sidebar-preview.flex-column", [ "Preview", h( "svg", { attrs: { height: 300, viewBox: `-150 -150 300 300` }, style: { background: "#222" } }, [renderActor(actor, [], 0, 0, 0)] ) ]) ]); }
( [ project, playing, recording, nameVtree, scenarioNameVtree, actorPanelVtree ] ) => div(".project", [ div(".actor-sidebar.sidebar.flex-column", [ nameVtree, div(".sidebar-title", "Scenarios"), div(".scenarios", project.scenarios.map(renderScenarioButton)), button(".add-scenario", "Add scenario"), div(".sidebar-title", "Actors"), div(".actors", project.actors.map(renderActorButton)), button(".add-actor", "Add actor"), div(".sidebar-title", "Play game"), button(".play-game", "Play"), div(".sidebar-title", "Code preview"), button(".delete-code", "Delete code"), renderErrorLevels(project, project.results.errorLevels) ]), div(".preview", [ project.selectedScenarioId ? renderScenario( project, activeScenario(project) as Scenario, playing, recording, scenarioNameVtree as VNode ) : "No scenario selected" ]), div(".sidebar.flex-column", [ project.selectedActorId ? actorPanelVtree : "Select an actor to see details" ]) ])
const vdom$ = user$.map(user => div('.users', [ button('.get-random', 'Get random user'), user === null ? null : div('.user-details', [ h1('.user-name', user.name), h4('.user-email', user.email), a('.user-website', {attrs: {href: user.website}}, user.website), ]), ]),
...R.values(state.notes).map(note => div('.js-note.border.flex', { style: R.mergeAll([ noteStyle(note), note.id === state.draggingNoteId ? { 'box-shadow': '0px 1px 3px 3px #eee' } : {} ]), attrs: { 'data-note': note.id }, key: `note-${note.id}` }, [ state.editingNoteId === note.id ? textarea('.js-note-edit', { style: textAreaStyle, attrs: { 'data-note': note.id }, props: { onclick: stopPropagation, } }, [note.label]) : div('.flex.flex-column', [ div('.flex-auto', [ note.label ]), div('.flex.content-between', [ button({ props: { onmousedown: stopPropagation, onclick: (e) => { e.stopPropagation() onNoteEditStart(note.id) } } }, [ 'edit' ]), button('.js-delete-note', { attrs: { 'data-note': note.id, }, props: { onmousedown: stopPropagation, } }, [ 'x' ]) ]) ]), ])
return {DOM: state$.map(state => div('.container', {props: {style: 'margin: 1pc'}}, [ div(state), div('.form', {props: {style: 'outline: 1pt solid blue; padding: 1pc'}}, [ div('.form-group', [ label({props: {for: 'username'}}, 'Username'), input('#username.form-control', {props: {type: 'text', autofocus: true}}), ]), div('form-group', [ label({props: {for: 'password'}}, 'Password'), input('#password.form-control', {props: {type: 'password'}}), ]), hr(), div('.form-group', [ button('#login.form-control.btn.btn-primary', 'Log In') ]) ]) ])
.map(className => button(`.back-button.${className}`, ['Back']));
return state$.map(state => section('.js-container.p1', [ div('.clearfix.flex.mb1', { style: boardStyle }, R.values(state.boards).map(board => div('.p1.border-left.border.right.border-bottom.mx-auto', { style: columnStyle, key: board.name }, [ p('.center.m0', [ board.name ]) ]) ) ), div('.p1', { style: { 'min-height': '200px', } }, [ button('.js-add-note', [ 'Add a note' ]) ]), ...R.values(state.notes).map(note => div('.js-note.border.flex', { style: R.mergeAll([ noteStyle(note), note.id === state.draggingNoteId ? { 'box-shadow': '0px 1px 3px 3px #eee' } : {} ]), attrs: { 'data-note': note.id }, key: `note-${note.id}` }, [ state.editingNoteId === note.id ? textarea('.js-note-edit', { style: textAreaStyle, attrs: { 'data-note': note.id }, props: { onclick: stopPropagation, } }, [note.label]) : div('.flex.flex-column', [ div('.flex-auto', [ note.label ]), div('.flex.content-between', [ button({ props: { onmousedown: stopPropagation, onclick: (e) => { e.stopPropagation() onNoteEditStart(note.id) } } }, [ 'edit' ]), button('.js-delete-note', { attrs: { 'data-note': note.id, }, props: { onmousedown: stopPropagation, } }, [ 'x' ]) ]) ]), ]) ) ]))
const vdom$ = props$.map(props => button('.button', [props.text]));