test/ventresque-elodie

.eslintcache

@@ -1 +1 @@
-[{"/Users/florian/Sites/optisantis/test-react/src/App.js":"1"},{"size":77,"mtime":1606586175003,"results":"2","hashOfConfig":"3"},{"filePath":"4","messages":"5","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"3yiv2j","/Users/florian/Sites/optisantis/test-react/src/App.js",[]]
+[{"C:\\Users\\elodi\\Documents\\DEV\\test-react\\src\\index.js":"1","C:\\Users\\elodi\\Documents\\DEV\\test-react\\src\\App.js":"2","C:\\Users\\elodi\\Documents\\DEV\\test-react\\src\\features\\Game\\index.js":"3","C:\\Users\\elodi\\Documents\\DEV\\test-react\\src\\features\\Game\\styles.js":"4","C:\\Users\\elodi\\Documents\\DEV\\test-react\\src\\helpers\\fruitsList.js":"5","C:\\Users\\elodi\\Documents\\DEV\\test-react\\src\\core\\Ui\\ImageCard\\index.js":"6","C:\\Users\\elodi\\Documents\\DEV\\test-react\\src\\core\\Ui\\ImageCard\\styles.js":"7","C:\\Users\\elodi\\Documents\\DEV\\test-react\\src\\core\\Ui\\Title\\index.js":"8","C:\\Users\\elodi\\Documents\\DEV\\test-react\\src\\core\\Ui\\MainButton\\index.js":"9","C:\\Users\\elodi\\Documents\\DEV\\test-react\\src\\core\\Ui\\MainButton\\styles.js":"10","C:\\Users\\elodi\\Documents\\DEV\\test-react\\src\\features\\Game\\Attempts\\index.js":"11","C:\\Users\\elodi\\Documents\\DEV\\test-react\\src\\features\\Game\\Attempts\\styles.js":"12","C:\\Users\\elodi\\Documents\\DEV\\test-react\\src\\features\\Game\\Timer\\index.js":"13","C:\\Users\\elodi\\Documents\\DEV\\test-react\\src\\features\\Game\\Timer\\styles.js":"14","C:\\Users\\elodi\\Documents\\DEV\\test-react\\src\\core\\Ui\\MainText\\index.js":"15","C:\\Users\\elodi\\Documents\\DEV\\test-react\\src\\core\\Ui\\MainText\\styles.js":"16"},{"size":230,"mtime":1687812802661,"results":"17","hashOfConfig":"18"},{"size":110,"mtime":1687828101304,"results":"19","hashOfConfig":"18"},{"size":3426,"mtime":1687900612426,"results":"20","hashOfConfig":"18"},{"size":506,"mtime":1687828101618,"results":"21","hashOfConfig":"18"},{"size":1233,"mtime":1687871132630,"results":"22","hashOfConfig":"18"},{"size":377,"mtime":1687886773664,"results":"23","hashOfConfig":"18"},{"size":339,"mtime":1687891833790,"results":"24","hashOfConfig":"18"},{"size":104,"mtime":1687828101612,"results":"25","hashOfConfig":"18"},{"size":223,"mtime":1687886928732,"results":"26","hashOfConfig":"18"},{"size":259,"mtime":1687828101611,"results":"27","hashOfConfig":"18"},{"size":325,"mtime":1687829184935,"results":"28","hashOfConfig":"18"},{"size":126,"mtime":1687828101616,"results":"29","hashOfConfig":"18"},{"size":281,"mtime":1687829168627,"results":"30","hashOfConfig":"18"},{"size":125,"mtime":1687828101617,"results":"31","hashOfConfig":"18"},{"size":151,"mtime":1687828101607,"results":"32","hashOfConfig":"18"},{"size":115,"mtime":1687828101607,"results":"33","hashOfConfig":"18"},{"filePath":"34","messages":"35","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"36"},"1i1sawy",{"filePath":"37","messages":"38","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"36"},{"filePath":"39","messages":"40","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"41","messages":"42","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"36"},{"filePath":"43","messages":"44","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"36"},{"filePath":"45","messages":"46","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"47","messages":"48","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"49","messages":"50","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"36"},{"filePath":"51","messages":"52","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"53","messages":"54","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"36"},{"filePath":"55","messages":"56","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"36"},{"filePath":"57","messages":"58","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"36"},{"filePath":"59","messages":"60","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"36"},{"filePath":"61","messages":"62","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"36"},{"filePath":"63","messages":"64","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"36"},{"filePath":"65","messages":"66","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"36"},"C:\\Users\\elodi\\Documents\\DEV\\test-react\\src\\index.js",[],["67","68"],"C:\\Users\\elodi\\Documents\\DEV\\test-react\\src\\App.js",[],"C:\\Users\\elodi\\Documents\\DEV\\test-react\\src\\features\\Game\\index.js",[],"C:\\Users\\elodi\\Documents\\DEV\\test-react\\src\\features\\Game\\styles.js",[],"C:\\Users\\elodi\\Documents\\DEV\\test-react\\src\\helpers\\fruitsList.js",[],"C:\\Users\\elodi\\Documents\\DEV\\test-react\\src\\core\\Ui\\ImageCard\\index.js",[],"C:\\Users\\elodi\\Documents\\DEV\\test-react\\src\\core\\Ui\\ImageCard\\styles.js",[],"C:\\Users\\elodi\\Documents\\DEV\\test-react\\src\\core\\Ui\\Title\\index.js",[],"C:\\Users\\elodi\\Documents\\DEV\\test-react\\src\\core\\Ui\\MainButton\\index.js",[],"C:\\Users\\elodi\\Documents\\DEV\\test-react\\src\\core\\Ui\\MainButton\\styles.js",[],"C:\\Users\\elodi\\Documents\\DEV\\test-react\\src\\features\\Game\\Attempts\\index.js",[],"C:\\Users\\elodi\\Documents\\DEV\\test-react\\src\\features\\Game\\Attempts\\styles.js",[],"C:\\Users\\elodi\\Documents\\DEV\\test-react\\src\\features\\Game\\Timer\\index.js",[],"C:\\Users\\elodi\\Documents\\DEV\\test-react\\src\\features\\Game\\Timer\\styles.js",[],"C:\\Users\\elodi\\Documents\\DEV\\test-react\\src\\core\\Ui\\MainText\\index.js",[],"C:\\Users\\elodi\\Documents\\DEV\\test-react\\src\\core\\Ui\\MainText\\styles.js",[],{"ruleId":"69","replacedBy":"70"},{"ruleId":"71","replacedBy":"72"},"no-native-reassign",["73"],"no-negated-in-lhs",["74"],"no-global-assign","no-unsafe-negation"]

package.json

@@ -9,11 +9,12 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-scripts": "4.0.1",
+    "styled-components": "^6.0.0-rc.6",
     "web-vitals": "^0.2.4"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "start": "react-scripts --openssl-legacy-provider start",
+    "build": "react-scripts --openssl-legacy-provider build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
@@ -34,5 +35,12 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "prettier": "2.8.8"
+  },
+  "lint-staged": {
+    "**/*.js": "eslint --cache --fix",
+    "**/*.{json,md}": "prettier --write"
   }
 }

