feat: step 1 - gitcoin + score

jsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "baseUrl": "src"
+  },
+  "include": [
+    "src"
+  ],
+  "paths": {
+    "assets": ["./assets/*"],
+    "components": ["./components/*"]
+  }
+}

package.json

@@ -3,9 +3,6 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-scripts": "4.0.2",
@@ -34,5 +31,10 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^5.11.9",
+    "@testing-library/react": "^11.2.5",
+    "@testing-library/user-event": "^12.6.3"
   }
 }

src/components/Checkbox.js

@@ -0,0 +1,26 @@
+import React from 'react'
+
+export class Checkbox extends React.Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      check: false,
+    };
+  }
+
+  render() {
+    const { name, label } = this.props
+
+    return (
+      <div>
+        <input
+          name={name}
+          type="checkbox"
+          checked={this.state.checked ? 'checked' : ''}
+        />
+        <label>{label}</label>
+      </div>
+    );
+  }
+}

src/components/CookieClicker/Game.css

@@ -0,0 +1,6 @@
+.game {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 40%;
+}

src/components/CookieClicker/Game.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import './Game.css'
+import { Gitcoin } from './Gitcoin'
+import { Score } from './Score'
+
+export class Game extends React.Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      clicks: 0
+    }
+  }
+
+  handleClick() {
+    this.setState({
+      clicks: this.state.clicks + 1
+    });
+  }
+
+  render() {
+    return (
+      <main className="game">
+        <Score clicks={this.state.clicks} />
+        <Gitcoin onClick={this.handleClick.bind(this)} />
+      </main>
+    );
+  }
+}

src/components/CookieClicker/Gitcoin.css

@@ -0,0 +1,13 @@
+.gitcoin {
+  display: block;
+  width: 15rem;
+  height: 15rem;
+  border: none;
+  background: transparent;
+  outline: none;
+  cursor: pointer;
+}
+
+.gitcoin > img {
+  width: 100%;
+}

src/components/CookieClicker/Gitcoin.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import './Gitcoin.css'
+import githubIcon from 'assets/Github.png'
+
+export class Gitcoin extends React.Component {
+  render() {
+    const { onClick } = this.props
+
+    return (
+      <button
+        className="gitcoin"
+        onClick={onClick}
+      >
+        <img src={githubIcon} alt="Gitcoin" />
+      </button>
+    );
+  }
+}

src/components/CookieClicker/Score.js

@@ -0,0 +1,11 @@
+import React from 'react'
+
+export class Score extends React.Component {
+  render() {
+    const { clicks } = this.props
+
+    return (
+      <h3>{clicks} Clicks</h3>
+    );
+  }
+}

src/index.js

@@ -1,13 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
 import reportWebVitals from './reportWebVitals';
+import { Game } from './components/CookieClicker/Game';
 
 ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
+  <Game />,
   document.getElementById('root')
 );
 

yarn.lock

@@ -1830,7 +1830,7 @@
     lz-string "^1.4.4"
     pretty-format "^26.6.2"
 
-"@testing-library/jest-dom@^5.11.4":
+"@testing-library/jest-dom@^5.11.9":
   version "5.11.9"
   resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-5.11.9.tgz#e6b3cd687021f89f261bd53cbe367041fbd3e975"
   integrity sha512-Mn2gnA9d1wStlAIT2NU8J15LNob0YFBVjs2aEQ3j8rsfRQo+lAs7/ui1i2TGaJjapLmuNPLTsrm+nPjmZDwpcQ==
@@ -1844,15 +1844,15 @@
     lodash "^4.17.15"
     redent "^3.0.0"
 
-"@testing-library/react@^11.1.0":
+"@testing-library/react@^11.2.5":
   version "11.2.5"
   resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-11.2.5.tgz#ae1c36a66c7790ddb6662c416c27863d87818eb9"
   integrity sha512-yEx7oIa/UWLe2F2dqK0FtMF9sJWNXD+2PPtp39BvE0Kh9MJ9Kl0HrZAgEuhUJR+Lx8Di6Xz+rKwSdEPY2UV8ZQ==
   dependencies:
     "@babel/runtime" "^7.12.5"
     "@testing-library/dom" "^7.28.1"
 
-"@testing-library/user-event@^12.1.10":
+"@testing-library/user-event@^12.6.3":
   version "12.6.3"
   resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-12.6.3.tgz#4a77c56a48823cf8adebd0f57670e4a89c24d058"
   integrity sha512-PCmbUKofE4SXA7l8jphZAbvv5H3c4ix34xPZ/GNe99fASX//msJRgiMbHIBP+GwRfgVG9c7zmkODSPu2X2vNRw==