mirror of
https://github.com/danbee/chess
synced 2025-03-04 08:39:06 +00:00
Rendering the chess board with React
This commit is contained in:
parent
2ef25f045e
commit
bf38a9b86c
@ -1,18 +1,19 @@
|
||||
"use strict";
|
||||
|
||||
import Vue from "vue";
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
|
||||
import App from 'components/app';
|
||||
import store from "store";
|
||||
import ChessBoard from "components/chess-board";
|
||||
|
||||
class Main {
|
||||
constructor() {
|
||||
new Vue({
|
||||
el: '#app',
|
||||
store,
|
||||
render: h => h(App)
|
||||
});
|
||||
class App extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<ChessBoard />
|
||||
);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export default new Main;
|
||||
ReactDOM.render(
|
||||
<App />,
|
||||
document.getElementById('app')
|
||||
);
|
||||
|
||||
@ -1,14 +0,0 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<chess-board></chess-board>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ChessBoard from './chess-board';
|
||||
import ChessPiece from "./chess-piece";
|
||||
|
||||
export default {
|
||||
components: { ChessBoard, ChessPiece }
|
||||
};
|
||||
</script>
|
||||
27
app/components/chess-board-square.js
Normal file
27
app/components/chess-board-square.js
Normal file
@ -0,0 +1,27 @@
|
||||
import React from "react";
|
||||
import classNames from "classnames";
|
||||
|
||||
class ChessBoardSquare extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.props.square == undefined) {
|
||||
var squareClass = classNames(
|
||||
"board-square",
|
||||
)
|
||||
}
|
||||
else {
|
||||
var squareClass = classNames(
|
||||
"board-square",
|
||||
this.props.square.type,
|
||||
this.props.square.colour,
|
||||
)
|
||||
}
|
||||
|
||||
return <div className={squareClass} />
|
||||
}
|
||||
}
|
||||
|
||||
export default ChessBoardSquare;
|
||||
30
app/components/chess-board.js
Normal file
30
app/components/chess-board.js
Normal file
@ -0,0 +1,30 @@
|
||||
import React from "react";
|
||||
|
||||
import defaultState from "store/default_state";
|
||||
|
||||
import ChessBoardSquare from "components/chess-board-square";
|
||||
|
||||
class ChessBoard extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = defaultState;
|
||||
}
|
||||
|
||||
chessBoardRow(row) {
|
||||
return (
|
||||
<div className="board-row">
|
||||
{row.map((square) => <ChessBoardSquare square={square} />)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="board">
|
||||
{this.state.board.map((row) => this.chessBoardRow(row))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default ChessBoard;
|
||||
@ -1,26 +0,0 @@
|
||||
<template>
|
||||
<div class="board">
|
||||
<div v-for="row in board" class="board-row">
|
||||
<chess-piece v-for="piece in row" :piece="piece"></chess-piece>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ChessPiece from "./chess-piece";
|
||||
|
||||
export default {
|
||||
components: { ChessPiece },
|
||||
|
||||
computed: {
|
||||
board() {
|
||||
return this.$store.state.board;
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
selectSquare: () => {
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,22 +0,0 @@
|
||||
<template>
|
||||
<div class="board-square" :class="classes(piece)"
|
||||
v-on:click="selectSquare">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
classes: (piece) => {
|
||||
if (piece != null) {
|
||||
return [piece.type, piece.colour];
|
||||
}
|
||||
},
|
||||
selectSquare: () => {
|
||||
console.log("Clicked square");
|
||||
}
|
||||
},
|
||||
|
||||
props: ["piece"]
|
||||
};
|
||||
</script>
|
||||
9
app/reducers/chess-board.js
Normal file
9
app/reducers/chess-board.js
Normal file
@ -0,0 +1,9 @@
|
||||
import { defaultState } from "store/default_state";
|
||||
|
||||
export const chessBoard = (state = defaultState, action) => {
|
||||
switch (action.type) {
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
}
|
||||
|
||||
63
app/store.js
63
app/store.js
@ -1,63 +0,0 @@
|
||||
import Vue from "vue";
|
||||
import Vuex from "vuex";
|
||||
|
||||
Vue.use(Vuex);
|
||||
|
||||
const store = new Vuex.Store({
|
||||
state: {
|
||||
board: [
|
||||
[
|
||||
{ type: "rook", colour: "black" },
|
||||
{ type: "knight", colour: "black" },
|
||||
{ type: "bishop", colour: "black" },
|
||||
{ type: "queen", colour: "black" },
|
||||
{ type: "king", colour: "black" },
|
||||
{ type: "bishop", colour: "black" },
|
||||
{ type: "knight", colour: "black" },
|
||||
{ type: "rook", colour: "black" },
|
||||
],
|
||||
[
|
||||
{ type: "pawn", colour: "black" },
|
||||
{ type: "pawn", colour: "black" },
|
||||
{ type: "pawn", colour: "black" },
|
||||
{ type: "pawn", colour: "black" },
|
||||
{ type: "pawn", colour: "black" },
|
||||
{ type: "pawn", colour: "black" },
|
||||
{ type: "pawn", colour: "black" },
|
||||
{ type: "pawn", colour: "black" },
|
||||
],
|
||||
[null, null, null, null, null, null, null, null],
|
||||
[null, null, null, null, null, null, null, null],
|
||||
[null, null, null, null, null, null, null, null],
|
||||
[null, null, null, null, null, null, null, null],
|
||||
[
|
||||
{ type: "pawn", colour: "white" },
|
||||
{ type: "pawn", colour: "white" },
|
||||
{ type: "pawn", colour: "white" },
|
||||
{ type: "pawn", colour: "white" },
|
||||
{ type: "pawn", colour: "white" },
|
||||
{ type: "pawn", colour: "white" },
|
||||
{ type: "pawn", colour: "white" },
|
||||
{ type: "pawn", colour: "white" },
|
||||
],
|
||||
[
|
||||
{ type: "rook", colour: "white" },
|
||||
{ type: "knight", colour: "white" },
|
||||
{ type: "bishop", colour: "white" },
|
||||
{ type: "queen", colour: "white" },
|
||||
{ type: "king", colour: "white" },
|
||||
{ type: "bishop", colour: "white" },
|
||||
{ type: "knight", colour: "white" },
|
||||
{ type: "rook", colour: "white" },
|
||||
],
|
||||
],
|
||||
},
|
||||
getters: {
|
||||
chessBoard: state => {
|
||||
},
|
||||
},
|
||||
mutations: {
|
||||
}
|
||||
});
|
||||
|
||||
export default store;
|
||||
50
app/store/default_state.js
Normal file
50
app/store/default_state.js
Normal file
@ -0,0 +1,50 @@
|
||||
const defaultState = {
|
||||
board: [
|
||||
[
|
||||
{ type: "rook", colour: "black" },
|
||||
{ type: "knight", colour: "black" },
|
||||
{ type: "bishop", colour: "black" },
|
||||
{ type: "queen", colour: "black" },
|
||||
{ type: "king", colour: "black" },
|
||||
{ type: "bishop", colour: "black" },
|
||||
{ type: "knight", colour: "black" },
|
||||
{ type: "rook", colour: "black" },
|
||||
],
|
||||
[
|
||||
{ type: "pawn", colour: "black" },
|
||||
{ type: "pawn", colour: "black" },
|
||||
{ type: "pawn", colour: "black" },
|
||||
{ type: "pawn", colour: "black" },
|
||||
{ type: "pawn", colour: "black" },
|
||||
{ type: "pawn", colour: "black" },
|
||||
{ type: "pawn", colour: "black" },
|
||||
{ type: "pawn", colour: "black" },
|
||||
],
|
||||
[null, null, null, null, null, null, null, null],
|
||||
[null, null, null, null, null, null, null, null],
|
||||
[null, null, null, null, null, null, null, null],
|
||||
[null, null, null, null, null, null, null, null],
|
||||
[
|
||||
{ type: "pawn", colour: "white" },
|
||||
{ type: "pawn", colour: "white" },
|
||||
{ type: "pawn", colour: "white" },
|
||||
{ type: "pawn", colour: "white" },
|
||||
{ type: "pawn", colour: "white" },
|
||||
{ type: "pawn", colour: "white" },
|
||||
{ type: "pawn", colour: "white" },
|
||||
{ type: "pawn", colour: "white" },
|
||||
],
|
||||
[
|
||||
{ type: "rook", colour: "white" },
|
||||
{ type: "knight", colour: "white" },
|
||||
{ type: "bishop", colour: "white" },
|
||||
{ type: "queen", colour: "white" },
|
||||
{ type: "king", colour: "white" },
|
||||
{ type: "bishop", colour: "white" },
|
||||
{ type: "knight", colour: "white" },
|
||||
{ type: "rook", colour: "white" },
|
||||
],
|
||||
],
|
||||
};
|
||||
|
||||
export default defaultState;
|
||||
0
app/store/reducers.js
Normal file
0
app/store/reducers.js
Normal file
@ -12,7 +12,7 @@ module.exports = {
|
||||
},
|
||||
plugins: {
|
||||
babel: {
|
||||
presets: ['es2015', 'es2016']
|
||||
presets: ['es2015', 'es2016', 'react']
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
14
package.json
14
package.json
@ -5,11 +5,17 @@
|
||||
"devDependencies": {
|
||||
"babel-brunch": "^6.0.6",
|
||||
"babel-plugin-transform-runtime": "^6.15.0",
|
||||
"babel-preset-react": "^6.16.0",
|
||||
"brunch": "^2.9.1",
|
||||
"javascript-brunch": "^2.0.0",
|
||||
"sass-brunch": "^2.7.0",
|
||||
"vue": "^2.0.5",
|
||||
"vue-brunch": "^1.2.3",
|
||||
"vuex": "^2.0.0"
|
||||
"sass-brunch": "^2.7.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"classnames": "^2.2.5",
|
||||
"lodash": "^4.17.2",
|
||||
"react": "^15.4.1",
|
||||
"react-dom": "^15.4.1",
|
||||
"react-redux": "^4.4.6",
|
||||
"redux": "^3.6.0"
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user