From cf1f8873c6226c521d8e9a5fec53b4400c3e6835 Mon Sep 17 00:00:00 2001
From: Christoffer Engman <chren8@vgregion.se>
Date: Sat, 7 Oct 2023 13:40:51 +0200
Subject: [PATCH] wip

---
 app/electron/main.js                       | 15 ++++++++++++---
 app/src/components/Pad.tsx                 | 17 +++++++++++------
 app/src/components/Receiver.tsx            |  7 +++++--
 app/src/redux/components/pad/padReducer.ts |  7 ++++---
 4 files changed, 32 insertions(+), 14 deletions(-)

diff --git a/app/electron/main.js b/app/electron/main.js
index 011a3ca..c383c86 100644
--- a/app/electron/main.js
+++ b/app/electron/main.js
@@ -25,8 +25,12 @@ const isDev = process.env.NODE_ENV === 'development'
 const port = 40992 // Hardcoded; needs to match webpack.development.js and package.json
 const selfHost = `http://localhost:${port}`
 
-const { autoDetect, ILaunchpad, RgbColor } = require('launchpad.js')
-const { colorFromRGB } = require('launchpad.js/dist/colorHelpers')
+const {
+  autoDetect,
+  ILaunchpad,
+  RgbColor,
+  colors: { colorFromRGB },
+} = require('launchpad.js')
 const { DMX, EnttecUSBDMXProDriver, UniverseData } = require('dmx-ts')
 
 let win
@@ -357,5 +361,10 @@ ipcMain.on('dmxUpdate', (event, universeData) => {
 })
 
 ipcMain.on('lpPadColor', (event, { button, color }) => {
-  lp.setButtonColor(parseInt(button), colorFromRGB(color))
+  console.log("COLOR => ", color)
+  try {
+    lp.setButtonColor(parseInt(button), colorFromRGB(color))
+  } catch (ex) {
+    console.log("EX => ", ex)
+  }
 })
diff --git a/app/src/components/Pad.tsx b/app/src/components/Pad.tsx
index 4748da4..4911231 100644
--- a/app/src/components/Pad.tsx
+++ b/app/src/components/Pad.tsx
@@ -1,7 +1,7 @@
-import { Paper, rgbToHex, styled } from '@material-ui/core'
+import { Paper, styled } from '@material-ui/core'
 import { CHANNELS } from 'Constants/ipc'
 import { changeColor, setPressed } from 'Redux/components/pad/padActions'
-import { ColorOff, randomRGB } from 'Utils/color'
+import { ColorOff, randomRGB, rgbToHex } from 'Utils/color'
 import React, { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 
@@ -26,10 +26,13 @@ const Pad = ({ x, y }: Props) => {
 
   useEffect(() => {
     console.log('INVOKE PRESSED =>', button, 'STATE: ', isPressed)
-    if (isPressed) dispatch(changeColor(button, randomRGB()))
-    // if (!isPressed)
-    //   dispatch(changeColor(button, ColorOff))
-      // setTimeout(() => dispatch(changeColor(button, ColorOff)), 1000)
+    if (isPressed) {
+      dispatch(changeColor(button, randomRGB()))
+      return
+    }
+    if (!isPressed) {
+      setTimeout(() => dispatch(changeColor(button, ColorOff)), 1000)
+    }
   }, [isPressed])
 
   const onClick = () => {
@@ -48,6 +51,8 @@ const Pad = ({ x, y }: Props) => {
     dispatch(setPressed(button, false))
   }
 
+  // console.log("RGB=>", color)
+
   const Item = styled(Paper)(() => ({
     backgroundColor: color === ColorOff ? '#fff' : rgbToHex(color),
     padding: 10,
diff --git a/app/src/components/Receiver.tsx b/app/src/components/Receiver.tsx
index 33d0686..fea4446 100644
--- a/app/src/components/Receiver.tsx
+++ b/app/src/components/Receiver.tsx
@@ -4,13 +4,15 @@ import { setPressed } from 'Redux/components/pad/padActions'
 import React, { useEffect } from 'react'
 import { useDispatch } from 'react-redux'
 
+type Props = { event: string, button: number }
+
 const Receiver = () => {
   const dispatch = useDispatch()
 
   useEffect(() => console.log('Receiver listening!'), [])
 
-  // @ts-ignore
-  window.api.receive(CHANNELS.LP.PAD, ({ event, button }) => {
+  window.api.receive(CHANNELS.LP.PAD, ({ event, button }: Props) => {
+    // @ts-ignore
     dispatch(setPressed(button.nr, event === BUTTON_DOWN ?? false))
   })
 
@@ -18,3 +20,4 @@ const Receiver = () => {
 }
 
 export default Receiver
+ 
\ No newline at end of file
diff --git a/app/src/redux/components/pad/padReducer.ts b/app/src/redux/components/pad/padReducer.ts
index d348a1b..00efb23 100644
--- a/app/src/redux/components/pad/padReducer.ts
+++ b/app/src/redux/components/pad/padReducer.ts
@@ -1,15 +1,17 @@
 import { createSlice } from '@reduxjs/toolkit'
-import { ColorOff } from 'Utils/color'
+import { ColorOff, randomRGB } from 'Utils/color'
 import { getAllButtons } from 'Utils/index'
 import { NAME } from './padTypes'
+import { RgbColor } from 'launchpad.js'
 
 const padReducer = createSlice({
   name: NAME,
   initialState: {
+    color: '',
     buttons: getAllButtons().reduce(
       (acc, value) => ({
         ...acc,
-        [value]: { color: ColorOff, isPressed: false },
+        [value]: { color: JSON.stringify(ColorOff), isPressed: false },
       }),
       {}
     ),
@@ -23,7 +25,6 @@ const padReducer = createSlice({
     setPressed(state: any, action) {
       const { button, pressed } = action.payload
       state.buttons[button].isPressed = pressed
-      console.log(state, action)
     },
   },
 })