function e(e,t){outer=e.outer;inner=e.inner;rx=e.rx;for(let e=0;e<7;e++){r=document.createElementNS("http://www.w3.org/2000/svg","rect");r.setAttribute("x",e*(outer+inner));r.setAttribute("y",0);r.setAttribute("height",6*(outer+inner)+outer);r.setAttribute("width",outer);r.setAttribute("rx",rx);t.appendChild(r);r=document.createElementNS("http://www.w3.org/2000/svg","rect");r.setAttribute("y",e*(outer+inner));r.setAttribute("x",0);r.setAttribute("width",6*(outer+inner)+outer);r.setAttribute("height",outer);r.setAttribute("rx",rx);t.appendChild(r)}}let t=false;let n;let o;let l;let a;let c;let u;function d(e,t){return e.placed.reduce(((e,r)=>e||parseInt(r.x)==t.x&&parseInt(r.y)==t.y),false)}function m(e,t){return!d(e,t)}function b(e,t){return t.x>=0&&t.y>=0&&t.x{if(e.ok){return e.json()}e.text().then((e=>console.log(e)));return{}})).then((t=>{a=t.game;Z(e,a)}));return}}function h(e,t,n){ret=[];for(let e=0;e{r=e.pieceSize/2;si="SMALL";if(t){r=1.6*r;si="BIG"}return{color:n,radius:r,size:"SIZE_"+si}}))}function f(e){for(const t of e.allowedMoves){if(Object.hasOwn(t,"placePiece")){return true}}return false}function p(e,t,r,n,o){let l=document.createElementNS("http://www.w3.org/2000/svg","rect");l.setAttribute("x",0);l.setAttribute("width",400);l.setAttribute("y",240);l.setAttribute("height",20);l.setAttribute("rx",5);r.appendChild(l);let s=h(e,t.blueBench,"blue");let a=h(e,t.redBench,"red");var c=[];line=[{color:"switch"}];if(n){c=s.concat(line).concat(a)}else{c=a.concat(line).concat(s)}const u=f(t);i=0;j=0;yoffset=0;players=["PLAYER_RED","PLAYER_BLUE"];currentPlayer=0;if(n){currentPlayer=1}index=0;for(const e of c){index=index+1;if(e.color=="switch"){i=0;j=0;yoffset=300;currentPlayer=1-currentPlayer;continue}rect={x:100*j,y:yoffset+100*i,dx:100,dy:100};bo={player:"PLAYER_"+e.color.toUpperCase(),size:e.size,color:e.color,rect:rect};let t=E(bo.player,bo.size,rect);t.setAttribute("data-proto",JSON.stringify(bo));t.setAttribute("id","benched_"+bo.player+"_"+index);if(u&&players[currentPlayer]==o){t.addEventListener("click",A);t.style.cursor="grab"}r.appendChild(t);j=j+1;if(j>=4){j=0;i=i+1}}}let w;function A(e){clickedElement=e.target;if(w!=null){document.querySelectorAll(".benchselector").forEach((e=>e.remove()))}w=clickedElement;bo=JSON.parse(clickedElement.getAttribute("data-proto"));console.log(bo);console.log(clickedElement.id);let t=e.target.closest("svg");let r=document.createElementNS("http://www.w3.org/2000/svg","rect");r.setAttribute("x",bo.rect.x);r.setAttribute("y",bo.rect.y);r.setAttribute("width",100);r.setAttribute("height",3);r.setAttribute("fill","red");r.setAttribute("class","benchselector");t.appendChild(r);let n=document.createElementNS("http://www.w3.org/2000/svg","rect");n.setAttribute("x",bo.rect.x);n.setAttribute("y",bo.rect.y);n.setAttribute("width",3);n.setAttribute("height",100);n.setAttribute("fill","red");n.setAttribute("class","benchselector");t.appendChild(n);let o=document.createElementNS("http://www.w3.org/2000/svg","rect");o.setAttribute("x",bo.rect.x+97);o.setAttribute("y",bo.rect.y);o.setAttribute("width",3);o.setAttribute("height",100);o.setAttribute("fill","red");o.setAttribute("class","benchselector");t.appendChild(o);let i=document.createElementNS("http://www.w3.org/2000/svg","rect");i.setAttribute("x",bo.rect.x);i.setAttribute("y",bo.rect.y+97);i.setAttribute("width",100);i.setAttribute("height",3);i.setAttribute("fill","red");i.setAttribute("class","benchselector");t.appendChild(i)}function S(e,t,r){my=5-r;outx=(t+1)*e.outer+(t+.5)*e.inner;return{x:outx,y:(my+1)*e.outer+(my+.5)*e.inner}}function v(e,t,r){outx=(t+1)*e.outer+t*e.inner;my=5-r;return{x:outx,y:(my+1)*e.outer+my*e.inner,dx:e.inner,dy:e.inner}}function I(e,t){x=t.x;y=t.y;cx=(x-e.outer-.5*e.inner)/(e.outer+e.inner);cy=(y-e.outer-.5*e.inner)/(e.outer+e.inner);return{x:Math.round(cx),y:5-Math.round(cy)}}function E(e,t,r){let n=t.split("_")[1].toLowerCase();let o=e.split("_")[1].toLowerCase();let i=document.createElementNS("http://www.w3.org/2000/svg","image");i.setAttribute("x",r.x);i.setAttribute("y",r.y);i.setAttribute("width",r.dx);i.setAttribute("height",r.dy);i.setAttribute("href","/assets/"+n+"_"+o+".png");return i;let l=document.createElementNS("http://www.w3.org/2000/svg","circle");center={x:r.x+r.dx/2,y:r.y+r.dy/2};l.setAttribute("cx",center.x);l.setAttribute("cy",center.y);if(e=="PLAYER_RED"){l.setAttribute("fill","red")}else{l.setAttribute("fill","blue")}if(t=="SIZE_SMALL"){l.setAttribute("r",r.dx/4)}else{l.setAttribute("r",1.6*r.dx/4)}return l}function C(e,t,n){console.log("Game: ",a);console.log("Placed: ",n);for(const i of n){var o=S(e,parseInt(i.x),parseInt(i.y));console.log(o);br=v(e,parseInt(i.x),parseInt(i.y));r=E(i.player,i.size,br);r.setAttribute("data-proto",JSON.stringify(i));t.appendChild(r)}}function q(e){s=e.target.closest("svg");var t=s.getScreenCTM();return{x:(e.clientX-t.e)/t.a,y:(e.clientY-t.f)/t.d}}function _(e){if(e.type=="MOVE_TYPE_PLACE"){ret=document.createElement("span");ret.textContent=" Place a piece.";return ret}}function N(e){ret=document.createElement("span");if(e=="PLAYER_RED"){ret.textContent="Red Player:"}else{ret.textContent="Blue Player:"}return ret}function P(){let e=document.createElementNS("http://www.w3.org/2000/svg","svg");e.setAttribute("id","boardsvg");e.setAttribute("viewBox","0 0 367 367");if(te.v!=undefined){e.style.height=te.v}return e}function O(){let e=document.createElementNS("http://www.w3.org/2000/svg","svg");e.setAttribute("id","benchsvg");e.setAttribute("viewBox","0 0 400 500");if(te.v!=undefined){e.style.height=te.v}return e}function L(e,t,r){let n=v(e,t,r);let o=document.createElementNS("http://www.w3.org/2000/svg","rect");o.setAttribute("x",n.x);o.setAttribute("y",n.y);o.setAttribute("width",n.dx);o.setAttribute("height",3);o.setAttribute("fill","red");o.setAttribute("class","boardhighlight");document.querySelector("#boardsvg").appendChild(o);let i=document.createElementNS("http://www.w3.org/2000/svg","rect");i.setAttribute("x",n.x);i.setAttribute("y",n.y);i.setAttribute("width",3);i.setAttribute("height",n.dy);i.setAttribute("fill","red");i.setAttribute("class","boardhighlight");document.querySelector("#boardsvg").appendChild(i);let l=document.createElementNS("http://www.w3.org/2000/svg","rect");l.setAttribute("x",n.x+n.dx-3);l.setAttribute("y",n.y);l.setAttribute("width",3);l.setAttribute("height",n.dy);l.setAttribute("fill","red");l.setAttribute("class","boardhighlight");document.querySelector("#boardsvg").appendChild(l);let s=document.createElementNS("http://www.w3.org/2000/svg","rect");s.setAttribute("x",n.x);s.setAttribute("y",n.y+n.dy-3);s.setAttribute("width",n.dy);s.setAttribute("height",3);s.setAttribute("fill","red");s.setAttribute("class","boardhighlight");document.querySelector("#boardsvg").appendChild(s)}function T(e,t){let r=document.createElement("li");let n=document.createElement("span");n.textContent="Bench ("+t.bench.x+", "+t.bench.y+")";r.appendChild(n);r.addEventListener("click",(r=>{document.querySelectorAll(".boardhighlight").forEach((e=>e.remove()));let n=document.querySelector("#movement-choices");let o=JSON.stringify(t);n.setAttribute("data-am",o);console.log("Preparing to make this move: ",o);L(e,parseInt(t.bench.x),parseInt(t.bench.y))}));return r}function k(e){return[{x:e.x,y:e.y},{x:e.r,y:e.s},{x:(e.x+e.r)/2,y:(e.y+e.s)/2}]}function M(e,t){let r=document.createElement("li");let n=document.createElement("span");n.textContent="Graduate ("+t.graduateTriplet.x+", "+t.graduateTriplet.y+") -> ("+t.graduateTriplet.r+", "+t.graduateTriplet.s+")";r.appendChild(n);r.addEventListener("click",(r=>{document.querySelectorAll(".boardhighlight").forEach((e=>e.remove()));let n=k({x:parseInt(t.graduateTriplet.x),y:parseInt(t.graduateTriplet.y),r:parseInt(t.graduateTriplet.r),s:parseInt(t.graduateTriplet.s)});n.forEach((t=>{L(e,t.x,t.y)}));let o=document.querySelector("#movement-choices");let i=JSON.stringify(t);o.setAttribute("data-am",i);console.log("Preparing to make this move: ",i)}));return r}function R(e,t){let r=document.querySelector("#movement-choices");while(r.firstChild){r.removeChild(r.firstChild)}if(f(e)){r.classList.add("invisible");r.classList.remove("movechoice_container");return}let n=document.createElement("ul");r.appendChild(n);r.classList.remove("invisible");r.classList.add("movechoice_container");for(const r of e.allowedMoves){if(Object.hasOwn(r,"bench")){let e=T(t,r);n.appendChild(e)}if(Object.hasOwn(r,"graduateTriplet")){let e=M(t,r);n.appendChild(e)}}let o=document.createElement("button");o.textContent="Confirm";o.addEventListener("click",(n=>{let o=r.getAttribute("data-am");let i=JSON.parse(o);fetch("/api/game/play/",{method:"POST",body:JSON.stringify({game_id:e.gameInfo.gameId,player:e.turn,move_choice:i})}).then((e=>{if(e.ok){return e.json()}e.text().then((e=>console.log(e)));return{}})).then((e=>{a=e.game;Z(t,a)}))}));r.appendChild(o)}function B(e){if(e.winner=="PLAYER_RED"){return e.redPlayer+" (yellow)"}return e.bluePlayer+" (gray)"}function z(e){if(e.winCondition=="WIN_CONDITION_BIG_TRIPLET"){return"by placing a triplet of big pieces"}if(e.winCondition=="WIN_CONDITION_ALL_BIG_PLACED"){return"by placing all 8 big pieces on the board"}if(e.winCondition=="WIN_CONDITION_TIMEOUT"){return"by timeout"}return"by an unknown win condition"}function J(e){if(e.status=="GAME_STATUS_WON"){return B(e)+" won "+z(e)+"."}if(e.status=="GAME_STATUS_DRAW"){return"The game is a draw."}return"The status of the game is unknown."}function G(){let e=document.createElementNS("http://www.w3.org/2000/svg","polygon");let t=2;let r=7;let n=10;let o=12;let i=[{x:0,y:-t},{x:0,y:t},{x:n,y:t},{x:n,y:r},{x:o,y:0},{x:n,y:-r},{x:n,y:-t}];e.setAttribute("points",i.map((e=>e.x+","+e.y)).join(" "));e.setAttribute("fill","cornflowerblue");return e}function V(e,t){let r=parseInt(t.x);let n=parseInt(t.y);let o=5;let i="cornflowerblue";let l=v(e,r,n);let s=document.createElementNS("http://www.w3.org/2000/svg","polygon");s.setAttribute("points",l.x+","+l.y+" "+(l.x+o)+","+l.y+" "+l.x+","+(l.y+o));s.setAttribute("fill",i);s.setAttribute("class","lastplayed");document.querySelector("#boardsvg").appendChild(s);let a=document.createElementNS("http://www.w3.org/2000/svg","polygon");a.setAttribute("points",l.x+l.dx-o+","+l.y+" "+(l.x+l.dx)+","+l.y+" "+(l.x+l.dx)+","+(l.y+o));a.setAttribute("fill",i);a.setAttribute("class","lastplayed");document.querySelector("#boardsvg").appendChild(a);let c=document.createElementNS("http://www.w3.org/2000/svg","polygon");c.setAttribute("points",l.x+l.dx+","+(l.y+l.dy-o)+" "+(l.x+l.dx)+","+(l.y+l.dy)+" "+(l.x+l.dx-o)+","+(l.y+l.dy));c.setAttribute("fill",i);c.setAttribute("class","lastplayed");document.querySelector("#boardsvg").appendChild(c);let u=document.createElementNS("http://www.w3.org/2000/svg","polygon");u.setAttribute("points",l.x+","+(l.y+l.dy-o)+" "+(l.x+o)+","+(l.y+l.dy)+" "+l.x+","+(l.y+l.dy));u.setAttribute("fill",i);u.setAttribute("class","lastplayed");document.querySelector("#boardsvg").appendChild(u)}function W(e,t){let n=document.createElementNS("http://www.w3.org/2000/svg","circle");let o=parseInt(t.x);let i=parseInt(t.y);let l=5;let s=v(e,o,i);n.setAttribute("cx",s.x+l);n.setAttribute("cy",s.y+s.dy-l);n.setAttribute("r",l);n.setAttribute("fill","cornflowerblue");n.setAttribute("class","lastplayed");document.querySelector("#boardsvg").appendChild(n);if(false){let e=Array(5).keys().map((e=>e)).map((e=>({x:r*Math.cos(o*(2*Math.PI/5)),y:r*Math.sin(o*(2*Math.PI/5))}))).map((e=>e.x+","+e.y)).toArray().join(" ");let t=document.createElementNS("http://www.w3.org/2000/svg","polyline");t.setAttribute("points",e);t.setAttribute("fill","cornflowerblue");t.setAttribute("stroke","orange");t.setAttribute("class","lastplayed");document.querySelector("#boardsvg").appendChild(t);let n=t.transform.baseVal;let i=t.ownerSVGElement.createSVGTransform();i.setTranslate(s.x+15,s.y+s.dy-15);n.appendItem(i)}}function D(e){let t=parseInt(e.src.x);let r=parseInt(e.src.y);let n=parseInt(e.dst.x);let o=parseInt(e.dst.y);let i=n-t;let l=r-o;return Math.atan2(l,i)*(180/Math.PI)}function Y(e,t){const r=S(e,parseInt(t.src.x),parseInt(t.src.y));const n=S(e,parseInt(t.dst.x),parseInt(t.dst.y));const o={x:(r.x+n.x)/2,y:(r.y+n.y)/2};const i={x:Math.sign(n.x-r.x),y:Math.sign(n.y-r.y)};return{x:o.x-6*i.x,y:o.y-6*i.y}}function $(e,t){let r=G();r.setAttribute("class","lastplayed");document.querySelector("#boardsvg").appendChild(r);let n=r.transform.baseVal;let o=r.ownerSVGElement.createSVGTransform();const i=Y(e,t);o.setTranslate(i.x,i.y);n.appendItem(o);let l=r.ownerSVGElement.createSVGTransform();l.setRotate(D(t),0,0);n.appendItem(l)}function U(e,t){if(t==null){return}document.querySelectorAll(".lastplayed").forEach((e=>{e.remove()}));V(e,t.placed);t.booped.forEach((t=>{$(e,t)}));t.graduated.forEach((t=>{W(e,t)}))}function Z(t,r){let n=document.getElementById("boardsvg");let o=P();e(t,o);C(t,o,r.placed);n.replaceWith(o);let i=document.getElementById("benchsvg");let l=O();p(t,r,l,false,r.turn);R(r,t);i.replaceWith(l);o.addEventListener("click",(e=>g(t,e)));if(Object.hasOwn(r.gameInfo,"lastPlayed")){U(t,r.gameInfo.lastPlayed)}if(r.allowedMoves.length==0){const e=document.querySelector("#gameEndStatus");e.textContent=J(r.gameInfo);const t=document.querySelector("#gameEndDialog");t.addEventListener("close",(()=>{window.location.assign("/")}));t.showModal();return}}function H(e){if(e>=3600){let t=Math.floor(e/3600);return t+"h"+H(e%3600)}if(e>=60){let t=Math.floor(e/60);return t+"min"+H(e%60)}if(e==0){return""}return Math.floor(e)+"s"}let X=0;function F(){K();X=X+1;if(X<10){return}X=0;let e=a.gameInfo.gameId;fetch(`/game/${e}`).then((e=>{if(e.ok){return e.json()}return{}})).then((e=>{if(a.gameInfo.seq!=e.gameInfo.seq){a=e;Z(params,a)}}))}function K(){let e=Date.now()/1e3;if(parseInt(a.gameInfo.timeSettings.redClock.started)>0){remaining=parseInt(a.gameInfo.timeSettings.redClock.started)+parseInt(a.gameInfo.timeSettings.redClock.timeout)-e;document.querySelector("#red_timer_info").textContent=H(remaining)}else{document.querySelector("#red_timer_info").textContent=H(parseInt(a.gameInfo.timeSettings.redClock.timeout))}if(parseInt(a.gameInfo.timeSettings.blueClock.started)>0){remaining=parseInt(a.gameInfo.timeSettings.blueClock.started)+parseInt(a.gameInfo.timeSettings.blueClock.timeout)-e;document.querySelector("#blue_timer_info").textContent=H(remaining)}else{document.querySelector("#blue_timer_info").textContent=H(parseInt(a.gameInfo.timeSettings.blueClock.timeout))}}let Q=2e3;let ee={a:1,b:1};let te={maxw:1,maxh:1};function re(e){let t=Math.max(e.bottom/e.maxh,e.rightmost/e.maxw);if(t>1){return 1}if(t>.97){return 0}return-1}function ne(e){document.querySelector("#boardsvg").style.height=e;document.querySelector("#benchsvg").style.height=e}function oe(e){if(ee.a==undefined){ee.a=1}if(ee.b==undefined){ee.b=ee.a}let t=document.querySelector("html").clientHeight;let r=document.querySelector("html").clientWidth;let n=true;if(r0){if(m<=ee.a){let e=ee.a;ee={a:10,b:e};ne(ee.a);return}}if(m0){ee.b=m;let e=Math.floor((ee.a+ee.b)/2);ne(e);return}ee.a=m;let y=Math.floor((ee.a+ee.b)/2);if(m==y){ee.b=1+2*ee.b;y=ee.b}ne(y);return}function loadGame(e){u=new WebSocket(`/listen/game/${e}`);u.binaryType="arraybuffer";u.onmessage=e=>{const t=JSON.parse(e.data);if(a.gameInfo.seq!=t.gameInfo.seq){a=t;console.log("Websocket received: ",t);Z(params,t)}};fetch(`/game/${e}`).then((e=>e.json())).then((e=>{document.querySelectorAll(".home").forEach((e=>e.remove()));document.querySelector("body").setAttribute("data-game",JSON.stringify(e));a=e;c=a.gameInfo.gameId;Z(params,a);document.querySelector("#blue_player_header").textContent=a.gameInfo.bluePlayer;document.querySelector("#red_player_header").textContent=a.gameInfo.redPlayer;document.querySelector("#topheader").setAttribute("class","main-header");document.querySelector("#gamecontent").setAttribute("class","game-content-visible-wide");setInterval(F,1e3);const t=document.querySelector("#gamecontent");t.setAttribute("class","game-content-visible");const r=document.querySelector("#right");const n=document.querySelector("#left");const o=new ResizeObserver((e=>{oe({})}));o.observe(r);document.querySelector("#left").style.flex="100px";document.querySelector("#right").style.flex="100px";window.visualViewport.addEventListener("resize",oe)}))}function startNewGame(e,t,r){fetch("/api/game/new/",{method:"POST",body:JSON.stringify({red_player:e,blue_player:t})}).then((e=>e.json())).then((e=>{document.querySelectorAll(".home").forEach((e=>e.remove()));document.querySelector("body").setAttribute("data-game",JSON.stringify(e));a=e.game;c=e.id;Z(r,a);document.querySelector("#blue_player_header").textContent=a.gameInfo.bluePlayer;document.querySelector("#red_player_header").textContent=a.gameInfo.redPlayer;document.querySelector("#topheader").setAttribute("class","main-header");document.querySelector("#gamecontent").setAttribute("class","game-content-visible-wide");u=new WebSocket("/listen/game/"+e.id);u.binaryType="arraybuffer";u.onmessage=e=>{const t=JSON.parse(e.data);if(a.gameInfo.seq!=t.gameInfo.seq){a=t;console.log("Websocket received: ",t);Z(r,t)}};setInterval(F,1e3);const t=document.querySelector("#gamecontent");t.setAttribute("class","game-content-visible");const n=document.querySelector("#right");const o=document.querySelector("#left");const i=new ResizeObserver((e=>{oe({})}));i.observe(n);document.querySelector("#left").style.flex="100px";document.querySelector("#right").style.flex="100px";window.visualViewport.addEventListener("resize",oe)}))}function loadMyGames(e){console.log("Load my games %s",e);fetch("/api/game/list/",{method:"POST",body:JSON.stringify({player:e})}).then((e=>{if(e.ok){return e.json()}e.text().then((e=>console.log(e)));return{}})).then((e=>{let t=document.createElement("ul");t.setAttribute("class","home");let r=document.querySelector("#gamelist");r.parentNode.insertBefore(t,r);e.games.forEach((e=>{let r=document.createElement("li");t.appendChild(r);let n=document.createElement("a");n.href="#";let o=e.gameInfo.redPlayer;let i=e.gameInfo.bluePlayer;let l=e.gameInfo.gameId;n.textContent=`${l}: ${o} v ${i}`;n.addEventListener("click",(e=>{loadGame(l)}));r.appendChild(n)}));console.log(e)}))}