Initial commit

9at8 · Jul 1, 2018 · d8aad49 · d8aad49
1 parent 54b483d
commit d8aad49
Show file tree

Hide file tree

Showing 5 changed files with 175 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,43 @@
+<!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">
+	<!--
+      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>React App</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/index.js b/src/index.js
@@ -0,0 +1,105 @@
+import React from "react";
+import ReactDOM from "react-dom";
+
+import "./styles.css";
+
+const INITIAL_TIME = 10000;
+const INCREMENT = 3000;
+const INTERVAL = 100;
+const PLAYER_1 = "player1";
+const PLAYER_2 = "player2";
+
+class App extends React.Component {
+  state = {
+    [PLAYER_1]: INITIAL_TIME,
+    [PLAYER_2]: INITIAL_TIME,
+    currentPlayer: PLAYER_1,
+    timer: undefined,
+    isNewGame: true
+  };
+
+  render() {
+    const { currentPlayer, timer } = this.state;
+
+    return (
+      <div className="App">
+        <p className={currentPlayer === PLAYER_1 && "Current"}>
+          Player 1: <span>{this.state[PLAYER_1] / 1000}</span>
+        </p>
+        <p className={currentPlayer === PLAYER_2 && "Current"}>
+          Player 2: <span>{this.state[PLAYER_2] / 1000}</span>
+        </p>
+        <button
+          onClick={() => {
+            this.changePlayer(currentPlayer);
+          }}
+          disabled={timer == null}
+        >
+          Move
+        </button>
+        <button onClick={this.playPauseGame}>
+          {timer == null ? "Play" : "Pause"}
+        </button>
+      </div>
+    );
+  }
+
+  otherPlayer = player => (player === PLAYER_1 ? PLAYER_2 : PLAYER_1);
+
+  changePlayer = player => {
+    const otherPlayer = this.otherPlayer(player);
+
+    this.setState(state => ({
+      [otherPlayer]: state[otherPlayer] + INCREMENT,
+      currentPlayer: otherPlayer
+    }));
+  };
+
+  decreaseTime = player => {
+    this.setState(
+      state => ({
+        [player]: Math.max(state[player] - INTERVAL, 0)
+      }),
+      () => {
+        if (this.state[player] === 0) {
+          this.changePlayer(player);
+        }
+      }
+    );
+  };
+
+  createTimer = () => {
+    return setInterval(() => {
+      this.decreaseTime(this.state.currentPlayer);
+    }, INTERVAL);
+  };
+
+  playPauseGame = () => {
+    this.setState(state => {
+      const { timer: oldTimer, isNewGame } = state;
+
+      const newState = isNewGame
+        ? {
+            [PLAYER_1]: state[PLAYER_1] + INCREMENT,
+            isNewGame: false
+          }
+        : {};
+
+      if (oldTimer == null) {
+        return {
+          ...newState,
+          timer: this.createTimer()
+        };
+      }
+
+      clearInterval(oldTimer);
+      return {
+        ...newState,
+        timer: undefined
+      };
+    });
+  };
+}
+
+const rootElement = document.getElementById("root");
+ReactDOM.render(<App />, rootElement);
diff --git a/src/styles.css b/src/styles.css
@@ -0,0 +1,8 @@
+.App {
+  font-family: sans-serif;
+  text-align: center;
+}
+
+.Current {
+  background: red;
+}