From 22f7a166f2ec0fef5ee4a30b0e4a9f6623a66598 Mon Sep 17 00:00:00 2001 From: sricharankrishnan Date: Tue, 15 Nov 2022 16:47:28 +0530 Subject: [PATCH] [Build] Cards and Roll Button 1. Re-organised the flow of logic from parent to child comopnents 2. Correction done for the complete state to show success or hide 3. Created the roll dice logic/effect to get new cards for display update --- src/components/cards/component.js | 2 + src/pages/home/body-section.js | 45 +++++++++++++++---- src/pages/home/component.js | 12 ++++- src/pages/home/roll-button.js | 5 ++- .../home/service/build-card-components.js | 35 --------------- src/pages/home/service/check-if-complete.js | 15 +++++++ .../home/service/generate-deck-on-roll.js | 40 +++++++++++++++++ src/pages/home/service/use-cards-hook.js | 7 ++- 8 files changed, 113 insertions(+), 48 deletions(-) delete mode 100644 src/pages/home/service/build-card-components.js create mode 100644 src/pages/home/service/check-if-complete.js create mode 100644 src/pages/home/service/generate-deck-on-roll.js diff --git a/src/components/cards/component.js b/src/components/cards/component.js index 4c91186..abc6450 100644 --- a/src/components/cards/component.js +++ b/src/components/cards/component.js @@ -9,6 +9,7 @@ import { setCardAsUnlocked } from "./service/set-card-as-unlocked.js"; export const Card = (props) => { let [isLocked, setIsLocked] = useState(props.isLocked); + let [hasUpdated, setHasUpdated] = useState(false); const onClickHandler = () => { setIsLocked((prevState) => !prevState); @@ -22,6 +23,7 @@ export const Card = (props) => { else { setCardAsUnlocked(props.cardId); } + props.afterLockStateChange(); }, [isLocked]); return ( diff --git a/src/pages/home/body-section.js b/src/pages/home/body-section.js index 435722d..af185ea 100644 --- a/src/pages/home/body-section.js +++ b/src/pages/home/body-section.js @@ -2,16 +2,16 @@ import React, { useState } from "react"; /* app imports */ -import RollButton from "./roll-button.js"; import {AppLoader} from "@components/app-loader/component.js"; -import {useCardsHook} from "./service/use-cards-hook.js"; -import buildCardComponents from "./service/build-card-components.js"; +import {checkIfGameComplete} from "./service/check-if-complete.js"; +import {Card} from "@components/cards/component.js"; +import {AppImage} from "@components/app-image/component.js"; +import RollButton from "./roll-button.js"; -export default function BodySection() { - let {isLoading, setIsLoading, deckOfCards} = useCardsHook(); - const cardComponents = buildCardComponents(deckOfCards); +export default function BodySection(props) { + let [isComplete, setIsComplete] = useState(false); - if (isLoading) { + if (props.isLoading) { return ( ); @@ -19,8 +19,35 @@ export default function BodySection() { else { return ( -
{cardComponents}
- + { + isComplete === true && +

Hurray!

+ } +
+ { + props.deckOfCards.map((cardObject, index) => { + const imageProps = { + src: cardObject.icon, + alt: cardObject.name, + title: cardObject.name + }; + + return ( + {checkIfGameComplete(setIsComplete)}} + > +
+ +
+ + ); + }) + } +
+ ); } diff --git a/src/pages/home/component.js b/src/pages/home/component.js index 9ed2331..ea8a497 100644 --- a/src/pages/home/component.js +++ b/src/pages/home/component.js @@ -5,14 +5,24 @@ import React from "react"; import "./styles.scss"; import Header from "./header.js"; import BodySection from "./body-section.js"; +import RollButton from "./roll-button.js"; +import {useCardsHook} from "./service/use-cards-hook.js"; export const RootPage = () => { + let { + isLoading, deckOfCards, onDiceRoll + } = useCardsHook(); + return (
- +
diff --git a/src/pages/home/roll-button.js b/src/pages/home/roll-button.js index e86a2dd..92ab303 100644 --- a/src/pages/home/roll-button.js +++ b/src/pages/home/roll-button.js @@ -4,7 +4,7 @@ import React, { useRef, useState } from "react"; /* app imports */ import useButtonOnLoaded from "./service/use-button-on-loaded.js"; -export default function RollButton() { +export default function RollButton(props) { const [isDisabled, setIsDisabled] = useState(false); const buttonRef = useRef(); @@ -12,7 +12,8 @@ export default function RollButton() { useButtonOnLoaded(buttonRef, setIsDisabled); return ( - ); diff --git a/src/pages/home/service/build-card-components.js b/src/pages/home/service/build-card-components.js deleted file mode 100644 index 116afb2..0000000 --- a/src/pages/home/service/build-card-components.js +++ /dev/null @@ -1,35 +0,0 @@ -/* react imports */ -import React from "react"; - -/* app imports */ -import {Card} from "@components/cards/component.js"; -import {AppImage} from "@components/app-image/component.js"; - -export default function buildCardComponents(arrayOfCards) { - let data = arrayOfCards.splice(0); - - /* build and return */ - return data.reduce((composed, cardObject, index) => { - const imageProps = { - src: cardObject.icon, - alt: cardObject.name, - title: cardObject.name - }; - - /* create */ - const item = ( - -
- -
- - ); - - composed.push(item); - return composed; - }, []); -} diff --git a/src/pages/home/service/check-if-complete.js b/src/pages/home/service/check-if-complete.js new file mode 100644 index 0000000..856b058 --- /dev/null +++ b/src/pages/home/service/check-if-complete.js @@ -0,0 +1,15 @@ +export const checkIfGameComplete = (setIsGameComplete) => { + /* get, iterate and check */ + const currentSelection = JSON.parse(window.localStorage.getItem("tenzies_deck")); + const allSetAsLocked = currentSelection.every((card) => { + return card.isLocked === true; + }); + + /* set state */ + if (allSetAsLocked) { + setIsGameComplete(true); + } + else { + setIsGameComplete(false); + } +}; diff --git a/src/pages/home/service/generate-deck-on-roll.js b/src/pages/home/service/generate-deck-on-roll.js new file mode 100644 index 0000000..9bc6161 --- /dev/null +++ b/src/pages/home/service/generate-deck-on-roll.js @@ -0,0 +1,40 @@ +/* npm imports */ +import uuid from "react-uuid"; + +/* app imports */ +import { generateRandomNumbers } from "./generate-random-numbers.js"; +import { getCardMap } from "./card-map.js"; + +export default function generateDeckOnRoll(setDeckOfCards, setIsLoading) { + const cardMap = getCardMap(); + + return () => { + setIsLoading(true); + const currentDeck = JSON.parse(window.localStorage.getItem("tenzies_deck")); + const updatedDeck = currentDeck.reduce((composed, cardObject) => { + let card = null; + + if (cardObject.isLocked) { + card = Object.assign({}, cardObject); + } + else { + let key = String(generateRandomNumbers(1, 13)); + card = { + id: uuid(), + isLocked: false, + name: cardMap[key].name, + icon: cardMap[key].src + }; + } + + composed.push(card); + return composed; + }, []); + + setTimeout(() => { + setIsLoading(false); + setDeckOfCards(updatedDeck); + window.localStorage.setItem("tenzies_deck", JSON.stringify(updatedDeck)); + }, 2000); + } +}; diff --git a/src/pages/home/service/use-cards-hook.js b/src/pages/home/service/use-cards-hook.js index b1d94d3..2f0639b 100644 --- a/src/pages/home/service/use-cards-hook.js +++ b/src/pages/home/service/use-cards-hook.js @@ -3,6 +3,7 @@ import React, { useState, useEffect } from "react"; /* app imports */ import generateFreshDeck from "./generate-fresh-deck.js"; +import generateDeckOnRoll from "./generate-deck-on-roll.js"; export const useCardsHook = () => { let [isLoading, setIsLoading] = useState(true); @@ -16,5 +17,9 @@ export const useCardsHook = () => { }, 2000); }, []); - return {isLoading, setIsLoading, deckOfCards}; + return { + isLoading, + deckOfCards, + onDiceRoll: generateDeckOnRoll(setDeckOfCards, setIsLoading) + }; };