{#each classes as className, i}
{:else if overallState == 2}
{:else if overallState == 3}
{/if}
{#key currentPlayer}
{#each (new Array(9)) as _, j}
{@const move = moves.find(move => move.i == i && move.j == j)}
{:else if containerStates[i] == 2}
{:else if containerStates[i] == 3}
{/if}
{/each}
{#if overallState == 1}
addMove(i, j)} class:hover={hoveredPiece?.i == i && hoveredPiece.j == j} class="square" class:move class:preview={!move} class:cross={move && move.p==1} class:circle={move && move.p==2} on:mouseover={() => { if(currentContainer == i) hoveredPiece = { i, j } }} on:mouseleave={() => { if(hoveredPiece?.i == i && hoveredPiece.j == j) hoveredPiece = null; }}>
{#if move}
{#if move.p == 1}
{:else}
{/if}
{:else}
{#if currentPlayer == 1}
{:else}
{/if}
{/if}
{/each}
{#if containerStates[i] == 1}
{#if overallState == 1 || currentPlayer == 1}
{:else if overallState == 2 || currentPlayer == 2}
{:else}
{/if}
{#if overallState}
{#if overallState == 1}
{(self == 1 ? selfName : opponentName) || "cross"} won
{:else if overallState == 2}
{(self == 2 ? selfName : opponentName) || "circle"} won
{:else if overallState == 3}
draw
{/if}
{:else}
is on turn.
{#if twoPlayer && self == currentPlayer}
It is YOUR {selfName ? "(" + selfName + ")" : ""} turn.
{:else if twoPlayer && self != currentPlayer}
Waiting for {opponentName || "opponent"}...
{/if}
{/if}
{/key}
{#if twoPlayer}
hoveredPiece = { i: move.i, j: move.j }} on:mouseout={() => { if(hoveredPiece?.j == move.j && hoveredPiece.i == move.i) hoveredPiece = null }} />
{/each}
{self == 1 ? (selfName || "you") : (opponentName || "opponent")}
{self == 2 ? (selfName || "you") : (opponentName || "opponent")}
{/if}
{#each moves as move}