semi working react-chess

Author: Yasin Yaqoobi

Models/Board.js

@@ -0,0 +1,61 @@
+import Player from '../Models/Player.js'; 
+import Piece from '../Models/Piece.js'; 
+
+export default class Board{
+
+	constructor(player1,player2){
+
+		this.squarePosition = {num: 8, alpha:97};  
+		this.labelPosition = {num: 8, alpha: 97};
+
+		this.squares = player1.getPieces().concat(player2.getPieces());
+
+
+		for (let i = 0; i < 64; i++){
+			
+			let dataProp = this.getDataProp(i);
+
+			if (player1.getPieceAt(dataProp) === undefined && player2.getPieceAt(dataProp) === undefined){
+				this.squares.push(new Piece(undefined,undefined,undefined,dataProp));
+			}
+		}
+		
+	}
+
+
+	getSquares(){
+		return this.squares; 
+	}
+
+
+	// set the data-square index ie a8, b7, etc so we know which item is on which square
+	getDataProp(index){
+		if (index % 8 === 0){
+			this.squarePosition.num--; 
+			this.squarePosition.alpha = 97;
+		}
+		var str = String.fromCharCode(this.squarePosition.alpha) + this.squarePosition.num; 
+		this.squarePosition.alpha++; 
+		return str; 
+	}
+
+
+	/**
+	setLabels(index){
+		var label;
+		
+		if (index % 8 === 0){
+			label = new Label('number',labelPosition.num); 
+			labelPosition.num--;
+		}
+		if (index >=56){
+			label = new Label('alphabet', String.fromCharCode(labelPosition.alpha)); 
+			labelPosition.alpha++;
+		}
+		return label; 
+	}
+	**/
+
+
+
+}

Models/Chess.js

@@ -0,0 +1,36 @@
+import Player from '../Models/Player.js'; 
+import Board from '../Models/Board.js'; 
+
+export default class Chess{
+
+	constructor(){
+		this.players = [new Player('player1'), new Player('player2')]; 
+
+		this.currentPlayer = this.players[0]; 
+
+		this.board = new Board(this.getCurrentPlayer(),this.getOppositePlayer()); 
+	}
+
+	getBoard(){
+		return this.board; 
+	}
+
+
+	getPlayers(){
+		return this.players; 
+	}
+
+
+	getCurrentPlayer(){
+		return this.currentPlayer; 
+	}
+
+	getOppositePlayer(){
+		if (this.currentPlayer.name === 'player1'){
+			return this.players[1];
+		}
+		return this.players[0];
+	}
+
+
+}

Models/Piece.js

@@ -0,0 +1,27 @@
+export default class Piece{
+
+	constructor(name,image,belongsTo,dataProp,ascii,numeric){
+		this.name = name; 
+		this.image = image; 
+		this.dataProp = dataProp; 
+		this.asciii = this.setAscii(ascii); 
+		this.numeric = this.setNumeric(numeric);
+		this.belongsTo = belongsTo;  
+	}
+
+	setAscii(ascii){
+		if (ascii === undefined){
+			return parseInt(this.dataProp.split('')[0].charCodeAt());
+		}
+		return ascii; 
+	}
+
+	setNumeric(numeric){
+		if (numeric === undefined){
+			return parseInt(this.dataProp.split('')[1]);
+		}
+		return numeric; 
+	}
+
+
+}

Models/PieceFactory.js

@@ -0,0 +1,116 @@
+import Piece from '../Models/Piece.js'; 
+
+export default class PieceFactory{
+	
+
+	constructor(){
+	}
+
+	static getMyPieces(playerName){
+	
+	var state = [
+			{
+				name: 'player2', 
+				pieces: [
+					{
+						name: 'rook', 
+						image: 'bR.png', 
+						positions: ['a8','h8']
+					},
+					{
+						name: 'knight', 
+						images: 'bN.png', 
+						positions: ['b8','g8']
+					}, 
+					{
+						name: 'bishop', 
+						image:'bB.png', 
+						positions: ['c8','f8']
+					}, 
+					{
+						name: 'queen', 
+						image:'bQ.png',
+						positions: ['d8']
+					}, 
+					{
+						name: 'king', 
+						image:'bK.png',
+						positions: ['e8']
+					}, 
+					{
+						name: 'pawn', 
+						image:'bP.png',
+						positions: ['a7','b7','c7','d7','e7','f7','g7','h7']
+					}
+				]
+			}, 
+			
+			{
+				name: 'player1', 
+				pieces: [
+					{
+						name: 'rook', 
+						image: 'wR.png', 
+						positions: ['a1','h1']
+					},
+					{
+						name: 'knight', 
+						images: 'wN.png', 
+						positions: ['b1','g1']
+					}, 
+					{
+						name: 'bishop', 
+						image:'wB.png', 
+						positions: ['c1','f1']
+					}, 
+					{
+						name: 'queen', 
+						image:'wQ.png',
+						positions: ['d1']
+					}, 
+					{
+						name: 'king', 
+						image:'wK.png',
+						positions: ['e1']
+					}, 
+					{
+						name: 'pawn', 
+						image:'wP.png',
+						positions: ['a2','b2','c2','d2','e2','f2','g2','h2']
+					}
+				]
+			}
+		];
+
+	return state.reduce(function(prev,next){
+    		if (prev.name === playerName){ // Get only current player pieces. 
+      			return prev.pieces;
+    		}
+    		return next.pieces;
+  		}) 
+  		.map(function(piece){   // Go through pieces array and create new piece
+    		return piece.positions
+    		.map(function(position){
+    			return new Piece(piece.name,piece.image,playerName,position);
+      			
+    		})
+		})
+		.reduce(function(prev,next){ // Flatten the array [ [piece,piece],[piece,piece]....] 
+			return prev.concat(next);
+		});
+
+
+	}
+
+
+
+
+}
+
+
+
+
+
+
+
+