src/App.js

@@ -1,3 +1,5 @@
+import Game from "./features/Game";
+
 export default function Memory() {
-  return <main>Votre Memory ici</main>;
+  return <main><Game /></main>
 }

src/core/Ui/ImageCard/index.js

@@ -0,0 +1,18 @@
+import React from "react"
+
+import { Image, FruitCard } from "./styles"
+
+const ImageCard = ({
+  card, 
+  handleChoice, 
+  isFlipped, 
+}) => {
+
+  return (
+    <FruitCard onClick={() => handleChoice(card)} disabled={card.status === 'found'}>
+      <Image src={card.image} alt={card.type} isFlipped={isFlipped} />
+    </FruitCard>
+  )
+}
+
+export default ImageCard

src/core/Ui/ImageCard/styles.js

@@ -0,0 +1,17 @@
+import styled from 'styled-components'
+
+export const Image = styled.img`
+    width: 100%;
+    ${props => !props.isFlipped && 'opacity: 0'};
+`
+
+export const FruitCard = styled.button`
+    width: 100%;
+    background-color: white;
+    border-radius: 5px;
+    border: none;
+
+    &: disabled {
+        opacity: 0.3;
+    }
+`

src/core/Ui/MainButton/index.js

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import { Button } from './styles'
+
+
+const MainButton = ({ text, action }) => {
+
+  return (
+    <Button onClick={action}>
+      {text}
+    </Button>
+  )
+}
+
+export default MainButton

