Partage
  • Partager sur Facebook
  • Partager sur Twitter

Sélectionner l'état de tous les composants React

blocage dans ReactJS

VincentQuiles
    5 décembre 2019 à 15:56:39

    Bonjour à tous

    J'apprends actuellement ReactJS et pour m'améliorer, j'ai essayé de créer une jeu carte basé sur la mémoire.

    En cliquant sur une carte, la face se retourne et la carte est dévoilé, le but est de trouver au 2nd clique, la même carte.

    Mon code n'en au qu'au début et n'est pas forcément des plus ordonnés.

    Mon code ne fonctionne pas sur un détail important. J'ai défini dans l'état de chaque composant Card le state.face : 'hidden' qui indique une carté face caché.

    Lors du clic sur le div, cet état change et affiche la carte. La ou j'ai un problème c'est que j'aimerais que cet état repasse à 'hidden' si j'ai cliqué sur 2 cartes qui n'étaient pas identiques, or la, avec le this.setState, ça n'affecte que la dernière carte.

    J'aimerai donc si possible, selectionner tous les composants enfants <Card />, qui ont le state.paireTrouve en false afin de leur changer, si besoin le state.face en hidden (J'ai laissé une ligne de commentaire à l'endroit du blocage, ligne 122.

    Merci d'avance pour votre aide, et désolé pour le pavé ;)

    et désolé pour la mise en page, j'ai essayé d'entourer par des balise <pre>, d'utiliser l'icone Code fourni, rien n'y fais, même en ne mettant que le code entre <script>. Je corrigerais si nécessaire.

    <!DOCTYPE html>
    <html lang="en">

    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>React Local</title>
      <script type="application/javascript" src="https://unpkg.com/react@16.0.0/umd/react.production.min.js"></script>
      <script type="application/javascript" src="https://unpkg.com/react-dom@16.0.0/umd/react-dom.production.min.js"></script>
      <script type="application/javascript" src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
      <style>
        .memory {
            display: flex;
            flex-wrap: wrap;
            width: 300px;
            margin: auto;
            user-select: none;
          }
          .memory > .card {
            font-size: 2em;
            flex: 1 1 calc(100% / 6 - 0.4em);
            outline: 0.08em solid silver;
            margin: 0.2em;
            display: flex;
            cursor: default;
          }
          .hidden {
            background: silver;
          }
          .memory > .card.justMatched,
          .memory > .card.justMismatched {
            outline: 0.1em solid green;
          }
          .memory > .card.justMismatched {
            outline-color: red;
          }
          .memory > .card.visible {
            cursor: not-allowed;
          }
          .memory > .card > .symbol {
            margin: auto;
          }
          .memory > .guesses {
            font-size: 1em;
            width: calc(100% - 0.4em);
            margin: 0.2em;
            text-align: right;
            font-family: Menlo, Monaco, Consolas, Inconsolata, 'Courier New', monospace;
            }
            .userList{
              position: relative;
              top: 350px;
              background-color : red;
            }
      </style>
    </head>

    <body>
      <div id="root"></div>

    <script type="text/babel">


    const rootElement = document.getElementById('root');

    const HIDDEN_SYMBOL = '❓'

    const fullCarte = ["🐱", "🐶", "🎩", "💖", "🎉"];

    function carte(){
      let carte = [];
      carte.push(fullCarte[Math.floor(Math.random()*fullCarte.length)]);
      console.log(carte);
      return carte
    }

    var tableau = [];

    class Card extends React.Component {
      constructor(props){
        super(props);
        this.state = {
          face : 'hidden',
          paireTrouve : false,
          carte : carte(),
          cliquable : true,
        }
      }
      handleCardClick (){
        if(this.state.cliquable){
          var equivState = '';
          console.log(<Card/>);
          if(this.state.carte == fullCarte[0]){
            equivState = '0';
          }else if(this.state.carte == fullCarte[1]){
            equivState = '1';
          }else if(this.state.carte == fullCarte[2]){
            equivState = '2';
          }else if(this.state.carte == fullCarte[3]){
            equivState = '3';
          }else if(this.state.carte == fullCarte[4]){
            equivState = '4';
          }
          tableau.push(equivState);
          console.log(equivState);
          this.setState(
            {face : 'show', cliquable : false}
          )
          if(tableau.length == 2 && tableau[0] == tableau[1]){
            console.log('bravo');
            this.setState(
              {paireTrouve : true}
            )
            tableau = [];
          } else if(tableau.length == 2 && tableau[0] != tableau[1]){
            //Arriver a marquer que toutes paires ayant le state paire trouve à false ai le state face à hidden, ce qui remettrai les 2 dernières cartes en state.face : 'hidden'
            this.setState(
              {face : 'hidden', cliquable : true}
            )
            tableau = [];
            }
          console.log(tableau);
        }
      }
      render() {

        return (
          <div className={`card ${this.state.face}`} onClick={ ()=> this.handleCardClick()}>
            <span className='symbol'>
              {this.state.face === 'hidden' ? HIDDEN_SYMBOL : this.state.carte}
            </span>
          </div>
        )
      }
    }




    class App extends React.Component {
      constructor(props){
        super(props);
        this.state = {
          etat : 'En Cours',
        }
      }
      remove(){
        let tableau = <Card />;
        console.log(tableau);
      }
      render() {
        return (
          <div className="memory">
            <Card className={this.state.face} ref='1'/>
            <Card ref='2'/>
            <Card ref='3'/>
            <Card ref='4'/>
            <Card ref='5'/>
            <Card ref='6'/>
            <Card ref='7'/>
            <Card ref='8'/>
            <Card ref='9'/>
            <Card ref='10'/>
            <Card ref='11'/>
            <Card ref='12'/>
            <Card ref='1a'/>
            <Card ref='2a'/>
            <Card ref='3a'/>
            <Card ref='4a'/>
            <Card ref='5a'/>
            <Card ref='6a'/>
            <Card ref='7a'/>
            <Card ref='8a'/>
            <Card ref='9a'/>
            <Card ref='10a'/>
            <Card ref='11a'/>
            <Card ref='12a'/>
          </div>
        )
      }
    }


        ReactDOM.render(
          <App />,
          rootElement
        )
    </script>

    </body>

    </html>

    -
    Edité par VincentQuiles 6 décembre 2019 à 9:46:39

    • Partager sur Facebook
    • Partager sur Twitter

    Sélectionner l'état de tous les composants React

    × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
    × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
    • Editeur ●
    • Markdown