From 61c7c95557d9b03d33d1255bfe08e7b10a7229ad Mon Sep 17 00:00:00 2001 From: SharleneRyan Date: Fri, 12 Apr 2019 12:10:19 +1200 Subject: [PATCH 1/7] save background --- index.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/index.css b/index.css index 5867abd..9614893 100644 --- a/index.css +++ b/index.css @@ -1,3 +1,8 @@ +body{ + background-image: url(https://cdn.pixabay.com/photo/2017/03/10/14/04/background-2132910_960_720.jpg) +} + + main { text-align: center; font-family: 'Paytone One', sans-serif; From 0e2228fec438bcc8372bc59254f92e1e9ec9ba8c Mon Sep 17 00:00:00 2001 From: SharleneRyan Date: Fri, 12 Apr 2019 12:19:55 +1200 Subject: [PATCH 2/7] adding changes --- components/Win.jsx | 2 +- index.css | 5 ----- 2 files changed, 1 insertion(+), 6 deletions(-) diff --git a/components/Win.jsx b/components/Win.jsx index 17e5b47..85b2bd8 100644 --- a/components/Win.jsx +++ b/components/Win.jsx @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import EmojiPicker from 'emoji-picker-react'; + class Win extends Component { constructor(props) { diff --git a/index.css b/index.css index 9614893..5867abd 100644 --- a/index.css +++ b/index.css @@ -1,8 +1,3 @@ -body{ - background-image: url(https://cdn.pixabay.com/photo/2017/03/10/14/04/background-2132910_960_720.jpg) -} - - main { text-align: center; font-family: 'Paytone One', sans-serif; From f5541e75ae4bebfcc4eed51c397a0ce4a8943db3 Mon Sep 17 00:00:00 2001 From: SharleneRyan Date: Fri, 12 Apr 2019 12:54:10 +1200 Subject: [PATCH 3/7] emoji add --- package-lock.json | 35 +++++++++++++++++++++++++++++++++++ package.json | 1 + 2 files changed, 36 insertions(+) diff --git a/package-lock.json b/package-lock.json index 9ddebf4..c4004df 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1074,6 +1074,22 @@ "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==", "dev": true }, + "babel-runtime": { + "version": "6.26.0", + "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz", + "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=", + "requires": { + "core-js": "^2.4.0", + "regenerator-runtime": "^0.11.0" + }, + "dependencies": { + "core-js": { + "version": "2.6.5", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.5.tgz", + "integrity": "sha512-klh/kDpwX8hryYL14M9w/xei6vrv6sE8gTHDG7/T/+SEovB/G4ejwcfE/CBzO6Edsu+OETZMZ3wcX/EjUkrl5A==" + } + } + }, "babelify": { "version": "10.0.0", "resolved": "https://registry.npmjs.org/babelify/-/babelify-10.0.0.tgz", @@ -2225,6 +2241,15 @@ "prop-types": "^15.6.0" } }, + "emoji-picker-react": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/emoji-picker-react/-/emoji-picker-react-2.1.1.tgz", + "integrity": "sha512-LtCmP/1o+xSzqKJk07NSCcMkPrnkpO6jdJkDLlfNpZL7IUERVDXVRhUannjDX2cY6wYuPWGDZHLvaeGIILAUfw==", + "requires": { + "babel-runtime": "^6.25.0", + "throttle-debounce": "^1.0.1" + } + }, "emoji-regex": { "version": "6.5.1", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-6.5.1.tgz", @@ -4974,6 +4999,11 @@ "regenerate": "^1.4.0" } }, + "regenerator-runtime": { + "version": "0.11.1", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz", + "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==" + }, "regenerator-transform": { "version": "0.13.4", "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.13.4.tgz", @@ -5895,6 +5925,11 @@ } } }, + "throttle-debounce": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-1.1.0.tgz", + "integrity": "sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg==" + }, "through": { "version": "2.3.8", "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz", diff --git a/package.json b/package.json index 1cea494..ac3774a 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "homepage": "https://github.com/author/colouranxiety", "dependencies": { "emoji-mart": "^2.11.0", + "emoji-picker-react": "^2.1.1", "react-emoji-render": "^0.6.0" }, "devDependencies": { From cca5a0672c02a651d7f466b018414dd3824face1 Mon Sep 17 00:00:00 2001 From: ninja-nanz Date: Fri, 12 Apr 2019 13:19:56 +1200 Subject: [PATCH 4/7] lunch commit --- components/Buttons.jsx | 2 + components/Word.jsx | 11 ++-- components/app.js | 14 ++--- package-lock.json | 114 +++++++++++++++++++++++++++++++---------- package.json | 6 ++- 5 files changed, 109 insertions(+), 38 deletions(-) diff --git a/components/Buttons.jsx b/components/Buttons.jsx index d88141c..176504a 100644 --- a/components/Buttons.jsx +++ b/components/Buttons.jsx @@ -1,4 +1,5 @@ import React, { Component } from 'react'; +import Word from './Word.jsx' class Buttons extends Component { constructor(props) { @@ -6,6 +7,7 @@ class Buttons extends Component { this.state = { } } render() { + console.log('word on button', this.props) return (
diff --git a/components/Word.jsx b/components/Word.jsx index 3b58bfa..bfbd833 100644 --- a/components/Word.jsx +++ b/components/Word.jsx @@ -1,5 +1,6 @@ import React, { Component } from 'react'; import data from '../data.js' +import { Redirect } from 'react-router-dom' var min=0; var max=10; @@ -16,16 +17,20 @@ class Word extends Component { render() { - console.log(randomId, data[randomId]) let {color} = data[randomId] + let {word} = data[randomId] + + return (
- {data[randomId].word} - + {word} + +
+ ); } } diff --git a/components/app.js b/components/app.js index c7c25b9..872c062 100644 --- a/components/app.js +++ b/components/app.js @@ -2,6 +2,7 @@ import React, { Component } from 'react' import Header from './Header.jsx' import Word from './Word.jsx' import Buttons from './Buttons.jsx' +import {HashRouter as Router, Route, Link} from 'react-router-dom' class App extends Component { @@ -12,12 +13,13 @@ class App extends Component { render () { return (
- - {/*

Welcome to {this.props.name}

*/} -
- - - + +
+ + + +
+
diff --git a/package-lock.json b/package-lock.json index 7499f7c..d6afa2b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2817,14 +2817,12 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -2839,20 +2837,17 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "core-util-is": { "version": "1.0.2", @@ -2969,8 +2964,7 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "ini": { "version": "1.3.5", @@ -2982,7 +2976,6 @@ "version": "1.0.0", "bundled": true, "dev": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -2997,7 +2990,6 @@ "version": "3.0.4", "bundled": true, "dev": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -3005,14 +2997,12 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "minipass": { "version": "2.3.5", "bundled": true, "dev": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -3031,7 +3021,6 @@ "version": "0.5.1", "bundled": true, "dev": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -3112,8 +3101,7 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "object-assign": { "version": "4.1.1", @@ -3125,7 +3113,6 @@ "version": "1.4.0", "bundled": true, "dev": true, - "optional": true, "requires": { "wrappy": "1" } @@ -3247,7 +3234,6 @@ "version": "1.0.2", "bundled": true, "dev": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -3593,6 +3579,18 @@ "minimalistic-assert": "^1.0.1" } }, + "history": { + "version": "4.7.2", + "resolved": "https://registry.npmjs.org/history/-/history-4.7.2.tgz", + "integrity": "sha512-1zkBRWW6XweO0NBcjiphtVJVsIQ+SXF29z9DVkceeaSLVMFXHool+fdCZD4spDCfZJCILPILc3bm7Bc+HRi0nA==", + "requires": { + "invariant": "^2.2.1", + "loose-envify": "^1.2.0", + "resolve-pathname": "^2.2.0", + "value-equal": "^0.4.0", + "warning": "^3.0.0" + } + }, "hmac-drbg": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", @@ -3604,6 +3602,11 @@ "minimalistic-crypto-utils": "^1.0.1" } }, + "hoist-non-react-statics": { + "version": "2.5.5", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz", + "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==" + }, "htmlescape": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/htmlescape/-/htmlescape-1.1.1.tgz", @@ -3706,7 +3709,6 @@ "version": "2.2.4", "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==", - "dev": true, "requires": { "loose-envify": "^1.0.0" } @@ -3942,8 +3944,7 @@ "js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", - "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", - "dev": true + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" }, "jsesc": { "version": "2.5.1", @@ -4038,7 +4039,6 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", - "dev": true, "requires": { "js-tokens": "^3.0.0 || ^4.0.0" } @@ -4421,8 +4421,7 @@ "object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", - "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", - "dev": true + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" }, "object-copy": { "version": "0.1.0", @@ -4665,6 +4664,21 @@ "integrity": "sha1-6GQhf3TDaFDwhSt43Hv31KVyG/I=", "dev": true }, + "path-to-regexp": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.7.0.tgz", + "integrity": "sha1-Wf3g9DW62suhA6hOnTvGTpa5k30=", + "requires": { + "isarray": "0.0.1" + }, + "dependencies": { + "isarray": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", + "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=" + } + } + }, "pbkdf2": { "version": "3.0.17", "resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.0.17.tgz", @@ -4774,7 +4788,6 @@ "version": "15.6.2", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz", "integrity": "sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==", - "dev": true, "requires": { "loose-envify": "^1.3.1", "object-assign": "^4.1.1" @@ -4903,6 +4916,33 @@ "scheduler": "^0.13.6" } }, + "react-router": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-4.2.0.tgz", + "integrity": "sha512-DY6pjwRhdARE4TDw7XjxjZsbx9lKmIcyZoZ+SDO7SBJ1KUeWNxT22Kara2AC7u6/c2SYEHlEDLnzBCcNhLE8Vg==", + "requires": { + "history": "^4.7.2", + "hoist-non-react-statics": "^2.3.0", + "invariant": "^2.2.2", + "loose-envify": "^1.3.1", + "path-to-regexp": "^1.7.0", + "prop-types": "^15.5.4", + "warning": "^3.0.0" + } + }, + "react-router-dom": { + "version": "4.2.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-4.2.2.tgz", + "integrity": "sha512-cHMFC1ZoLDfEaMFoKTjN7fry/oczMgRt5BKfMAkTu5zEuJvUiPp1J8d0eXSVTnBh6pxlbdqDhozunOOLtmKfPA==", + "requires": { + "history": "^4.7.2", + "invariant": "^2.2.2", + "loose-envify": "^1.3.1", + "prop-types": "^15.5.4", + "react-router": "^4.2.0", + "warning": "^3.0.0" + } + }, "read-only-stream": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/read-only-stream/-/read-only-stream-2.0.0.tgz", @@ -5051,6 +5091,11 @@ "path-parse": "^1.0.6" } }, + "resolve-pathname": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-2.2.0.tgz", + "integrity": "sha512-bAFz9ld18RzJfddgrO2e/0S2O81710++chRMUxHjXOYKF6jTAMrUNZrEZ1PvV0zlhfjidm08iRPdTLPno1FuRg==" + }, "resolve-url": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz", @@ -6274,12 +6319,25 @@ "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=", "dev": true }, + "value-equal": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-0.4.0.tgz", + "integrity": "sha512-x+cYdNnaA3CxvMaTX0INdTCN8m8aF2uY9BvEqmxuYp8bL09cs/kWVQPVGcA35fMktdOsP69IgU7wFj/61dJHEw==" + }, "vm-browserify": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.0.tgz", "integrity": "sha512-iq+S7vZJE60yejDYM0ek6zg308+UZsdtPExWP9VZoCFCz1zkJoXFnAX7aZfd/ZwrkidzdUZL0C/ryW+JwAiIGw==", "dev": true }, + "warning": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz", + "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=", + "requires": { + "loose-envify": "^1.0.0" + } + }, "watchify": { "version": "3.11.1", "resolved": "https://registry.npmjs.org/watchify/-/watchify-3.11.1.tgz", diff --git a/package.json b/package.json index ea8633c..133e6a4 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,9 @@ "url": "https://github.com/author/colouranxiety/issues" }, "homepage": "https://github.com/author/colouranxiety", - "dependencies": {}, + "dependencies": { + + }, "devDependencies": { "@babel/core": "^7.4.3", "@babel/preset-env": "^7.4.3", @@ -37,6 +39,8 @@ "gh-pages": "^0.11.0", "react": "^16.8.6", "react-dom": "^16.8.6", + "react-router": "^4.2.0", + "react-router-dom": "^4.2.2", "tap-spec": "^4.1.1", "tape": "^4.5.1", "tinyify": "^2.5.0", From 01b206f37590ff6d909b1cf1e307f0505ec90267 Mon Sep 17 00:00:00 2001 From: ninja-nanz Date: Fri, 12 Apr 2019 13:29:40 +1200 Subject: [PATCH 5/7] Route kind of work --- components/Buttons.jsx | 12 +++++++++++- components/Word.jsx | 3 ++- components/app.js | 4 ++-- data.js | 10 ++++++++++ 4 files changed, 25 insertions(+), 4 deletions(-) diff --git a/components/Buttons.jsx b/components/Buttons.jsx index 176504a..58c6194 100644 --- a/components/Buttons.jsx +++ b/components/Buttons.jsx @@ -1,5 +1,6 @@ import React, { Component } from 'react'; import Word from './Word.jsx' +import data from '../data.js' class Buttons extends Component { constructor(props) { @@ -7,7 +8,16 @@ class Buttons extends Component { this.state = { } } render() { - console.log('word on button', this.props) + let theObjId = this.props.match.params.id + console.log('The object id =', theObjId) + + console.log('The params =', this.props) + + + let theObj = data.find( x => x.id === theObjId) + + console.log('The obj =', theObj) + return (
diff --git a/components/Word.jsx b/components/Word.jsx index bfbd833..4fb9d19 100644 --- a/components/Word.jsx +++ b/components/Word.jsx @@ -19,13 +19,14 @@ class Word extends Component { let {color} = data[randomId] let {word} = data[randomId] + let {id} = data[randomId] return (
{word} - +
diff --git a/components/app.js b/components/app.js index 872c062..86714b5 100644 --- a/components/app.js +++ b/components/app.js @@ -16,8 +16,8 @@ class App extends Component {
- - + +
diff --git a/data.js b/data.js index be3b506..4c0b6b8 100644 --- a/data.js +++ b/data.js @@ -1,40 +1,50 @@ const colour = [{ + id: 1, word:"RED", color: 'royalblue' }, { + id: 2, word:"YELLOW", color: 'green' }, { + id: 3, word:"GREEN", color: 'red' }, { + id: 4, word:"BLUE", color: 'gold' }, { + id: 5, word:"RED", color: 'green' }, { + id: 6, word:"BLUE", color: 'red' }, { + id: 7, word:"YELLOW", color: 'royalblue' }, { + id: 8, word:"GREEN", color: 'red' }, { + id: 9, word:"BLUE", color: 'gold' }, { + id: 10, word:"RED", color: 'royalblue' } From 60e40529042ad126737fd59cfbca23a7f9f5b1fc Mon Sep 17 00:00:00 2001 From: ninja-nanz Date: Fri, 12 Apr 2019 13:43:27 +1200 Subject: [PATCH 6/7] buttons are working: --- components/Buttons.jsx | 29 +++++++++++++++++++---------- 1 file changed, 19 insertions(+), 10 deletions(-) diff --git a/components/Buttons.jsx b/components/Buttons.jsx index 58c6194..c375722 100644 --- a/components/Buttons.jsx +++ b/components/Buttons.jsx @@ -7,23 +7,32 @@ class Buttons extends Component { super(props); this.state = { } } + render() { let theObjId = this.props.match.params.id - console.log('The object id =', theObjId) - - console.log('The params =', this.props) - - let theObj = data.find( x => x.id === theObjId) + let theObj = data.find( x => x.id == theObjId) + + let winColor = theObj.color + + console.log(this.props) + + const handleClick = (e) => { + if (theObj.word == e.target.innerHTML) { + this.props.history.push('/Win.jsx') + } else { + this.props.history.push('/Lose.jsx') + } - console.log('The obj =', theObj) + + } return (
- - - - + + + + From 1358cdf4d0f1dba80d7199629a05c0233bef751f Mon Sep 17 00:00:00 2001 From: ninja-nanz Date: Fri, 12 Apr 2019 15:09:23 +1200 Subject: [PATCH 7/7] it works --- components/Buttons.jsx | 2 +- components/Header.jsx | 29 ++++++++--------- components/Lose.jsx | 42 +++++++++++++------------ components/Timer.jsx | 39 +++++++++-------------- components/Win.jsx | 10 +++++- components/Word.jsx | 57 ++++++++++++++-------------------- components/app.js | 70 +++++++++++++++++++++++++----------------- data.js | 10 +++--- 8 files changed, 129 insertions(+), 130 deletions(-) diff --git a/components/Buttons.jsx b/components/Buttons.jsx index cc464cd..58becf4 100644 --- a/components/Buttons.jsx +++ b/components/Buttons.jsx @@ -16,7 +16,7 @@ class Buttons extends Component { let winColor = theObj.color - console.log(winColor) + console.log('winColor', theObj) const handleClick = (e) => { if (winColor == e.target.innerHTML.toLowerCase()) { diff --git a/components/Header.jsx b/components/Header.jsx index 12ed96b..db8a3a2 100644 --- a/components/Header.jsx +++ b/components/Header.jsx @@ -1,20 +1,17 @@ -import React, { Component } from 'react'; +import React, { Component } from "react"; class Header extends Component { - constructor(props) { - super(props); - this.state = { } - } - render() { - return ( -
-

COLOUR ANXIETY

- - -
- - ) - } + constructor(props) { + super(props); + this.state = {}; + } + render() { + return ( +
+

COLOUR ANXIETY

+
+ ); + } } - + export default Header; diff --git a/components/Lose.jsx b/components/Lose.jsx index 7cd0c91..1b4f335 100644 --- a/components/Lose.jsx +++ b/components/Lose.jsx @@ -1,27 +1,29 @@ -import React, { Component } from 'react'; +import React, { Component } from "react"; class Lose extends Component { constructor(props) { - super(props); - this.state = { } + super(props); + this.state = {}; } - render() { - return ( -
-

That Stinks

- -
- ); + + render() { + const handleClick = e => { + window.location = "/"; + }; + + return ( +
+

That Stinks

+ +
+ +
+ ); } } - - - - - - - - - -export default Lose \ No newline at end of file +export default Lose; diff --git a/components/Timer.jsx b/components/Timer.jsx index 139de89..7e59ac5 100644 --- a/components/Timer.jsx +++ b/components/Timer.jsx @@ -1,32 +1,23 @@ -import React from 'react' -import CountdownTimer from "react-component-countdown-timer" +import React from "react"; +import CountdownTimer from "react-component-countdown-timer"; class Countdown extends React.Component { - constructor (props) { - super(props) - this.state = { - - } - } render() { var settings = { - count: 5, - border: true, - hideDay: true, - hideHours: true, - noPoints: true, - onEnd: ( ) => { - this.props.history.push('/result/lose') - }, - - }; - - + count: 3, + border: true, + hideDay: true, + hideHours: true, + noPoints: true, + onEnd: () => { + if (this.props.history.location.pathname != "/result/lose") { + this.props.history.push("/result/lose"); + } + } + }; -return ( - - ); + return ; } } -export default Countdown \ No newline at end of file +export default Countdown; diff --git a/components/Win.jsx b/components/Win.jsx index 1503819..6c73b0e 100644 --- a/components/Win.jsx +++ b/components/Win.jsx @@ -6,11 +6,19 @@ class Win extends Component { super(props); this.state = { } } - render() { + + render() { + const handleClick = (e) => { + window.location = "/"; + } + return (

That's Awesome

+
+
+
); } diff --git a/components/Word.jsx b/components/Word.jsx index c78747f..e6150f2 100644 --- a/components/Word.jsx +++ b/components/Word.jsx @@ -1,40 +1,29 @@ -import React, { Component } from 'react'; -import data from '../data.js' -import { Redirect } from 'react-router-dom' +import React, { Component } from "react"; +import data from "../data.js"; -var min=0; -var max=10; - -let randomId = Math.floor(Math.random() * (+max - +min)) + +min; +import Countdown from "./Timer.jsx"; +import { HashRouter as Router, Route, Link } from "react-router-dom"; class Word extends Component { - constructor(props) { - super(props); - this.state = { } - } - - - - render() { - - - let {color} = data[randomId] - let {word} = data[randomId] - let {id} = data[randomId] - + constructor(props) { + super(props); + this.state = {}; + } + render() { + let randomId = this.props.match.params.id; + let {word, color} = data.find( x => x.id == randomId) - return ( -
- {word} - - -
- - - - ); - } + + console.log('random id', randomId, 'colour', color); + + return ( + +
+ {word} +
+ ); + } } - -export default Word; \ No newline at end of file + +export default Word; diff --git a/components/app.js b/components/app.js index 07d662c..e564d7a 100644 --- a/components/app.js +++ b/components/app.js @@ -1,40 +1,52 @@ -import React, { Component } from 'react' -import Audio from "./Sounds.jsx" -import Header from './Header.jsx' -import Word from './Word.jsx' -import Buttons from './Buttons.jsx' -import {HashRouter as Router, Route, Link} from 'react-router-dom' -import Countdown from './Timer.jsx' -import Win from './Win.jsx' -import Lose from './Lose.jsx' +import React, { Component } from "react"; +import { Redirect } from "react-router-dom"; +import { HashRouter as Router, Route, Link } from "react-router-dom"; -class App extends Component { +import Audio from "./Sounds.jsx"; +import Header from "./Header.jsx"; +import Word from "./Word.jsx"; +import Buttons from "./Buttons.jsx"; + +import Countdown from "./Timer.jsx"; +import Win from "./Win.jsx"; +import Lose from "./Lose.jsx"; +import data from "../data.js"; + +var min = 0; +var max = 10; + +let randomId = Math.floor(Math.random() * (+max - +min)) + +min; + +let { id } = data[randomId]; - constructor (props) { - super(props) +class App extends Component { + constructor(props) { + super(props); } - render () { - return( + render() { + return (
-
- - - - - - - -
- -
+
+ } + /> + + - ) + + - + + +
+ +
+ ); } - } -export default App +export default App; diff --git a/data.js b/data.js index 3e7cd10..1b2f24c 100644 --- a/data.js +++ b/data.js @@ -1,7 +1,7 @@ const colour = [{ id:1, word:"RED", - color: 'royalblue' + color: 'blue' }, { id:2, @@ -16,7 +16,7 @@ const colour = [{ { id:4, word:"BLUE", - color: 'gold' + color: 'yellow' }, { id:5, @@ -31,7 +31,7 @@ const colour = [{ { id:7, word:"YELLOW", - color: 'royalblue' + color: 'blue' }, { id:8, @@ -41,12 +41,12 @@ const colour = [{ { id:9, word:"BLUE", - color: 'gold' + color: 'yellow' }, { id:10, word:"RED", - color: 'royalblue' + color: 'blue' } ]