Render the board correctly for the black player

assets/js/components/chess-board.js

@@ -2,7 +2,7 @@ import React from "react";
 import _ from "lodash";
 import $ from "jquery";
 import { connect } from "react-redux";
-import { setBoard, setGameId } from "../store/actions";
+import { setBoard, setPlayer, setGameId } from "../store/actions";
 
 import ChessBoardSquare from "./chess-board-square";
 
@@ -13,7 +13,10 @@ class ChessBoard extends React.Component {
     store.dispatch(setGameId(gameId));
 
     $.ajax({ method: "GET", url: `/api/games/${gameId}` })
-      .then((data) => store.dispatch(setBoard(data)));
+      .then((data) => {
+        store.dispatch(setBoard(data.board));
+        store.dispatch(setPlayer(data.player));
+      });
   }
 
   getBoard() {
@@ -21,11 +24,16 @@ class ChessBoard extends React.Component {
     return store.getState().board;
   }
 
+  getPlayer() {
+    const { store } = this.props;
+    return store.getState().player;
+  }
+
   renderFiles(rankId) {
     const { store } = this.props;
     const rank = this.getBoard()[rankId];
 
-    return _.map(Object.keys(rank).sort(), (fileId) => {
+    return _.map(this.files(rank), (fileId) => {
       return (
         <ChessBoardSquare
           file={fileId}
@@ -41,7 +49,7 @@ class ChessBoard extends React.Component {
   renderRanks() {
     const board = this.getBoard();
 
-    return _.map(Object.keys(board).reverse(), (rankId) => {
+    return _.map(this.ranks(), (rankId) => {
       return (
         <tr className="board-rank" key={rankId}>
           {this.renderFiles(rankId)}
@@ -50,6 +58,29 @@ class ChessBoard extends React.Component {
     });
   }
 
+  files(rank) {
+    const player = this.getPlayer();
+
+    switch (player) {
+      case 'white':
+        return Object.keys(rank).sort();
+      case 'black':
+        return Object.keys(rank).sort().reverse();
+    }
+  }
+
+  ranks() {
+    const board = this.getBoard();
+    const player = this.getPlayer();
+
+    switch (player) {
+      case 'white':
+        return Object.keys(board).reverse();
+      case 'black':
+        return Object.keys(board);
+    }
+  }
+
   render() {
     return (
       <table className="board">

assets/js/reducers/chess-board.js

@@ -10,6 +10,11 @@ const chessBoardReducer = (state = defaultState, action) => {
         .set("selectedSquare", null)
         .toJS();
 
+    case "SET_PLAYER":
+      return Immutable.fromJS(state)
+        .set("player", action.player)
+        .toJS();
+
     case "SET_GAME_ID":
       return Immutable.fromJS(state)
         .set("gameId", action.gameId)

assets/js/store/actions.js

@@ -1,4 +1,5 @@
 const SET_BOARD = "SET_BOARD";
+const SET_PLAYER = "SET_PLAYER";
 const SET_GAME_ID = "SET_GAME_ID";
 const SELECT_PIECE = "SELECT_PIECE";
 
@@ -9,6 +10,13 @@ export const setBoard = (board) => {
   }
 }
 
+export const setPlayer = (player) => {
+  return {
+    type: SET_PLAYER,
+    player: player
+  }
+}
+
 export const setGameId = (gameId) => {
   return {
     type: SET_GAME_ID,

assets/js/store/default-state.js

@@ -1,6 +1,9 @@
 const defaultState = {
   selectedSquare: null,
 
+  player: "white",
+  turn: "white",
+
   board: {
     8: { a: null, b: null, c: null, d: null, e: null, f: null, g: null, h: null },
     7: { a: null, b: null, c: null, d: null, e: null, f: null, g: null, h: null },

lib/chess_web/controllers/api/game_controller.ex

@@ -14,7 +14,7 @@ defmodule ChessWeb.Api.GameController do
       |> Repo.get!(id)
 
     conn
-    |> json(Board.transform(game.board))
+    |> json(game_attrs(conn, game))
   end
 
   def update(conn, %{"id" => id, "move" => move_params}) do
@@ -35,6 +35,21 @@ defmodule ChessWeb.Api.GameController do
     end
   end
 
+  defp game_attrs(conn, game) do
+    %{
+      board: Board.transform(game.board),
+      player: player(conn, game)
+    }
+  end
+
+  defp player(conn, game) do
+    if game.user_id == current_user(conn).id do
+      "white"
+    else
+      "black"
+    end
+  end
+
   defp new_board(board, move_params) do
     [from_file, from_rank] = move_params["from"]
     [to_file, to_rank] = move_params["to"]