[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

@@ -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 (

src/pages/home/body-section.js

@@ -2,25 +2,52 @@
 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 (
       <AppLoader/>
     );
   }
   else {
     return (
       <React.Fragment>
-        <section className="customRow cardsContainer">{cardComponents}</section>
-        <RollButton/>
+        {
+          isComplete === true &&
+          <h1>Hurray!</h1>
+        }
+        <section className="customRow cardsContainer">
+          {
+            props.deckOfCards.map((cardObject, index) => {
+              const imageProps = {
+                src: cardObject.icon,
+                alt: cardObject.name,
+                title: cardObject.name
+              };
+
+              return (
+                <Card
+                  key={index}
+                  isLocked={cardObject.isLocked}
+                  cardId={cardObject.id}
+                  afterLockStateChange={() => {checkIfGameComplete(setIsComplete)}}
+                >
+                  <div className="image positionRelative">
+                    <AppImage {...imageProps}/>
+                  </div>
+                </Card>
+              );
+            })
+          }
+        </section>
+        <RollButton onDiceRoll={props.onDiceRoll}/>
       </React.Fragment>
     );
   }

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 (
     <React.Fragment>
       <main>
         <div className="borderBoxContainer">
           <Header/>
-          <BodySection/>
+          <BodySection
+            isLoading={isLoading}
+            deckOfCards={deckOfCards}
+            onDiceRoll={onDiceRoll}
+          />
         </div>
       </main>
     </React.Fragment>

src/pages/home/roll-button.js

@@ -4,15 +4,16 @@ 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();
 
   /* custom */
   useButtonOnLoaded(buttonRef, setIsDisabled);
 
   return (
-    <button disabled={isDisabled} ref={buttonRef} className="btn btn-primary btn-lg rollButton" type="button">
+    <button disabled={isDisabled} ref={buttonRef} className="btn btn-primary btn-lg rollButton" type="button"
+    onClick={props.onDiceRoll}>
       <span>Roll Dice</span>
     </button>
   );

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);
+  }
+};

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);
+  }
+};

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)
+  };
 };