feat(FE): add custom image to memory options

webapp/src/games/Memory/Card.js

@@ -18,7 +18,7 @@ const Card = ({ image, isCardCompared, selectCard, guessedRight }) => {
       >
         <div className={classes.cover}></div>
         <div className={classes.content}>
-          <span>{image}</span>
+          <img src={image} alt="memory-img" />
         </div>
       </ReactCardFlip>
     </div>
@@ -27,7 +27,7 @@ const Card = ({ image, isCardCompared, selectCard, guessedRight }) => {
 
 Card.propTypes = {
   image: PropTypes.any,
-  isCardCompared: PropTypes.array,
+  isCardCompared: PropTypes.bool,
   selectCard: PropTypes.func,
   guessedRight: PropTypes.bool
 }

webapp/src/games/Memory/index.js

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react'
+import PropTypes from 'prop-types'
 import { makeStyles } from '@material-ui/styles'
 
 import { buildDeck } from '../../utils'
@@ -9,7 +10,7 @@ import styles from './styles'
 
 const useStyles = makeStyles(styles)
 
-const Memory = () => {
+const Memory = ({ customOptions = [] }) => {
   const classes = useStyles()
   const [deck, setDeck] = useState()
   const [pairSelected, setPairSelected] = useState()
@@ -61,7 +62,7 @@ const Memory = () => {
   }
 
   const resetGame = () => {
-    setDeck(buildDeck())
+    setDeck(buildDeck(customOptions))
     setPairSelected([])
     setPairCompared(false)
     setAttempts(0)
@@ -71,6 +72,8 @@ const Memory = () => {
     resetGame()
   }, [])
 
+  // console.log({ deck })
+
   return (
     <div className={classes.app}>
       <Header attempts={attempts} resetGame={resetGame} />
@@ -79,4 +82,8 @@ const Memory = () => {
   )
 }
 
+Memory.propTypes = {
+  customOptions: PropTypes.array
+}
+
 export default Memory

webapp/src/games/Memory/styles.js

@@ -6,15 +6,19 @@ export default () => ({
   cover: {
     width: 125,
     height: 125,
-    backgroundColor: '#ffb300'
+    backgroundColor: '#a5a1a4'
   },
   content: {
     width: 125,
     height: 125,
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: 'rgb(3, 220, 244)'
+    backgroundColor: 'rgb(3, 220, 244)',
+    '& img': {
+      width: 125,
+      height: 125
+    }
   },
   header: {
     height: 50,

webapp/src/images/templates/templatelist.js

@@ -14,6 +14,10 @@ import bgs3 from './bgs/3.png'
 import bgs4 from './bgs/4.png'
 import bgs5 from './bgs/5.png'
 import bgs6 from './bgs/6.png'
+import bgs7 from './bgs/7.png'
+import bgs8 from './bgs/8.png'
+import bgs9 from './bgs/9.png'
+import bgs10 from './bgs/10.png'
 
 import deco1 from './deco/1.png'
 import deco2 from './deco/2.png'
@@ -25,7 +29,7 @@ import mouth4 from './mouth/4.png'
 
 const baselist = [base1, base2, base3, base4]
 const eyeslist = [eyes1, eyes2, eyes3, eyes4]
-const bglist = [bgs1, bgs2, bgs3, bgs4, bgs5, bgs6]
+const bglist = [bgs1, bgs2, bgs3, bgs4, bgs5, bgs6, bgs7, bgs8, bgs9, bgs10]
 const decolist = [deco1, deco2]
 const mouthlist = [mouth1, mouth2, mouth3, mouth4]
 

webapp/src/routes/CreateTemplate/index.js

@@ -17,6 +17,7 @@ import { CREATE_TEMPLATE_MUTATION } from '../../gql'
 import { useSharedState } from '../../context/state.context'
 import AvatarMaker from '../../components/AvatarMaker'
 import Memory from '../../games/Memory'
+import { baselist } from '../../images/templates/templatelist'
 
 import styles from './styles'
 
@@ -86,7 +87,7 @@ const CreateTemplate = () => {
 
   const handleSubmit = async () => {
     const dataUrl = canvas.toDataURL({ format: 'png' })
-    
+
     try {
       const { data } = await createTemplate({
         variables: {
@@ -226,7 +227,7 @@ const CreateTemplate = () => {
           </Button>
         </Box>
       </form>
-      <Memory />
+      <Memory customOptions={baselist} />
     </>
   )
 }

webapp/src/utils/buildDeck.js

@@ -1,22 +1,19 @@
 import shuffle from 'lodash.shuffle'
 
+import { bglist } from '../images/templates/templatelist'
+
 const MAX_CARDS_NUMBER = 20
 
-export const buildDeck = () => {
-  const data = [
-    'Banana',
-    'Orange',
-    'Apple',
-    'Mango',
-    'Papaya',
-    'Melon',
-    'Pepino',
-    'kiwi',
-    'platano',
-    'banano'
-  ]
+export const buildDeck = options => {
+  let data = []
   const cards = []
 
+  if (options.length && options.length < 10) {
+    const splitedData = bglist.slice(0, 10 - options.length)
+
+    data = [...options, ...splitedData]
+  }
+
   while (cards.length < MAX_CARDS_NUMBER) {
     const index = Math.floor(Math.random() * data.length)
     const card = {