Memory game

webapp/package.json

@@ -46,10 +46,12 @@
     "i18next": "^19.9.1",
     "i18next-browser-languagedetector": "^6.0.1",
     "ipfs-http-client": "^49.0.4",
+    "lodash.shuffle": "^4.2.0",
     "material-ui-dropzone": "^3.5.0",
     "polished": "^4.1.1",
     "prop-types": "^15.7.2",
     "react": "~17.0.1",
+    "react-card-flip": "^1.1.0",
     "react-color": "^2.19.3",
     "react-dom": "~17.0.1",
     "react-feather": "^2.0.9",

webapp/src/components/AvatarMaker/FabricCanvas.js

@@ -32,17 +32,16 @@ const FabricCanvas = ({ activeProperty, onGetDataUrl }) => {
       if (next.the_type === 'bg') {
         canvas.setBackgroundImage(next)
         canvas.renderAll()
+        onGetDataUrl(canvas)
+
         return
       }
 
       canvas.add(next)
       canvas.moveTo(next, next.zIndex)
-    }
-  }
 
-  const getDataUrlCanvas = () => {
-    // TODO: move all this component logic and return dataUrl
-    // const dataUrl = canvas.toDataURL({ format: 'png' })
+      onGetDataUrl(canvas)
+    }
   }
 
   const initCanvas = isMobile =>
