Begin chess implementation

src/index.css

@@ -23,16 +23,22 @@ ol, ul {
   float: left;
   font-size: 24px;
   font-weight: bold;
-  line-height: 34px;
+  line-height: 45px;
-  height: 34px;
+  height: 45px;
   margin-right: -1px;
   margin-top: -1px;
   padding: 0;
   text-align: center;
-  width: 34px;
+  width: 45px;
+}
+
+.square:hover {
+  background: lightblue;
+  transition: 50ms linear;
 }
 
 .square:focus {
+  background: #8d98e6;
   outline: none;
 }
 

src/index.js

@@ -2,43 +2,147 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 
-class Square extends React.Component {
+const Pieces = {
-  render() {
+    WhitePawn: './white_pawn.png',
+    WhiteRook: './white_rook.png',
+    WhiteKnight: './white_knight.png',
+    WhiteBishop: './white_bishop.png',
+    WhiteQueen: './white_queen.png',
+    WhiteKing: './white_king.png',
+
+    BlackPawn: './black_pawn.png',
+    BlackRook: './black_rook.png',
+    BlackKnight: './black_knight.png',
+    BlackBishop: './black_bishop.png',
+    BlackQueen: './black_queen.png',
+    BlackKing: './black_king.png',
+};
+
+function Square(props) {
+  let bg = {
+      backgroundImage: `url(${props.value})`,
+      // backgroundColor: "lightblue",
+  };
+  if (props.value != null) {
     return (
-      <button className="square">
+      <button
-        {/* TODO */}
+        className="square"
+        onClick={props.onClick}
+        style={bg}
+      >
       </button>
     );
+  } else {
+    return (
+      <button
+        className="square"
+        onClick={props.onClick}
+      ></button>
+    );
   }
 }
 
 class Board extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      squares: this.reset(),
+      xIsNext: true,
+    };
+    this.reset();
+  }
+
+  reset() {
+    let whiteRow = [
+        Pieces.WhiteRook,
+        Pieces.WhiteKnight,
+        Pieces.WhiteBishop,
+        Pieces.WhiteQueen,
+        Pieces.WhiteKing,
+        Pieces.WhiteBishop,
+        Pieces.WhiteKnight,
+        Pieces.WhiteRook
+    ];
+    let blackRow = [
+        Pieces.BlackRook,
+        Pieces.BlackKnight,
+        Pieces.BlackBishop,
+        Pieces.BlackQueen,
+        Pieces.BlackKing,
+        Pieces.BlackBishop,
+        Pieces.BlackKnight,
+        Pieces.BlackRook
+    ];
+    let squares = whiteRow.slice();
+    squares = squares.concat(Array(8).fill(Pieces.WhitePawn));
+    squares = squares.concat(Array(32).fill(null));
+    squares = squares.concat(Array(8).fill(Pieces.BlackPawn));
+    squares = squares.concat(blackRow.slice());
+    return squares;
+  }
+
+  handleClick(i) {
+    const squares = this.state.squares.slice();
+    if (calculateWinner(squares) || squares[i]) {
+      return;
+    }
+    squares[i] = this.state.xIsNext ? 'Black' : 'White';
+    this.setState({
+      squares: squares,
+      xIsNext: !this.state.xIsNext,
+    });
+  }
+
   renderSquare(i) {
-    return <Square />;
+    return (
+      <Square
+        value={this.state.squares[i]}
+        onClick={() => this.handleClick(i)}
+      />
+    );
+  }
+
+  row(row) {
+    let i = row * 8;
+    return (
+      <div className="board-row">
+        {this.renderSquare(i)}
+        {this.renderSquare(i + 1)}
+        {this.renderSquare(i + 2)}
+        {this.renderSquare(i + 3)}
+        {this.renderSquare(i + 4)}
+        {this.renderSquare(i + 5)}
+        {this.renderSquare(i + 6)}
+        {this.renderSquare(i + 7)}
+      </div>
+    );
   }
 
   render() {
-    const status = 'Next player: X';
+    const winner = calculateWinner(this.state.squares);
+    let status;
+    if (winner) {
+      status = 'Winner: ' + winner;
+    } else {
+      status = 'Next player: ' + (this.state.xIsNext ? 'Black' : 'White');
+    }
 
-    return (
+    var texttext =
       <div>
         <div className="status">{status}</div>
-        <div className="board-row">
+        {this.row(0)}
-          {this.renderSquare(0)}
+        {this.row(1)}
-          {this.renderSquare(1)}
+        {this.row(2)}
-          {this.renderSquare(2)}
+        {this.row(3)}
-        </div>
+        {this.row(4)}
-        <div className="board-row">
+        {this.row(5)}
-          {this.renderSquare(3)}
+        {this.row(6)}
-          {this.renderSquare(4)}
+        {this.row(7)}
-          {this.renderSquare(5)}
-        </div>
-        <div className="board-row">
-          {this.renderSquare(6)}
-          {this.renderSquare(7)}
-          {this.renderSquare(8)}
-        </div>
       </div>
+    ;
+
+    return (
+        texttext
     );
   }
 }
@@ -65,3 +169,23 @@ ReactDOM.render(
   <Game />,
   document.getElementById('root')
 );
+
+function calculateWinner(squares) {
+  const lines = [
+    [0, 1, 2],
+    [3, 4, 5],
+    [6, 7, 8],
+    [0, 3, 6],
+    [1, 4, 7],
+    [2, 5, 8],
+    [0, 4, 8],
+    [2, 4, 6],
+  ];
+  for (let i = 0; i < lines.length; i++) {
+    const [a, b, c] = lines[i];
+    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
+      return squares[a];
+    }
+  }
+  return null;
+}