quaternionmedia · mrharpo · Jan 16, 2023 · Jan 16, 2023 · Jan 16, 2023 · Jan 16, 2023
diff --git a/web/package.json b/web/package.json
@@ -20,6 +20,7 @@
     "chess.js": "^0.12.1",
     "chessground": "^8.3.6",
     "construct-ui": "^0.3.3",
+    "huebee": "^2.1.1",
     "javascript-astar": "^0.4.1",
     "jwt-decode": "^3.1.2",
     "material-design-icons-iconfont": "^6.1.0",

diff --git a/web/src/Actions.js b/web/src/Actions.js
@@ -1,7 +1,7 @@
 import m from 'mithril'
 let Stream = require('mithril/stream')
 import { Chess } from 'chess.js'
-import { COLORS } from './Launchpad'
+import { COLORS } from './Color'
 import { uci } from './ChessMaths'
 import { playOtherSide } from './utils'
 import { auth } from './User'
@@ -71,6 +71,10 @@ export const Actions = (state, actions) => ({
   clearAnimations: () => null,
   clear: () => null,
   highlightAvailableMoves: () => null,
+  setColor: (piece, color) => {
+    console.debug(`setting {piece} to {color}`)
+    state.colors[piece] = color
+  },
 })
 
 export const OnlineActions = (state, actions) => ({

diff --git a/web/src/Color.js b/web/src/Color.js
@@ -1,70 +1,111 @@
 import m from 'mithril'
+import HueBee from 'huebee'
+import '../node_modules/huebee/huebee.css'
 import './color.css'
 
-export const Color = color =>
-  m('input[type=color]', {
+const ColorSelector = (piece, color, actions) =>
+  m('input.color-input', {
     value: LAUNCHPAD_COLORS[color],
+    oncreate: vnode => {
+      new HueBee(vnode.dom, {
+        customColors: LAUNCHPAD_COLORS,
+        shades: 0,
+      }).on('change', color => {
+        let index = LAUNCHPAD_COLORS.indexOf(color)
+        console.log(
+          `color for piece ${piece} changed to ${color}, index ${index}`
+        )
+        actions.setColor(piece, index)
+      })
+    },
   })
 
-export const ColorSelector = state =>
+export const ColorConfig = (state, actions) =>
   m('.colors', {}, [
-    Object.keys(state.colors).map((k, n) =>
-      m('span.color', {}, [m('p.type', {}, k), Color(state.colors[k])])
+    Object.keys(state.colors).map((piece, n) =>
+      m('span.color', {}, [
+        m('p.type', {}, piece),
+        ColorSelector(piece, state.colors[piece], actions),
+      ])
     ),
   ])
 
+// Default colors
+export const COLORS = {
+  P: 13,
+  R: 9,
+  N: 45,
+  B: 37,
+  Q: 53,
+  K: 49,
+  p: 15,
+  r: 11,
+  n: 47,
+  b: 39,
+  q: 55,
+  k: 51,
+  white: 3,
+  dim_white: 1,
+  black: 0,
+  movable: 21,
+  moved: 89,
+  check: 5,
+  brown: 83,
+}
+
+// Available Launchpad colors
 export const LAUNCHPAD_COLORS = [
   '#000000',
-  '#b3b3b3',
-  '#dddddd',
-  '#ffffff',
-  '#ffb3b3 ',
-  '#ff6161',
-  '#dd6161',
-  '#b36161',
-  '#fff3d5',
-  '#ffb361',
-  '#dd8c61',
-  '#b37661',
-  '#ffeea1',
-  '#ffff61',
-  '#dddd61',
-  '#b3b361',
-  '#ddffa1',
-  '#c2ff61',
-  '#a1dd61',
-  '#81b361',
-  '#c2ffb3',
-  '#61ff61',
-  '#61dd61',
-  '#61b361',
-  '#c2ffc2',
-  '#61ff8c',
-  '#61dd76',
-  '#61b36b',
-  '#c2ffcc',
-  '#61ffcc',
-  '#61dda1',
-  '#61b381',
-  '#c2fff3',
-  '#61ffe9',
-  '#61ddc2',
-  '#61b396',
-  '#c2f3ff',
-  '#61eeff',
-  '#61c7dd',
-  '#61a1b3',
-  '#c2ddff',
-  '#61c7ff',
-  '#61a1dd',
-  '#6181b3',
-  '#a18cff',
-  '#6161ff',
-  '#6161dd',
-  '#6161b3',
-  '#ccb3ff',
-  '#a161ff',
-  '#8161dd',
+  '#B3B3B3',
+  '#DDDDDD',
+  '#FFFFFF',
+  '#FFB3B3 ',
+  '#FF6161',
+  '#DD6161',
+  '#B36161',
+  '#FFF3D5',
+  '#FFB361',
+  '#DD8C61',
+  '#B37661',
+  '#FFEEA1',
+  '#FFFF61',
+  '#DDDD61',
+  '#B3B361',
+  '#DDFFA1',
+  '#C2FF61',
+  '#A1DD61',
+  '#81B361',
+  '#C2FFB3',
+  '#61FF61',
+  '#61DD61',
+  '#61B361',
+  '#C2FFC2',
+  '#61FF8C',
+  '#61DD76',
+  '#61B36B',
+  '#C2FFCC',
+  '#61FFCC',
+  '#61DDA1',
+  '#61B381',
+  '#C2FFF3',
+  '#61FFE9',
+  '#61DDC2',
+  '#61B396',
+  '#C2F3FF',
+  '#61EEFF',
+  '#61C7DD',
+  '#61A1B3',
+  '#C2DDFF',
+  '#61C7FF',
+  '#61A1DD',
+  '#6181B3',
+  '#A18CFF',
+  '#6161FF',
+  '#6161DD',
+  '#6161B3',
+  '#CCB3FF',
+  '#A161FF',
+  '#8161DD',
   '#7761B2',
   '#FFB2FE',
   '#FF60FE',

diff --git a/web/src/Connector.js b/web/src/Connector.js
@@ -4,7 +4,7 @@ import { StatusIcon, ConnectToggle } from './Toolbar'
 import { Button } from 'construct-ui'
 import { Launchpads, NOVATION, HEADERS, NAMES } from './Launchpad'
 import { onlineActions } from './index'
-import { ColorSelector } from './Color'
+import { ColorConfig } from './Color'
 import '../node_modules/material-design-icons-iconfont/dist/material-design-icons.css'
 
 const equals = (a, b) => a.length === b.length && a.every((v, i) => v === b[i])
@@ -263,6 +263,6 @@ export const ConnectionPage = (state, actions) => ({
       LaunchpadSelector(state, actions),
       // m('br'),
       // ConnectToggle(state, actions),
-      // ColorSelector(state),
+      ColorConfig(state, actions),
     ]),
 })
diff --git a/web/src/Games.js b/web/src/Games.js
@@ -8,7 +8,8 @@ import { Board } from './Board'
 import { Toolbar, OnlineToolbar } from './Toolbar'
 import '../node_modules/material-design-icons-iconfont/dist/material-design-icons.css'
 import { toDests, toColor, playOtherSide } from './utils'
-import { NOTE_ON, CONTROL_CHANGE, COLORS } from './Launchpad'
+import { NOTE_ON, CONTROL_CHANGE } from './Launchpad'
+import { COLORS } from './Color'
 
 export const getGames = (state, actions) => ({
   getGames: () =>

diff --git a/web/src/LaunchGame.js b/web/src/LaunchGame.js
@@ -1,6 +1,7 @@
 import m from 'mithril'
 import { Chess } from 'chess.js'
-import { NOTE_ON, CONTROL_CHANGE, COLORS } from './Launchpad'
+import { NOTE_ON, CONTROL_CHANGE } from './Launchpad'
+import { COLORS } from './Color'
 import { streamJson } from './ndjson'
 import { LICHESS_API_URL } from './config'
 import { User, auth } from './User'
@@ -32,7 +33,7 @@ export const LaunchGame = (state, actions) => ({
     actions.send(CONTROL_CHANGE, [state.top[2], 67])
     actions.send(CONTROL_CHANGE, [
       state.top[4],
-      state.invert() ? COLORS.brown : 3,
+      state.invert() ? COLORS.brown : COLORS.white,
     ])
     actions.send(CONTROL_CHANGE, [
       state.top[5],
@@ -42,7 +43,7 @@ export const LaunchGame = (state, actions) => ({
     // actions.send(CONTROL_CHANGE, [state.top[7], state.influence ? 5 : 7])
     actions.send(CONTROL_CHANGE, [
       state.top[state.top.length - 1],
-      state.chess.turn() == 'w' ? 3 : COLORS.brown,
+      state.chess.turn() == 'w' ? COLORS.white : COLORS.brown,
     ])
   },
   togglePieces: (mode = null) => {

diff --git a/web/src/Launchpad.js b/web/src/Launchpad.js
@@ -30,22 +30,6 @@ export const NAMES = {
   'LPMiniMK3 MIDI Out': 'LaunchpadMiniMk3',
 }
 
-export const COLORS = {
-  p: 13,
-  r: 9,
-  n: 45,
-  b: 37,
-  q: 53,
-  k: 49,
-  white: 3,
-  dim_white: 1,
-  black: 0,
-  movable: 21,
-  moved: 89,
-  check: 5,
-  brown: 83,
-}
-
 export const Launchpad = (state, actions) => ({
   nToLaunch: n => {
     /** Convert a 0-63 chess square into a Launchpad MIDI number
@@ -120,12 +104,17 @@ export const Launchpad = (state, actions) => ({
         piece = board[(63 - i) >> 3][i % 8]
         // console.log('piece at i', i, piece)
         if (state.pieces) {
-          color = COLORS[piece.type]
-          if (piece.color == 'b') color += 2
-        } else if (state.grid) color = (i + (i >> 3)) % 2 == 0 ? 0 : 1
+          let pieceType =
+            piece.color == 'w' ? piece.type.toUpperCase() : piece.type
+          color = state.colors[pieceType]
+        } else if (state.grid)
+          color =
+            (i + (i >> 3)) % 2 == 0 ? state.colors.off : state.colors.white
       } else {
         piece = null
-        if (state.grid) color = (i + (i >> 3)) % 2 == 0 ? 0 : 1
+        if (state.grid)
+          color =
+            (i + (i >> 3)) % 2 == 0 ? state.colors.off : state.colors.white
       }
 
       // console.log(i, piece, l)
@@ -148,9 +137,9 @@ export const Launchpad = (state, actions) => ({
       console.log('highlighting', lastMove, from_square, to_square)
       let path = findPath(from_square, to_square)
       path.push(path[path.length - 1])
-      let piece = lastMove.piece
-      let color = COLORS[piece]
-      if (lastMove.color == 'b') color += 2
+      let piece =
+        lastMove.color == 'w' ? lastMove.piece.toUpperCase() : lastMove.piece
+      let color = state.colors[piece]
       if (animate) {
         actions.animatePath(path, color, 0)
       }
@@ -168,7 +157,7 @@ export const Launchpad = (state, actions) => ({
     path.forEach((square, i) => {
       actions.send(NOTE_ON | 2, [
         actions.nToLaunch(square.y * 8 + square.x),
-        COLORS.moved,
+        state.colors.moved,
       ])
     })
     actions.send(NOTE_ON | 2, [
@@ -200,7 +189,7 @@ export const Launchpad = (state, actions) => ({
     console.log('check!', k)
     actions.send(NOTE_ON | 1, [
       actions.nToLaunch(actions.squareToN(k)),
-      COLORS.check,
+      state.colors.check,
     ])
   },
   highlightCheckmate: () => {
@@ -211,13 +200,13 @@ export const Launchpad = (state, actions) => ({
     console.log('mate!', k)
     actions.send(NOTE_ON, [
       actions.nToLaunch(actions.squareToN(k)),
-      COLORS.check,
+      state.colors.check,
     ])
   },
   highlightAvailableMoves: square => {
     let s = actions.nToLaunch(actions.squareToN(square))
     console.log('highlighting', square, s, actions.squareToN(square))
-    actions.send(NOTE_ON | 1, [s, COLORS.movable])
+    actions.send(NOTE_ON | 1, [s, state.colors.movable])
     let piece_moves = state.chess.moves({ square: square, verbose: true })
     console.log('possible moves', piece_moves)
     piece_moves.forEach((p, i) => {
@@ -227,13 +216,13 @@ export const Launchpad = (state, actions) => ({
         // console.log('capture', actions.nToLaunch(actions.squareToN(p.to)))
         actions.send(NOTE_ON | 1, [
           actions.nToLaunch(actions.squareToN(p.to)),
-          COLORS.movable,
+          state.colors.movable,
         ])
       } else {
         // console.log('regular move', p.to, actions.squareToN(p.to), actions.nToLaunch(actions.squareToN(p.to)))
         actions.send(NOTE_ON | 2, [
           actions.nToLaunch(actions.squareToN(p.to)),
-          COLORS.movable,
+          state.colors.movable,
         ])
       }
     })

diff --git a/web/src/config.js b/web/src/config.js
@@ -1,3 +1 @@
 export const LICHESS_API_URL = 'https://lichess.org/api/'
-
-export const deviceName = 'Launchpad X MIDI 2'
diff --git a/web/src/index.html b/web/src/index.html
@@ -8,6 +8,7 @@
     />
     <title>LaunchChess</title>
     <link rel="icon" href="/static/logo.svg" />
+    <script src="https://cdn.jsdelivr.net/npm/webmidi@next/dist/iife/webmidi.iife.js"></script>
   </head>
   <body></body>
   <script type="module" src="index.js"></script>

diff --git a/web/src/index.js b/web/src/index.js
@@ -11,6 +11,7 @@ import { Connector, ConnectionPage } from './Connector'
 import { State, Actions, OnlineActions } from './Actions'
 import { LaunchpadX } from './Launchpad'
 import { Home } from './Home'
+import { WebMidi } from 'webmidi'
 
 console.log('launchchess started!')
 
@@ -50,3 +51,7 @@ if (!User.loggedIn) {
     }
   })
 }
+
+window.state = state
+window.actions = actions
+window.midi = WebMidi
Original file line number	Diff line number	Diff line change
		@@ -1,3 +1 @@
		export const LICHESS_API_URL = 'https://lichess.org/api/'

		export const deviceName = 'Launchpad X MIDI 2'