@@ -71,9 +70,7 @@ const FabricCanvas = ({ activeProperty, onGetDataUrl }) => {
             placeholder="Name your animal"
             className={classes.textField}
           />
-          <Button className={classes.btnPublish} onClick={getDataUrlCanvas}>
-            PUBLISH
-          </Button>
+          <Button className={classes.btnPublish}>PUBLISH</Button>
         </Box>
       </Box>
     </Box>

webapp/src/games/Memory/Board.js

@@ -0,0 +1,39 @@
+import React from 'react'
+import { makeStyles } from '@material-ui/styles'
+import PropTypes from 'prop-types'
+
+import Card from './Card'
+
+import styles from './styles'
+
+const useStyles = makeStyles(styles)
+
+const Board = ({ deck, pairSelected, selectCard }) => {
+  const classes = useStyles()
+
+  return (
+    <div className={classes.board}>
+      {(deck || []).map((card, index) => {
+        const isCardCompared = pairSelected.indexOf(card) > -1
+
+        return (
+          <Card
+            key={index}
+            image={card.image}
+            isCardCompared={isCardCompared}
+            selectCard={() => selectCard(card)}
+            guessedRight={card.guessedRight}
+          />
+        )
+      })}
+    </div>
+  )
+}
+
+Board.propTypes = {
+  deck: PropTypes.array,
+  pairSelected: PropTypes.array,
+  selectCard: PropTypes.func
+}
+
+export default Board

webapp/src/games/Memory/Card.js

@@ -0,0 +1,35 @@
+import React from 'react'
+import { makeStyles } from '@material-ui/styles'
+import PropTypes from 'prop-types'
+import ReactCardFlip from 'react-card-flip'
+
+import styles from './styles'
+
+const useStyles = makeStyles(styles)
+
+const Card = ({ image, isCardCompared, selectCard, guessedRight }) => {
+  const classes = useStyles()
+
+  return (
+    <div className={classes.card} onClick={selectCard}>
+      <ReactCardFlip
+        isFlipped={isCardCompared || guessedRight}
+        flipDirection="vertical"
+      >
+        <div className={classes.cover}></div>
+        <div className={classes.content}>
+          <img src={image} alt="memory-img" />
+        </div>
+      </ReactCardFlip>
+    </div>
+  )
+}
+
+Card.propTypes = {
+  image: PropTypes.any,
+  isCardCompared: PropTypes.bool,
+  selectCard: PropTypes.func,
+  guessedRight: PropTypes.bool
+}
+
+export default Card

webapp/src/games/Memory/Header.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { makeStyles } from '@material-ui/styles'
+
+import styles from './styles'
+
+const useStyles = makeStyles(styles)
+
+const Header = ({ attempts, resetGame }) => {
+  const classes = useStyles()
+
+  return (
+    <header>
+      <div className={classes.title}>React-Memory</div>
+      <div>
+        <button className={classes.resetBtn} onClick={resetGame}>
+          reset
+        </button>
+      </div>
+      <div className={classes.title}>Attempts: {attempts}</div>
+    </header>
+  )
+}
+
+Header.propTypes = {
+  attempts: PropTypes.number,
+  resetGame: PropTypes.func
+}
+
+export default Header

webapp/src/games/Memory/index.js

@@ -0,0 +1,89 @@
+import React, { useState, useEffect } from 'react'
+import PropTypes from 'prop-types'
+import { makeStyles } from '@material-ui/styles'
+
+import { buildDeck } from '../../utils'
+
+import Header from './Header'
+import Board from './Board'
+import styles from './styles'
+
+const useStyles = makeStyles(styles)
+
+const Memory = ({ customOptions = [] }) => {
+  const classes = useStyles()
+  const [deck, setDeck] = useState()
+  const [pairSelected, setPairSelected] = useState()
+  const [pairCompared, setPairCompared] = useState()
+  const [attempts, setAttempts] = useState()
+
+  const selectCard = card => {
+    if (pairCompared || pairSelected.indexOf(card) > -1 || card.guessedRight) {
+      return
+    }
+
+    const newPairSelected = [...pairSelected, card]
+
+    setPairSelected(newPairSelected)
+
+    if (newPairSelected.length === 2) {
+      comparePair(newPairSelected)
+    }
+  }
+
+  const comparePair = pair => {
+    setPairCompared(true)
+
+    setTimeout(() => {
+      const [firstCard, secondCard] = pair
+      let newDeck = deck
+
+      if (firstCard.image === secondCard.image) {
+        newDeck = newDeck.map(card => {
+          if (card.image !== firstCard.image) return card
+
+          return { ...card, guessedRight: true }
+        })
+      }
+
+      verifyGame(deck)
+
+      setDeck(newDeck)
+      setPairSelected([])
+      setPairCompared(false)
+      setAttempts(attempts + 1)
+    }, 1000)
+  }
+
+  const verifyGame = deck => {
+    if (deck.filter(card => !card.guessedRight).length === 0) {
+      console.log(`Win with ${attempts} attempts!`)
+    }
+  }
+
+  const resetGame = () => {
+    setDeck(buildDeck(customOptions))
+    setPairSelected([])
+    setPairCompared(false)
+    setAttempts(0)
+  }
+
+  useEffect(() => {
+    resetGame()
+  }, [])
+
+  // console.log({ deck })
+
+  return (
+    <div className={classes.app}>
+      <Header attempts={attempts} resetGame={resetGame} />
+      <Board deck={deck} pairSelected={pairSelected} selectCard={selectCard} />
+    </div>
+  )
+}
+
+Memory.propTypes = {
+  customOptions: PropTypes.array
+}
+
+export default Memory

webapp/src/games/Memory/styles.js

@@ -0,0 +1,48 @@
+export default () => ({
+  card: {
+    width: 125,
+    height: 125
+  },
+  cover: {
+    width: 125,
+    height: 125,
+    backgroundColor: '#a5a1a4'
+  },
+  content: {
+    width: 125,
+    height: 125,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgb(3, 220, 244)',
+    '& img': {
+      width: 125,
+      height: 125
+    }
+  },
+  header: {
+    height: 50,
+    border: '1px solid black',
+    marginBottom: 10,
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignContent: 'center'
+  },
+  title: {
+    fontSize: 25,
+    padding: 10,
+    color: '#00'
+  },
+  resetBtn: {
+    left: 12,
+    top: 58
+  },
+  board: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    width: 700,
+    height: 600,
+    margin: '0 auto',
+    justifyContent: 'space-around'
+  }
+})

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]