Added guessing game files

l-yang-05 · Oct 9, 2019 · a9f4afb · a9f4afb
1 parent 2ee604b
commit a9f4afb
Show file tree

Hide file tree

Showing 14 changed files with 13,076 additions and 0 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "game",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "react-scripts": "3.0.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+  <title>Guessing Game</title>
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div class="container">
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </div>
+</body>
+
+</html>
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,81 @@
+.container{
+  display: flex;
+  margin: 0 auto;
+  flex-direction: column;
+  background-color: #593C8F;
+  color:#8EF9F3;
+  align-items: center;
+  height: 100vh;
+  width:100%;
+}
+
+.container-score{
+  padding: 10px;
+  width: 100%;
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.App {
+  text-align: center;
+}
+
+.Title_Start {
+  font-size: 2em;
+  padding: 15px;
+  font-weight: bold;
+  text-align: center;
+}
+
+button{
+  padding: 8px;
+  margin: 10px;
+  font-size: 1em;
+  width: 45%;
+}
+
+input {
+  display: block;
+  margin: 5px;
+  width: 50%;
+  padding: 5px;
+}
+
+.container-start{
+  margin-top: 10%;
+  text-align: center;
+}
+
+.container-start header{
+  font-weight: bold;
+  font-size: 110px;
+}
+
+.container-start p{
+  font-size: 50px;
+}
+
+.container-score{
+  display: flex;
+  flex-direction: row;
+}
+
+.score {
+  display:inline;
+  padding: 30px;
+}
+
+
+.highscore {
+  display: inline;
+  padding: 30px;
+}
+
+.highscore h4{
+  display: inline-block;
+}
+
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,202 @@
+import React, { useState, useEffect } from 'react';
+import './App.css';
+import Textbox from './components/textbox';
+import Btnsubmit from './components/btn_submit';
+import Scoreboard from './components/score';
+
+
+
+// Keeps track of the winning number
+let winNumStan = Math.floor(Math.random() * 10) + 1;
+let winNumExpert = Math.floor(Math.random() * 100) + 1;
+
+// Keeps track of high score
+let currentHighScore = '';
+let expertHighScore = '';
+
+const App = () => {
+  // State for button when selected that will hide the unselected button
+  const [optionSelected, setOptionSelected] = useState('');
+
+  // State for tracking the guesses the user makes
+  const [trackSelection, setTrackSelection] = useState([]);
+
+  // State for whatever guess the user makes into the input field
+  const [guessInput, setGuessInput] = useState('');
+
+  // State that tells the user if their guess was too high or too low
+  const [tooHighOrLow, setTooHighOrLow] = useState('');
+
+  // State that flags the button when clicked
+  const [flagButtonClick, setFlagButtonClick] = useState(false);
+
+  // Tracks highscore
+  const trackCurrentHighScore = (currentHS) => {
+    if (currentHighScore < 1) { // if the high score is 0 - (start of the game)
+      currentHighScore = currentHS.length + 1;
+    } else {
+      if (trackSelection.length < currentHighScore) { // if the current play score is less than the high score put the new score in
+        currentHighScore = currentHS.length + 1;
+      }
+    }
+    if (expertHighScore < 1) { // if the high score is 0 - (start of the game)
+      expertHighScore = currentHS.length + 1;
+    } else {
+      if (trackSelection.length < currentHighScore) { // if the current play score is less than the high score put the new score in
+        expertHighScore = currentHS.length + 1;
+      }
+    }
+
+  };
+  // Listener for the guesses and the user's inputs
+  useEffect(() => {
+    // If tooHighOrLow, guessInput and flagbutton is true, push guessInput into array 
+    if (tooHighOrLow && guessInput && flagButtonClick) {
+      setTrackSelection([...trackSelection, { value: guessInput, winGuess: tooHighOrLow }]);
+      if (tooHighOrLow !== 'Win') {
+        alert(tooHighOrLow);
+      } else if (tooHighOrLow === 'Win') {
+        if (optionSelected === 'Standard') {
+          if (currentHighScore === 0) {
+          } else {
+            if (trackSelection.length + 1 < currentHighScore) {
+              alert('Congratulations for beating your high score!!!')
+            } else if (trackSelection.length + 1 === currentHighScore) {
+              alert('Congratulations for winning, but you did not beat your high score.')
+            }
+          }
+        } else {
+          if (optionSelected === 'Expert') {
+            if (expertHighScore === 0) {
+            } else {
+              if (trackSelection.length + 1 === expertHighScore) {
+                alert('Congratulations for winning, but you did not beat your high score.')
+              } else if (trackSelection.length + 1 < expertHighScore) {
+                alert('Congratulations for beating your high score!!!')
+              }
+            }
+          }
+        }
+        alert(`You win! It took you ${trackSelection.length + 1} tries!`);
+        trackCurrentHighScore(trackSelection);
+        setGuessInput('');
+        setTrackSelection([]);
+        winNumStan = Math.floor(Math.random() * 10) + 1;
+        winNumExpert = Math.floor(Math.random() * 100) + 1;
+      };
+
+      setFlagButtonClick(false);
+    }
+
+  }, [tooHighOrLow, guessInput, flagButtonClick, trackSelection, trackCurrentHighScore])
+
+
+  // Standard level begins
+  const standard = () => {
+    setOptionSelected('Standard');
+  }
+
+  // Expert level begins
+  const expert = () => {
+    setOptionSelected('Expert');
+    // setExpertCount(Math.floor(Math.random() * 100) + 1);
+  }
+
+  // Keeps the user from entering in character values
+  const inputChange = (num) => {
+    if (Number(num.target.value) || (num.target.value === "")) {
+      setGuessInput(num.target.value)
+    }
+  }
+
+
+  // Returns user back to the home screen to change difficuty 
+  const changeDiff = (e) => {
+    e.preventDefault();
+    setOptionSelected(false);
+    if (optionSelected === 'Standard') {
+      expertHighScore = '';
+      setTrackSelection([])
+    } else if (optionSelected === 'Expert') {
+      currentHighScore = '';
+      setTrackSelection([])
+
+    }
+  }
+
+  // Resets the game and gives another number
+  const reset = (e) => {
+    e.preventDefault();
+    setTrackSelection([]);
+    setGuessInput('');
+    // if option selected is "Standard"
+    winNumStan = Math.floor(Math.random() * 10) + 1;
+    winNumExpert = Math.floor(Math.random() * 100) + 1;
+
+  }
+
+  // Prevents the button from rendering again. Tells User if they guessed too high, too low, or that they won the game. Pushes item into array.
+  const buttonClick = (num) => {
+    // Prevents Browser default behavior and re-rendering
+    num.preventDefault();
+    const input = parseInt(guessInput);
+
+    // When the level is selected 
+    if (optionSelected === 'Standard') {
+      if (input > winNumStan && input < 11) {
+        setTooHighOrLow('Too High');
+      } else if (input < winNumStan && input < 11) {
+        setTooHighOrLow('Too Low');
+      } else if (input === winNumStan) {
+        setTooHighOrLow('Win');
+      } else {
+        alert('Please enter a number between 1-10.');
+        return;
+      };
+    } else if (optionSelected === 'Expert') {
+      if (input > winNumExpert && input < 101) {
+        setTooHighOrLow('Too High');
+      } else if (input < winNumExpert && input < 101) {
+        setTooHighOrLow('Too Low');
+      } else if (input === winNumExpert) {
+        setTooHighOrLow('Win');
+      } else {
+        alert('Please enter a number between 1-100.');
+        return;
+      };
+    }
+    setFlagButtonClick(true);
+  }
+
+  // Once an option is selected or considered "true", hide the level that came out false.
+  if (optionSelected) {
+    return (
+      <div>
+        <header className="Title_Start">{optionSelected} Level</header>
+        <form method="post" action="">
+          <Textbox data={inputChange} value={guessInput} />
+          <Btnsubmit data={buttonClick} reset={reset} changeDiff={changeDiff} />
+        </form>
+        <Scoreboard score={trackSelection} highScore={optionSelected === 'Standard' ? currentHighScore : expertHighScore} level={optionSelected} />
+
+      </div>
+    );
+
+  }
+  else {
+    return (
+      <div className="container-start">
+        <header className="Title_Start">Game Start</header>
+        <p>Select the difficulty:</p>
+        <form>
+          <button type='button' onClick={standard}>Standard</button>
+          <button type='button' onClick={expert}>Expert</button>
+        </form>
+      </div>
+    );
+  }
+
+
+}
+
+export default App;
diff --git a/src/App.test.js b/src/App.test.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<App />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});