mohsenheydari

class GmaeBoardRenderer{
	constructor(canvas, canvasSize){
		...
	}

	render(boardState){
		...
	}

	drawCells(boardState){

mohsenheydari

<div class="center-wrapper-parent">
  <div class="canvas-wrapper">
	<canvas id="board"></canvas>
  </div>
</div>
<script data-main="js/main" src="js/require.js"></script>

mohsenheydari

drawCells(boardState){

  boardState.forEach(function(el, i){
    let x = (i % 3) * this.cellSize;
    let y = Math.floor(i/3) * this.cellSize;

    if(el === 1){
      this.drawX(x, y);
    } else if(el === 2){
      this.drawO(x, y);

mohsenheydari

drawX(x, y){
  this.ctx.lineWidth = this.xLineWidth;
  this.ctx.strokeStyle = this.xStyle;
  this.ctx.beginPath();

  let offset = this.cellSize * 0.25;
  this.ctx.moveTo(x + offset, y + offset);
  this.ctx.lineTo(x + this.cellSize - offset, y + this.cellSize - offset);

  this.ctx.moveTo(x + offset, y + this.cellSize - offset);

mohsenheydari

drawO(x, y){
  let halfCellSize = (0.5 * this.cellSize);
  let centerX  = x + halfCellSize;
  let centerY  = y + halfCellSize;
  let radius   = (this.cellSize * 0.7) / 2;
  let endAngle = 2 * Math.PI;

  this.ctx.lineWidth   = this.oLineWidth;
  this.ctx.strokeStyle = this.oStyle;
  this.ctx.beginPath();

mohsenheydari

drawGrid(){
  let offset = 5;
  let lineLenght = this.canvas.width - offset;
  this.ctx.lineWidth = this.gridLineWidth;
  this.ctx.lineCap = 'round';
  this.ctx.strokeStyle = this.gridLineStyle;
  this.ctx.beginPath();

  //Horizontal lines 
  for (let y = 1;y <= 2;y++) {  

mohsenheydari

getRelativeCursorPosition(event){
  var rect = this.canvas.getBoundingClientRect();

  return {
    x: event.clientX - rect.left,
    y: event.clientY - rect.top
  }
}

mohsenheydari

getCellIndex(position){

  for (let x = 0;x < 3;x++) {
    for (let y = 0;y < 3;y++) {
      let xCordinate = x * this.cellSize;
      let yCordinate = y * this.cellSize;

      if (
        position.x >= xCordinate && position.x <= xCordinate + this.cellSize &&
        position.y >= yCordinate && position.y <= yCordinate + this.cellSize

mohsenheydari

requirejs(['gameboardrenderer'],
function   (GmaeBoardRenderer) {
	
	let player = 1;
	let boardState = [0,0,0,0,0,0,0,0,0]; //Initial board state
	let canvas = document.getElementById('board');
	let gbr = new GmaeBoardRenderer(canvas, 500);
	//Render initial state (grid)
	gbr.render(boardState); 

mohsenheydari

'use strict';

define(function () {
	
	class GmaeBoardRenderer{
		constructor(canvas, canvasSize){
			this.canvas 	     = canvas;
			this.ctx             = canvas.getContext('2d');
			this.canvas.width    = canvasSize;
			this.canvas.height   = canvasSize;