src/core/Ui/MainButton/styles.js

@@ -0,0 +1,11 @@
+import styled from 'styled-components'
+
+export const Button = styled.button`
+    background-color: rgb(9, 211, 172);
+    border: none;
+    padding: 10px 15px;
+    text-decoration: none;
+    font-size: 15px;
+    border-radius: 3px;
+    margin: 1em;
+`

src/core/Ui/MainText/index.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+import { Text } from './styles'
+
+const MainText = ({ children }) => <Text>{children}</Text>
+
+export default MainText

src/core/Ui/MainText/styles.js

@@ -0,0 +1,6 @@
+import styled from 'styled-components'
+
+export const Text = styled.p`
+    font-size: 13px;
+    color: white;
+`

src/core/Ui/Title/index.js

@@ -0,0 +1,5 @@
+import React from 'react'
+
+const Title = ({ children }) => <p>{children}</p>
+
+export default Title

src/features/Game/Attempts/index.js

@@ -0,0 +1,17 @@
+import React from 'react'
+
+import MainText from '../../../core/Ui/MainText'
+
+import { Count } from './styles'
+
+const Attempts = ({ numberOfAttempts }) => {
+
+  return (
+    <div>
+      <MainText>{'Nombres de coups'}</MainText>
+      <Count>{numberOfAttempts}</Count>
+    </div>
+  )
+}
+
+export default Attempts

src/features/Game/Attempts/styles.js

@@ -0,0 +1,6 @@
+import styled from 'styled-components'
+
+export const Count = styled.p`
+    font-size: 24px;
+    font-family: monospace;
+`

src/features/Game/Timer/index.js

@@ -0,0 +1,17 @@
+import React from 'react'
+
+import MainText from '../../../core/Ui/MainText'
+
+import { Time } from './styles'
+
+const Timer = ({ time }) => {
+
+  return (
+    <div>
+      <MainText>{'Temps'}</MainText>
+      <Time>{time}</Time>
+    </div>
+  )
+}
+
+export default Timer

src/features/Game/Timer/styles.js

@@ -0,0 +1,6 @@
+import styled from 'styled-components'
+
+export const Time = styled.p`
+    font-size: 24px;
+    font-family: monospace;
+`

src/features/Game/index.js

