Refactors launchpad detection process

quaternionmedia · Apr 7, 2024 · 7a4b8bc · 7a4b8bc
1 parent 1bb2cfd
commit 7a4b8bc
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 77 deletions.
diff --git a/src/App.ts b/src/App.ts
@@ -25,23 +25,24 @@ if (state) {
   state.user = state.user || undefined
 }
 
-export const App: MeiosisViewComponent<State> = {
-  initial: {
-    page: state?.page || 'Home',
-    chess: chess,
-    fen: state?.fen || chess.fen(),
-    pgn: state?.pgn || chess.pgn(),
-    history: state?.history || [],
-    historyIndex: state?.historyIndex || 0,
-    orientation: state?.orientation || 'white',
-    isHistoryCollapsed: false,
-    isFENCollapsed: true,
-    isPGNCollapsed: true,
-    isInfoCollapsed: false,
+const initial = {
+  page: state?.page || 'Home',
+  chess: chess,
+  fen: state?.fen || chess.fen(),
+  pgn: state?.pgn || chess.pgn(),
+  history: state?.history || [],
+  historyIndex: state?.historyIndex || 0,
+  orientation: state?.orientation || 'white',
+  isHistoryCollapsed: false,
+  isFENCollapsed: true,
+  isPGNCollapsed: true,
+  isInfoCollapsed: false,
 
-    user: state?.user || undefined,
-  },
+  user: state?.user || undefined,
+}
 
+export const App: MeiosisViewComponent<State> = {
+  initial,
   services: [HistoryService, PageService],
 
   view: (cell: MeiosisCell<State>) => [

diff --git a/src/Board.ts b/src/Board.ts
@@ -9,7 +9,7 @@ export const Board = cell =>
     {},
     m('#board.board', {
       oncreate: vnode => {
-        console.log(
+        console.debug(
           'Board oncreate',
           cell.state,
           cell.state.chess.history({ verbose: true })
@@ -43,7 +43,6 @@ export const Board = cell =>
                 },
                 check: state.chess.inCheck(),
               })
-              console.log('move', orig, dest)
               cell.update({
                 fen: state.chess.fen(),
                 pgn: state.chess.pgn(),

diff --git a/src/Connect.ts b/src/Connect.ts
@@ -13,18 +13,17 @@ const equals = (a, b) => a.length === b.length && a.every((v, i) => v === b[i])
 
 export const ConnectActions = {
   init: cell => {
-    // console.log('init webmidi')
     WebMidi.enable({ sysex: true })
       .then(() => {
         WebMidi.addListener('connected', e => {
-          console.log('new device connected', e)
+          console.debug('new device connected', e)
           ConnectActions.detectDevice(cell, e.port)
         })
         WebMidi.addListener('disconnected', e => {
-          console.log('device disconnected', e)
+          console.debug('device disconnected', e)
           let state = cell.getState()
           if (state.midi?.launchpads[e.port.id]) {
-            console.log('removing launchpad', e.port.id)
+            console.debug('removing launchpad', e.port.id)
             cell.update({ midi: { launchpads: { [e.port.id]: undefined } } })
           }
         })
@@ -33,54 +32,30 @@ export const ConnectActions = {
         }
       })
       .catch(err => {
-        console.log('error setting up WebMidi', err)
+        console.error('error setting up WebMidi', err)
       })
   },
-  // connect: ({ state, update }) => {
-  //   console.log('connecting')
-  // // },
-  // disconnect: ({ state, update }) => {
-  //   if (!state.input) return
-  //   console.log('disconnecting')
-  //   try {
-  //     update({ midi: { live: false } })
-  //   } catch (err) {
-  //     console.log('error disconnecting', err)
-  //   }
-  //   state.input.removeListener()
-  //   update({ midi: { input: undefined, output: undefined } })
-  //   WebMidi.disable()
-  // },
   detectDevice: ({ getState, update }, device) => {
-    console.log('detecting device', device)
+    console.debug('detecting device', device)
     device.addListener('sysex', sysex => {
+      console.debug('got sysex message', sysex)
       let data = sysex.data
-      console.log('got sysex message', sysex)
-      if (
-        equals(data.slice(0, 5), [240, 126, 0, 6, 2]) &&
-        equals(data.slice(5, 8), NOVATION)
-      ) {
-        console.log('found Novation product')
-        let output = WebMidi.getOutputByName(device.name.replace(' Out', ''))
-        Object.values(HEADERS).map(value => {
-          output.sendSysex(NOVATION, [...value, 14])
-        })
-      }
-      if (equals(data.slice(0, 4), [240, ...NOVATION]) && data[6] == 14) {
+      if (equals(data.slice(0, 4), [240, ...NOVATION])) {
+        console.debug('found Novation product')
         let header = data.slice(4, 6)
-        console.log('identified device!', header)
+        console.debug('Checking device header!', header)
         let state = getState()
         state.header = header
         for (const key in HEADERS) {
           if (equals(header, HEADERS[key])) {
+            console.log('this is a ', key)
             let launchpads = state.midi?.launchpads || {}
             let launchpad = {
-              name: key,
+              type: key,
               input: device.name,
               output: device.name.replace(' Out', ' In'),
             }
-            console.log('this is a ', key, launchpads)
-
+
             if (LAUNCHPAD_NAMES.includes(device.name)) {
               launchpads[device.id] = launchpad
               update({
@@ -89,32 +64,42 @@ export const ConnectActions = {
                 },
               })
             } else {
-            console.log('unknown launchpad found', device.name)
-          }
-          device.removeListener()
+              console.debug('unknown launchpad found', device.name)
+            }
+            device.removeListener()
           }
         }
+        Object.values(HEADERS).map(value => {})
       }
     })
     let output = WebMidi.getOutputByName(device.name.replace(' Out', ''))
-    output?.sendSysex([126, 127, 6], [1])
-    // const input = WebMidi.getInputByName(name)
-    // const output = WebMidi.getOutputByName(name)
-    // if (input && output) {
-    //   console.log('found device', input, output)
-    //   update({ midi: { input, output, live: true } })
-    // }
+    // Send all known Launchpad headers to the device and see if it responds to any
+    for (const key in HEADERS) {
+      output?.sendSysex(NOVATION, [...HEADERS[key], 14])
+    }
   },
 }
 
-export const LaunchpadButton = (launchpad: Launchpad) =>
-  m('button.launchpad', {}, launchpad.input)
+export const LaunchpadButton = ({ update }, launchpad: Launchpad) =>
+  m(
+    'button.launchpad',
+    {
+      onclick: () => {
+        console.log('launchpad clicked', launchpad)
+        update({ midi: launchpad })
+        let output = WebMidi.getOutputByName(
+          launchpad.input.replace(' Out', '')
+        )
+      },
+    },
+    launchpad.input
+  )
 
-export const ConnectionPage = ({ state }) => [
+export const ConnectionPage = ({ state, update }) => [
   m('h1', 'Connect your Launchpad'),
   state.midi?.launchpads
     ? Object.keys(state.midi?.launchpads).map(id =>
-        LaunchpadButton(state.midi.launchpads[id])
+        LaunchpadButton({ update }, state.midi.launchpads[id])
       )
     : [
         m('h2', 'No Launchpads found'),

diff --git a/src/State.ts b/src/State.ts
@@ -2,7 +2,6 @@ import { Chess } from 'chess.js'
 import { Chessground } from 'chessground'
 import { HttpClient } from '@bity/oauth2-auth-code-pkce'
 
-
 export interface User {
   id: string
   username: string
@@ -11,10 +10,9 @@ export interface User {
 }
 
 export interface Launchpad {
-  name: string
+  type: string
   input: string
   output: string
-  type: string
 }
 
 export interface State {

diff --git a/src/index.ts b/src/index.ts
@@ -16,13 +16,12 @@ initAuth(cells())
 // Initialize MIDI
 ConnectActions.init(cells())
 
-
 m.mount(document.getElementById('app'), {
   view: () => App.view(cells()),
 })
 
 cells.map(state => {
-  console.log('cells', state)
+  console.debug('cells', state)
   localStorage.setItem('launchchess', JSON.stringify(state))
   m.redraw()
 })
@@ -57,7 +56,7 @@ document.addEventListener('keydown', function (event) {
 meiosisTracer({
   selector: '#tracer',
   rows: 25,
-  streams: [{stream:cells, hide:true, label: 'LaunchChess'}],
+  streams: [{ stream: cells, hide: true, label: 'LaunchChess' }],
 })
 
 window.cells = cells
diff --git a/src/utils.ts b/src/utils.ts
@@ -11,7 +11,7 @@ export function toDests(chess) {
         ms.map(m => m.to)
       )
   })
-  console.log('all moves', dests)
+  console.debug('all moves', dests)
   return dests
 }
 
@@ -53,13 +53,13 @@ export function findPath(from, to) {
   let graph = new Graph(new Array(8).fill(new Array(8).fill(1)), {
     diagonal: true,
   })
-  console.log('finding path', from, to, graph)
+  console.debug('finding path', from, to, graph)
   let start = graph.grid[from.charCodeAt(0) - 97][from.charCodeAt(1) - 49]
   let end = graph.grid[to.charCodeAt(0) - 97][to.charCodeAt(1) - 49]
   let path = astar.search(graph, start, end, {
     heuristic: astar.heuristics.diagonal,
   })
   path.unshift(start)
-  console.log('found path', path)
+  console.debug('found path', path)
   return path
 }