GameDifficulty & Favicon & Footer

QuatroV · Aug 17, 2021 · f8e847a · f8e847a
1 parent 204e119
commit f8e847a
Show file tree

Hide file tree

Showing 9 changed files with 103 additions and 30 deletions.
diff --git a/public/favicon.svg b/public/favicon.svg
diff --git a/public/index.html b/public/index.html
@@ -1,13 +1,17 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
+    <meta charset="utf-8" />
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
       href="https://fonts.googleapis.com/css2?family=Lato:wght@900&family=Roboto:wght@100;300;500&display=swap"
       rel="stylesheet"
     />
-    <title>Calc Game</title>
+    <link rel="icon" type="image/svg+xml" href="%PUBLIC_URL%/favicon.svg" />
+    <link rel="icon" type="image/png" href="%PUBLIC_URL%/favicon.png" />
+    <title>dotCalc</title>
     <style>
       * {
         margin: 0;

diff --git a/public/manifest.json b/public/manifest.json
@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "dotCalc",
+  "name": "dotCalc",
   "icons": [
     {
       "src": "favicon.ico",

diff --git a/src/components/Background.jsx b/src/components/Background.jsx
@@ -47,6 +47,8 @@ const StyledBackground = styled.div`
   display: flex;
   align-items: ${(props) => (props.isMobile ? "flex-start" : "center")};
   justify-content: center;
+  overflow-y: auto;
+  overflow-x: hidden;
 `;
 
 export default Background;
diff --git a/src/components/Dropdown.jsx b/src/components/Dropdown.jsx
@@ -1,14 +1,9 @@
 import React from "react";
 import styled from "styled-components";
 
-const Dropdown = ({ items, isMobile, onClick }) => {
+const Dropdown = ({ items, isMobile, id }) => {
   return (
-    <StyledSelect
-      onTouchEnd={onClick}
-      onClick={onClick}
-      isMobile={isMobile}
-      name="select"
-    >
+    <StyledSelect isMobile={isMobile} name="select" id={id}>
       {items.map((item) => {
         return <StyledOption value={item}>{item}</StyledOption>;
       })}

diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
@@ -0,0 +1,23 @@
+import styled from "styled-components";
+
+const Footer = ({ children, isMobile }) => {
+  return (
+    <ContentWrapper isMobile={isMobile}>
+      <div>{children}</div>
+    </ContentWrapper>
+  );
+};
+
+const ContentWrapper = styled.div`
+  position: absolute;
+  bottom: 20px;
+  display: flex;
+  color: #ffffff;
+  font-family: "Lato", sans-serif;
+  text-shadow: 1px 1px 11px rgb(0 0 0 / 35%);
+  width: 100%;
+  ${(props) => (props.isMobile ? "font-size: 30px;" : "max-width: 570px;")}
+  justify-content: center;
+`;
+
+export default Footer;
diff --git a/src/components/MobileMainTitle.jsx b/src/components/MobileMainTitle.jsx
@@ -6,10 +6,8 @@ import CalcIcon from "../icons/calculator.png";
 import { useSelector } from "react-redux";
 
 const MobileMainTitle = ({ children, hasIcon }) => {
-  const gameMode = useSelector((state) => state.game.gameDifficulty);
   return (
     <StyledContainer>
-      {gameMode}
       {hasIcon && <Icon src={CalcIcon} width={"170px"} />}
       <TitleText>{children}</TitleText>
     </StyledContainer>

diff --git a/src/pages/GamePage.jsx b/src/pages/GamePage.jsx
@@ -11,6 +11,7 @@ import ButtonSection from "../components/ButtonSection";
 import CompareContainer from "../components/CompareContainer";
 import MobileContainer from "../components/MobileContainer";
 import MobileMainTitle from "../components/MobileMainTitle";
+import Footer from "../components/Footer";
 import MobileYourScoreContainer from "../components/MobileYourScoreContainer";
 
 import TitleContainer from "../components/TitleContainer";
@@ -26,6 +27,7 @@ const GamePage = () => {
           <TargetContainer />
           <YourScoreContainer />
           <CompareContainer />
+          <Footer>By QuatroV</Footer>
         </MainContainer>
       </BrowserView>
       <MobileView>

diff --git a/src/pages/StartPage.jsx b/src/pages/StartPage.jsx
@@ -7,6 +7,7 @@ import MobileMainTitle from "../components/MobileMainTitle";
 import MainContainer from "../components/MainContainer";
 import Card from "../components/Card";
 import Dropdown from "../components/Dropdown";
+import Footer from "../components/Footer";
 import styled from "styled-components";
 
 import { gameDifficulties } from "../assets/constants";
@@ -17,14 +18,15 @@ import { Link } from "react-router-dom";
 import { useSelector, useDispatch } from "react-redux";
 import { gameInit } from "../store/gameSlice";
 import { BrowserView, MobileView } from "react-device-detect";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 
 const StartPage = () => {
   const dispatch = useDispatch();
 
-  const handleClick = (e) => {
-    const { value } = e.target;
-    dispatch(setGameDifficulty(value));
+  const handleClick = () => {
+    const gameDifficulty = document.querySelector("#dropdown").value;
+    dispatch(setGameDifficulty(gameDifficulty));
+    dispatch(gameInit());
   };
 
   return (
@@ -49,17 +51,13 @@ const StartPage = () => {
           <Container>
             <StyledWrapper>
               <StyledDifficultyText>Difficulty:</StyledDifficultyText>
-              <Dropdown onClick={handleClick} items={gameDifficulties} />
-              <StyledLink
-                to="/game"
-                onClick={() => {
-                  dispatch(gameInit());
-                }}
-              >
+              <Dropdown id="dropdown" items={gameDifficulties} />
+              <StyledLink to="/game" onClick={handleClick}>
                 <Button type="primary">Start game</Button>
               </StyledLink>
             </StyledWrapper>
           </Container>
+          <Footer>By QuatroV</Footer>
         </MainContainer>
       </BrowserView>
       <MobileView>
@@ -81,13 +79,8 @@ const StartPage = () => {
         <MobileContainer>
           <StyledWrapper>
             <StyledDifficultyText>Difficulty:</StyledDifficultyText>
-            <Dropdown isMobile onClick={handleClick} items={gameDifficulties} />
-            <StyledMobileLink
-              to="/game"
-              onClick={() => {
-                dispatch(gameInit());
-              }}
-            >
+            <Dropdown isMobile id="dropdown" items={gameDifficulties} />
+            <StyledMobileLink to="/game" onClick={handleClick}>
               <Button isMobile type="primary">
                 Start game
               </Button>