svg.chessboard.min.js

function SvgChessBoard(id,options){this.options={coords:false,margin:30,themePath:"/themes",squareStyle:"aluminium",pieceStyle:"merida",comment:{defaultColor:"#00ff00",altColor:"#ffff00",shiftColor:"#FF0000"}};if(options){for(var key in options){if(this.options[key]){this.options[key]=options[key]}}}this.coordinates=["a8","b8","c8","d8","e8","f8","g8","h8","a7","b7","c7","d7","e7","f7","g7","h7","a6","b6","c6","d6","e6","f6","g6","h6","a5","b5","c5","d5","e5","f5","g5","h5","a4","b4","c4","d4","e4","f4","g4","h4","a3","b3","c3","d3","e3","f3","g3","h3","a2","b2","c2","d2","e2","f2","g2","h2","a1","b1","c1","d1","e1","f1","g1","h1"];this.angle=0;this.boardSize=1600;this.squareSize=this.boardSize/8;this.pieceSize=132;var viewBoxSize=this.boardSize+2*this.options.margin;this.draw=SVG(id);this.draw.viewbox(0,0,viewBoxSize,viewBoxSize);var that=this;var boardGroup=this.draw.group();boardGroup.id("board-group");var wSquarePattern=this.draw.pattern(this.squareSize,this.squareSize,function(add){var image=add.image(that.options.themePath+"/board/"+that.options.squareStyle+".png",200,400);image.attr({x:0,y:0})});wSquarePattern.attr({class:"white square-pattern",x:this.options.margin,y:this.options.margin});var bSquarePattern=this.draw.pattern(this.squareSize,this.squareSize,function(add){var image=add.image(that.options.themePath+"/board/"+that.options.squareStyle+".png",200,400);image.attr({x:0,y:-200})});bSquarePattern.attr({class:"black square-pattern",x:this.options.margin,y:this.options.margin});for(var i=0,col=0,x=this.options.margin,y=this.options.margin,fill=0;i<this.coordinates.length;i++){var square=this.draw.rect(this.squareSize,this.squareSize);square.attr({x:x,y:y,fill:fill?bSquarePattern:wSquarePattern,class:"drop square "+(fill?"black":"white"),id:this.coordinates[i],"pointer-events":"all"});square.remember("square",this.coordinates[i]);var color=this.draw.rect(this.squareSize,this.squareSize);color.attr({x:x,y:y,fill:"transparent",class:"color","pointer-events":"none"});square.on("mousedown",function(e){if(e.ctrlKey){this.doc().remember("commentFrom",this.remember("square"))}});square.on("mouseup",function(e){if(e.ctrlKey){this.doc().fire("comment",{event:e,from:this.doc().remember("commentFrom"),to:this.remember("square")})}});var squareGroup=this.draw.group();boardGroup.add(squareGroup);squareGroup.attr({id:"g-"+this.coordinates[i]});squareGroup.add(square);squareGroup.add(color);col++;x+=this.squareSize;fill=~fill;if(col>7){col=0;x=this.options.margin;y+=this.squareSize;fill=~fill}}var imageOptions={href:this.options.themePath+"/pieces/"+this.options.pieceStyle+".png",x:0,y:0,width:this.pieceSize*6,height:this.pieceSize*2};var pieces=["Rook","Knight","Bishop","Queen","King","Pawn"];var side="w";var addImage=function(add){var image=add.image(imageOptions.href,imageOptions.width,imageOptions.height);image.attr({x:imageOptions.x,y:imageOptions.y})};for(i=0;i<pieces.length;i++){var pattern=this.draw.pattern(this.pieceSize,this.pieceSize,addImage);pattern.id(side+pieces[i]+"Pattern");pattern.addClass("piece-pattern");var symbol=this.draw.symbol();symbol.id(side+pieces[i]);pattern.addClass("piece-symbol");symbol.viewbox(0,0,this.pieceSize,this.pieceSize);symbol.rect(this.pieceSize,this.pieceSize).fill(pattern);if(side=="w"){i--;side="b";imageOptions.y-=this.pieceSize}else{side="w";imageOptions.y=0;imageOptions.x-=this.pieceSize}}var coordsGroup=this.draw.group();boardGroup.add(coordsGroup);coordsGroup.id("coordinates");var coords=["A","B","C","D","E","F","G","H"];var middleMargin=this.options.margin/2;for(i=0,c=8,x=this.options.margin+this.squareSize/2,y=this.options.margin+this.squareSize/2;i<8;i++){var row=this.draw.element("text").words(coords[i]).attr({class:"coords",x:x,y:middleMargin,"dominant-baseline":"middle"});var column=this.draw.element("text").words(c+"").attr({class:"coords",x:middleMargin,y:y,"text-anchor":"middle"});var row2=row.clone().y(this.boardSize+this.options.margin+middleMargin);var column2=column.clone().x(this.boardSize+this.options.margin+middleMargin);coordsGroup.add(row);coordsGroup.add(column);coordsGroup.add(row2);coordsGroup.add(column2);x+=this.squareSize;y+=this.squareSize;c--}this.draw.on("comment",function(e){var from=e.detail.from,to=e.detail.to,event=e.detail.event,color=that.options.comment.defaultColor;if(event.altKey){color=that.options.comment.altColor}else if(event.shiftKey){color=that.options.comment.shiftColor}if(from==to){that.toggleSquareColor(from,color)}else{that.drawArrow(from,to,color)}})}SvgChessBoard.prototype={addPiece:function(type,square){var boardGroup=SVG.get("board-group");var squareBg=SVG.get(square);var symbol=SVG.get(type);var piece=this.draw.use(symbol).attr({x:squareBg.x(),y:squareBg.y(),width:squareBg.width(),height:squareBg.height(),class:"drop piece"});boardGroup.add(piece);piece.remember("pieceType",type);piece.remember("square",square);piece.draggable();piece.on("beforedrag",function(e){if(e.detail.event.ctrlKey){this.doc().remember("commentFrom",this.remember("square"))}this.attr("pointer-events","none");this.front()});piece.on("dragmove",function(e){if(e.detail.event.ctrlKey){e.preventDefault()}});piece.on("dragend",function(e){this.attr("pointer-events",null);var targetElement=e.detail.event.target.instance;var squareTo,squareFrom=this.remember("square"),canDrop=false;if(targetElement.hasClass("drop")){canDrop=true;squareTo=targetElement.remember("square")}if(e.detail.event.ctrlKey){if(targetElement.hasClass("piece")){this.doc().fire("comment",{event:e,from:this.doc().remember("commentFrom"),to:squareTo})}return}var eventDetail={event:e,piece:this,candrop:canDrop,move:{piece:this.remember("pieceType"),from:squareFrom,to:squareTo}};var event=new CustomEvent("beforedrop",{detail:eventDetail,cancelable:true});this.doc().fire(event);if(event.detail.candrop){this.x(targetElement.x());this.y(targetElement.y());if(targetElement.hasClass("piece")){targetElement.remove()}this.remember("square",squareTo);this.doc().fire("afterdrop",eventDetail)}else{this.x(e.detail.handler.startPoints.box.x);this.y(e.detail.handler.startPoints.box.y)}})},removePiece:function(square){var pieces=this.draw.select(".piece");pieces.each(function(i){if(this.remember("square")==square){this.remove()}})},movePiece:function(from,to){if(from==to){return}var pieces=this.draw.select(".piece");var pieceToMove=null;var targetElement=null;pieces.each(function(i){if(this.remember("square")==from){pieceToMove=this}if(this.remember("square")==to){targetElement=this}});if(!targetElement){targetElement=SVG.get(to)}if(pieceToMove&&targetElement){pieceToMove.remember("square",to);pieceToMove.x(targetElement.x());pieceToMove.y(targetElement.y());if(targetElement.hasClass("piece")){targetElement.remove()}}},empty:function(){},toggleSquareColor:function(square,color,opacity){if(!opacity)opacity=.5;var squareElt=SVG.get("g-"+square).select(".color").first();if(squareElt.attr("fill")=="transparent"){squareElt.attr({fill:color,opacity:opacity})}else{squareElt.attr({fill:"transparent",opacity:null})}},drawArrow:function(fromSquare,toSquare,color,opacity){var lineId="arrow-"+fromSquare+toSquare;if(SVG.get(lineId)){SVG.get(lineId).remove();return}if(!opacity)opacity=.5;var from={x:SVG.get(fromSquare).x()+this.squareSize/2,y:SVG.get(fromSquare).y()+this.squareSize/2};var to={x:SVG.get(toSquare).x()+this.squareSize/2,y:SVG.get(toSquare).y()+this.squareSize/2};var boardGroup=SVG.get("board-group");var line=this.draw.line(from.x,from.y,to.x,to.y).stroke({width:15,color:color,opacity:opacity});boardGroup.add(line);line.id(lineId);line.attr({class:"arrow","pointer-events":"none"});line.marker("end",4,4,function(add){add.polygon("0,0 0,4 4,2").fill(color).opacity(opacity+.2);this.ref(0,2)})},rotate:function(){this.angle=this.angle===0?180:0;var that=this;var boardGroup=SVG.get("board-group");boardGroup.rotate(this.angle);var coords=SVG.get("coordinates").select("text.coords");coords.each(function(i){this.rotate(that.angle)});var symbols=this.draw.defs().select(".piece-symbol");symbols.each(function(i){this.rotate(that.angle)})},setSquareStyle:function(style){this.options.squareStyle=style;var that=this;var setPattern=this.draw.defs().select("pattern.square-pattern");var wSquarePattern=this.draw.defs().select("pattern.white.square-pattern").first();var bSquarePattern=this.draw.defs().select("pattern.black.square-pattern").first();setPattern.each(function(i){this.first().load(that.options.themePath+"/board/"+that.options.squareStyle+".png")});var wSquares=SVG.get("board-group").select(".square");wSquares.each(function(i){if(this.hasClass("white"))this.fill(wSquarePattern);else this.fill(bSquarePattern)})},setSquaresColor:function(wColor,bColor){var squares=SVG.get("board-group").select(".square");squares.each(function(i){if(wColor&&this.hasClass("white"))this.fill(wColor);if(bColor&&this.hasClass("black"))this.fill(bColor)})},setPieceStyle:function(style){this.options.pieceStyle=style;var that=this;var setPattern=this.draw.defs().select("pattern.piece-pattern");setPattern.each(function(i){this.first().load(that.options.themePath+"/pieces/"+that.options.pieceStyle+".png")})},on:function(eventName,eventListener){this.draw.on(eventName,eventListener)}};