jocly
Version:
Board games 3D/2D UI and AI web library
1 lines • 15.3 kB
JavaScript
exports.view=View={Game:{},Board:{},Move:{}},function(){View.Game.Coords=function(e,t){return{x:(t+(1-this.g.NBCOLS)/2)*this.g.CSIZE,y:(e+(1-this.g.NBROWS)/2)*this.g.CSIZE}},View.Game.Coords2d=function(e,t){return{x:(t+(1-this.g.NBCOLS)/2)*this.g.CSIZE_2D,y:(e+(1-(this.g.NBROWS-this.g.addedRowsFor2d))/2)*this.g.CSIZE_2D}},View.Game.refreshScore=function(e,t,a){if(void 0!==this.g.canvasScore){var i=this.g.canvasScore,o=i.getContext("2d");o.clearRect(0,0,i.width,i.height),o.textAlign="center",o.textBaseline="middle",o.font="100px Verdana",o.fillStyle="rgba(255,255,255,1)",o.fillText(a,i.width/4,i.height/2),o.fillStyle="rgba(0,0,0,1)",o.fillText(t,i.width/4*3,i.height/2),this.g.textureScore&&(this.g.textureScore.needsUpdate=!0),e.updateGadget("scoreboardA",{"2d":{visible:!0}})}},View.Game.xdInit=function(e){function t(e,t){function a(){var e=new THREE.Mesh(n.g.pieceGeo,n.g.pieceMaterial);t(e)}function i(){if(0==--p){r.getContext("2d").drawImage(l,0,0,l.width,l.height,0,0,o,o);c.getContext("2d").drawImage(g,0,0,g.width,g.height,0,0,o,o),d.needsUpdate=!0,u.needsUpdate=!0,n.g.pieceMaterial=new THREE.MultiMaterial([new THREE.MeshPhongMaterial({name:"Material",specular:"#111111",shininess:10,shading:THREE.SmoothShading,map:d,bumpMap:u,bumpScale:.1})]),n.g.pieceGeo=h,a()}}if(void 0===n.g.pieceMaterial&&void 0===n.g.pieceGeo){var o=512,r=document.createElement("canvas");r.width=o,r.height=o;var d=new THREE.Texture(r),c=document.createElement("canvas");c.width=o,c.height=o;var l,g,h,u=new THREE.Texture(c),p=3;e.getResource("image|"+s+"/res/xd-view/reversi-pieces-2-textures.png",function(e){l=e,i()}),e.getResource("image|"+s+"/res/xd-view/reversi-pieces-2-textures-bump.png",function(e){g=e,i()}),e.getResource("smoothedfilegeo|0|"+s+"/res/xd-view/reversi-pieces-6.js",function(e,t){h=e,i()})}else a()}function a(e,t,a,i){function o(e,t,a,i){e.textAlign="center",e.textBaseline="middle",e.fillStyle=i,e.font=Math.ceil(t/5)+"px Monospace";for(var o=0;o<r;o++)for(var s=0;s<d;s++)n.isAlive(o,s)&&e.fillText("ABCDEFGHIJKLMNOPQRSTUVWXYZ".charAt(s)+(o+1),(s+(1-d)/2)*t,(o+(1-r)/2)*a)}var r=n.g.NBROWS,d=n.g.NBCOLS,c=Math.floor(12e3/n.g.NBCELLS),l=new THREE.Object3D,g=1024/n.g.NBCOLS*n.g.NBROWS,h=Math.max(1024,g),u=document.createElement("canvas");u.width=1024,u.height=g;var p=new THREE.Texture(u),v=document.createElement("canvas");v.width=1024,v.height=g;var S=new THREE.Texture(v),f=0;void 0!==e.options.margin&&(f=e.options.margin),e.getResource("image|"+s+"/res/images/wood-chipboard-5.jpg",function(i){function s(e,t,a,i,o,r){n.isAlive(y,T)?e.fillStyle=t:e.fillStyle="#000000",e.fillRect(a-o/2,i-r/2,o,r)}function m(e){e.strokeStyle="#000000",e.lineWidth="2";for(var t=0;t<r;t++)e.beginPath(),e.moveTo(-d/2*b,(-r/2+t)*x),e.lineTo(d/2*b,(-r/2+t)*x),e.stroke();for(var a=0;a<d;a++)e.beginPath(),e.moveTo((-d/2+a)*b,-r/2*x),e.lineTo((-d/2+a)*b,r/2*x),e.stroke();e.lineWidth="4",e.beginPath(),e.moveTo(-d/2*b,-r/2*x),e.lineTo(d/2*b,-r/2*x),e.lineTo(d/2*b,r/2*x),e.lineTo(-d/2*b,r/2*x),e.lineTo(-d/2*b,-r/2*x),e.stroke()}function w(e,t){var a=new THREE.Shape;return a.moveTo(-e/2,-t/2),a.lineTo(e/2,-t/2),a.lineTo(e/2,t/2),a.lineTo(-e/2,t/2),a}var E=u.getContext("2d");E.translate(512,g/2),E.drawImage(i,-h/2,-h/2,h,h),E.fillStyle="rgba(51, 204, 0,0.4)",E.fillRect(-512,-g/2,1024,g);for(var b=1024/(d*(1+2*f/100)),x=g/(r*(1+2*f/100)),y=0;y<r;y++)for(var T=0;T<d;T++)!function(e,t){s(E,(e+t)%2?"rgba(51, 204, 0,0.4)":"rgba(0, 128, 0,0.4)",(t+(1-d)/2)*b,(e+(1-r)/2)*x,b,x)}(y,T);m(E);var M="#000000";void 0!==e.options.notationColor&&(M=e.options.notationColor),a&&o(E,b,x,M);var R=v.getContext("2d");R.translate(512,g/2),R.fillStyle="#ffffff",R.fillRect(-512,-g/2,1024,g),m(R),a&&o(R,b,x,"#000000"),p.needsUpdate=!0,S.needsUpdate=!0;var C="#050505";void 0!==e.options.boardSpecular&&(C=e.options.boardSpecular);var B=new THREE.PlaneGeometry((1+2*f/100)*d*c/1e3,(1+2*f/100)*r*c/1e3),N=new THREE.Mesh(B,new THREE.MeshPhongMaterial({map:p,bumpMap:S,bumpScale:.005,specular:C,shininess:50}));N.rotation.x=-Math.PI/2,N.receiveShadow=!0,l.add(N);var O=(1+2*f/100)*d*c/1e3,G=(1+2*f/100)*r*c/1e3,A=w(O+.5+.1,G+.5+.1),L=w(O+.1,G+.1);A.holes.push(L);var _={amount:.4,steps:1,bevelSize:.1,bevelThickness:.04,bevelSegments:1},I=new THREE.ExtrudeGeometry(A,_),H=new THREE.Matrix4;H.makeRotationX(-Math.PI/2),I.applyMatrix(H);var k="#000000";e.options.frameColorFill&&(k=e.options.frameColorFill),frameMat=new THREE.MeshPhongMaterial({color:k,shininess:250,specular:"#ffffff",emissive:"#000000"});var V=new THREE.Mesh(I,frameMat);V.position.y=-_.amount-.01,l.add(V);var P=new THREE.Mesh(B,frameMat);P.position.y=-.3,P.rotation.x=Math.PI/2,P.receiveShadow=!0,l.add(P),t(l)})}function i(){void 0===n.g.canvasScore&&(n.g.canvasScore=document.createElement("canvas"),n.g.canvasScore.width=512,n.g.canvasScore.height=n.g.canvasScore.width/8*3,"undefined"!=typeof THREE&&(n.g.textureScore=new THREE.Texture(n.g.canvasScore)))}function o(e,t,a,i){var o,r,d=2;console.log("painting board",e,t,a);var c=function(){if(0==--d){for(var e=g/n.g.NBCELLS_2D,s=(g-n.g.NBCOLS*e)/2,c=n.g.addedRowsFor2d*e+(g-(n.g.NBROWS+n.g.addedRowsFor2d)*e)/2,l=t.getContext("2d"),h=0;h<g;){for(var u=0;u<g;)l.drawImage(r,h,u,128,128),u+=128;h+=128}l.textAlign="center",l.textBaseline="middle",l.font=Math.ceil(e/5)+"px Monospace";for(var p=0;p<n.g.NBROWS;p++)for(var v=0;v<n.g.NBCOLS;v++){var S={x:s+v*e,y:c+p*e};n.isAlive(p,v)?(l.drawImage(o,S.x,S.y,e,e),a&&l.fillText("ABCDEFGHIJKLMNOPQRSTUVWXYZ".charAt(v)+(p+1),S.x+e/2,S.y+e/2)):(l.fillStyle="rgba(0,0,0,0.5)",l.fillRect(S.x,S.y,e,e))}s>0&&(l.fillStyle="rgba(255,255,255,1)",l.fillRect(0,0,s,g),l.fillRect(g-s,0,s,g)),c>0&&(l.save(),l.fillStyle="rgba(35,120,35,1)",l.fillRect(s,0,g-2*s,c),l.beginPath(),l.rect(s,0,g-2*s,c),l.clip(),l.strokeStyle="rgba(35,120,35,1)",l.lineWidth=2,l.shadowBlur=8,l.shadowColor="black",l.shadowOffsetX=0,l.shadowOffsetY=3,l.beginPath(),l.rect(s,0,g-2*s,c),l.stroke(),l.restore(),l.fillStyle="rgba(255,255,255,1)",l.fillRect(s,c+n.g.NBROWS*e,g-2*s,c)),i()}};e.getResource("image|"+s+"/res/xd-view/cellshadows.png",function(e){o=e,c()}),e.getResource("image|"+s+"/res/xd-view/boardtexture.jpg",function(e){r=e,c()})}function r(e,t,a){var i=t?"notation":"plain";if(null!==h[i])console.log("canvas callback",i),a(h[i]);else{console.log("creating canvas",i);var r=document.createElement("canvas");h[i]=r,r.width=g,r.height=g,o(e,r,t,function(){a(r)})}}var s=this.mViewOptions.fullPath;this.g.NBCOLS=this.mOptions.width,this.g.NBROWS=this.mOptions.height,this.g.NBCELLS=Math.max(this.g.NBCOLS,this.g.NBROWS),this.g.CSIZE=12e3/this.g.NBCELLS,this.g.addedRowsFor2d=0,this.g.NBCOLS>this.g.NBROWS&&this.g.NBCOLS-this.g.NBROWS<2&&(this.g.addedRowsFor2d=1),this.g.NBCOLS<=this.g.NBROWS&&(this.g.addedRowsFor2d=1),this.g.NBCELLS_2D=Math.max(this.g.NBCOLS,this.g.NBROWS+this.g.addedRowsFor2d),this.g.CSIZE_2D=12e3/this.g.NBCELLS_2D;var n=this;this.rCreateScreens(e),e.createGadget("pass-board-w",{base:{type:"element",x:0,y:0,width:8e3,height:8e3,opacity:0,z:108,center:{x:0,y:0},css:{"background-color":"White","border-radius":"2rem","box-shadow":"1px 1px 12px #555","background-image":"url("+s+"/res/xd-view/pass-light.png)","background-size":"contain"}}}),e.createGadget("pass-board-b",{base:{type:"element",x:0,y:0,width:8e3,height:8e3,opacity:0,z:108,center:{x:0,y:0},css:{"background-color":"Black","border-radius":"2rem","box-shadow":"1px 1px 12px #555","background-image":"url("+s+"/res/xd-view/pass-dark.png)","background-size":"contain"}}});var d=this.g.CSIZE_2D,c=d/3*8,l=this.g.addedRowsFor2d*this.g.CSIZE_2D/2-6e3;this.g.NBCOLS>this.g.NBROWS&&(l+=(this.g.NBCOLS-this.g.NBROWS)*this.g.CSIZE_2D/4),e.createGadget("scoreboardA",{"2d":{type:"canvas",width:c,height:d,x:0,y:l,z:10,draw:function(e){e.save(),i(),e.drawImage(n.g.canvasScore,-c/2,-d/2,c,d),e.restore()}},"3d":{type:"custommesh3d",z:800,y:-(n.g.NBROWS+1)/2*this.g.CSIZE,create:function(e){i(),e(new THREE.Mesh(new THREE.PlaneGeometry(8,3),new THREE.MeshPhongMaterial({map:n.g.textureScore,transparent:!0})))},receiveShadow:!0}}),e.createGadget("scoreboardB",{"3d":{type:"custommesh3d",z:800,y:(n.g.NBROWS+1)/2*this.g.CSIZE,rotate:180,create:function(e){i(),e(new THREE.Mesh(new THREE.PlaneGeometry(8,3),new THREE.MeshPhongMaterial({map:n.g.textureScore,transparent:!0})))},receiveShadow:!0}});var g=1024,h={plain:null,notation:null};e.createGadget("board",{base:{z:0},"2d":{type:"canvas",width:12e3,height:12e3,draw:function(e){console.log("Draw board without notations"),e.save(),r(this,!1,function(t){e.drawImage(t,-6e3,-6e3,12e3,12e3),e.restore()})}},"3d":{type:"custommesh3d",create:function(e){a(this,e,!1,1)}}}),e.createGadget("boardNotations",{base:{z:0},"2d":{type:"canvas",width:12e3,height:12e3,draw:function(e){console.log("Draw board with notations"),e.save(),r(this,!0,function(t){e.drawImage(t,-6e3,-6e3,12e3,12e3),e.restore()})}},"3d":{type:"custommesh3d",create:function(e){a(this,e,!0,1)}}});var u=.6/this.g.NBCELLS*8,p=1.2*u;this.g.pieceZ0=300/this.g.NBCELLS*4;for(var v in this.g.confine){var S=this.RC(v),f=S.r,m=S.c,w=this.Coords(f,m),E=this.Coords2d(f,m);e.createGadget("piece#"+f+"#"+m,{base:{z:1},"2d":{x:E.x,y:E.y,type:"sprite",file:s+"/res/xd-view/sprites.png",clipwidth:200,clipheight:200,clipx:0,clipy:0,width:n.g.CSIZE_2D,height:n.g.CSIZE_2D},"3d":{x:w.x,y:w.y,visible:!1,type:"custommesh3d",scale:[u,u,2*u],create:function(e){t(this,e)},z:n.g.pieceZ0}}),e.createGadget("clicker#"+f+"#"+m,{base:{x:w.x,y:w.y},"2d":{z:103,x:E.x,y:E.y,width:n.g.CSIZE_2D,height:n.g.CSIZE_2D,type:"element",css:{"background-image":"url("+s+"/res/xd-view/select-target-2d.png)","background-size":"contain",cursor:"pointer"}},"3d":{type:"meshfile",file:s+"/res/xd-view/ring-target.js",flatShading:!0,castShadow:!0,smooth:0,z:0,scale:[p,p,1],materials:{square:{transparent:!0,opacity:0},ring:{color:14540253,opacity:1}}}})}},View.Game.rCreateScreen=function(e){var t=new THREE.PlaneGeometry(4,3,1,1),a=new THREE.MeshPhongMaterial({map:e,shading:THREE.FlatShading}),i=new THREE.Mesh(t,a);return this.objectReady(i),null},View.Game.rCreateScreens=function(e){var t=this;e.createGadget("videoa",{"3d":{type:"video3d",makeMesh:function(e){return t.rCreateScreen.call(this,e)}}}),e.createGadget("videoabis",{"3d":{type:"video3d",makeMesh:function(e){return t.rCreateScreen.call(this,e)}}}),e.createGadget("videob",{"3d":{type:"video3d",makeMesh:function(e){return t.rCreateScreen.call(this,e)}}}),e.createGadget("videobbis",{"3d":{type:"video3d",makeMesh:function(e){return t.rCreateScreen.call(this,e)}}})},View.Game.xdBuildScene=function(e){e.updateGadget("pass-board-w",{base:{visible:!1}}),e.updateGadget("pass-board-b",{base:{visible:!1}}),e.updateGadget("board",{base:{visible:!this.mNotation}}),e.updateGadget("boardNotations",{base:{visible:this.mNotation}});for(var t=0;t<this.g.NBROWS;t++)for(var a=0;a<this.g.NBCOLS;a++)e.updateGadget("piece#"+t+"#"+a,{"2d":{visible:!0},"3d":{visible:!0,flatShading:!1}}),e.updateGadget("clicker#"+t+"#"+a,{base:{visible:!1}});e.updateGadget("videoa",{"3d":{visible:!0,playerSide:1,z:3e3,y:1==this.mViewAs?1e4:-1e4,rotate:1==this.mViewAs?-180:-0,rotateX:1==this.mViewAs?25:-25,scale:[3,3,3]}}),e.updateGadget("videoabis",{"3d":{visible:!0,playerSide:-1,z:1500,x:1==this.mViewAs?-5500:5500,y:1==this.mViewAs?8900:-8900,rotate:1==this.mViewAs?-180:-0,rotateX:1==this.mViewAs?25:-25,scale:[.75,.75,.75]}}),e.updateGadget("videob",{"3d":{visible:!0,playerSide:-1,z:3e3,y:1==this.mViewAs?-1e4:1e4,rotate:1==this.mViewAs?-0:-180,rotateX:1==this.mViewAs?-25:25,scale:[3,3,3]}}),e.updateGadget("videobbis",{"3d":{visible:!0,playerSide:1,z:1500,x:1==this.mViewAs?5500:-5500,y:1==this.mViewAs?-8900:8900,rotate:1==this.mViewAs?-0:-180,rotateX:1==this.mViewAs?-25:25,scale:[.75,.75,.75]}})},View.Board.sideToAngle=function(e){return 1==e?180:0},View.Board.clipX=function(e){return 1==e?200:0},View.Board.xdDisplay=function(e,t){var a=this;for(var i in t.g.confine){var o=t.RC(i),r=o.r,s=o.c;t.mBoard.board[i];e.updateGadget("piece#"+r+"#"+s,{"2d":{visible:0!=t.mBoard.board[i],clipx:a.clipX(t.mBoard.board[i])},"3d":{visible:0!=t.mBoard.board[i],rotateX:a.sideToAngle(t.mBoard.board[i])}})}e.updateGadget("scoreboardA",{base:{visible:!0}}),e.updateGadget("scoreboardB",{"3d":{visible:!0}}),t.refreshScore(e,t.mBoard.counts[0],t.mBoard.counts[1])},View.Board.reversiAnimateMove=function(e,t,a,i,o){function r(){function a(){0==--p&&o()}if(g<l.length){var i=l[g].row,s=l[g].col;g++,1==h.mWho?t.refreshScore(e,u.counts[0]+1+g,u.counts[1]-g):t.refreshScore(e,u.counts[0]-g,u.counts[1]+1+g),e.updateGadget("piece#"+i+"#"+s,{"2d":{clipx:n.clipX(h.board[t.POS(s,i)]),opacity:.5},"3d":{rotateX:n.sideToAngle(h.board[t.POS(s,i)]),z:c}},Math.max(50,500/l.length),r)}else{p=l.length;for(var v=0;v<l.length;v++){var i=l[v].row,s=l[v].col;e.updateGadget("piece#"+i+"#"+s,{"2d":{opacity:1},"3d":{z:d}},400,a)}}}function s(){for(var e=0;e<t.g.NBROWS;e++)for(var o=0;o<t.g.NBCOLS;o++)if(h.board[t.POS(o,e)]!=u.board[t.POS(o,e)]){if(e==a&&o==i)continue;l.push({row:e,col:o})}r()}var n=this,d=t.g.pieceZ0,c=t.g.CSIZE/2,l=[],g=0,h=t.mBoard,u=t.mOldBoard,p=0;h.lastMove&&e.updateGadget("piece#"+h.lastMove.row+"#"+h.lastMove.col,{"2d":{visible:!0,opacity:0},"3d":{rotateX:n.sideToAngle(-1*h.board[t.POS(h.lastMove.col,h.lastMove.row)]),z:d}}),e.updateGadget("piece#"+a+"#"+i,{"2d":{clipx:n.clipX(h.board[t.POS(h.lastMove.col,h.lastMove.row)]),clipy:200,opacity:1},"3d":{rotateX:n.sideToAngle(h.board[t.POS(h.lastMove.col,h.lastMove.row)]),z:c,visible:!0}},200,function(){1==h.mWho?t.refreshScore(e,u.counts[0]+1,u.counts[1]):t.refreshScore(e,u.counts[0],u.counts[1]+1),e.updateGadget("piece#"+a+"#"+i,{"2d":{clipy:0},"3d":{z:d}},200,s)})},View.Board.xdBuildHTStateMachine=function(e,t,a){function i(i){function o(e,a){t.smQueueEvent("E_CLICK",{row:e,col:a})}c.mMoves.forEach(function(i){i.pass?t.smQueueEvent("E_PASS",{row:-1,col:-1,pass:!0}):function(t,i){e.updateGadget("clicker#"+t+"#"+i,{base:{visible:!0,castShadow:a.mShowMoves,click:function(){o(t,i)}},"2d":{opacity:a.mShowMoves?1:0},"3d":{materials:{ring:{opacity:a.mShowMoves?1:0,transparent:!a.mShowMoves},square:{transparent:!0,opacity:0}}}})}(i.row,i.col)})}function o(t){for(var i=0;i<a.g.NBROWS;i++)for(var o=0;o<a.g.NBCOLS;o++)e.updateGadget("clicker#"+i+"#"+o,{base:{visible:!1,click:null}})}function r(e){l.row=e.row,l.col=e.col}function s(e){a.MakeMove(l)}function n(e){a.MakeMove({pass:!0})}function d(e){t.smQueueEvent("E_ANIMATED",{})}var c=this,l={};t.smTransition("S_INIT","E_INIT","S_SELECT_TO",[]),t.smEntering("S_SELECT_TO",[i]),t.smLeaving("S_SELECT_TO",[o]),t.smTransition("S_SELECT_TO","E_PASS","S_DONE",[n]),t.smTransition("S_SELECT_TO","E_CLICK","S_ANIMATE",[r,d]),t.smTransition("S_ANIMATE","E_ANIMATED","S_DONE",[s]),t.smEntering("S_DONE",[o]),t.smTransition(["S_SELECT_TO","S_ANIMATE"],"E_END","S_DONE",[]),t.smTransition("S_DONE","E_END",null,[])},View.Board.xdPlayedMove=function(e,t,a){if(a.pass){var i=1==this.mWho?"pass-board-b":"pass-board-w";!function(t,a){function i(){e.updateGadget(t,{base:{opacity:0}},200,function(){e.updateGadget(t,{base:{visible:!1}}),a()})}e.updateGadget(t,{base:{visible:!0,opacity:0}}),e.updateGadget(t,{base:{opacity:1}},200,function(){e.updateGadget(t,{base:{opacity:.99}},1e3,i)})}(i,function(){t.MoveShown()})}else t.mOldBoard.reversiAnimateMove(e,t,a.row,a.col,function(){t.MoveShown()})}}();