From 38e2073ac25f96cb15b71b4e3607a5a269504838 Mon Sep 17 00:00:00 2001 From: namiwa Date: Sat, 8 Feb 2020 23:10:42 +0800 Subject: [PATCH 01/17] feat(cognitive/tiles): added basic routes for tiles game --- src/app/AuthenticatedApp.tsx | 4 +++- src/constants/routes.ts | 1 + src/routes/tiles/Tiles.tsx | 11 +++++++++++ src/routes/tiles/index.tsx | 1 + 4 files changed, 16 insertions(+), 1 deletion(-) create mode 100644 src/routes/tiles/Tiles.tsx create mode 100644 src/routes/tiles/index.tsx diff --git a/src/app/AuthenticatedApp.tsx b/src/app/AuthenticatedApp.tsx index d955fdd..a8f3af0 100644 --- a/src/app/AuthenticatedApp.tsx +++ b/src/app/AuthenticatedApp.tsx @@ -8,7 +8,8 @@ import { import Dashboard from 'routes/dashboard'; import Associate from 'routes/associate'; -import { PROFILE, ASSOCIATE } from 'constants/routes'; +import Tiles from 'routes/tiles'; +import { PROFILE, ASSOCIATE, TILES } from 'constants/routes'; const RedirectPath = () => { const history = useHistory(); @@ -23,6 +24,7 @@ const AuthenticatedApp: React.FC = () => { + diff --git a/src/constants/routes.ts b/src/constants/routes.ts index 00c360f..be1097c 100644 --- a/src/constants/routes.ts +++ b/src/constants/routes.ts @@ -2,3 +2,4 @@ export const HOME = '/'; export const LOGIN = '/login'; export const PROFILE = '/profile'; export const ASSOCIATE = '/cognitive/associate'; +export const TILES = '/cognitive/tiles'; diff --git a/src/routes/tiles/Tiles.tsx b/src/routes/tiles/Tiles.tsx new file mode 100644 index 0000000..bb193ce --- /dev/null +++ b/src/routes/tiles/Tiles.tsx @@ -0,0 +1,11 @@ +import React from 'react'; + +const Tiles: React.FC = () => { + return ( +
+

This is the tiles page

+
+ ); +}; + +export default Tiles; diff --git a/src/routes/tiles/index.tsx b/src/routes/tiles/index.tsx new file mode 100644 index 0000000..c638b33 --- /dev/null +++ b/src/routes/tiles/index.tsx @@ -0,0 +1 @@ +export { default } from './Tiles'; From 94a958289948efeaae61b85d59efcd1b517dde3c Mon Sep 17 00:00:00 2001 From: namiwa Date: Mon, 10 Feb 2020 11:55:03 +0800 Subject: [PATCH 02/17] feat(cognitive/tiles): added basic styes .scss --- src/routes/tiles/Tiles.scss | 6 ++++++ src/routes/tiles/Tiles.tsx | 4 +++- 2 files changed, 9 insertions(+), 1 deletion(-) create mode 100644 src/routes/tiles/Tiles.scss diff --git a/src/routes/tiles/Tiles.scss b/src/routes/tiles/Tiles.scss new file mode 100644 index 0000000..b25675b --- /dev/null +++ b/src/routes/tiles/Tiles.scss @@ -0,0 +1,6 @@ +@import 'assets/scss/theme.scss'; + +.tiles { + text-align: center; + padding-top: 5px; +} diff --git a/src/routes/tiles/Tiles.tsx b/src/routes/tiles/Tiles.tsx index bb193ce..74c6c89 100644 --- a/src/routes/tiles/Tiles.tsx +++ b/src/routes/tiles/Tiles.tsx @@ -1,8 +1,10 @@ import React from 'react'; +import './Tiles.scss'; + const Tiles: React.FC = () => { return ( -
+

This is the tiles page

); From 0380c50334254739ec6700202a95269b018b7966 Mon Sep 17 00:00:00 2001 From: namiwa Date: Wed, 12 Feb 2020 23:52:55 +0800 Subject: [PATCH 03/17] feat(cognitive/tiles): added basic tiles image assets --- src/assets/images/tiles/black_blue_btm_left.svg | 3 +++ src/assets/images/tiles/black_blue_btm_right.svg | 3 +++ src/assets/images/tiles/black_blue_top_left.svg | 3 +++ src/assets/images/tiles/black_blue_top_right.svg | 3 +++ src/assets/images/tiles/blue_tile.svg | 3 +++ 5 files changed, 15 insertions(+) create mode 100644 src/assets/images/tiles/black_blue_btm_left.svg create mode 100644 src/assets/images/tiles/black_blue_btm_right.svg create mode 100644 src/assets/images/tiles/black_blue_top_left.svg create mode 100644 src/assets/images/tiles/black_blue_top_right.svg create mode 100644 src/assets/images/tiles/blue_tile.svg diff --git a/src/assets/images/tiles/black_blue_btm_left.svg b/src/assets/images/tiles/black_blue_btm_left.svg new file mode 100644 index 0000000..463cc5f --- /dev/null +++ b/src/assets/images/tiles/black_blue_btm_left.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/images/tiles/black_blue_btm_right.svg b/src/assets/images/tiles/black_blue_btm_right.svg new file mode 100644 index 0000000..d0bd1ed --- /dev/null +++ b/src/assets/images/tiles/black_blue_btm_right.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/images/tiles/black_blue_top_left.svg b/src/assets/images/tiles/black_blue_top_left.svg new file mode 100644 index 0000000..4afce85 --- /dev/null +++ b/src/assets/images/tiles/black_blue_top_left.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/images/tiles/black_blue_top_right.svg b/src/assets/images/tiles/black_blue_top_right.svg new file mode 100644 index 0000000..2b5d999 --- /dev/null +++ b/src/assets/images/tiles/black_blue_top_right.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/images/tiles/blue_tile.svg b/src/assets/images/tiles/blue_tile.svg new file mode 100644 index 0000000..08bca5e --- /dev/null +++ b/src/assets/images/tiles/blue_tile.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file From 6ff54f2edfc7dc1b0d132b8c741c226203595797 Mon Sep 17 00:00:00 2001 From: namiwa Date: Thu, 13 Feb 2020 15:02:00 +0800 Subject: [PATCH 04/17] fix(cognitive/associate): fixed style responsiveness on mobile --- src/routes/associate/Associate.scss | 46 ------------------- src/routes/associate/Associate.tsx | 2 +- src/routes/associate/Game/Game.tsx | 30 +++--------- .../associate/Game/ItemDropContainer.tsx | 2 +- 4 files changed, 9 insertions(+), 71 deletions(-) diff --git a/src/routes/associate/Associate.scss b/src/routes/associate/Associate.scss index 39f1b56..3c34a45 100644 --- a/src/routes/associate/Associate.scss +++ b/src/routes/associate/Associate.scss @@ -4,49 +4,3 @@ margin: 15px; text-align: center; } - -.left { - float: left; - width: 50%; - &-box { - background: #fff; - border: 3px solid #000; - border-radius: 5px; - width: 150px; - height: 150px; - margin: 10px; - padding: 10px; - } -} -.right { - float: right; - width: 50%; - &-box { - background: #fff; - border: 1px solid #999; - border-radius: 5px; - width: 150px; - height: 150px; - margin: 10px; - padding: 10px; - } -} - -img { - max-width: 100%; - height: auto; -} - -.group:after { - content: ''; - display: table; - clear: both; -} - -@media screen and (max-width: 480px) { - .left, - .right { - float: none; - width: auto; - } -} diff --git a/src/routes/associate/Associate.tsx b/src/routes/associate/Associate.tsx index 4bd564d..698fa35 100644 --- a/src/routes/associate/Associate.tsx +++ b/src/routes/associate/Associate.tsx @@ -5,7 +5,7 @@ import './Associate.scss'; export const Associate: React.FC = () => { return ( -
+
Associate
Choose the right item associated with the big picture!
diff --git a/src/routes/associate/Game/Game.tsx b/src/routes/associate/Game/Game.tsx index 796f5f1..b1c1806 100644 --- a/src/routes/associate/Game/Game.tsx +++ b/src/routes/associate/Game/Game.tsx @@ -1,8 +1,4 @@ import React, { useState } from 'react'; -import { BrowserView, MobileView } from 'react-device-detect'; -import { DndProvider } from 'react-dnd'; -import Backend from 'react-dnd-html5-backend'; -import TouchBackend from 'react-dnd-touch-backend'; import { useToasts } from 'react-toast-notifications'; import { DraggableEventHandler } from 'react-draggable'; @@ -112,14 +108,11 @@ export const Game: React.FC = () => { const DisplayItems: React.FC = ({ store }) => { return ( -
- {store.map((val, index) => { +
+ {store.map(val => { return ( -
-
+
+
{ }; return ( -
- - - - - - - - - - - +
+ +
); }; diff --git a/src/routes/associate/Game/ItemDropContainer.tsx b/src/routes/associate/Game/ItemDropContainer.tsx index e649265..a138500 100644 --- a/src/routes/associate/Game/ItemDropContainer.tsx +++ b/src/routes/associate/Game/ItemDropContainer.tsx @@ -12,7 +12,7 @@ export const ItemDropContainer: React.FC = ({ const label = labelDots.split('.')[0]; return ( -
+
{label}

{label}

From 4181d012d22604111ea964423c81108a48133e05 Mon Sep 17 00:00:00 2001 From: namiwa Date: Wed, 19 Feb 2020 21:12:25 +0800 Subject: [PATCH 05/17] feat(tiles): added tiles link to side nav bar --- src/components/navbar/SideBar.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/navbar/SideBar.tsx b/src/components/navbar/SideBar.tsx index 8f106e0..e858c30 100644 --- a/src/components/navbar/SideBar.tsx +++ b/src/components/navbar/SideBar.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { Link, useHistory } from 'react-router-dom'; import APP_LOGO from 'assets/images/app.png'; -import { PROFILE, HOME, ASSOCIATE } from 'constants/routes'; +import { PROFILE, HOME, ASSOCIATE, TILES } from 'constants/routes'; import firebase from 'utils/firebase'; import './SideBar.scss'; @@ -32,6 +32,9 @@ const SideBar: React.FC = ({ isOpen, setIsOpen }) => { setIsOpen(false)}> Associate + setIsOpen(false)}> + Tiles +
+ + ); + })} +
+ ); + }; + return (
-
-
-
-
-
-

Welcome to the tiles game

-

- Click on the right tiles matching the pattern shown! -

-
-
-

...tiles

-

Bottom tile

- - {list.map(val => { - return ( -
- {val} -
- ); - })} -
-
-
-
+
+
+

+ Welcome to the tiles game, click on the right tiles matching the + pattern shown! +

+
+ + + +
); }; From 352ad349349e89975d60f7da1cc3c6b181b754ce Mon Sep 17 00:00:00 2001 From: namiwa Date: Wed, 26 Feb 2020 11:25:31 +0800 Subject: [PATCH 11/17] test(associate): added basic test case for associate game --- src/routes/associate/Associate.tsx | 5 +++- src/tests/routes/associate/Associate.spec.tsx | 28 +++++++++++++++++++ 2 files changed, 32 insertions(+), 1 deletion(-) create mode 100644 src/tests/routes/associate/Associate.spec.tsx diff --git a/src/routes/associate/Associate.tsx b/src/routes/associate/Associate.tsx index 698fa35..999cc89 100644 --- a/src/routes/associate/Associate.tsx +++ b/src/routes/associate/Associate.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { ToastProvider } from 'react-toast-notifications'; import Game from './Game/Game'; import './Associate.scss'; @@ -8,7 +9,9 @@ export const Associate: React.FC = () => {
Associate
Choose the right item associated with the big picture!
- + + +
); }; diff --git a/src/tests/routes/associate/Associate.spec.tsx b/src/tests/routes/associate/Associate.spec.tsx new file mode 100644 index 0000000..ffa8b9b --- /dev/null +++ b/src/tests/routes/associate/Associate.spec.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import { render, unmountComponentAtNode } from 'react-dom'; +import { act } from 'react-dom/test-utils'; + +import Associate from 'routes/associate/Associate'; + +let container: any = null; +beforeEach(() => { + // setup a DOM element as a render target + container = document.createElement('div'); + document.body.appendChild(container); +}); + +afterEach(() => { + // cleanup on exiting + unmountComponentAtNode(container); + container.remove(); + container = null; +}); + +it('Associate renders without a name', () => { + act(() => { + render(, container); + }); + expect(container.textContent).toContain( + 'AssociateChoose the right item associated with the big picture!' + ); +}); From e0b6fd971e488e91e4831cbd953a13e35c7b36bf Mon Sep 17 00:00:00 2001 From: namiwa Date: Wed, 26 Feb 2020 16:07:22 +0800 Subject: [PATCH 12/17] fix(tiles): bug fix for game image style --- src/routes/tiles/Tiles.tsx | 22 ++++++++++++++-------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/src/routes/tiles/Tiles.tsx b/src/routes/tiles/Tiles.tsx index 3437f89..322bb3b 100644 --- a/src/routes/tiles/Tiles.tsx +++ b/src/routes/tiles/Tiles.tsx @@ -23,9 +23,9 @@ const Tiles: React.FC = () => { ansStack: [-1] }); - /* global HTMLButtonElement, MouseEvent */ - const handleMouseClick = ( - e: React.MouseEvent, + /* global HTMLElement, MouseEvent */ + const handleImageClick = ( + e: React.MouseEvent, data: number ) => { e.preventDefault(); @@ -35,13 +35,14 @@ const Tiles: React.FC = () => { ...randomList, ansStack: copy }); + // console.log(randomList.ansStack); }; const DisplayRandom: React.FC = () => { return (
-

Match accordingly!

+

Match the tiles accordingly!

{randomList.list.map((val, ind) => { const src = gameState.list[val]; @@ -64,11 +65,16 @@ const Tiles: React.FC = () => {
{gameState.list.map((val, ind) => { return ( -
- -
+ + +
); })}
From a4ca0d21e3a50db0c388dd9545660fcf4ce041ba Mon Sep 17 00:00:00 2001 From: namiwa Date: Wed, 26 Feb 2020 17:43:38 +0800 Subject: [PATCH 13/17] feat(tiles): More testing with bulma styles --- src/routes/tiles/Tiles.tsx | 93 ++++++++++++++++++++++---------------- 1 file changed, 55 insertions(+), 38 deletions(-) diff --git a/src/routes/tiles/Tiles.tsx b/src/routes/tiles/Tiles.tsx index 322bb3b..9626f36 100644 --- a/src/routes/tiles/Tiles.tsx +++ b/src/routes/tiles/Tiles.tsx @@ -7,20 +7,40 @@ import './Tiles.scss'; // requires console buttons to check answer / refresh game const Tiles: React.FC = () => { - const [gameState] = useState({ - list: TilesImage.TilesImageMap() - }); - const Grey: React.FC = TilesImage.UnchoosenTile; - + const list = TilesImage.TilesImageMap(); const getFourRandomFromArray = (array: Array) => { const indexList = array.map((val, index) => index); const randomArray = indexList.sort(() => 0.5 - Math.random()); return randomArray.slice(0, 4); }; + const ans = getFourRandomFromArray(list); + + /** + * Randomize array element order in-place. + * Using Durstenfeld shuffle algorithm. + * referencing https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array + * from https://stackoverflow.com/users/310500/laurens-holst + * This works, but apparent it binds on the second call for both ans and random list + */ + const shuffleArray: (original: Array) => Array = original => { + const array = original; + for (let i = array.length - 1; i > 0; i -= 1) { + const j = Math.floor(Math.random() * (i + 1)); + [array[i], array[j]] = [array[j], array[i]]; + } + return array; + }; + + const [gameState] = useState({ + list, + ans + }); + const Grey: React.FC = TilesImage.UnchoosenTile; - const [randomList, setRandom] = useState({ - list: getFourRandomFromArray(gameState.list), - ansStack: [-1] + const [randomList] = useState({ + display: shuffleArray(gameState.ans), + ansStack: [-1, -1, -1, -1], + currPos: 0 }); /* global HTMLElement, MouseEvent */ @@ -29,51 +49,42 @@ const Tiles: React.FC = () => { data: number ) => { e.preventDefault(); - const copy = randomList.ansStack; - copy.push(data); - setRandom({ - ...randomList, - ansStack: copy - }); - // console.log(randomList.ansStack); + gameState.ans.push(data); }; const DisplayRandom: React.FC = () => { return ( -
-
-

Match the tiles accordingly!

-
- {randomList.list.map((val, ind) => { +
+
+ {gameState.ans.map((val, ind) => { const src = gameState.list[val]; return ( -
+
{ind.toString()} -
+
); })} +
); }; const PlayArea: React.FC = () => { - return
Play Area!
; + return
Play Area!
; }; const ImHeader: React.FC = () => { return ( -
- {gameState.list.map((val, ind) => { +
+ {randomList.display.map((val, ind) => { return ( -
-
- {ind.toString()} - -
+
+ {ind.toString()} +
); })} @@ -81,16 +92,22 @@ const Tiles: React.FC = () => { ); }; - return ( -
-
-
+ const HeaderTitle: React.FC = () => { + return ( +
+

Welcome to the tiles game, click on the right tiles matching the pattern shown!

+ ); + }; + + return ( +
+ From f852e0c8c6e7fbb5b2cb279efd3a60493b1f608d Mon Sep 17 00:00:00 2001 From: namiwa Date: Thu, 27 Feb 2020 02:43:45 +0800 Subject: [PATCH 14/17] feat(tiles): improved styling for tiles game --- src/routes/tiles/Tiles.tsx | 24 +++++++++++++----------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/src/routes/tiles/Tiles.tsx b/src/routes/tiles/Tiles.tsx index 9626f36..b89649d 100644 --- a/src/routes/tiles/Tiles.tsx +++ b/src/routes/tiles/Tiles.tsx @@ -40,22 +40,24 @@ const Tiles: React.FC = () => { const [randomList] = useState({ display: shuffleArray(gameState.ans), ansStack: [-1, -1, -1, -1], - currPos: 0 + currPos: 0, + ans: [-1] }); - /* global HTMLElement, MouseEvent */ + /* global HTMLButtonElement, MouseEvent */ const handleImageClick = ( - e: React.MouseEvent, + e: React.MouseEvent, data: number ) => { e.preventDefault(); - gameState.ans.push(data); + randomList.ans.push(data); + // console.log(gameState); + // console.log(randomList); }; const DisplayRandom: React.FC = () => { return (
-
{gameState.ans.map((val, ind) => { const src = gameState.list[val]; return ( @@ -64,7 +66,6 @@ const Tiles: React.FC = () => {
); })} -
); }; @@ -76,15 +77,16 @@ const Tiles: React.FC = () => { const ImHeader: React.FC = () => { return (
- {randomList.display.map((val, ind) => { + {randomList.display.map(val => { return (
- {ind.toString()} + > + {gameState.list[val]} +
); })} From ffb150276e6a8b4fb0549fb73022f0c50eb1dde6 Mon Sep 17 00:00:00 2001 From: namiwa Date: Thu, 27 Feb 2020 22:30:09 +0800 Subject: [PATCH 15/17] feat(tiles) Basic game format in place, missing logic --- src/routes/tiles/Tiles.tsx | 85 +++++++++++++++++++----------- src/routes/tiles/TilesImageMap.tsx | 12 +---- 2 files changed, 56 insertions(+), 41 deletions(-) diff --git a/src/routes/tiles/Tiles.tsx b/src/routes/tiles/Tiles.tsx index b89649d..9070e54 100644 --- a/src/routes/tiles/Tiles.tsx +++ b/src/routes/tiles/Tiles.tsx @@ -3,18 +3,9 @@ import TilesImage from './TilesImageMap'; import './Tiles.scss'; -// get static state (or rando) -> choose random 4 indexs -> create image place holders -> set to match on click -> show if match // requires console buttons to check answer / refresh game const Tiles: React.FC = () => { - const list = TilesImage.TilesImageMap(); - const getFourRandomFromArray = (array: Array) => { - const indexList = array.map((val, index) => index); - const randomArray = indexList.sort(() => 0.5 - Math.random()); - return randomArray.slice(0, 4); - }; - const ans = getFourRandomFromArray(list); - /** * Randomize array element order in-place. * Using Durstenfeld shuffle algorithm. @@ -22,26 +13,33 @@ const Tiles: React.FC = () => { * from https://stackoverflow.com/users/310500/laurens-holst * This works, but apparent it binds on the second call for both ans and random list */ - const shuffleArray: (original: Array) => Array = original => { - const array = original; - for (let i = array.length - 1; i > 0; i -= 1) { - const j = Math.floor(Math.random() * (i + 1)); - [array[i], array[j]] = [array[j], array[i]]; + const shuffleArray: (original: any[]) => any[] = original => { + const copy = original.slice(); + for (let i = copy.length - 1; i > 1; i = -1) { + const j = Math.floor(Math.random() * i); + [copy[i], copy[j]] = [copy[j], copy[i]]; } - return array; + return copy; + }; + + const getFourRandomFromArray = (array: Array) => { + const indexList = array.map((val, index) => index); + const randomArray = shuffleArray(indexList); + return randomArray.slice(0, 4); }; const [gameState] = useState({ - list, - ans + list: TilesImage.TilesImageMap(), + ans: getFourRandomFromArray(TilesImage.TilesImageMap()) }); - const Grey: React.FC = TilesImage.UnchoosenTile; const [randomList] = useState({ - display: shuffleArray(gameState.ans), - ansStack: [-1, -1, -1, -1], - currPos: 0, - ans: [-1] + display: shuffleArray(gameState.ans) + }); + + const [ansState, setAnswer] = useState({ + list: [-1, -1, -1, -1], + pos: 0 }); /* global HTMLButtonElement, MouseEvent */ @@ -50,9 +48,19 @@ const Tiles: React.FC = () => { data: number ) => { e.preventDefault(); - randomList.ans.push(data); - // console.log(gameState); - // console.log(randomList); + if (ansState.pos < ansState.list.length) { + let curr = ansState.pos; + const currList = ansState.list.slice(); + currList[curr] = data; + curr += 1; + setAnswer({ + ...ansState, + list: currList, + pos: curr + }); + } + // console.log(data); + // console.log(ansState); }; const DisplayRandom: React.FC = () => { @@ -62,7 +70,9 @@ const Tiles: React.FC = () => { const src = gameState.list[val]; return (
- {ind.toString()} +
); })} @@ -70,8 +80,24 @@ const Tiles: React.FC = () => { ); }; + const Grey: React.FC = () => { + return ( +
+ grey-tile +
+ ); + }; + + // Add onclick to remove just the last tile const PlayArea: React.FC = () => { - return
Play Area!
; + return ( +
+ + + + +
+ ); }; const ImHeader: React.FC = () => { @@ -81,7 +107,7 @@ const Tiles: React.FC = () => { return (
+
+ ); + })}
); }; @@ -133,12 +153,96 @@ const Tiles: React.FC = () => { ); }; + const GameButtons: React.FC = () => { + const handleAnswer = ( + e: React.MouseEvent + ) => { + e.preventDefault(); + if (ansState.list.every(val => gameState.ans.includes(val))) { + addToast(`Nice work matching the patterns!`, { + appearance: 'success', + autoDismiss: true + }); + } else { + addToast(`Please check your answer and try again!`, { + appearance: 'error', + autoDismiss: true + }); + } + }; + + const handleReset = ( + e: React.MouseEvent + ) => { + e.preventDefault(); + addToast(`Game has been reset!`, { + appearance: 'warning', + autoDismiss: true + }); + // Reset game + setGameState({ + ...gameState, + list: TilesImage.TilesImageMap(), + ans: getFourRandomFromArray(TilesImage.TilesImageMap()) + }); + // Reset Display + setDisplay({ + ...randomList, + display: shuffleArray(gameState.ans) + }); + }; + + const handleClearAll = ( + e: React.MouseEvent + ) => { + e.preventDefault(); + setAnswer({ + ...ansState, + list: [-1, -1, -1, -1], + pos: 0 + }); + addToast(`Selections has been cleared`, { + appearance: 'warning', + autoDismiss: true + }); + }; + + return ( +
+ + + +
+ ); + }; + return ( -
- - - - +
+ + + + + + +
); }; From c9a9d0c3b518fca4e2156a9c715103e6b361ec00 Mon Sep 17 00:00:00 2001 From: namiwa Date: Fri, 28 Feb 2020 01:38:53 +0800 Subject: [PATCH 17/17] feat(associate): added background to associate game --- src/routes/associate/Associate.tsx | 2 -- src/routes/associate/Game/Game.tsx | 10 +++++++--- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/routes/associate/Associate.tsx b/src/routes/associate/Associate.tsx index 999cc89..8382603 100644 --- a/src/routes/associate/Associate.tsx +++ b/src/routes/associate/Associate.tsx @@ -7,8 +7,6 @@ import './Associate.scss'; export const Associate: React.FC = () => { return (
-
Associate
-
Choose the right item associated with the big picture!
diff --git a/src/routes/associate/Game/Game.tsx b/src/routes/associate/Game/Game.tsx index b1c1806..17682e2 100644 --- a/src/routes/associate/Game/Game.tsx +++ b/src/routes/associate/Game/Game.tsx @@ -135,9 +135,13 @@ export const Game: React.FC = () => { }; return ( -
- - +
+
+
Associate
+
Choose the right item associated with the big picture!
+ + +
); };