Step 1 through 5 are implemented. gridGame.js and gridGameSlice.js are implemented.

gridGame/src/features/gridGame/gridGame.js

-/* IMPORTANT: Remove this directive when you start working on the code so that
- * the linter will warn you about code style issues. */
-/* eslint-disable no-unused-vars */
-
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
 
 import styles from './gridGame.module.css';
 
 import {
+  goToEarlierLevel,
+  goToLaterLevel,
+  move,
+  undo,
   selectCurrent,
   selectGoal,
+  selectLevelIndex,
+  selectCanGoToEarlierLevel,
+  selectCanGoToLaterLevel,
+  selectCanUndo,
+  selectSolved,
+  EAST,
+  WEST,
+  NORTH,
+  SOUTH,
 } from './gridGameSlice.js';
 
 function Cell(props) {
   // Finish this React component per the assignment instructions.
+
+  const backgroundColor = props.isWall ? 'gray' : props.isGoal ? 'lightgreen' : 'white';
+  const content = props.isPawn ? '●' : ''; // show a dot if it's a pawn
+
+  // combine base styling with conditional styles
+  const style = {
+    gridColumnStart: props.column + 1,
+    gridRowStart: props.row + 1,
+    backgroundColor,
+    border: '1px solid black',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+    height: '100%',
+  };
+
   return (
-    <div style={{
-      gridColumn: props.column + 1,
-      gridRow: props.row + 1,
-    }}>⋯</div>
+    <div style={style}>
+      {content}
+    </div>
   );
 }
 
@@ -32,29 +57,53 @@ Cell.propTypes = {
 
 export function GridGame() {
   // Finish this React component per the assignment instructions.
-
+  const dispatch = useDispatch();
   const current = useSelector(selectCurrent);
   const goal = useSelector(selectGoal);
+  const levelIndex = useSelector(selectLevelIndex);
+  const canGoToEarlierLevel = useSelector(selectCanGoToEarlierLevel);
+  const canGoToLaterLevel = useSelector(selectCanGoToLaterLevel);
+  const canUndo = useSelector(selectCanUndo);
+  const isSolved = useSelector(selectSolved);
 
   const content = [];
   for (const [row, column] of current.getLocations()) {
     const currentCellType = current.get([row, column]);
     const goalCellType = goal.get([row, column]);
+
+    const isWall = currentCellType === '■';
+    const isPawn = currentCellType === '●';
+    const isGoal = goalCellType === '●';
     content.push(
       <Cell
-        key={`${row},${column}`}
+        key={`${row}-${column}`}
         row={row}
         column={column}
-        isWall={false}
-        isPawn={false}
-        isGoal={false} />,
+        isWall={isWall}
+        isPawn={isPawn}
+        isGoal={isGoal} />,
     );
   }
 
   return (
+    <div>
+      <h1>{levelIndex + 1}</h1>
+      <div style={{ color: isSolved ? 'green' : 'red' }}>
+        {isSolved ? 'You\'ve solved the puzzle!' : 'Puzzle is unsolved.'}
+      </div>
+      <button onClick={() => dispatch(goToEarlierLevel())} disabled={!canGoToEarlierLevel}>Previous Level</button>
+      <button onClick={() => dispatch(goToLaterLevel())} disabled={!canGoToLaterLevel}>Next Level</button>
+      <button onClick={() => dispatch(undo())} disabled={!canUndo}>Undo Move</button>
+      <button onClick={() => dispatch(move({ direction: NORTH }))}>Move North</button>
+      <button onClick={() => dispatch(move({ direction: SOUTH }))}>Move South</button>
+      <button onClick={() => dispatch(move({ direction: EAST }))}>Move East</button>
+      <button onClick={() => dispatch(move({ direction: WEST }))}>Move West</button>
       <div className={styles.grid} style={{
         gridTemplateColumns: `repeat(${current.width}, 1fr)`,
         gridTemplateRows: `repeat(${current.height}, 1fr)`,
-    }}>{content}</div>
+      }}>
+        {content}
+      </div>
+    </div>
   );
 }

package.json

@@ -15,7 +15,8 @@
     "test-once": "run-s --continue-on-error test-once:**",
     "test": "run-s test-once",
     "build:gridGame": "cd gridGame && npm run build",
-    "build": "run-s build:**"
+    "build": "run-s build:**",
+    "start": "cd gridGame && npm start"
   },
   "devDependencies": {
     "ghooks": "^2.0.4",