Models/Player.js

@@ -0,0 +1,21 @@
+import PieceFactory from '../Models/PieceFactory.js'; 
+export default class Player{
+
+	constructor(name){
+		this.name = name;
+		this.pieces = PieceFactory.getMyPieces(this.name); // get all the pieces for player from the piece Factory
+	}
+	getPieces(){
+		return this.pieces;
+	}
+
+	getPieceAt(dataProp){
+		return this.pieces.reduce((prev,next) => {
+			if (next.dataProp === dataProp){
+				return next; 
+			}
+		},this.pieces[0]); 
+		
+	}
+
+}

components/AddProfile.jsx

@@ -41,13 +41,13 @@ export default class AddProfile extends React.Component{
 			hobbies: [this.state.hobby]
 		}
 		this.props.addUser(newProfile);
+
 	}
 
 	render(){
 		return(
 			<div>
-				<p>Add a new Profile</p>
-				
+				<p>Add a new Profile</p>	
 				<input onChange={this.handlename} value={this.state.name} />
 				<input onChange={this.handleBio} value={this.state.bio} />
 				<input onChange={this.handleHobby} value={this.state.hobby} />

components/App.jsx

@@ -1,61 +1,64 @@
 import React from 'react'; 
-import Profile from 'Profile.jsx';
-import AddProfile from 'AddProfile.jsx';
 
-import {getProfiles} from '../utils/profileApi.js'; 
+import Chess from '../Models/Chess.js'; 
+
+import Square from 'Square.jsx';
+
+
 
 export default class App extends React.Component {
   constructor(){ // constructor(props)
   	super(); 	// super(props) 
   	this.state = {
-  		profiles: []
+  		chessBoard:[]
   	}
-  	this.addUser = this.addUser.bind(this)
+  	
   }
 
 /** some initial state -> don't use for ajax. **/
   componentWillMount(){
-    console.log('componenet will mount called');
+      const chess = new Chess();
+      this.setState({
+          chessBoard: chess.getBoard(), 
+      });
+    
   }
 
   componentDidMount(){
-   getProfiles()
-   .then(profiles=>{
-      this.setState({
-        profiles: profiles
-      })
-    })
+ 	 
+
   }
 
   componentWillUnmount(){
     console.log('component unmount called');
   }
 
-  addUser(newProfile){
-  	this.setState({
-      profiles: this.state.profiles.concat([newProfile])
-    });
-
-  }
-
 
 
   render(){
-  	let profiles = this.state.profiles.map(profile =>{
-  		return (
-	  			<Profile
-	  			name={profile.name}
-	  			age={profile.age}
-	  			bio={profile.bio}
-	  			hobbies={profile.hobbies} />
-	  			)
-  	});
- 		return(
- 			<div>
-	 			{profiles}
-	 			<AddProfile addUser={this.addUser} />
-	 		</div>			
- 		); 
+  	console.log(this.state);
+  	 let squares = this.state.chessBoard.getSquares().map(square =>{
+  	 	return(
+  	 			<Square 
+  	 				name = {square.name}
+  	 				image = {square.image} 
+  	 				belongsTo = {square.belongsTo}
+  	 				dataProp = {square.dataProp}
+  	 				numeric = {square.numeric}
+  	 				ascii = {square.ascii}
+  	 			/>
+  	 		);
+
+  	 	});	 
+
+  	 	return(
+  	 		<div>
+  	 			<ul>
+  	 				{squares}
+  	 			</ul>
+  	 		</div>
+  	 	);
   }
 
+
 }