Chess Board

by Elijah Tate

HTML

<div class="mainParent">
  <div class="mainBoard">
    <div class="mainPieces">
      <div class="chessPiece whitePiece" data-type="castle0"></div>
      <div class="chessPiece whitePiece" data-type="horse0"></div>
      <div class="chessPiece whitePiece" data-type="knight0"></div>
      <div class="chessPiece whitePiece" data-type="queen"></div>
      <div class="chessPiece whitePiece" data-type="king"></div>
      <div class="chessPiece whitePiece" data-type="knight1"></div>
      <div class="chessPiece whitePiece" data-type="horse1"></div>
      <div class="chessPiece whitePiece" data-type="castle1"></div>
      <div class="chessPiece whitePiece" data-type="rook0"></div>
      <div class="chessPiece whitePiece" data-type="rook1"></div>
      <div class="chessPiece whitePiece" data-type="rook2"></div>
      <div class="chessPiece whitePiece" data-type="rook3"></div>
      <div class="chessPiece whitePiece" data-type="rook4"></div>
      <div class="chessPiece whitePiece" data-type="rook5"></div>
      <div class="chessPiece whitePiece" data-type="rook6"></div>
      <div class="chessPiece whitePiece" data-type="rook7"></div>


      <div class="chessPiece blackPiece" data-type="castle0"></div>
      <div class="chessPiece blackPiece" data-type="horse0"></div>
      <div class="chessPiece blackPiece" data-type="knight0"></div>
      <div class="chessPiece blackPiece" data-type="queen"></div>
      <div class="chessPiece blackPiece" data-type="king"></div>
      <div class="chessPiece blackPiece" data-type="knight1"></div>
      <div class="chessPiece blackPiece" data-type="horse1"></div>
      <div class="chessPiece blackPiece" data-type="castle1"></div>
      <div class="chessPiece blackPiece" data-type="rook0"></div>
      <div class="chessPiece blackPiece" data-type="rook1"></div>
      <div class="chessPiece blackPiece" data-type="rook2"></div>
      <div class="chessPiece blackPiece" data-type="rook3"></div>
      <div class="chessPiece blackPiece"...

CSS

body,
div {
  padding: 0;
  margin: 0;
}

.mainPieces {}

.chessPiece {
  position: absolute;
  width: 75px;
  height: 90px;
  z-index: 100;
}

.whitePiece {
  background: white;
}

.blackPiece {
  background: #cecece;
}

.mainParent {
  padding: 0;
  margin: 50px 0 0 50px;
}

.mainBoard {
  width: 600px;
  height: 600px;
  padding: 0;
  margin: 0;
  border: 1px solid black;
}

.row {
  padding: 0;
  margin: 0;
}

.mainBoard .row .square {
  width: 75px;
  height: 75px;
  padding: 0;
  margin: 0;
  float: left;
}

.black {
  background: black;
  padding: 0;
  margin: 0;
}

.white {
  background: white;
  padding: 0;
  margin: 0;
}

.group:after {
  content: "";
  display: table;
  clear: both;
}

JavaScript

//"use strict";

    var ChessPiece = (function() {
      var myElement;
      var myExtraHeight;
      var myOffset;
      var myWidth;
      var myCenter;

      function create(element, elWidth, extraHeightPercentage) {
        myElement = $(element);
        myWidth = elWidth;
        myExtraHeight = myWidth * extraHeightPercentage;
        myElement.attr("width", myWidth);
        setCenter();
        
      }

      function setStartingPos(isBlack) {
        var myDataType = myElement.attr("data-type");
      }

      function getOffset() {
      	myOffset = myElement.offset();
        return myOffset;
      }

      function setOffset(newOffset) {
      	myElement.offset(newOffset);
        myOffset = newOffset;
      }
      
      function setCenter(){
      	var newOffset = getOffset();
  			var halfWidth = myWidth/2;
        var horizCenter = newOffset.left + halfWidth;
        var vertCenter = newOffset.top + halfWidth + myExtraHeight;
        myCenter = horizCenter + " " + vertCenter;
        console.log("I am a Piece, and my center is: " + myCenter);
        
      }

      return {
        create: create,
        setStartingPos: setStartingPos,
        getOffset: getOffset,
        setOffset: setOffset
      }
    });

    var BoardTile = (function() {
      var myOffset;
      var myElement;

      function create(myEl) {
        myElement = myEl;
        myOffset = myElement.offset();
      }

      function getOffset() {
        return myOffset;
      }

      function getMyElement() {
        return myElement;
      }
      return {
        create: create,
        getOffset: getOffset,
        getMyElement: getMyElement
      }
    });

    var ChessBoard = (function() {
      var chessPieces = $(".chessPiece");
      var whitePieces = $(".whitePiece");
      var blackPieces = $(".blackPiece");
      var gridSquares = $(".square");
      var squareWidth = gridSquares.width();
      var extraPieceHieght = .2;
      var grid = {};
      var...