Skip to content

Instantly share code, notes, and snippets.

@wridgers
Last active December 12, 2015 13:39
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save wridgers/4780158 to your computer and use it in GitHub Desktop.
function Goban(canvasElement) {
// size config
this.gridSize = 19;
this.gridWidth = 20;
// style config
this.styleStones = 'smooth';
this.styleBoard = 'lightwood';
// board style
this.gridBackground = 'white';
this.gridStroke = 'black';
// background image data
// useful: http://www.kawa.net/works/js/data-scheme/base64-e.html
this.lightwood = 'data:image/jpeg;base64,'+
'/9j/4AAQSkZJRgABAQEASABIAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcg'+
'SlBFRyB2NjIpLCBxdWFsaXR5ID0gOTAK/9sAQwADAgIDAgIDAwMDBAMDBAUIBQUEBAUKBwcGCAwK'+
'DAwLCgsLDQ4SEA0OEQ4LCxAWEBETFBUVFQwPFxgWFBgSFBUU/9sAQwEDBAQFBAUJBQUJFA0LDRQU'+
'FBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQU/8IAEQgAQABA'+
'AwERAAIRAQMRAf/EABgAAQEBAQEAAAAAAAAAAAAAAAQDAgAG/8QAGQEBAQEBAQEAAAAAAAAAAAAA'+
'AgEAAwYH/9oADAMBAAIQAxAAAAH23zb229FOAC1NdgpdrMy7pQsLmtWXRGOl2Mm7sQsLmtqWsEGh'+
'jJW6VLA5LS10RBJRPFXRNhCtbXZAFdGRVqU3BKrsjoQ81ZGRVaVWBnTUi+hDyV+hkVvFbwQumWyM'+
'Kzn/xAAeEAABBAMBAQEAAAAAAAAAAAACAQMyMwAxQiFBEf/aAAgBAQABBQJzZVPYsis7Kv45IqXs'+
'WZzKZV45M6nsKbkzmVa7cmVL+1nIimfja7PwnYOWqufSk5WGObdi5ZnRSVP0E05J2Dk86WfHJ7Ot'+
'2Wd9rXz/AP/EABYRAQEBAAAAAAAAAAAAAAAAAAFAMP/aAAgBAwEBPwGQuNv/xAAYEQEAAwEAAAAA'+
'AAAAAAAAAAABEDBAUP/aAAgBAgEBPwGXC8Np/8QAIBAAAQMEAwEBAAAAAAAAAAAAAAECcXKBgrEQ'+
'wdGRA//aAAgBAQAGPwLJ2h1h8iwLT4ZKfNCGTtDrD5FgWlOhaiya4ydofYfIsejqU6FqLJrjJ2h9'+
'h8ix6Oo8Miya4dLh1j9BYFo8FkW2hsiy7ofY/QWDA+nwaLU7ofYeKYF1ExGmTh9h8imBdRLCH//E'+
'ACMQAAIABAcBAQEAAAAAAAAAAAABITGx8BARQVFhcaHBkdH/2gAIAQEAAT8hSNY7tfcMh6IcwUMC'+
'm4apbpl1wy+bj0K4BcIc4W8VRJdMs+BbNx6FSYWb38HiJH01CfiHztyDcVqrET9qj574RP7+D5m3'+
'JEnaCKagjO3UcEb5fB7lGfrCDszL9sPVQi90a9g61ETe6GQrRuku9lg2Flwhf2+Co/pnnbsSQrt4'+
'KFmpOd2SEzuaEDBJpx8ZJraDYobMsP8A/9oADAMBAAIAAwAAABBp3fpUPvH8U6RcNZorlY99NC/r'+
'z1m+Xbz/xAAaEQADAQEBAQAAAAAAAAAAAAAAAUEQMSER/9oACAEDAQE/EJix8ELJi6IXpSH30mLo'+
'sUhcYuiEU++ZMQh8F3KQYsYspB6YiFJixieU/8QAGxEAAwADAQEAAAAAAAAAAAAAAAFBESExEFH/'+
'2gAIAQIBAT8Qo4Lh0IfCkKfDiG8sawPhnZC+PhfEKQvkH0byPhjZPGZH0Q+FH7jQ0IhR6RfIMRCn'+
'BjY4Y0PQhvRjY9o//8QAJRAAAgECBQUBAQEAAAAAAAAAAAERIWFRobHB8DFBcYGR0RDh/9oACAEB'+
'AAE/ELIJ1dtv4N18VaEhA04HqXi3rDR4a8fTwjRFKiKoba/8Gnm6hfhNYtkpF0TV2cFkk6KGSEhy'+
'U+czFa7dZR4xV2XDUCoCJ6F0HoHsPQcm/RDUlC7PlsmGKFM6HQcVLVDJPET4SdZEohwvIRw4cC80'+
'9T0T4vY8tu3x2NKTl9FMEj1IVSogVX8n8BZUuKCOalA+pbCtpxX/AAJp9ilLuEsf6J+oxCGlI20E'+
'huLesRtWKxaXXbJ2IXu3MJRsX3bDg22lJ8Jkyqd3eQiSO6mPsp76XN2JnxQVFzDHxvc3GoVi59ky'+
'2QJQ9k2c7GH6z//Z';
// get canvas element and object
this.canvas = canvasElement;
this.board = canvasElement.getContext('2d');
// this.canvas = document.getElementById('goban');
// this.board = document.getElementById('goban').getContext('2d');
// get settings from data- tags!
if (this.canvas.hasAttribute('data-grid-size'))
this.gridSize = parseInt(this.canvas.getAttribute('data-grid-size'), 0);
if (this.canvas.hasAttribute('data-grid-width'))
this.gridWidth = parseInt(this.canvas.getAttribute('data-grid-width'), 0);
if (this.canvas.hasAttribute('data-style-board'))
this.styleBoard = this.canvas.getAttribute('data-style-board');
if (this.canvas.hasAttribute('data-style-stones'))
this.styleStones = this.canvas.getAttribute('data-style-stones');
// make canvas the correct size
this.canvas.width = this.canvas.height = (this.gridSize+1)*this.gridWidth;
// create stones array
this.stones = new Array(this.gridSize);
for (var i = 0; i < this.gridSize; i++) {
this.stones[i] = new Array(this.gridSize);
for (var j = 0; j <this. gridSize; j++)
this.stones[i][j] = Math.floor(Math.random()*3);
}
// is it lightwood?
switch (this.styleBoard) {
case 'lightwood':
// for texture onload
var self = this;
// load the texture, draw when ready
this.texture = new Image();
this.texture.src = this.lightwood;
this.texture.onload = function() {
// texture has loaded
self.gridBackground = self.board.createPattern(self.texture, 'repeat');
// draw!
self.draw();
};
break;
case 'plain':
this.gridBackground = '#e6b933';
this.draw();
break;
default:
this.gridBackground = '#e6b933';
this.draw();
break;
}
}
Goban.prototype.draw = function() {
// fill the background
this.board.fillStyle = this.gridBackground;
this.board.fillRect(0,0,(this.gridSize+1)*this.gridWidth,(this.gridSize+1)*this.gridWidth);
// draw the grid
this.board.strokeStyle = this.gridStroke;
this.board.beginPath();
for (var i = 0; i < this.gridSize; i++) {
// per loop
var extraSpace = this.gridWidth+(i*this.gridWidth) + 0.5;
this.board.moveTo(this.gridWidth, extraSpace);
this.board.lineTo(this.gridWidth*this.gridSize, extraSpace);
this.board.moveTo(extraSpace, this.gridWidth);
this.board.lineTo(extraSpace, this.gridWidth*this.gridSize + 0.5);
}
this.board.closePath();
this.board.stroke();
// draw the dots
this.board.fillStyle = 'black';
this.board.beginPath();
var gridDots = [];
if (this.gridSize == 19)
gridDots = [3,9,15];
// TODO: not quite.
if (this.gridSize == 13)
gridDots = [3,6,9];
// TODO: not quite.
if (this.gridSize == 9)
gridDots = [2,4,6];
for (var g = 0; g < gridDots.length; g++)
for (var h = 0; h < gridDots.length; h++)
this.board.arc(this.gridWidth*(gridDots[g]+1) + 0.5,
this.gridWidth*(gridDots[h]+1) + 0.5, 3, 0, 2*Math.PI, true);
this.board.closePath();
this.board.fill();
// add the stones
for (var x = 0; x < this.gridSize; x++) {
for (var y = 0; y < this.gridSize; y++) {
if (this.stones[x][y] > 0) {
// centre of stone
var p = this.gridWidth*(x+1) + 0.5;
var q = this.gridWidth*(y+1) + 0.5;
// set the style
switch(this.styleStones) {
case 'flat':
var flat;
if (this.stones[x][y] == 1)
flat = 'black';
if (this.stones[x][y] == 2)
flat = 'white';
this.board.fillStyle = flat;
break;
case 'smooth':
var smooth = this.board.createRadialGradient(p-2, q-2, 0.1, p, q, this.gridWidth/2);
// set colour (black)
if (this.stones[x][y] == 1) {
smooth.addColorStop(0, '#2E2E2E');
smooth.addColorStop(1, '#080808');
}
// set colour (white)
if (this.stones[x][y] == 2) {
smooth.addColorStop(0, '#FFFFFF');
smooth.addColorStop(1, '#DBDBDB');
}
this.board.fillStyle = smooth;
break;
}
// draw the stone
this.board.beginPath();
this.board.arc(p, q, this.gridWidth/2, 0, 2*Math.PI, true);
this.board.closePath();
this.board.fill();
}
}
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment