https://github.com/konvajs/react-konva/issues/311#issuecomment-454411007

graphics/components/color/color.component.tsx

@@ -1,3 +1,4 @@
+import cx from "classnames"
 import React from "react"
 import { connect } from "react-redux"
 import {
@@ -30,8 +31,16 @@ export function Color({
   const onClick = React.useCallback(() => {
     activateColor(id)
   }, [])
+
+  const button = {
+    className: cx(styles.color, {
+      [styles.active]: color.active,
+    }),
+    onClick,
+  }
+
   return (
-    <button className={styles.color} onClick={onClick}>
+    <button {...button}>
       <span className={styles.square} style={{ backgroundColor: color.hex }} />
     </button>
   )

graphics/components/color/color.module.scss

@@ -9,6 +9,10 @@
   }
 }
 
+.active {
+  border: 1px solid blue;
+}
+
 .square {
   position: absolute;
   top: 0;

graphics/components/pixel/index.ts

@@ -0,0 +1,2 @@
+import Pixel from "./pixel.component"
+export default Pixel

graphics/components/pixel/pixel.component.tsx

@@ -0,0 +1,38 @@
+import React from "react"
+import { Rect } from "react-konva"
+import { connect } from "react-redux"
+import {
+  PaletteIndex,
+  PaletteColor,
+  selectPalette,
+} from "@itsy.studio/graphics/store/palette"
+import {
+  SpritesheetPixelIndex,
+  selectSpritesheet,
+} from "@itsy.studio/graphics/store/spritesheet"
+
+interface PixelProps {
+  x: SpritesheetPixelIndex
+  y: SpritesheetPixelIndex
+  color: PaletteColor
+}
+
+const mapStateToProps = (state, { x, y }) => ({
+  color: selectPalette(state)[selectSpritesheet(state)[x][y]],
+})
+
+const mapDispatchToProps = {}
+
+export function Pixel({ x, y, color }: PixelProps): React.ReactElement {
+  const rect = {
+    x: parseInt(x.toString(), 10),
+    y: parseInt(y.toString(), 10),
+    width: 1,
+    height: 1,
+    fill: color.hex,
+  }
+
+  return <Rect {...rect} />
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Pixel)

graphics/components/spritesheet/spritesheet.component.tsx

@@ -1,6 +1,7 @@
 import _ from "lodash"
 import React from "react"
 import { Stage, Layer, Rect } from "react-konva"
+import { ReactReduxContext, Provider } from "react-redux"
 import { connect } from "react-redux"
 import {
   PaletteIndex,
@@ -12,6 +13,7 @@ import {
   SpritesheetState,
   selectSpritesheet,
 } from "@itsy.studio/graphics/store/spritesheet"
+import Pixel from "@itsy.studio/graphics/components/pixel"
 import styles from "./spritesheet.module.scss"
 
 interface SpritesheetProps {
@@ -30,24 +32,22 @@ export function Spritesheet({
   palette,
   spritesheet,
 }: SpritesheetProps): React.ReactElement {
+  const { store } = React.useContext(ReactReduxContext)
   const size = window.innerWidth
   const scale = (window.innerWidth / 128) * 2
   return (
     <Stage width={size} height={size}>
-      <Layer scale={{ x: scale, y: scale }}>
-        {_.map(spritesheet, (column, x: SpritesheetPixelIndex) =>
-          _.map(column, (pixel: PaletteIndex, y: SpritesheetPixelIndex) => (
-            <Rect
-              key={`${x}-${y}`}
-              x={parseInt(x.toString(), 10)}
-              y={parseInt(y.toString(), 10)}
-              width={1}
-              height={1}
-              fill={palette[pixel].hex}
-            />
-          ))
-        )}
-      </Layer>
+      <Provider store={store}>
+        <Layer scale={{ x: scale, y: scale }}>
+          {Object.entries(spritesheet).map(([x, column]) => (
+            <>
+              {Object.entries(column).map(([y, pixel]) => (
+                <Pixel key={`${x}-${y}`} x={x} y={y} />
+              ))}
+            </>
+          ))}
+        </Layer>
+      </Provider>
     </Stage>
   )
 }

graphics/store/palette/palette.slice.ts

@@ -3,23 +3,10 @@ import _ from "lodash"
 import { Thunk } from "@itsy.studio/graphics/store"
 import pico8 from "@itsy.studio/palettes/pico8/original.es6"
 
+// prettier-ignore
 export type PaletteIndex =
-  | 0
-  | 1
-  | 2
-  | 3
-  | 4
-  | 5
-  | 6
-  | 7
-  | 8
-  | 9
-  | 10
-  | 11
-  | 12
-  | 13
-  | 14
-  | 15
+  |  0 |  1 |  2 |  3 |  4 |  5 |  6 |  7
+  |  8 |  9 | 10 | 11 | 12 | 13 | 14 | 15
 
 export interface PaletteColor {
   hex: string
@@ -36,7 +23,7 @@ const initialState: PaletteState = _.zipObject(
   _.range(16),
   _.range(16).map((i) => ({
     hex: pico8[i],
-    active: false,
+    active: i === 0,
   }))
 )