@@ -0,0 +1,134 @@
+import React, { useEffect, useMemo, useState } from 'react'
+
+import ImageCard from '../../core/Ui/ImageCard'
+import Title from '../../core/Ui/Title'
+import MainButton from '../../core/Ui/MainButton'
+
+import Attempts from './Attempts'
+import Timer from './Timer'
+
+import fruitsList from '../../helpers/fruitsList'
+
+import { GridWrapper, HeaderWrapper, MainWrapper } from './styles'
+
+const Game = () => {
+  const [numberOfAttempts, setNumberOfAttempts] = useState(0)
+  const [choiceOne, setChoiceOne] = useState(null)
+  const [choiceTwo, setChoiceTwo] = useState(null)
+  const [game, setGame] = useState([])
+  const [gameStatus, setGameStatus] = useState('new')
+  const [timer, setTimer] = useState(0)
+
+  const isFinished = useMemo(() => game.filter((card) => card.status === 'idle').length === 0, [game])
+
+  const formattedTimer = useMemo(() => {
+    const date = new Date(null)
+    date.setSeconds(timer)
+    return date.toISOString().slice(14, 19)
+  }, [timer])
+
+  const handleShuffleCards = () => {
+    const shuffledFruits = [...fruitsList, ...fruitsList]
+      .sort(() => Math.random() - 0.5)
+      .map((card) => ({ ...card, id: Math.random() }))
+
+    setGame(shuffledFruits)
+  }
+
+  const handleChoiceACard = (card) => {
+    setGameStatus('running')
+
+    if (choiceOne && choiceTwo) {
+      setChoiceOne(null)
+      setChoiceTwo(null)
+    }
+
+    if (choiceOne && !choiceTwo) {
+      setChoiceTwo(card)
+    } else {
+      setChoiceOne(card)
+    }
+  }
+
+  const handleResetTurn = () => {
+    setChoiceOne(null)
+    setChoiceTwo(null)
+  }
+
+  const handleResetGame = () => {
+    setGameStatus('new')
+    setTimer(0)
+    handleShuffleCards()
+    setNumberOfAttempts(0)
+    setChoiceOne(null)
+    setChoiceTwo(null)
+  }
+
+  useEffect(() => {
+    handleShuffleCards()
+  }, [])
+
+  useEffect(() => {
+    if (choiceOne && choiceTwo) {
+      if (choiceOne.type === choiceTwo.type) {
+        setGame((prevCards) => {
+          return prevCards.map((card) => {
+            if (card.type === choiceOne.type) {
+              return { ...card, status: 'found' }
+            } else {
+              return card
+            }
+          })
+        })
+
+        handleResetTurn()
+      }
+
+      setNumberOfAttempts((prevTurns) => prevTurns + 1)
+    }
+  }, [choiceOne, choiceTwo])
+
+  useEffect(() => {
+    if (gameStatus === 'running') {
+      const interval = setInterval(() => {
+        setTimer((prevTimer) => prevTimer + 1)
+      }, 1000)
+
+      if (isFinished) {
+        clearInterval(interval)
+      }
+
+      return () => clearInterval(interval)
+    }
+  }, [gameStatus, isFinished])
+
+  const handleRandomCards = () => {
+    return game.map(card => 
+      <ImageCard
+        card={card}
+        key={card.id}
+        handleChoice={handleChoiceACard}
+        isFlipped={card === choiceOne || card === choiceTwo || card.status === 'found'}
+      />
+    )
+  }
+
+  return (
+    <MainWrapper>
+      <HeaderWrapper>
+        <Timer time={formattedTimer}/>
+        <Attempts numberOfAttempts={numberOfAttempts}/>
+      </HeaderWrapper>
+      <Title>{'Cliquez sur une carte pour commencer'}</Title> 
+      <GridWrapper>
+        {handleRandomCards()}
+      </GridWrapper>
+      <MainButton 
+        text={'Réinitialiser'}
+        action={handleResetGame}
+      />
+    </MainWrapper>
+  )
+}
+
+export default Game

src/features/Game/styles.js

@@ -0,0 +1,21 @@
+import styled from 'styled-components'
+
+export const GridWrapper = styled.div`
+    display: grid;
+    width: 95vw;
+    grid-template-columns: repeat(4, 1fr);
+    column-gap: 0.75em;
+    row-gap: 0.75em;
+`
+export const HeaderWrapper = styled.div`
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+`
+export const MainWrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+    height: 90vh;
+    justify-content: space-between;
+    align-items: center;
+`

src/helpers/fruitsList.js

@@ -0,0 +1,53 @@
+import applePicture from '../images/apple.png'
+import avocadoPicture from '../images/avocado.png'
+import bananaPicture from '../images/banana.png'
+import cornPicture from '../images/corn.png'
+import lemonPicture from '../images/lemon.png'
+import lettucePicture from '../images/lettuce.png'
+import onionPicture from '../images/onion.png'
+import strawberryPicture from '../images/strawberry.png'
+
+export const fruitsList = [
+    {
+        type: 'apple',
+        image: applePicture,
+        status: 'idle',
+    },
+    {
+        type: 'avocado',
+        image: avocadoPicture,
+        status: 'idle',
+    },
+    {
+        type: 'banana',
+        image: bananaPicture,
+        status: 'idle',
+    },
+    {
+        type: 'corn',
+        image: cornPicture,
+        status: 'idle',
+    },
+    {
+        type: 'lemon',
+        image: lemonPicture,
+        status: 'idle',
+    },
+    {
+        type: 'lettuce',
+        image: lettucePicture,
+        status: 'idle',
+    },
+    {
+        type: 'onion',
+        image: onionPicture,
+        status: 'idle',
+    },
+    {
+        type: 'strawberry',
+        image: strawberryPicture,
+        status: 'idle',
+    },
+]
+
+export default fruitsList

src/index.css

@@ -22,5 +22,4 @@ main {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 60px 0;
 }