game difficulty

Author: QuatroV

src/assets/constants.js

@@ -3,3 +3,5 @@ export const operations = ["+", "-", "*"];
 export const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
 
 export const themes = ["default", "dawn", "relay", "moonlit asteroid", "mini"];
+
+export const gameDifficulties = ["easy", "middle", "hard"];

src/assets/utils.js

@@ -3,6 +3,7 @@ import _ from "lodash";
 import { themes } from "./constants";
 
 export const applyOperation = (value, operation, num) => {
+  console.log(value, operation, num);
   switch (operation) {
     case "+":
       return value + num;
@@ -34,7 +35,11 @@ export const addPointsToTheScore = () => {
 export const setNextTheme = () => {
   let nextTheme;
   if (window.localStorage.getItem("theme")) {
-    nextTheme = themes[(themes.indexOf(window.localStorage.getItem("theme")) + 1)%themes.length];
+    nextTheme =
+      themes[
+        (themes.indexOf(window.localStorage.getItem("theme")) + 1) %
+          themes.length
+      ];
   } else nextTheme = _.sample(themes);
   window.localStorage.setItem("theme", nextTheme);
   return nextTheme;

src/components/Dropdown.jsx

@@ -0,0 +1,36 @@
+import React from "react";
+import styled from "styled-components";
+
+const Dropdown = ({ items, isMobile, onChange }) => {
+  return (
+    <StyledSelect onChange={onChange} isMobile={isMobile} name="select">
+      {items.map((item) => {
+        return <StyledOption value={item}>{item}</StyledOption>;
+      })}
+    </StyledSelect>
+  );
+};
+
+const StyledSelect = styled.select`
+  background: rgba(208, 208, 208, 0.1);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border-radius: 10px;
+  padding: 16px;
+  font-size: ${(props) => (props.isMobile ? "40px" : "16px")};
+  border: none;
+  cursor: pointer;
+  color: #ffffff;
+  ${(props) => (props.isMobile ? "height: 140px; padding-left: 40px;" : null)}
+  text-shadow: 1px 1px 2px rgb(0 0 0);
+  -moz-appearance: none; /* Firefox */
+  -webkit-appearance: none; /* Safari and Chrome */
+  appearance: none;
+`;
+
+const StyledOption = styled.option`
+  color: black;
+  font-size: ${(props) => (props.isMobile ? "40px" : "16px")};
+`;
+
+export default Dropdown;

src/pages/StartPage.jsx

@@ -6,8 +6,12 @@ import MainTitle from "../components/MainTitle";
 import MobileMainTitle from "../components/MobileMainTitle";
 import MainContainer from "../components/MainContainer";
 import Card from "../components/Card";
+import Dropdown from "../components/Dropdown";
 import styled from "styled-components";
 
+import { gameDifficulties } from "../assets/constants";
+import { setGameDifficulty } from "../store/gameSlice";
+
 import { Link } from "react-router-dom";
 
 import { useSelector, useDispatch } from "react-redux";
@@ -18,6 +22,11 @@ import { useEffect } from "react";
 const StartPage = () => {
   const dispatch = useDispatch();
 
+  const handleChange = (e) => {
+    const { value } = e.target;
+    dispatch(setGameDifficulty(value));
+  };
+
   return (
     <Background>
       <BrowserView>
@@ -38,14 +47,18 @@ const StartPage = () => {
             </StyledText>
           </Container>
           <Container>
-            <Link
-              to="/game"
-              onClick={() => {
-                dispatch(gameInit());
-              }}
-            >
-              <Button type="primary">Start game</Button>
-            </Link>
+            <StyledWrapper>
+              <StyledDifficultyText>Difficulty:</StyledDifficultyText>
+              <Dropdown onChange={handleChange} items={gameDifficulties} />
+              <StyledLink
+                to="/game"
+                onClick={() => {
+                  dispatch(gameInit());
+                }}
+              >
+                <Button type="primary">Start game</Button>
+              </StyledLink>
+            </StyledWrapper>
           </Container>
         </MainContainer>
       </BrowserView>
@@ -66,16 +79,20 @@ const StartPage = () => {
           </StyledMobileText>
         </MobileContainer>
         <MobileContainer>
-          <Link
-            to="/game"
-            onClick={() => {
-              dispatch(gameInit());
-            }}
-          >
-            <Button isMobile type="primary">
-              Start game
-            </Button>
-          </Link>
+          <StyledWrapper>
+            <StyledDifficultyText>Difficulty:</StyledDifficultyText>
+            <Dropdown isMobile items={gameDifficulties} />
+            <StyledMobileLink
+              to="/game"
+              onClick={() => {
+                dispatch(gameInit());
+              }}
+            >
+              <Button isMobile type="primary">
+                Start game
+              </Button>
+            </StyledMobileLink>
+          </StyledWrapper>
         </MobileContainer>
       </MobileView>
     </Background>
@@ -106,4 +123,21 @@ const StyledMobileTitle = styled.div`
   font-family: "Lato", sans-serif;
 `;
 
+const StyledWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const StyledLink = styled(Link)`
+  margin-top: 8px;
+`;
+
+const StyledDifficultyText = styled.span`
+  margin-bottom: 4px;
+`;
+
+const StyledMobileLink = styled(Link)`
+  margin-top: 20px;
+`;
+
 export default StartPage;

src/store/gameSlice.js

@@ -16,8 +16,22 @@ export const gameSlice = createSlice({
   },
   reducers: {
     gameInit: (state) => {
-      state.current = _.random(1, 10);
-      state.steps = _.random(2, 3);
+      switch (state.gameDifficulty) {
+        case "easy":
+          state.steps = _.random(2, 3);
+          state.current = _.random(1, 5);
+          break;
+        case "hard":
+          state.steps = _.random(3, 4);
+          state.current = _.random(1, 25);
+          break;
+        default:
+        case "middle":
+          state.steps = _.random(2, 3);
+          state.current = _.random(1, 10);
+          break;
+      }
+      console.log("before", state.steps);
       state.operations = _.sampleSize(operations, 3);
       state.operands = _.sampleSize(numbers, 3);
       state.target = getTarget(
@@ -27,6 +41,7 @@ export const gameSlice = createSlice({
         state.operands
       );
       state.steps += 1;
+      console.log("after", state.steps);
       state.gameState = "in progress";
       return state;
     },
@@ -37,10 +52,18 @@ export const gameSlice = createSlice({
     updateGameState: (state, action) => {
       state.gameState = action.payload;
     },
+    setGameDifficulty: (state, action) => {
+      state.gameDifficulty = action.payload;
+    },
   },
 });
 
-export const { gameInit, generateTarget, updateCurrent, updateGameState } =
-  gameSlice.actions;
+export const {
+  gameInit,
+  generateTarget,
+  updateCurrent,
+  updateGameState,
+  setGameDifficulty,
+} = gameSlice.actions;
 
 export default gameSlice.reducer;