Board state in redux

client/src/components/GameBoard.css

@@ -21,3 +21,8 @@
     border-collapse: collapse;
     text-align: center;
 }
+
+.gameboard td {
+    color: yellow;
+    font-weight: bold;;
+}

client/src/components/GameBoard.jsx

@@ -1,19 +1,34 @@
 import React from 'react';
 import _ from 'lodash';
 
+import { useBoard } from '../hooks/board.js';
+
 import './GameBoard.css';
 
+const makeCell = (isSelected, isDouble, i) => {
+  let s = '';
+  if (!isSelected) {
+    if (!isDouble) {
+      s = `$${200 * (i + 1)}`;
+    } else {
+      s = `$${400 * (i + 1)}`;
+    }
+  }
+  return <td>{s}</td>;
+}
 export default function GameBoard() {
+  const board = useBoard();
+  
   return (
     <div className="gameboard">
         <div className="roomCode">Room Code: ???</div>
         <div className="board">
             <table>
                 <tr>
-                    { _.range(6).map(i => <th>{`Category ${i + 1}`}</th>) }
+                    { board.categories.map(c => <th>{c}</th>) }
                 </tr>
-                { _.range(5).map(r => <tr>{
+                { board.selected.map((r, i) => <tr> {
-                    _.range(6).map(c => <td> {`$${200 * (r + 1)}`} </td>)
+                  r.map(selected => makeCell(selected, board.double, i))
                 }</tr>)}
             </table>
         </div>

client/src/hooks/board.js

@@ -0,0 +1,5 @@
+import { useSelector } from 'react-redux';
+
+export function useBoard() {
+  return useSelector(state => state.board);
+}

client/src/reducers/board.js

@@ -0,0 +1,15 @@
+import { createSlice } from '@reduxjs/toolkit';
+import _ from 'lodash';
+
+export const boardSlice = createSlice({
+  name: 'board',
+  initialState: {
+    mode: 'table',
+    categories: _.range(1, 7).map(n => "Category " + n),
+    double: false,
+    selected: _.chunk(_.fill(Array(30), false), 6),
+  },
+  reducers: {} // TODO
+});
+
+export default boardSlice.reducer;

client/src/store.js

@@ -1,10 +1,10 @@
 import { configureStore } from '@reduxjs/toolkit';
-import counterReducer from './reducers/counter.js';
 import gamestateReducer from './reducers/gamestate.js';
+import boardReducer from './reducers/board.js';
 
 export default configureStore({
   reducer: {
-    counter: counterReducer,
     gamestate: gamestateReducer,
+    board: boardReducer,
   }
 });