go board

_.md

[ Launch: board ] 3b075afa7dcbd12f33c2e87360f04a11 by Y4suyuki

config.json

{"description":"go board","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/uI2wXuj.png"}

inlet.js

var svg = d3.select('svg');

var board = svg.append('g')
.attr('class', 'board')
.attr('transform', 'translate(' + 30 + ',' + 30 + ')');

var dim = {x: 9, y: 9};

var width = 400,
    height = 400;
var baseColor = '#999999'
var stoneR = width / dim.x / 2 - 1.5;

var d = [];
for (var i = 0; i < dim.x; i++ ) {
  for (var j = 0; j < dim.y; j++) {
    d.push([i,j]);
  }
}

var empty = 0,
    black = 1,
    white = 2,
    taken = 99;

var initBoard = function() {
  return d3.range(0,dim.x).map(function(x) {    
    return d3.range(0,dim.y).map(function(y) { return empty; });
  });
}
  
var gameBoard = initBoard();

var turn = 0;
var hands = [];
var player = black;


var switchPlayer = function(p) {
  return (p === black) ? white : black;
}
var getPos = function(board, pos) {
  return board[pos[0]][pos[1]];
}

var getStoneColor = function(player) {
  return (player === black) ? '#000000' : '#ffffff';
}

var printGameBoard = function(gameBoard) {
  for (var j = 0; j<dim.y; j++) {
    var row = [];
    for (var i = 0; i<dim.x; i++) {
      row.push(gameBoard[i][j]);
    }
    console.log(row);
  }
}




// draw board

board.append('rect')
.attr('x', 0)
.attr('y', 0)
.attr('width', width)
.attr('height', height)
.attr('fill', '#E6BF83');

board.selectAll('circle')
.data(d)
.enter()
.append('circle')
.attr('cx', function(d) { return width / dim.x * d[0] + width / dim.x / 2; })
.attr('cy', function(d) { return width / dim.y * d[1] + height / dim.y / 2; })
.attr('r', 3)
.attr('fill', baseColor)
.on('mouseover', function(d) {
  if (getPos(gameBoard,d) === empty) {
    d3.select(this)
    .attr('fill', '#b5adfe')
    .attr('r', stoneR - 2);
  }
})
.on('mouseout', function(d) {
  if (getPos(gameBoard,d) === empty) {
    d3.select(this)
    .attr('fill', baseColor)
    .attr('r', 3);
  }
})
.on('click', function(d) {
  console.log('turn: ' + turn);
  if (getPos(gameBoard, d) !== empty) {
    window.alert('You can\'t put there. It\'s already taken.');
  } else {
    
    // place stone
    gameBoard[d[0]][d[1]] = player;
    hands.push([[d], player, turn]);
    
    turn = turn + 1;
    
    d3.select(this)
    .attr('fill', getStoneColor(player))
    .attr('r', stoneR);
    
    console.log(hands);
    printGameBoard(gameBoard);
    player = switchPlayer(player);
  }
})
    

var resetButton = svg.append('g')
.attr('class', 'resetButton')
.attr('transform', 'translate(' + 30 + ',' + (height + 30)+ ')');

resetButton.append('rect')
.attr('x', 0)
.attr('y', 0)
.attr('fill', '#ffaacc')
.attr('width', 100)
.attr('height', 30)
.on('click', function(d) {
  console.log('reset!');
  d3.selectAll('circle')
  .attr('r', 3)
  .attr('fill', baseColor);
  turn = 0;
  player = turn;
  gameBoard = initBoard();
});

resetButton.append('text')
.text('Reset')
.attr('x', 25)
.attr('y', 20)