Fixed step11 + rem warnings

Author: rasor

src/pages/Step10Page.jsx

@@ -61,17 +61,22 @@ const Cell = ({ width, gameStatus, isChallenge, isPicked, onClick }) => {
 const Footer = ({ gameStatus, countdown, startGame, resetGame }) => {
   const buttonAreaContent = () => {
     switch(gameStatus) {
+      // eslint-disable-next-line
       case GameStatus.NEW:
         return <button onClick={startGame}>Start Game</button>;
       case GameStatus.CALLENGE:
         // fall-through
+      // eslint-disable-next-line
       case GameStatus.PLAYING:
         return countdown;
       case GameStatus.WON:
         // fall-through
+      // eslint-disable-next-line
       case GameStatus.LOST:
         return <button onClick={resetGame}>Play Again</button>;
-    }
+      default:
+        // fall-through
+      }
   };
   return (
     <>

src/pages/Step11Page.jsx

@@ -61,16 +61,21 @@ const Cell = ({ width, gameStatus, isChallenge, isPicked, onClick }) => {
 const Footer = ({ gameStatus, countdown, startGame, resetGame }) => {
   const buttonAreaContent = () => {
     switch(gameStatus) {
+      // eslint-disable-next-line
       case GameStatus.NEW:
         return <button onClick={startGame}>Start Game</button>;
       case GameStatus.CALLENGE:
         // fall-through
+      // eslint-disable-next-line
       case GameStatus.PLAYING:
         return countdown;
       case GameStatus.WON:
         // fall-through
+      // eslint-disable-next-line
       case GameStatus.LOST:
         return <button onClick={resetGame}>Play Again</button>;
+      default:
+        // fall-through
     }
   };
   return (
@@ -189,6 +194,7 @@ const GameGenerator = () => {
 
   return (
     <GameSession
+      key={gameId}
       cellIds={cellIds}
       challengeCellIds={challengeCellIds}
       cellWidth={cellWidth}

src/pages/Step4Page.jsx

@@ -62,10 +62,10 @@ const GameSession = ({
   cellIds,
   challengeCellIds,
   cellWidth,
-  challengeSize,
-  challengeSeconds,
-  playSeconds,
-  maxWrongAttempts,
+  //challengeSize,
+  //challengeSeconds,
+  //playSeconds,
+  //maxWrongAttempts,
 }) => {
   const [gameStatus, setGameStatus] = useState(GameStatus.NEW);
 

src/pages/Step5Page.jsx

@@ -60,16 +60,16 @@ const Footer = ({ gameStatus, startGame }) => {
 
 const GameSession = ({
   cellIds,
-  challengeCellIds,
+  //challengeCellIds,
   cellWidth,
-  challengeSize,
-  challengeSeconds,
-  playSeconds,
-  maxWrongAttempts,
+  //challengeSize,
+  //challengeSeconds,
+  //playSeconds,
+  //maxWrongAttempts,
 }) => {
   const [gameStatus, setGameStatus] = useState(GameStatus.NEW);
-  const [pickedCellIds, setPickedCellIds] = useState([]);
-  const [countdown, setCountdown] = useState(playSeconds);
+  //const [pickedCellIds, setPickedCellIds] = useState([]);
+  //const [countdown, setCountdown] = useState(playSeconds);
 
   return (
     <div className="game">

src/pages/Step6Page.jsx

@@ -60,17 +60,22 @@ const Cell = ({ width, gameStatus, isChallenge, isPicked }) => {
 const Footer = ({ gameStatus, startGame, countdown }) => {
   const buttonAreaContent = () => {
     switch(gameStatus) {
+      // eslint-disable-next-line
       case GameStatus.NEW:
         return <button onClick={startGame}>Start Game</button>;
       case GameStatus.CALLENGE:
         // fall-through
+      // eslint-disable-next-line
       case GameStatus.PLAYING:
         return countdown;
       case GameStatus.WON:
         // fall-through
+      // eslint-disable-next-line
       case GameStatus.LOST:
         return <button onClick={() => {/* TODO */}}>Play Again</button>;
-    }
+      default:
+        // fall-through
+      }
   };
   return (
     <>
@@ -84,13 +89,15 @@ const GameSession = ({
   cellIds,
   challengeCellIds,
   cellWidth,
-  challengeSize,
-  challengeSeconds,
+  //challengeSize,
+  //challengeSeconds,
   playSeconds,
-  maxWrongAttempts,
+  //maxWrongAttempts,
 }) => {
   const [gameStatus, setGameStatus] = useState(GameStatus.NEW);
+  // eslint-disable-next-line
   const [pickedCellIds, setPickedCellIds] = useState([]);
+  // eslint-disable-next-line
   const [countdown, setCountdown] = useState(playSeconds);
 
   return (

src/pages/Step7Page.jsx

@@ -60,17 +60,22 @@ const Cell = ({ width, gameStatus, isChallenge, isPicked }) => {
 const Footer = ({ gameStatus, startGame, countdown }) => {
   const buttonAreaContent = () => {
     switch(gameStatus) {
+      // eslint-disable-next-line
       case GameStatus.NEW:
         return <button onClick={startGame}>Start Game</button>;
       case GameStatus.CALLENGE:
         // fall-through
+      // eslint-disable-next-line
       case GameStatus.PLAYING:
         return countdown;
       case GameStatus.WON:
         // fall-through
+      // eslint-disable-next-line
       case GameStatus.LOST:
         return <button onClick={() => {/* TODO */}}>Play Again</button>;
-    }
+      default:
+        // fall-through
+      }
   };
   return (
     <>
@@ -84,12 +89,13 @@ const GameSession = ({
   cellIds,
   challengeCellIds,
   cellWidth,
-  challengeSize,
+  //challengeSize,
   challengeSeconds,
   playSeconds,
-  maxWrongAttempts,
+  //maxWrongAttempts,
 }) => {
   const [gameStatus, setGameStatus] = useState(GameStatus.NEW);
+  // eslint-disable-next-line
   const [pickedCellIds, setPickedCellIds] = useState([]);
   const [countdown, setCountdown] = useState(playSeconds);
 

src/pages/Step8Page.jsx

@@ -61,17 +61,22 @@ const Cell = ({ width, gameStatus, isChallenge, isPicked, onClick }) => {
 const Footer = ({ gameStatus, startGame, countdown }) => {
   const buttonAreaContent = () => {
     switch(gameStatus) {
+      // eslint-disable-next-line
       case GameStatus.NEW:
         return <button onClick={startGame}>Start Game</button>;
       case GameStatus.CALLENGE:
         // fall-through
+      // eslint-disable-next-line
       case GameStatus.PLAYING:
         return countdown;
       case GameStatus.WON:
         // fall-through
+      // eslint-disable-next-line
       case GameStatus.LOST:
         return <button onClick={() => {/* TODO */}}>Play Again</button>;
-    }
+      default:
+        // fall-through
+      }
   };
   return (
     <>

src/pages/Step9Page.jsx

@@ -61,17 +61,22 @@ const Cell = ({ width, gameStatus, isChallenge, isPicked, onClick }) => {
 const Footer = ({ gameStatus, countdown, startGame, resetGame }) => {
   const buttonAreaContent = () => {
     switch(gameStatus) {
+      // eslint-disable-next-line
       case GameStatus.NEW:
         return <button onClick={startGame}>Start Game</button>;
       case GameStatus.CALLENGE:
         // fall-through
+      // eslint-disable-next-line
       case GameStatus.PLAYING:
         return countdown;
       case GameStatus.WON:
         // fall-through
+      // eslint-disable-next-line
       case GameStatus.LOST:
         return <button onClick={resetGame}>Play Again</button>;
-    }
+      default:
+        // fall-through
+      }
   };
   return (
     <>