diff --git a/web/router.ex b/web/router.ex index 7abf0ed..6b3b049 100644 --- a/web/router.ex +++ b/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. diff --git a/web/static/js/components/chess-board.js b/web/static/js/components/chess-board.js index a23bf2e..9e136a4 100644 --- a/web/static/js/components/chess-board.js +++ b/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); diff --git a/web/static/js/reducers/chess-board.js b/web/static/js/reducers/chess-board.js index d91962b..6cb6f30 100644 --- a/web/static/js/reducers/chess-board.js +++ b/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), diff --git a/web/static/js/store/actions.js b/web/static/js/store/actions.js index 2a79616..eace947 100644 --- a/web/static/js/store/actions.js +++ b/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, diff --git a/web/static/js/store/default-state.js b/web/static/js/store/default-state.js index 69620b7..fae24e9 100644 --- a/web/static/js/store/default-state.js +++ b/web/static/js/store/default-state.js @@ -2,50 +2,14 @@ const defaultState = { selectedSquare: null, board: { - 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" } - }, + 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 }, 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: { - 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" } - } + 2: { a: null, b: null, c: null, d: null, e: null, f: null, g: null, h: null }, + 1: { a: null, b: null, c: null, d: null, e: null, f: null, g: null, h: null }, } }; diff --git a/web/views/api/game_view.ex b/web/views/api/game_view.ex index 957ee25..01b0c43 100644 --- a/web/views/api/game_view.ex +++ b/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