// Cloned by David Jusev on 1 Dec 2022 from World "Tic-Tac-Toe" by Scott Brady 
// Please leave this clone trail here.
 
function splashScreen(t){return t}let board,p1,p2,turn,currentTurnDiv;AB.world.newRun=function(){AB.socketStart(),AB.runReady=!1},AB.newSplash(splashScreen("Welcome to Tic Tac Toe. The aim of the game is to fill a row, diagonal or column with your symbol, X or O. First to do so is the winner.")),document.getElementById("splashbutton").id="startsplash",$("#startsplash").click(function(){AB.removeSplash(),AB.backgroundMusic(MUSICFILE),AB.runReady=!0,AB.socket&&AB.socket.connected&&console.log("SOCKET CONNECTED")});let cnv,height,activePlayer,turnText="",data={};const POP_SOUND="/uploads/mrprice/mixkit-game-ball-tap-2073.wav",MUSICFILE="/uploads/mrprice/elevator_music.mp3",MAX_TEXT_SIZE=200;function setup(){height=windowHeight-200,p1=new Player("X"),p2=new Player("O");var t=createCanvas(height,height),e=(windowWidth-width)/2,r=(windowHeight-height)/2;t.position(e,r),currentTurnDiv=createDiv("").size(180,100),board=new Board(p1,p2),activePlayer=p1}function draw(){background(color("yellow")),AB.hideRunHeader(),board.display(),currentTurnDiv.style("font-size","50px"),currentTurnDiv.style("font-family","sans-serif"),currentTurnDiv.style("padding-top","25px"),currentTurnDiv.style("margin","auto"),currentTurnDiv.style("width","100%"),currentTurnDiv.style("height","100%"),currentTurnDiv.style("color","white"),currentTurnDiv.style("text-align","center"),currentTurnDiv.style("background-image","url(/uploads/mrprice/bg.jpg)"),currentTurnDiv.style("background-size","cover"),currentTurnDiv.style("background-position","center"),currentTurnDiv.style("background-repeat","no-repeat"),currentTurnDiv.style("background-attachment","fixed")}function playSound(t){"pop"==t&&new Audio(POP_SOUND).play()}function mousePressed(){mouseX>0&&mouseX<height&&mouseY>0&&mouseY<height&&!0===AB.runReady&&(board.winState?(board.newGame(),AB.socketOut("startOver")):("X"===board.turn?(playSound("pop"),p1.select(board)):"O"===board.turn&&(playSound("pop"),p2.select(board)),board.toggleTurn()))}class Board{constructor(t,e){this.cells=[],this.cellSize=(width-1)/3,this.p1=t,this.p2=e,this.turn=this.p1.symbol,this.winState=!1,this.resultText="",this.newGame()}display(){let t=100/MAX_TEXT_SIZE*(height/2),e=this.cellSize;if(this.winState){textSize(.25*t),textAlign(CENTER),text(this.resultText,width/2,height/3),text("Click inside this yellow\nsquare to play again",width/2,height/2);var r=color("teal");fill(r)}else this.cells.forEach(function(r){strokeWeight(25),stroke("rgba(0, 80, 80, 0.8)");var o=color("teal");fill(o),rect(r.row*e,r.col*e,e,e),o=color("yellow"),fill(o),strokeWeight(10),stroke("rgba(173, 167, 0, 0.8)"),textSize(t),textAlign(CENTER),text(r.symbol,r.row*e+e/2,r.col*e+e/2+t/2.8),strokeWeight(0)})}update(t,e,r){let o=this.turn;this.cells.forEach(function(n){n.row===t&&n.col===e&&0===n.val&&(n.symbol=r,"X"===o?(n.val=1,data.element=n):(n.val=-1,data.element=n))});let n=this.checkResult();"X"===n?(this.winState=!0,this.resultText="X wins!"):"O"===n?(this.winState=!0,this.resultText="O wins!"):"tie"===n&&(this.winState=!0,this.resultText="It's a tie!")}toggleTurn(){this.turn==p1.symbol?(data.currentTurn=p2.symbol,this.turn=p2.symbol,activePlayer=p2,turnText="Turn: "+p2.symbol):(data.currentTurn=p1.symbol,this.turn=p1.symbol,activePlayer=p1,turnText="Turn: "+p1.symbol),data.activePlayer=activePlayer,currentTurnDiv.html(turnText),data.turnText=turnText,AB.socketOut(data)}checkResult(){let t,e=this.p1,r=this.p2,o=new Array(3),n=new Array(3),l=new Array(3),s=9;for(let t=0;t<3;t++)o[t]=0,n[t]=0,l[t]=0;return this.cells.forEach(function(t){o[t.row]+=t.val,n[t.col]+=t.val,s-=abs(t.val),0===abs(t.row-t.col)&&(l[0]+=t.val),(2===abs(t.row-t.col)||1==t.row&&1==t.col)&&(l[1]+=t.val)}),o.forEach(function(o){3===o&&(t=e.symbol),-3===o&&(t=r.symbol)}),n.forEach(function(o){3===o&&(t=e.symbol),-3===o&&(t=r.symbol)}),l.forEach(function(o){3===o&&(t=e.symbol),-3===o&&(t=r.symbol)}),0===s&&(t="tie"),t}newGame(){console.log("p1 score"+p1.score),console.log("p2 score"+p2.score),this.winState=!1,this.turn=this.p1.symbol,currentTurnDiv.html("Turn: "+this.p1.symbol),this.cells=[];for(let t=0;t<3;t++)for(let e=0;e<3;e++)this.cells.push({row:t,col:e,symbol:"",val:0})}}class Player{constructor(t){this.symbol=t,this.score=0}select(t){if(t.turn==this.symbol){console.log(t.turn,this.symbol);let e=int(Math.floor(mouseX/t.cellSize)),r=int(Math.floor(mouseY/t.cellSize));t.update(e,r,this.symbol),data.row=e,data.col=r,data.symbol=this.symbol}}}AB.socketIn=function(t){console.log(t.turnText),currentTurnDiv.html(t.turnText),board.update(t.row,t.col,t.symbol),console.log(t.currentTurn),board.turn=t.currentTurn,activePlayer=t.activePlayer,"startOver"==t&&board.newGame()},AB.socketUserlist=function(t){console.log(t.length),t.length>2?(AB.newSplash(splashScreen("<h3>The game is full. Please wait a moment, and then try again.")),document.getElementById("splashbutton").innerHTML="Retry",document.getElementById("splashbutton").onclick=function(){location.reload()}):1===t.length&&(AB.newSplash(splashScreen("<h3>Waiting for a matched player. Please wait a moment and try again.</h3>")),document.getElementById("splashbutton").innerHTML="Retry",document.getElementById("splashbutton").onclick=function(){location.reload()}),AB.socketUserlist=function(){}};