moved difficulty selector into its own div

cat-snake-game · Oct 8, 2020 · ce21e81 · ce21e81
1 parent fe66a21
commit ce21e81
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 39 deletions.
diff --git a/client/App.jsx b/client/App.jsx
@@ -259,15 +259,6 @@ class App extends Component {
   render() {
     return (
       <div className="router">
-        <p>
-          Game Mode {this.state.difficulty} – {this.state.cards.length / 2}{' '}
-          pairs
-        </p>
-        <select value={this.state.difficulty} onChange={this.handleDropdown}>
-          <option value="easy">Easy</option>
-          <option value="medium">Medium</option>
-          <option value="hard">Hard</option>
-        </select>
         <Switch>
           <Route
             exact
@@ -289,6 +280,8 @@ class App extends Component {
                 {...props}
                 state={this.state}
                 onCardClick={this.onCardClick}
+                handleDropdown={this.handleDropdown}
+                difficulty={this.state.difficulty}
               />
             )}
           />

diff --git a/client/components/Board.jsx b/client/components/Board.jsx
@@ -3,30 +3,7 @@ import Card from './Card';
 import Timer from './Timer';
 // import Winner from './Winner';
 
-const Board = ({ cardCreated, cards, onCardClick /*, hasWon */ }) => {
-  //   if (hasWon) {
-  //     console.log('winner!');
-  //     return (
-  //     <div className="boardTimer">
-  //       <div className="board">
-  //         <Winner />
-  //         {cardCreated &&
-  //           cards.map((card, idx) => (
-  //             <Card
-  //               cardIdx={idx}
-  //               key={`Card${idx}`}
-  //               cardValue={card.cardValue}
-  //               cardStatus={card}
-  //               onCardClick={onCardClick}
-  //             />
-  //           ))}
-  //       </div>
-  //       <div className="timerDiv">
-  //         <Timer />
-  //       </div>
-  //   </div>
-  //   )
-  // }
+const Board = ({ cardCreated, cards, onCardClick, handleDropdown, difficulty }) => {
   return (
     <div className="boardTimer">
       <div className="board">
@@ -41,10 +18,21 @@ const Board = ({ cardCreated, cards, onCardClick /*, hasWon */ }) => {
             />
           ))}
       </div>
-      <div className="timerDiv">
-        <Timer />
-      </div>
+      <div className="timerAndDiff">
+        <div id="diffDropdown">
+          <p> Game Mode: {difficulty} </p>
+          <p> {cards.length / 2}{' '} pairs </p>
+          <select value={difficulty} onChange={handleDropdown}>
+            <option value="easy">Easy</option>
+            <option value="medium">Medium</option>
+            <option value="hard">Hard</option>
+          </select>
+        </div>
+        <div className="timerDiv">
+          <Timer difficulty={difficulty}/>
+        </div>
     </div>
+  </div>
   );
 };
 export default Board;
diff --git a/client/components/Game.jsx b/client/components/Game.jsx
@@ -6,7 +6,7 @@ import InfoContainer from './InfoContainer';
 import LeaderBoard from './LeaderBoard';
 import Message from './Message';
 
-const Game = ({ state, onCardClick }) => (
+const Game = ({ state, onCardClick, handleDropdown, difficulty }) => (
   <div className="Game">
     <NavBar user={state.user} />
     <InfoContainer user={state.user} clickCount={state.clickCount} />
@@ -24,7 +24,8 @@ const Game = ({ state, onCardClick }) => (
       cardCreated={state.cardCreated}
       cards={state.cards}
       onCardClick={onCardClick}
-      hasWon={state.hasWon}
+      handleDropdown={handleDropdown}
+      difficulty={difficulty}
     />
     <LeaderBoard leaderBoard={state.leaderBoard} />
   </div>

diff --git a/client/components/Timer.jsx b/client/components/Timer.jsx
@@ -1,8 +1,15 @@
 import React, { useState } from 'react';
 
-const Timer = () => {
+// var currDiff = 'easy';
+
+const Timer = (props) => {
   const [timer, setTimer] = useState(60);
 
+// if(props.difficulty !== currDiff) {
+//     currDiff = props.difficulty;
+//     setTimer(60);
+// }
+
 setTimeout(() => {
     if (timer > 0) {
         setTimer(timer - 1)}

diff --git a/client/style.css b/client/style.css
@@ -71,6 +71,22 @@ button {
   align-items: center;
 }
 
+.timerAndDiff {
+  display: flex;
+  flex-direction: column;
+}
+
+#diffDropdown {
+  border: solid 1px #393939;
+  background-color: #fff2f9;
+  width: 1fr;
+  border-radius: 3px;
+  padding-top: 3px;
+  padding-bottom: 3px;
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
 .timerDiv {
   border: solid 1px #393939;
   background-color: #fff2f9;