/bamboojoint.js
JavaScript | 449 lines | 337 code | 64 blank | 48 comment | 75 complexity | 9e086abd4bdb58ee3cff05b5ae06e7b2 MD5 | raw file
1"use strict"; 2 3// BambooJoint.Js 4// HTML5 Canvas Goban Renderer 5// 6// Copyright (c) 2011 Stack Exchange, Inc. 7// Permission is hereby granted, free of charge, to any person obtaining a copy 8// of this software and associated documentation files (the "Software"), to deal 9// in the Software without restriction, including without limitation the rights 10// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 11// copies of the Software, and to permit persons to whom the Software is furnished 12// to do so, subject to the following conditions: 13// 14// The above copyright notice and this permission notice shall be included in 15// all copies or substantial portions of the Software. 16// 17// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 18// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 19// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 20// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 21// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 22// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 23// SOFTWARE. 24// 25// ----------------------------------------------------------------------------- 26// 27// Contains lyfe.js, Copyright (c) 2011 Benjamin Dumke-von der Ehe 28// Also licensed under the MIT license 29// https://bitbucket.org/balpha/lyfe 30// 31// ----------------------------------------------------------------------------- 32// 33// Usage: 34// 35// var result = BambooJoint.render(source); 36// 37// If source is not legal board markup, or if the browser doesn't support the HTML5 canvas, returns null. 38// Otherwise, returns an object with a property result.canvas, which is a <canvas> DOM element, 39// properties result.width and result.height that give the dimensions of the canvas in pixels, 40// and optionally -- if given in the source -- a property result.caption. 41// 42// ----------------------------------------------------------------------------- 43 44window.BambooJoint = (function () { 45 46 if (!document.createElement("canvas").getContext) 47 return { render: function () { return null; }}; 48 49 function parse(text) { 50 text = text.replace(/\r/g, "\n"); 51 var lines = Generator(text.split(/\n+/)).filter(function (l) { return /\S/.test(l); }).evaluated(), 52 result = { board: [] }, 53 board = result.board; 54 55 if (lines.any(function (line) { return !/^\$\$/.test(line); })) { 56 return null; 57 } 58 59 var firstLine = lines.first(), 60 coordinates; 61 62 if (!firstLine) 63 return null; 64 65 result.moveDelta = 0; 66 67 // check the first line for options and/or caption 68 // note that we're not actually replacing (and not storing the result), and that the function gets called at most once 69 firstLine.replace(/^\$\$(([BW]?)(c?)(\d*)(?:m(\d+))?)(?:\s+(.*)|)$/, function (whole, options, color, coord, size, firstMove, caption) { 70 71 caption = (caption || "").replace(/\s+$/, ""); 72 if (!options.length) { // no options -- is this a regular board markup line, or is there a caption? 73 74 if (!caption.length) // no caption at all -- we're outta here 75 return; 76 77 if (!/[^\sOW@QPXB#YZCSTM\d?a-z,*+|_-]/.test(caption)) { // all characters are legal markup 78 if (!/\w{2} \w{2}/.test(caption)) // doesn't seem to be words 79 return; 80 } 81 } 82 83 result.whiteFirst = color === "W"; 84 coordinates = coord === "c"; 85 86 var sizeInt = parseInt(size, 10); 87 if (isFinite(sizeInt)) 88 result.boardSize = sizeInt; 89 90 var firstMoveInt = parseInt(firstMove, 10); 91 if (isFinite(firstMoveInt)) 92 result.moveDelta = firstMoveInt - 1; 93 94 result.caption = caption; 95 96 lines = lines.skip(1); 97 }); 98 99 var lastRow; 100 101 lines.forEach(function (line) { 102 if (/^\$\$\s(?:[|+-]\s*){2,}$/.test(line)) { // currently, only full horizontal edges are considered 103 if (lastRow) 104 lastRow.bottom = true; 105 if (!board.length || board[board.length - 1].length) { 106 lastRow = []; 107 board.push(lastRow); 108 } 109 board[board.length - 1].top = true; 110 return; 111 } 112 if (!board.length || board[board.length - 1].length) { 113 lastRow = []; 114 board.push(lastRow); 115 } 116 var pieces = Generator(function () { 117 var l = line.length, c; 118 for (var i = 0; i < l; i++) { 119 c = line.charAt(i); 120 if (!/[$\s]/.test(c)) 121 this.yield(c); 122 } 123 }); 124 125 var lastField, 126 nextIsLeft = false; 127 128 pieces.forEach(function (piece) { 129 if (/[|+-]/.test(piece)) { 130 if (lastField) 131 lastField.right = true; 132 nextIsLeft = true; 133 return; 134 } 135 var field = { piece: piece }; 136 if (nextIsLeft) 137 field.left = true; 138 nextIsLeft = false; 139 lastRow.push(field); 140 lastField = field; 141 }); 142 143 }); 144 145 // last row is empty 146 if (board.length && ! board[board.length - 1].length) 147 board.pop(); 148 149 var width = 0, height = 0; 150 if (!board.length) { 151 //console.log("empty") 152 return null; 153 } else { 154 var diff = false, 155 156 width = Generator(board).map(function (r) { return r.length; }).reduce(function (a, b) { 157 diff = diff || (a !== b); 158 return Math.max(a, b); 159 }) 160 height = board.length; 161 if (diff) { 162 return null; // the rows don't have equal widths 163 } 164 } 165 166 if (coordinates) { 167 var leftEdge = board[0][0].left, 168 rightEdge = board[0][width - 1].right, 169 topEdge = board[0].top, 170 bottomEdge = board[height - 1].bottom; 171 172 var boardSize = result.boardSize; 173 if (!boardSize) { 174 boardSize = 19; 175 if (leftEdge && rightEdge) 176 boardSize = width; 177 else if (topEdge && bottomEdge) 178 boardSize = height; 179 } 180 if (leftEdge) 181 result.leftCoordinate = 0; 182 else if (rightEdge) 183 result.leftCoordinate = boardSize - width; 184 else 185 coordinates = false; 186 187 if (topEdge) 188 result.topCoordinate = boardSize - 1; 189 else if (bottomEdge) 190 result.topCoordinate = height - 1; 191 else 192 coordinates = false; 193 194 if (coordinates) 195 result.coordinates = true; 196 } 197 198 result.width = width; 199 result.height = height; 200 return result; 201 } 202 203 var stoneImages; 204 205 function createStoneImages() { 206 return { 207 white: createStoneImage("white"), 208 black: createStoneImage("black"), 209 both: createStoneImage("both") 210 }; 211 } 212 213 function createStoneImage(color) { 214 var stone, actualColor, angle1, angle2; 215 if (color === "both") { 216 stone = createStoneImage("black"); 217 actualColor = "white"; 218 angle1 = 0.5 * Math.PI; 219 angle2 = 1.5 * Math.PI; 220 } else { 221 stone = document.createElement("canvas"); 222 stone.width = 29; 223 stone.height = 29; 224 actualColor = color; 225 angle1 = 0; 226 angle2 = 2 * Math.PI; 227 } 228 var ctx = stone.getContext("2d"); 229 230 ctx.save(); 231 ctx.fillStyle = actualColor; 232 if (color !== "both") { 233 ctx.shadowOffsetX = 1; 234 ctx.shadowOffsetY = 1; 235 ctx.shadowBlur = 3; 236 ctx.shadowColor = "rgba(0,0,0,.7)"; 237 } 238 239 ctx.beginPath(); 240 ctx.arc(14.5, 14.5, 10, angle1, angle2, false); 241 ctx.fill(); 242 ctx.restore(); 243 244 // we're doing this in two steps because of a bug in the android browser 245 // http://code.google.com/p/android/issues/detail?id=21813 246 ctx.save(); 247 var gradient = ctx.createRadialGradient(14.5, 14.5, 10, 7.5, 7.5, 2); 248 var c1 = actualColor === "white" ? "#e0e0e0" : "black"; 249 var c2 = actualColor === "black" ? "#404040" : "white"; 250 gradient.addColorStop(0, c1); 251 gradient.addColorStop(.25, c1); 252 gradient.addColorStop(1, c2); 253 ctx.fillStyle = gradient; 254 255 ctx.beginPath(); 256 ctx.arc(14.5, 14.5, 10, angle1, angle2, false); 257 ctx.fill(); 258 ctx.restore(); 259 return stone; 260 } 261 262 function renderParsed(parsed) { 263 264 stoneImages = stoneImages || createStoneImages(); 265 266 var pixWidth = (parsed.width + 1) * 22, 267 pixHeight = (parsed.height + 1) * 22, 268 bgColor = '#d3823b'; 269 270 if (parsed.coordinates) { 271 pixWidth += 6; 272 pixHeight += 6; 273 } 274 275 var canvas = document.createElement("canvas"); 276 canvas.width = pixWidth; 277 canvas.height = pixHeight; 278 279 var ctx = canvas.getContext("2d"); 280 ctx.fillStyle = bgColor; 281 ctx.fillRect(0, 0, pixWidth, pixHeight); 282 283 function stone(x, y, color) { 284 ctx.drawImage(stoneImages[color], x - 14.5, y - 14.5) 285 } 286 287 function putlines(x, y, top, right, bottom, left) { 288 ctx.beginPath(); 289 ctx.moveTo(x - (left ? 0 : 11), y); 290 ctx.lineTo(x + (right ? 0 : 11), y); 291 ctx.moveTo(x, y - (top ? 0 : 11)); 292 ctx.lineTo(x, y + (bottom ? 0 : 11)); 293 ctx.stroke(); 294 } 295 296 function mark_circle(x, y) { 297 ctx.save(); 298 ctx.lineWidth = 2; 299 ctx.strokeStyle = "red"; 300 ctx.beginPath(); 301 ctx.arc(x, y, 5, 0, 2 * Math.PI, false); 302 ctx.stroke(); 303 ctx.restore(); 304 } 305 function mark_square(x, y) { 306 ctx.save(); 307 ctx.fillStyle = "red"; 308 ctx.fillRect(x - 5, y - 5, 10, 10); 309 ctx.restore(); 310 } 311 function mark_triangle(x, y) { 312 ctx.save(); 313 ctx.fillStyle = "red"; 314 ctx.beginPath(); 315 ctx.moveTo(x, y - 6); 316 ctx.lineTo(x + 6, y + 4); 317 ctx.lineTo(x - 6, y + 4); 318 ctx.closePath(); 319 ctx.fill(); 320 ctx.restore(); 321 } 322 function mark_x(x, y) { 323 ctx.save(); 324 ctx.strokeStyle = "red"; 325 ctx.lineWidth = 2; 326 ctx.beginPath(); 327 ctx.moveTo(x - 5, y - 5); 328 ctx.lineTo(x + 5, y + 5); 329 ctx.moveTo(x + 5, y - 5); 330 ctx.lineTo(x - 5, y + 5); 331 ctx.stroke(); 332 ctx.restore(); 333 } 334 335 var edge = parsed.coordinates ? 28.5 : 22.5; 336 337 Generator(parsed.board).forEach(function (line, row) { 338 339 Generator(line).forEach(function (field, col) { 340 var x = col * 22 + edge, 341 y = row * 22 + edge, 342 piece = field.piece; 343 344 if (piece !== "_") 345 putlines(x, y, line.top, field.right, line.bottom, field.left); 346 ctx.save(); 347 348 if (/[OW@QP]/.test(piece)) 349 stone(x, y, "white"); 350 else if (/[XB#YZ]/.test(piece)) 351 stone(x, y, "black"); 352 353 if (/[BWC]/.test(piece)) 354 mark_circle(x, y); 355 else if (/[#@S]/.test(piece)) 356 mark_square(x, y); 357 else if (/[YQT]/.test(piece)) 358 mark_triangle(x, y); 359 else if (/[ZPM]/.test(piece)) 360 mark_x(x, y); 361 else if (piece === "*") 362 stone(x, y, "both"); 363 else if (/^\d$/.test(piece)) { 364 var val = parseInt(piece, 10); 365 if (val === 0) 366 val = 10; 367 var isBlack = (val % 2 === 1) ^ parsed.whiteFirst; 368 stone(x, y, isBlack ? "black" : "white"); 369 ctx.font = "12px sans-serif"; 370 ctx.textAlign = "center"; 371 ctx.fillStyle = isBlack ? "white" : "black"; 372 ctx.fillText(val + parsed.moveDelta, x, y + 4); 373 } else if (piece === "?") { 374 ctx.fillStyle = "rgba(255,255,255,0.5)"; 375 376 // using integer coordinates here to avoid seeing very thin lines between adjacent shaded points 377 ctx.fillRect(x - 11.5, y - 11.5, 22, 22); 378 } else if (/^[a-z]$/.test(piece)) { 379 ctx.font = "bold 15px sans-serif"; 380 ctx.textAlign = "center"; 381 ctx.fillStyle = "black"; 382 ctx.lineWidth = 6; 383 ctx.strokeStyle = bgColor; 384 ctx.strokeText(piece, x, y + 5); 385 ctx.fillText(piece, x, y + 5); 386 ctx.lineWidth = 1; 387 } else if (piece === ",") { 388 ctx.fillStyle = "black"; 389 ctx.beginPath(); 390 ctx.arc(x, y, 2.5, 0, 2 * Math.PI, false); 391 ctx.fill(); 392 } 393 ctx.restore(); 394 }); 395 }); 396 397 if (parsed.coordinates) { 398 ctx.save(); 399 ctx.fillStyle = "#6b421e"; 400 ctx.font = "10px sans-serif"; 401 402 for (var row = 0; row < parsed.height; row++) { 403 ctx.textAlign = "right"; 404 ctx.fillText(parsed.topCoordinate - row + 1, 16, row * 22 + 31.5); 405 } 406 for (var col = 0; col < parsed.width; col++) { 407 ctx.textAlign = "center"; 408 409 var letter = parsed.leftCoordinate + col + 1; 410 if (letter >= 9) // skip "I" 411 letter++; 412 413 ctx.fillText(String.fromCharCode(64 + letter), col * 22 + 28.5, 12); 414 } 415 ctx.restore(); 416 } 417 418 return { 419 canvas: canvas, 420 width: pixWidth, 421 height: pixHeight 422 }; 423 } 424 425 return { 426 render: function (source) { 427 var parsed = parse(source); 428 429 if (!parsed) 430 return null; 431 432 var result = renderParsed(parsed); 433 434 if (parsed.caption && parsed.caption.length) 435 result.caption = parsed.caption; 436 437 return result; 438 } 439 } 440})(); 441 442// lyfe.js 443(function(){var k;k=Array.prototype.indexOf?function(a,b){return a.indexOf(b)}:function(a,b){for(var c=a.length,d=0;d<c;d++)if(d in a&&a[d]===b)return d;return-1};var h={},e=function(a){if(!(this instanceof e))return new e(a);this.forEach=typeof a==="function"?i(a):a.constructor===Array?p(a):q(a)},l=function(){throw h;},j=function(a){this.message=a;this.name="IterationError"};j.prototype=Error.prototype;var i=function(a){return function(b,c){var d=!1,f=0,m={yield:function(a){if(d)throw new j("yield after end of iteration"); 444a=b.call(c,a,f,l);f++;return a},yieldMany:function(a){(a instanceof e?a:new e(a)).forEach(function(a){m.yield(a)})},stop:l};try{a.call(m)}catch(g){if(g!==h)throw g;}finally{d=!0}}},p=function(a){return i(function(){for(var b=a.length,c=0;c<b;c++)c in a&&this.yield(a[c])})},q=function(a){return i(function(){for(var b in a)a.hasOwnProperty(b)&&this.yield([b,a[b]])})};e.prototype={toArray:function(){var a=[];this.forEach(function(b){a.push(b)});return a},filter:function(a,b){var c=this;return new e(function(){var d= 445this;c.forEach(function(c){a.call(b,c)&&d.yield(c)})})},take:function(a){var b=this;return new e(function(){var c=this;b.forEach(function(b,f){f>=a&&c.stop();c.yield(b)})})},skip:function(a){var b=this;return new e(function(){var c=this;b.forEach(function(b,f){f>=a&&c.yield(b)})})},map:function(a,b){var c=this;return new e(function(){var d=this;c.forEach(function(c){d.yield(a.call(b,c))})})},zipWithArray:function(a,b){typeof b==="undefined"&&(b=function(a,b){return[a,b]});var c=this;return new e(function(){var d= 446a.length,f=this;c.forEach(function(c,e){e>=d&&f.stop();f.yield(b(c,a[e]))})})},reduce:function(a,b){var c,d;arguments.length<2?c=!0:(c=!1,d=b);this.forEach(function(b){c?(d=b,c=!1):d=a(d,b)});return d},and:function(a){var b=this;return new e(function(){this.yieldMany(b);this.yieldMany(a)})},takeWhile:function(a){var b=this;return new e(function(){var c=this;b.forEach(function(b){a(b)?c.yield(b):c.stop()})})},skipWhile:function(a){var b=this;return new e(function(){var c=this,d=!0;b.forEach(function(b){(d= 447d&&a(b))||c.yield(b)})})},all:function(a){var b=!0;this.forEach(function(c,d,e){if(!(a?a(c):c))b=!1,e()});return b},any:function(a){var b=!1;this.forEach(function(c,d,e){if(a?a(c):c)b=!0,e()});return b},first:function(){var a;this.forEach(function(b,c,d){a=b;d()});return a},groupBy:function(a){var b=this;return new e(function(){var c=[],d=[];b.forEach(function(b){var e=a(b),g=k(c,e);g===-1?(c.push(e),d.push([b])):d[g].push(b)});this.yieldMany((new e(c)).zipWithArray(d,function(a,b){var c=new e(b); 448c.key=a;return c}))})},evaluated:function(){return new e(this.toArray())},except:function(a){return this.filter(function(b){return b!==a})},sortBy:function(a){var b=this;return new e(function(){var c=b.toArray(),d=n(0,c.length).toArray(),f=this;d.sort(function(b,e){var d=a(c[b]),f=a(c[e]);if(typeof d===typeof f){if(d===f)return b<e?-1:1;if(d<f)return-1;if(d>f)return 1}throw new TypeError("cannot compare "+d+" and "+f);});(new e(d)).forEach(function(a){f.yield(c[a])})})}};var o=function(a,b){var c= 449a;typeof b==="undefined"&&(b=1);return new e(function(){for(;;)this.yield(c),c+=b})},n=function(a,b){return o(a,1).take(b)};window.Generator=e;e.BreakIteration=h;e.Count=o;e.Range=n;e.IterationError=j})();