React 4

Four in a row, coded in React.js

by defeo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>

<div id="container"></div>

CSS

table { background-color: blue }
td { 
    background-color: white;
    border-radius: 50px;
    width: 50px; height: 50px;
}
.joueur1 { background-color: red; }
.joueur2 { background-color: yellow; }

JavaScript 1.7

/*
  Ce composant représente une case du plateau.
  
  Il est sans état, et a trois propriétés:
  
  - couleur (0, 1, 2): la couleur du pion.
  - columnIndex (int): l'indice de la colonne où se trove la case.
  - handleClick (int -> ()): une callback appelée lorsque 
    la case est cliquée
*/
var Piece = React.createClass({
  handleClick: function() {
    // la seule action qu'on fait lors d'un click, c'est
    // de communiquer le click au parent, en passant l'indice
    // de la colonne.
    this.props.handleClick(this.props.columnIndex);
  },
  
  render: function() {
    var couleur = { 0: "", 
                    1: "joueur1", 
                    2: "joueur2" 
                  }[this.props.couleur];
    return (
      <td className={couleur} onClick={this.handleClick}></td>
    );
  }
});

/*
  Ce composant représente une ligne du plateau.
  
  Il est sans état, et a deux propriétés:
  
  - pieces (list): liste contenant la couleur des cases de la ligne.
  - handleClick (int -> ()): une callback appelée lorsque 
    une case de la ligne a été cliquée.
*/
var Row = React.createClass({
  render: function() {
    // On crée une pièce pour chauqe case de la ligne
    var pieces = this.props.pieces.map(function(couleur, i) {
      return <Piece 
        handleClick={this.props.handleClick}
        columnIndex={i}
        couleur={couleur} />
    },
    // Il est important d'attacher correctement `this` dans
    // la fonction anonyme passée à `map` (voir binding de this).
    this);
    
    return (
      <tr>{pieces}</tr>
    );
  }
});

/*
  Ce composant représente un plateau de Puissance 4.
  
  Il a deux propriétés, `width` et `height`, déterminant le nombre
  de lignes et de colonnes.
  
  Son état est composé de
  
  - plateau (list): une liste bi-dimensionnelle, de dimensions
    `width × height`. Les cases peuvent prendre les valeurs 0, 1, 2,
    correspondant a une case libre, une case occupée par le premier
    joueur, et une case occupée par le...