From c20e6358c62bddd077a2c155f2aaed75107d563f Mon Sep 17 00:00:00 2001
From: Dane Johnson <daneallenjohnson@protonmail.com>
Date: Mon, 21 Feb 2022 11:27:39 -0600
Subject: [PATCH] Board state in redux

---
 client/src/components/GameBoard.css |  5 +++++
 client/src/components/GameBoard.jsx | 21 ++++++++++++++++++---
 client/src/hooks/board.js           |  5 +++++
 client/src/reducers/board.js        | 15 +++++++++++++++
 client/src/store.js                 |  4 ++--
 5 files changed, 45 insertions(+), 5 deletions(-)
 create mode 100644 client/src/hooks/board.js
 create mode 100644 client/src/reducers/board.js

diff --git a/client/src/components/GameBoard.css b/client/src/components/GameBoard.css
index 264bb20..f4f8302 100644
--- a/client/src/components/GameBoard.css
+++ b/client/src/components/GameBoard.css
@@ -21,3 +21,8 @@
     border-collapse: collapse;
     text-align: center;
 }
+
+.gameboard td {
+    color: yellow;
+    font-weight: bold;;
+}
diff --git a/client/src/components/GameBoard.jsx b/client/src/components/GameBoard.jsx
index 6bd72f7..05c4212 100644
--- a/client/src/components/GameBoard.jsx
+++ b/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>{
-                    _.range(6).map(c => <td> {`$${200 * (r + 1)}`} </td>)
+                { board.selected.map((r, i) => <tr> {
+                  r.map(selected => makeCell(selected, board.double, i))
                 }</tr>)}
             </table>
         </div>
diff --git a/client/src/hooks/board.js b/client/src/hooks/board.js
new file mode 100644
index 0000000..1fd84e2
--- /dev/null
+++ b/client/src/hooks/board.js
@@ -0,0 +1,5 @@
+import { useSelector } from 'react-redux';
+
+export function useBoard() {
+  return useSelector(state => state.board);
+}
diff --git a/client/src/reducers/board.js b/client/src/reducers/board.js
new file mode 100644
index 0000000..f30efe9
--- /dev/null
+++ b/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;
diff --git a/client/src/store.js b/client/src/store.js
index d9335f7..5184cdd 100644
--- a/client/src/store.js
+++ b/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,
   }
 });