chessboard is functional

Author: Yasin Yaqoobi

Models/Board.js

@@ -5,37 +5,66 @@ export default class Board{
 
 	constructor(player1,player2){
 
+
+		this.defaultSettings = {
+			selectors: ['#chessBoard'],
+			colors:['#B58863', '#F0D9B5'],
+			showlabels: true, 
+			sideBars: true, 
+			animate: true, 
+			showPath: true
+		};
+
 		this.squarePosition = {num: 8, alpha:97};  
 		this.labelPosition = {num: 8, alpha: 97};
 
-		this.squares = player1.getPieces().concat(player2.getPieces());
-
+		this.setupSquares(player1,player2);
+		
+	}
 
-		for (let i = 0; i < 64; i++){
+	setupSquares(player1,player2){
+		this.squares = []
+		let count = 0; 
+		for (let i = 1; i < 65; i++){
 
 			let dataProp = this.getDataProp(i);
-
-			if (player1.getPieceAt(dataProp) === undefined && player2.getPieceAt(dataProp) === undefined){
-				this.squares.push(new Piece(undefined,undefined,undefined,dataProp));
-			}
+			
+			let piece = player1.getPieceAt(dataProp) || player2.getPieceAt(dataProp);
+			if (!piece){
+				piece = new Piece(undefined,undefined,undefined,dataProp); 
+			} 
+			
+			piece.setBackground(this.getPieceBackground(count));
+			this.squares.push(piece);
+			count++; 
 		}
-		
+
 	}
 
 
+
 	getSquares(){
 		return this.squares; 
 	}
 
+	getPieceBackground(index){
+	if (index > 0 &&index % 8 === 0){
+		this.defaultSettings.colors.reverse();
+	}
+	return this.defaultSettings.colors[index % 2];
+}
+
 
 	// set the data-square index ie a8, b7, etc so we know which item is on which square
 	getDataProp(index){
+		var str = String.fromCharCode(this.squarePosition.alpha) + this.squarePosition.num; 
+		this.squarePosition.alpha++; 
+
 		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; 
 	}
 

Models/Piece.js

@@ -4,9 +4,9 @@ export default class Piece{
 		this.name = name; 
 		this.image = image; 
 		this.dataProp = dataProp; 
-		this.asciii = this.setAscii(ascii); 
+		this.ascii = this.setAscii(ascii); 
 		this.numeric = this.setNumeric(numeric);
-		this.belongsTo = belongsTo;  
+		this.belongsTo = belongsTo;
 	}
 
 	setAscii(ascii){
@@ -22,6 +22,9 @@ export default class Piece{
 		}
 		return numeric; 
 	}
+	setBackground(color){
+		this.background = color; 
+	}
 
 
 }

Models/PieceFactory.js

@@ -19,7 +19,7 @@ export default class PieceFactory{
 					},
 					{
 						name: 'knight', 
-						images: 'bN.png', 
+						image: 'bN.png', 
 						positions: ['b8','g8']
 					}, 
 					{
@@ -55,7 +55,7 @@ export default class PieceFactory{
 					},
 					{
 						name: 'knight', 
-						images: 'wN.png', 
+						image: 'wN.png', 
 						positions: ['b1','g1']
 					}, 
 					{

Models/Player.js

@@ -10,12 +10,10 @@ export default class Player{
 	}
 
 	getPieceAt(dataProp){
-		return this.pieces.reduce((prev,next) => {
-			if (next.dataProp === dataProp){
-				return next; 
-			}
-		},this.pieces[0]); 
-		
+		return this.pieces.find(piece => {
+				
+				return piece.dataProp === dataProp; 
+		}); 
 	}
 
 }

build/style.css

@@ -0,0 +1,71 @@
+
+#app{
+	width: 1200px;
+	box-shadow: 5px 5px 35px 0px rgba(0,0,0,0.4);
+	-webkit-box-shadow: 5px 5px 35px 0px rgba(0,0,0,0.4);
+	-moz-box-shadow: 5px 5px 35px 0px rgba(0,0,0,0.4);
+	overflow: hidden;
+	margin: 0 auto; 
+	padding: 5%;
+	position: relative;
+	height: 2000px;
+}
+
+#chessBoard{
+	width: 500px;
+	height: 500px; 
+	margin: 0 auto; 
+	display: block;  
+}
+
+#chessBoard ul{
+	border: 1px solid gray;
+	list-style-type: none; 
+	margin: 0 auto; 
+	padding: 0;
+	height: 100%; 
+	width: 100%;
+	display: block;
+	box-sizing: border-box;
+}
+
+#chessBoard ul li{
+	display: inline-block;
+	width: calc(100% / 8);
+	height: calc(100% / 8);
+	box-sizing: border-box;
+	float: left;
+	position: relative;
+}
+.label{
+	display: block;
+	-webkit-font-smoothing: antialiased;
+}
+.type-num{
+	margin-left: 3px;
+	margin-top: 2px;
+	position: absolute;
+}
+
+.type-alpha{
+	position: absolute;
+    bottom: 2px;
+    right: 4px;
+}
+
+.square img{
+	margin:  0 auto; 
+	float:  none; 
+	width:  90%; 
+	height: 90%;
+	display: block;
+}
+
+.messageBoard{
+	min-height: 60px;
+	overflow: hidden;
+}
+
+h3{
+	margin: 10px 0;
+}

components/App.jsx

@@ -37,22 +37,25 @@ export default class App extends React.Component {
 
   render(){
   	console.log(this.state);
-  	 let squares = this.state.chessBoard.getSquares().map(square =>{
+  	 let squares = this.state.chessBoard.getSquares().map((square,index) =>{
+
   	 	return(
   	 			<Square 
+            index = {index}
   	 				name = {square.name}
   	 				image = {square.image} 
   	 				belongsTo = {square.belongsTo}
   	 				dataProp = {square.dataProp}
   	 				numeric = {square.numeric}
   	 				ascii = {square.ascii}
+            background = {square.background}
   	 			/>
   	 		);
 
   	 	});	 
 
   	 	return(
-  	 		<div>
+  	 		<div id="chessBoard">
   	 			<ul>
   	 				{squares}
   	 			</ul>

components/Square.jsx

@@ -1,10 +1,16 @@
 import React from 'react';
 
 let Square = props =>{
-	console.log(props);
+	
 	return (
-		<li className={props.dataProp} data-square={props.dataProp}>
-			<img className={props.belongTo} src={props.image}></img>
+		<li className={'square item-' + props.index} data-square={props.dataProp}
+		style={{background: props.background }}
+		>
+			{ 
+			props.image ?
+			<img className={props.belongTo} src={'/images/' + props.image}></img>
+			: ''
+			}
 		</li>
 	);
 };

components/images/bB.png

@@ -2,6 +2,7 @@
 <html>
 <head>
 	<title>Chess</title>
+	<link rel="stylesheet" href="/build/style.css">
 </head>
 <body>
 <div id="app"></div>

components/images/bK.png

@@ -23,7 +23,11 @@ module.exports = {
 				query: {
 					presets: ['es2015', 'react']
 				}
-			}
+			}, 
+			{
+		      test: /\.(png|jpg|)$/,
+		      loader: 'url-loader?limit=200000'
+		    }
 		]
 	}
 }