Load board from the server 🎉

web/router.ex

@@ -17,6 +17,7 @@ defmodule Chess.Router do
     pipe_through :browser # Use the default browser stack
 
     get "/", PageController, :index
+    resources "/games", GameController
   end
 
   # Other scopes may use custom stacks.

web/static/js/components/chess-board.js

@@ -1,15 +1,16 @@
 import React from "react";
 import $ from "jquery";
 import { connect } from "react-redux";
+import { setBoard } from "../store/actions";
 
 import ChessBoardSquare from "./chess-board-square";
 
 class ChessBoard extends React.Component {
   componentWillMount() {
-    const { gameId } = this.props;
+    const { gameId, store } = this.props;
 
     $.ajax({ method: "GET", url: "/api/games/" + gameId })
-      .then(() => console.log("Oh, hai!"));
+      .then((data) => store.dispatch(setBoard(data)));
   }
 
   getBoard() {
@@ -52,7 +53,10 @@ class ChessBoard extends React.Component {
 }
 
 function mapStateToProps(state) {
-  return { selectedSquare: state.selectedSquare }
+  return {
+    board: state.board,
+    selectedSquare: state.selectedSquare
+  }
 }
 
 export default connect(mapStateToProps)(ChessBoard);

web/static/js/reducers/chess-board.js

@@ -3,6 +3,9 @@ import movePiece from "./move-piece";
 
 const chessBoardReducer = (state = defaultState, action) => {
   switch (action.type) {
+    case "SET_BOARD":
+      return Object.assign({}, state, { board: action.board });
+
     case "MOVE_PIECE":
       const newState = {
         board: movePiece(state.board, action.from, action.to),

web/static/js/store/actions.js

@@ -1,6 +1,14 @@
+const SET_BOARD = "SET_BOARD";
 const SELECT_PIECE = "SELECT_PIECE";
 const MOVE_PIECE = "MOVE_PIECE";
 
+export const setBoard = (board) => {
+  return {
+    type: SET_BOARD,
+    board: board
+  }
+}
+
 export const selectPiece = (coords) => {
   return {
     type: SELECT_PIECE,

web/static/js/store/default-state.js

@@ -2,50 +2,14 @@ const defaultState = {
   selectedSquare: null,
 
   board: {
-    8: {
+    8: { a: null, b: null, c: null, d: null, e: null, f: null, g: null, h: null },
-      a: { type: "rook",   colour: "black" },
+    7: { a: null, b: null, c: null, d: null, e: null, f: null, g: null, h: null },
-      b: { type: "knight", colour: "black" },
-      c: { type: "bishop", colour: "black" },
-      d: { type: "queen",  colour: "black" },
-      e: { type: "king",   colour: "black" },
-      f: { type: "bishop", colour: "black" },
-      g: { type: "knight", colour: "black" },
-      h: { type: "rook",   colour: "black" }
-    },
-    7: {
-      a: { type: "pawn", colour: "black" },
-      b: { type: "pawn", colour: "black" },
-      c: { type: "pawn", colour: "black" },
-      d: { type: "pawn", colour: "black" },
-      e: { type: "pawn", colour: "black" },
-      f: { type: "pawn", colour: "black" },
-      g: { type: "pawn", colour: "black" },
-      h: { type: "pawn", colour: "black" }
-    },
     6: { a: null, b: null, c: null, d: null, e: null, f: null, g: null, h: null },
     5: { a: null, b: null, c: null, d: null, e: null, f: null, g: null, h: null },
     4: { a: null, b: null, c: null, d: null, e: null, f: null, g: null, h: null },
     3: { a: null, b: null, c: null, d: null, e: null, f: null, g: null, h: null },
-    2: {
+    2: { a: null, b: null, c: null, d: null, e: null, f: null, g: null, h: null },
-      a: { type: "pawn", colour: "white" },
+    1: { a: null, b: null, c: null, d: null, e: null, f: null, g: null, h: null },
-      b: { type: "pawn", colour: "white" },
-      c: { type: "pawn", colour: "white" },
-      d: { type: "pawn", colour: "white" },
-      e: { type: "pawn", colour: "white" },
-      f: { type: "pawn", colour: "white" },
-      g: { type: "pawn", colour: "white" },
-      h: { type: "pawn", colour: "white" }
-    },
-    1: {
-      a: { type: "rook",   colour: "white" },
-      b: { type: "knight", colour: "white" },
-      c: { type: "bishop", colour: "white" },
-      d: { type: "queen",  colour: "white" },
-      e: { type: "king",   colour: "white" },
-      f: { type: "bishop", colour: "white" },
-      g: { type: "knight", colour: "white" },
-      h: { type: "rook",   colour: "white" }
-    }
   }
 };
 

web/views/api/game_view.ex

@@ -2,6 +2,51 @@ defmodule Chess.Api.GameView do
   use Chess.Web, :view
 
   def render("show.json", %{ id: 1 }) do
-    %{ foo: :bar }
+    %{
+      "8" => %{
+        a: %{ type: "rook",   colour: "black" },
+        b: %{ type: "knight", colour: "black" },
+        c: %{ type: "bishop", colour: "black" },
+        d: %{ type: "queen",  colour: "black" },
+        e: %{ type: "king",   colour: "black" },
+        f: %{ type: "bishop", colour: "black" },
+        g: %{ type: "knight", colour: "black" },
+        h: %{ type: "rook",   colour: "black" }
+      },
+      "7" => %{
+        a: %{ type: "pawn", colour: "black" },
+        b: %{ type: "pawn", colour: "black" },
+        c: %{ type: "pawn", colour: "black" },
+        d: %{ type: "pawn", colour: "black" },
+        e: %{ type: "pawn", colour: "black" },
+        f: %{ type: "pawn", colour: "black" },
+        g: %{ type: "pawn", colour: "black" },
+        h: %{ type: "pawn", colour: "black" }
+      },
+      "6" => %{ a: nil, b: nil, c: nil, d: nil, e: nil, f: nil, g: nil, h: nil },
+      "5" => %{ a: nil, b: nil, c: nil, d: nil, e: nil, f: nil, g: nil, h: nil },
+      "4" => %{ a: nil, b: nil, c: nil, d: nil, e: nil, f: nil, g: nil, h: nil },
+      "3" => %{ a: nil, b: nil, c: nil, d: nil, e: nil, f: nil, g: nil, h: nil },
+      "2" => %{
+        a: %{ type: "pawn", colour: "white" },
+        b: %{ type: "pawn", colour: "white" },
+        c: %{ type: "pawn", colour: "white" },
+        d: %{ type: "pawn", colour: "white" },
+        e: %{ type: "pawn", colour: "white" },
+        f: %{ type: "pawn", colour: "white" },
+        g: %{ type: "pawn", colour: "white" },
+        h: %{ type: "pawn", colour: "white" }
+      },
+      "1" => %{
+        a: %{ type: "rook",   colour: "white" },
+        b: %{ type: "knight", colour: "white" },
+        c: %{ type: "bishop", colour: "white" },
+        d: %{ type: "queen",  colour: "white" },
+        e: %{ type: "king",   colour: "white" },
+        f: %{ type: "bishop", colour: "white" },
+        g: %{ type: "knight", colour: "white" },
+        h: %{ type: "rook",   colour: "white" }
+      }
+    }
   end
 end