feat(FE): add memory game

hapi/yarn.lock

@@ -1499,39 +1499,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eosioboilerplate@workspace:.":
-  version: 0.0.0-use.local
-  resolution: "eosioboilerplate@workspace:."
-  dependencies:
-    "@hapi/boom": ^9.0.0
-    "@hapi/hapi": ^19.1.1
-    axios: ^0.19.2
-    env-cmd: ^10.1.0
-    eosjs: ^20.0.3
-    eosjs-api: ^7.0.4
-    eslint: ^7.6.0
-    eslint-config-prettier: ^8.1.0
-    eslint-config-standard: ^16.0.2
-    eslint-plugin-import: ^2.22.1
-    eslint-plugin-node: ^11.1.0
-    eslint-plugin-prettier: ^3.3.1
-    eslint-plugin-promise: ^4.3.1
-    fsevents: 2.1.3
-    graphql-request: ^1.8.2
-    http-status-codes: ^1.4.0
-    husky: 4.3.8
-    joi: ^17.4.0
-    lint-staged: ^10.5.4
-    node-fetch: ^2.6.1
-    nodemon: ^2.0.4
-    prettier: ^2.2.1
-    standard: ^16.0.3
-  dependenciesMeta:
-    fsevents:
-      optional: true
-  languageName: unknown
-  linkType: soft
-
 "eosjs-api@npm:^7.0.4":
   version: 7.0.4
   resolution: "eosjs-api@npm:7.0.4"
@@ -2315,6 +2282,39 @@ fsevents@~2.3.1:
   languageName: node
   linkType: hard
 
+"ggoods@workspace:.":
+  version: 0.0.0-use.local
+  resolution: "ggoods@workspace:."
+  dependencies:
+    "@hapi/boom": ^9.0.0
+    "@hapi/hapi": ^19.1.1
+    axios: ^0.19.2
+    env-cmd: ^10.1.0
+    eosjs: ^20.0.3
+    eosjs-api: ^7.0.4
+    eslint: ^7.6.0
+    eslint-config-prettier: ^8.1.0
+    eslint-config-standard: ^16.0.2
+    eslint-plugin-import: ^2.22.1
+    eslint-plugin-node: ^11.1.0
+    eslint-plugin-prettier: ^3.3.1
+    eslint-plugin-promise: ^4.3.1
+    fsevents: 2.1.3
+    graphql-request: ^1.8.2
+    http-status-codes: ^1.4.0
+    husky: 4.3.8
+    joi: ^17.4.0
+    lint-staged: ^10.5.4
+    node-fetch: ^2.6.1
+    nodemon: ^2.0.4
+    prettier: ^2.2.1
+    standard: ^16.0.3
+  dependenciesMeta:
+    fsevents:
+      optional: true
+  languageName: unknown
+  linkType: soft
+
 "glob-parent@npm:^5.0.0, glob-parent@npm:~5.1.0":
   version: 5.1.2
   resolution: "glob-parent@npm:5.1.2"

webapp/package.json

@@ -45,10 +45,12 @@
     "history": "^5.0.0",
     "i18next": "^19.9.1",
     "i18next-browser-languagedetector": "^6.0.1",
+    "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}>
+          <span>{image}</span>
+        </div>
+      </ReactCardFlip>
+    </div>
+  )
+}
+
+Card.propTypes = {
+  image: PropTypes.any,
+  isCardCompared: PropTypes.array,
+  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,82 @@
+import React, { useState, useEffect } from 'react'
+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 = () => {
+  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())
+    setPairSelected([])
+    setPairCompared(false)
+    setAttempts(0)
+  }
+
+  useEffect(() => {
+    resetGame()
+  }, [])
+
+  return (
+    <div className={classes.app}>
+      <Header attempts={attempts} resetGame={resetGame} />
+      <Board deck={deck} pairSelected={pairSelected} selectCard={selectCard} />
+    </div>
+  )
+}
+
+export default Memory

webapp/src/games/Memory/styles.js

@@ -0,0 +1,44 @@
+export default () => ({
+  card: {
+    width: 125,
+    height: 125
+  },
+  cover: {
+    width: 125,
+    height: 125,
+    backgroundColor: '#ffb300'
+  },
+  content: {
+    width: 125,
+    height: 125,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgb(3, 220, 244)'
+  },
+  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'
+  }
+})