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/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/black_tile.svg b/src/assets/images/tiles/black_tile.svg new file mode 100644 index 0000000..7776542 --- /dev/null +++ b/src/assets/images/tiles/black_tile.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 diff --git a/src/assets/images/tiles/grey_tile.svg b/src/assets/images/tiles/grey_tile.svg new file mode 100644 index 0000000..7d04624 --- /dev/null +++ b/src/assets/images/tiles/grey_tile.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file 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 +
+
+ ); + })} + + ); + }; + + interface ImageProps { + value: string; + } + + const TileImage: React.FC = ({ value }) => { + return ( +
+ grey-tile +
+ ); + }; + + // Add onclick to remove just the last tile + const PlayArea: React.FC = () => { + return ( +
+ {ansState.list.map((val, index) => { + return ( +
+ +
+ ); + })} +
+ ); + }; + + const ImHeader: React.FC = () => { + return ( +
+ {randomList.display.map(val => { + return ( +
+ +
+ ); + })} +
+ ); + }; + + const HeaderTitle: React.FC = () => { + return ( +
+
+

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

+
+
+ ); + }; + + 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 ( +
+ + + + + + + +
+ ); +}; + +export default Tiles; diff --git a/src/routes/tiles/TilesImageMap.tsx b/src/routes/tiles/TilesImageMap.tsx new file mode 100644 index 0000000..76d55b2 --- /dev/null +++ b/src/routes/tiles/TilesImageMap.tsx @@ -0,0 +1,22 @@ +import BLACK_BLUE_BTM_LEFT from 'assets/images/tiles/black_blue_btm_left.svg'; +import BLACK_BLUE_BTM_RIGHT from 'assets/images/tiles/black_blue_btm_right.svg'; +import BLACK_BLUE_TOP_LEFT from 'assets/images/tiles/black_blue_top_left.svg'; +import BLACK_BLUE_TOP_RIGHT from 'assets/images/tiles/black_blue_top_right.svg'; +import BLUE_TILE from 'assets/images/tiles/blue_tile.svg'; +import BLACK_TILE from 'assets/images/tiles/black_tile.svg'; +import GREY_TILE from 'assets/images/tiles/grey_tile.svg'; + +const TilesImageList = [ + BLACK_BLUE_BTM_LEFT, + BLACK_BLUE_BTM_RIGHT, + BLACK_BLUE_TOP_LEFT, + BLACK_BLUE_TOP_RIGHT, + BLUE_TILE, + BLACK_TILE +]; + +export const TilesImageMap = () => { + return TilesImageList; +}; + +export default { TilesImageMap, GREY_TILE }; 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'; 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!' + ); +});