Table of clues

client/src/App.jsx

@@ -0,0 +1,15 @@
+import { useGamestate } from './hooks/gamestate';
+import Login from './components/Login'
+import GameBoard from './components/GameBoard';
+
+function App() {
+  const { level } = useGamestate();
+  if (level === 'login') {
+    return <Login/>
+  }
+  if (level === 'gameboard') {
+    return <GameBoard />
+  }
+}
+
+export default App;

client/src/App.test.js

@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

client/src/components/GameBoard.css

@@ -0,0 +1,23 @@
+.gameboard .roomCode {
+    color: white;
+}
+
+.gameboard .board {
+    position: fixed;
+    top: 16.8%;
+    bottom: 12%;
+    left: 17.1%;
+    right: 17%;
+}
+
+.gameboard table {
+    width: 100%;
+    height: 100%;
+}
+
+.gameboard table, th, td {
+    color: white;
+    border: 2px solid black;
+    border-collapse: collapse;
+    text-align: center;
+}

client/src/components/GameBoard.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import _ from 'lodash';
+
+import './GameBoard.css';
+
+export default function GameBoard() {
+  return (
+    <div className="gameboard">
+        <div className="roomCode">Room Code: ???</div>
+        <div className="board">
+            <table>
+                <tr>
+                    { _.range(6).map(i => <th>{`Category ${i + 1}`}</th>) }
+                </tr>
+                { _.range(5).map(r => <tr>{
+                    _.range(6).map(c => <td> {`$${200 * (r + 1)}`} </td>)
+                }</tr>)}
+            </table>
+        </div>
+    </div>
+  );
+}

client/src/components/Login.css

@@ -0,0 +1,12 @@
+.login {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 30vh;
+    height: 30vh;
+}
+
+.login button {
+    flex: 1;
+    margin: 20px;
+}

client/src/components/Login.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+
+import { changeLevel } from '../reducers/gamestate';
+
+import './Login.css';
+
+export default function Login() {
+  const dispatch = useDispatch();
+  return (
+    <div className="login">
+        <button onClick={() => dispatch(changeLevel('gameboard'))}>Gameboard</button>
+        <button>Host</button>
+        <button>Contestant</button>
+    </div>
+  );
+}

client/src/hooks/gamestate.js

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

client/src/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

client/src/index.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Provider } from 'react-redux';
+
+import './index.css';
+import App from './App';
+import store from './store'
+
+ReactDOM.render(
+  <React.StrictMode>
+      <Provider store={store}>
+          <App />
+      </Provider>
+  </React.StrictMode>,
+  document.getElementById('root')
+);

client/src/reducers/counter.js

@@ -0,0 +1,23 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+
+export const counterSlice = createSlice({
+  name: 'counter',
+  initialState: {
+    value: 0,
+  },
+  reducers: {
+    increment: (state) => {
+      state.value += 1;
+    },
+    decrement: (state) => {
+      state.value -= 1;
+    },
+    incrementByAmount: (state, action) => {
+      state.value += action.payload;
+    }
+  }
+});
+
+export const { increment, decrement, incrementByAmount } = counterSlice.actions;
+export default counterSlice.reducer;

client/src/reducers/gamestate.js

@@ -0,0 +1,19 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+export const gamestateSlice = createSlice({
+  name: 'gamestate',
+  initialState: {
+    role: 'none',
+    level: 'login',
+  },
+  reducers: {
+    changeLevel: (state, action) => {
+      if (['login', 'lobby', 'gameboard'].includes(action.payload)) {
+        state.level = action.payload;
+      }
+    }
+  }
+});
+
+export const { changeLevel } = gamestateSlice.actions;
+export default gamestateSlice.reducer;

client/src/setupTests.js

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';

client/src/store.js

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