{#each classes as className, i}

{#each (new Array(9)) as _, j} {@const moveIndex = moves.findIndex(cmove => cmove.i == i && cmove.j == j)} {@const move = moves[moveIndex]}

addMove(i, j)} on:keydown={() => 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 = defaultHoveredPiece; }} > {#if move} {#if move.p == 1} {:else} {/if} {:else} {#if currentPlayer == 1} {:else} {/if} {/if}

{/each} {#if containerStates[i] == 1}

{:else if containerStates[i] == 2}

{:else if containerStates[i] == 3}

{/if}

{/each} {#if overallState == 1}

{:else if overallState == 2}

{:else if overallState == 3}

{/if} {#key currentPlayer}

{#if overallState == 1 || !overallState && currentPlayer == 1} {:else if overallState == 2 || !overallState && 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 showMoveList && (movesShown || innerWidth >= 1024 || innerWidth / innerHeight > 1.4)}

1.4} class="lg:hidden bg-black/40 fixed inset-0 z-10" on:click={() => movesShown = false} on:keydown={() => movesShown = false} />

Moves {#key moves.length} {moves.length} {/key}

{#if twoPlayer}

{self == 1 ? (selfName || "you") : (opponentName || "opponent")}

{self == 2 ? (selfName || "you") : (opponentName || "opponent")}

{/if} {#each moves as move} hoveredPiece = { i: move.i, j: move.j }} on:mouseout={() => { if(hoveredPiece?.j == move.j && hoveredPiece.i == move.i) hoveredPiece = defaultHoveredPiece }} /> {/each}

{/if}