Initial commit

afontcu · Aug 18, 2018 · c1d81a3 · c1d81a3
1 parent 3511c10
commit c1d81a3
Show file tree

Hide file tree

Showing 7 changed files with 264 additions and 2 deletions.
diff --git a/README.md b/README.md
diff --git a/package.json b/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "new",
+  "version": "1.0.0",
+  "description": "",
+  "keywords": [],
+  "main": "src/index.js",
+  "dependencies": {
+    "react": "16.3.2",
+    "react-dom": "16.3.2",
+    "react-scripts": "1.1.4"
+  },
+  "devDependencies": {},
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<meta name="theme-color" content="#000000">
+  <link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet">
+	<!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+	<!--
+      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>Finger Frenzy</title>
+</head>
+
+<body>
+	<noscript>
+		You need to enable JavaScript to run this app.
+	</noscript>
+	<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`.
+    -->
+</body>
+
+</html>
diff --git a/src/Background.js b/src/Background.js
@@ -0,0 +1,52 @@
+import React from 'react'
+
+/**
+ * This beauties are not mine. I took the from this codepen:
+ * https://codepen.io/Octavector/pen/akEZwG
+ * all credit goes to him/her!
+ */
+const backgrounds = [
+  {
+    backgroundImage:
+      'linear-gradient(45deg, #004C66, #004C66 1em, #008C74 1em, #008C74 50%)',
+    backgroundSize: '1.4em 1.4em',
+  },
+  {
+    backgroundImage:
+      'repeating-linear-gradient(45deg, transparent, transparent 1em, #731630 1em, #731630 50%), repeating-linear-gradient(45deg, #40152A, #40152A 1em, #FF5434 1em, #FF5434 50%)',
+    backgroundSize: '3em 3em, 2em 2em',
+  },
+  {
+    backgroundImage:
+      'repeating-linear-gradient(-45deg, transparent, transparent 1em, #9E2053 1em, #9E2053 50%), repeating-linear-gradient(45deg, #111626, #111626 1em, #571B3D 1em, #571B3D 50%)',
+    backgroundSize: '3em 3em, 2em 2em',
+  },
+  {
+    backgroundImage:
+      'radial-gradient(ellipse  4em 4em , #BEDB39, #BEDB39 25%, #1F8A70 25%)',
+    backgroundSize: '2em 2em',
+  },
+  {
+    backgroundImage:
+      'radial-gradient(ellipse  100% 100% , #013440, #013440 25%, transparent 25%),radial-gradient(ellipse  50% 50% , #AB1A25, #AB1A25 25%, #002635 25%)',
+    backgroundSize: '1em 1em, 2em 2em',
+  },
+  {
+    backgroundImage:
+      'radial-gradient(ellipse farthest-corner at 2em 2em , #FF9E9D, #FF9E9D 50%, #FF3D7F 50%)',
+    backgroundSize: '2em 2em',
+  },
+]
+
+function Background({ children }) {
+  return (
+    <div
+      className="Background"
+      style={backgrounds[Math.floor(Math.random() * backgrounds.length)]}
+    >
+      {children}
+    </div>
+  )
+}
+
+export default Background
diff --git a/src/Game.js b/src/Game.js
@@ -0,0 +1,86 @@
+import React from 'react'
+
+const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
+const arrAlphabet = alphabet.split('')
+
+const getKeyCode = char => char.toUpperCase().charCodeAt(0)
+
+const firstLetter = getKeyCode('A')
+const lastLetter = getKeyCode('Z')
+
+class Game extends React.Component {
+  initialState = {
+    time: 0,
+    ended: false,
+    currentPosition: 0,
+    msg: 'How fast can you type the alphabet?',
+  }
+
+  tick = () => {
+    this.setState(prevState => ({
+      time: prevState.time + 1,
+    }))
+  }
+
+  state = this.initialState
+
+  handleKeyDown = ({ keyCode }) => {
+    const requiredNextKey = getKeyCode(
+      arrAlphabet[this.state.currentPosition]
+    )
+
+    if (keyCode === requiredNextKey) {
+      this.setState(prevState => ({
+        currentPosition: prevState.currentPosition + 1,
+        msg: 'go go go!',
+      }))
+
+      if (keyCode === firstLetter) {
+        this.interval = setInterval(() => this.tick(), 10)
+      }
+
+      if (keyCode === lastLetter) {
+        clearInterval(this.interval)
+        this.setState({
+          ended: true,
+        })
+      }
+    }
+  }
+
+  handleRestart = () => {
+    clearInterval(this.interval)
+    this.setState(this.initialState)
+  }
+
+  componentWillMount() {
+    document.addEventListener('keydown', this.handleKeyDown, false)
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.handleKeyDown, false)
+  }
+
+  render() {
+    return (
+      <div className="Game">
+        <h2>{this.state.msg}</h2>
+        {this.state.ended ? (
+          <React.Fragment>
+            <p>finished!</p>
+            <p>it took you {this.state.time / 100} seconds!</p>
+            <p>not bad... wanna try again?</p>
+          </React.Fragment>
+        ) : (
+          <React.Fragment>
+            <p>next key: {arrAlphabet[this.state.currentPosition]}</p>
+            <h2>Time: {this.state.time / 100}s</h2>
+          </React.Fragment>
+        )}
+        <button onClick={this.handleRestart}>Play again</button>
+      </div>
+    )
+  }
+}
+
+export default Game
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,23 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import Game from './Game'
+import Background from './Background'
+
+import './styles.css'
+
+class App extends React.Component {
+  render() {
+    return (
+      <Background>
+        <span role="img" aria-label="" style={{ display: 'none' }}>
+          👇👇👇👇👇👇
+        </span>
+        <h1 className="Title">Finger frenzy!</h1>
+        <Game />
+      </Background>
+    )
+  }
+}
+
+const rootElement = document.getElementById('root')
+ReactDOM.render(<App />, rootElement)
diff --git a/src/styles.css b/src/styles.css
@@ -0,0 +1,40 @@
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  height: 100vh;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+}
+
+.Background {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.Game {
+  text-align: center;
+  background-color: white;
+  border-radius: 12px;
+  padding: 24px;
+  min-width: 70vw;
+  margin-bottom: 48px;
+}
+
+.Title {
+  font-family: 'Permanent Marker', cursive;
+  color: #fff;
+  text-align: center;
+  font-size: calc(3em + 1vw);
+  text-shadow: 0 0 10px #1f8a70;
+  margin: 0;
+}