Create Cells 🔬

src/actions.ts

@@ -1,29 +1,17 @@
 import { Transport } from 'tone'
-import { Stream } from './types'
-import { stream } from 'flyd'
+import { Cell } from './types'
 
-export const Actions = (update: Stream, state: Stream) => ({
-  clockTick: (t: String) => {
+export const Actions = {
+  clockTick: (cell: Cell, t: String) => {
+    console.log('clockTick', cell, t)
     let bbs = t.split(':')
-    update({
+    cell.update({
       time: t,
+      bars: Number(bbs[0]),
+      beats: Number(bbs[1]),
+      sixteenths: Number(bbs[2]),
+      bpm: Transport.bpm.value,
+      state: Transport.state,
     })
-    state().bars(Number(bbs[0]))
-    state().beats(Number(bbs[1]))
-    state().sixteenths(Number(bbs[2]))
-    state().bpm(Transport.bpm.value)
-    state().state(Transport.state)
   },
-  connect: (name: string) => {
-    update({
-      connected: () => {
-        let index = !state().connected.find(name)
-        if (index > -1) {
-          state().connected.push(name)
-        } else {
-          state().connected.splice(index, 1)
-        }
-      },
-    })
-  },
-})
+}

src/components/menu.ts

@@ -2,9 +2,9 @@ import m from 'mithril'
 import { Button, ButtonGroup, Icons, ListItem, SelectList } from 'construct-ui'
 
 export const Menu = {
-  view: ({ attrs: { state } }) =>
+  view: ({ attrs: { cell } }) =>
     m(ButtonGroup, {}, [
-      m(MidiPortSelect, { state }),
+      m(MidiPortSelect, { cell }),
       m(Button, {
         iconLeft: Icons.APERTURE,
         label: 'button',
@@ -17,7 +17,7 @@ export const Menu = {
 }
 
 export const MidiPortSelect = {
-  view: ({ attrs: { state } }) =>
+  view: ({ attrs: { cell } }) =>
     m(SelectList, {
       items: ['1', '2', '3'],
       label: 'select',
@@ -26,20 +26,24 @@ export const MidiPortSelect = {
         label: 'select MIDI device',
       }),
       onSelect: item => {
-        let index = state().connected.indexOf(item)
+        let connected = cell.getState().connected
+        let index = connected.indexOf(item)
+        console.log('selected', item, index)
         if (index > -1) {
           // Found in connected list. Disconnect
-          state().connected.splice(index, 1)
+          connected.splice(index, 1)
+          cell.update({ connected })
         } else {
           // not found. Connect
-          state().connected.push(item)
+          connected.push(item)
+          cell.update({ connected })
         }
         // console.log('state.connected', item, index)
       },
       itemRender: item =>
         m(ListItem, {
           label: item,
-          selected: state().connected.indexOf(item) > -1,
+          selected: cell.state.connected.indexOf(item) > -1,
         }),
     }),
 }

src/components/state.ts

@@ -5,11 +5,6 @@ import './syntax.css'
 State viewer
 */
 export const State = {
-  oncreate: ({ dom, attrs: { state } }) => {
-    state.map(s => {
-      // console.log('new state', s)
-      m.render(dom, m('pre', {}, JSON.stringify(state, null, 2)))
-    })
-  },
-  view: ({ attrs: { state } }) => m('pre', {}, JSON.stringify(state, null, 2)),
+  view: ({ attrs: { cell } }) =>
+    m('pre', {}, JSON.stringify(cell.state, null, 2)),
 }

src/components/transports/clock.ts

@@ -1,17 +1,13 @@
 import m from 'mithril'
 import { o } from '../components'
-import { OneIndex, TwoDecimal } from '../../utils/streams'
-import { Stream } from '../../types'
-
-export const Seperator = m('', ':')
 
 export const TransportClock = {
-  view: ({ attrs: { state } }) =>
+  view: ({ attrs: { cell } }) =>
     m('.clock', {}, [
-      o(OneIndex(state().bars), { class: 'bars' }),
-      Seperator,
-      o(OneIndex(state().beats)),
-      Seperator,
-      o(TwoDecimal(OneIndex(state().sixteenths))),
+      cell.state.bars,
+      ':',
+      cell.state.beats,
+      ':',
+      cell.state.sixteenths,
     ]),
 }

src/components/transports/transport.ts

@@ -2,7 +2,7 @@ import m from 'mithril'
 import { Transport } from 'tone'
 import { TransportClock } from './clock'
 import './transport.css'
-import { o, Container } from '../components'
+import { Container } from '../components'
 import { Button } from 'construct-ui'
 
 export const LABELS = {
@@ -21,12 +21,12 @@ export const Stop = {
 }
 
 export const PlayPause = {
-  view: ({ attrs: { state } }) =>
+  view: ({ attrs: { cell } }) =>
     m(Button, {
-      label: o(state().state.map(l => LABELS[l])),
+      label: cell.state.state,
       onclick: () => {
-        console.log('clicked PlayPause')
-        if (state().state() == 'started') {
+        console.log('clicked PlayPause', cell, cell.state.state)
+        if (cell.state.state == 'started') {
           Transport.pause()
         } else {
           Transport.start()
@@ -36,10 +36,10 @@ export const PlayPause = {
 }
 
 export const TransportControls = {
-  view: ({ attrs: { state } }) =>
+  view: ({ attrs: { cell } }) =>
     m(Container, {}, [
-      m(TransportClock, { state }),
+      m(TransportClock, { cell }),
       m(Stop),
-      m(PlayPause, { state }),
+      m(PlayPause, { cell }),
     ]),
 }

src/index.ts

@@ -5,36 +5,34 @@ import { Bpm } from './components/transports/bpm'
 import { Menu } from './components/menu'
 import { State } from './components/state'
 import { Synth } from './components/generators/synth'
-import { states, update } from './state'
+import { cells } from './state'
 import { Actions } from './actions'
 import { Transport, Draw } from 'tone'
 import { Visualizer } from './components/visualizers/visualizer'
 import '../node_modules/construct-ui/lib/index.css'
 
-const actions = Actions(update, states)
-
 export const Midiphonor = {
-  oninit: ({ attrs: { state, actions } }) => {
+  oninit: ({ attrs: { cell, Actions } }) => {
     Transport.scheduleRepeat(time => {
       Draw.schedule(() => {
-        let timeString = state().transportTime.toBarsBeatsSixteenths()
-        actions.clockTick(timeString)
+        let timeString = cell.state.transportTime.toBarsBeatsSixteenths()
+        Actions.clockTick(cell, timeString)
       }, time)
     }, '.02')
   },
-  view: ({ attrs: { state } }) => [
-    m(Menu, { state }),
-    m(Bpm, { state }),
-    m(TransportControls, { state }),
-    m(Note),
-    m(Synth),
-    m(Visualizer),
-    m(State, { state }),
+  view: ({ attrs: { cell } }) => [
+    m(Menu, { cell }),
+    // m(Bpm, { cell }),
+    m(TransportControls, { cell }),
+    // m(Note),
+    // m(Synth),
+    // m(Visualizer),
+    m(State, { cell }),
   ],
 }
 
 m.route(document.body, '/', {
   '/': {
-    view: () => m(Midiphonor, { state: states, actions }),
+    view: () => m(Midiphonor, { cell: cells(), Actions }),
   },
 })

src/state.ts

@@ -15,20 +15,15 @@ const initialState: TransportState = {
   connected: [],
 }
 
-/**
-State viewer
-*/
-export const State = {
-  oncreate: ({ dom, attrs: { state } }) => {
-    state.map(s => {
-      // console.log('new state', s)
-      m.render(dom, m('pre', {}, JSON.stringify(state, null, 2)))
-    })
-  },
-  view: ({ attrs: { state } }) => m('pre', {}, JSON.stringify(state, null, 2)),
-}
-
 export const update = stream()
 export const states = scan(merge, initialState, update)
+export const getState = () => states()
+export const createCell = state => ({ state, getState, update })
+export const cells = states.map(createCell)
+
+cells.map(() => {
+  m.redraw()
+})
 
 window.state = states
+window.cells = cells

src/types.ts

@@ -14,3 +14,9 @@ export interface TransportState {
   transportTime: typeof TransportTimeClass
   connected: string[]
 }
+
+export interface Cell {
+  update: Stream
+  state: Stream
+  getState: Stream
+}