dan/slightlyComplicatedTicTacToe
1
0
Fork 0
mirror of https://github.com/danbulant/slightlyComplicatedTicTacToe synced 2026-07-03 10:10:47 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix names, final state fixes, better final message, move scrolling

Browse source
This commit is contained in:
Daniel Bulant 2023-01-20 21:38:17 +01:00
parent b92ec82d4e
commit 3ceae76208
2 changed files with 28 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
client/src/lib/game.svelte
View file

@ -51,6 +51,7 @@
$: currentPlayer = moves[moves.length - 1]?.p == 1 ? 2 : 1; $: currentPlayer = moves[moves.length - 1]?.p == 1 ? 2 : 1;
function getCurrentContainer(_moves?: any) { function getCurrentContainer(_moves?: any) {
if(overallState) return -1;
let last = moves[moves.length - 1]?.j; let last = moves[moves.length - 1]?.j;
if(last == null || last == undefined) return 4; if(last == null || last == undefined) return 4;
@ -66,6 +67,7 @@
return; return;
if(currentContainer !== i) return; if(currentContainer !== i) return;
if(twoPlayer && currentPlayer !== self) return; if(twoPlayer && currentPlayer !== self) return;
if(overallState) return;
moves.push({ p: currentPlayer, i, j }); moves.push({ p: currentPlayer, i, j });
moves = moves; moves = moves;
@ -272,27 +274,43 @@
{#key currentPlayer} {#key currentPlayer}
<div class="absolute top-200 left-0 right-0 text-center" in:fly={{ delay: 300, duration: 300, easing: quadOut, opacity: 0, y: 30 }} out:fly={{ delay: 0, duration: 300, easing: quadOut, opacity: 0, y: -30 }}> <div class="absolute top-200 left-0 right-0 text-center" in:fly={{ delay: 300, duration: 300, easing: quadOut, opacity: 0, y: 30 }} out:fly={{ delay: 0, duration: 300, easing: quadOut, opacity: 0, y: -30 }}>
{#if currentPlayer == 1} {#if overallState == 1 || currentPlayer == 1}
<svg width="16" height="16" class="text-red-500"> <svg width="16" height="16" class="text-red-500">
<line x1="0" y1="0" x2="100%" y2="100%" stroke="currentColor" stroke-width="2" /> <line x1="0" y1="0" x2="100%" y2="100%" stroke="currentColor" stroke-width="2" />
<line x1="100%" y1="0" x2="0" y2="100%" stroke="currentColor" stroke-width="2" /> <line x1="100%" y1="0" x2="0" y2="100%" stroke="currentColor" stroke-width="2" />
</svg> </svg>
{:else} {:else if overallState == 2 || currentPlayer == 2}
<svg width="16" height="16" class="text-blue-500"> <svg width="16" height="16" class="text-blue-500">
<circle cx="50%" cy="50%" r="45%" stroke="currentColor" stroke-width="2" fill="none" /> <circle cx="50%" cy="50%" r="45%" stroke="currentColor" stroke-width="2" fill="none" />
</svg> </svg>
{:else}
<svg width="16" height="16">
<line x1="0" y1="0" x2="100%" y2="100%" stroke="currentColor" stroke-width="2" />
<line x1="100%" y1="0" x2="0" y2="100%" stroke="currentColor" stroke-width="2" />
<circle cx="50%" cy="50%" r="45%" stroke="currentColor" stroke-width="2" fill="none" />
</svg>
{/if} {/if}
is on turn. {#if overallState}
{#if twoPlayer && self == currentPlayer} {#if overallState == 1}
<b>It is <span class:text-red-500={currentPlayer == 1} class:text-blue-500={currentPlayer == 2}>YOUR</span> {selfName ? "(" + selfName + ")" : ""} turn.</b> <b class="text-red-500">{(self == 1 ? selfName : opponentName) || "cross"}</b> won
{:else if twoPlayer && self != currentPlayer} {:else if overallState == 2}
Waiting for <b class:text-red-500={currentPlayer == 1} class:text-blue-500={currentPlayer == 2}>{opponentName || "opponent"}</b>... <b class="text-blue-500">{(self == 2 ? selfName : opponentName) || "circle"}</b> won
{:else if overallState == 3}
draw
{/if}
{:else}
is on turn.
{#if twoPlayer && self == currentPlayer}
<b>It is <span class:text-red-500={currentPlayer == 1} class:text-blue-500={currentPlayer == 2}>YOUR</span> {selfName ? "(" + selfName + ")" : ""} turn.</b>
{:else if twoPlayer && self != currentPlayer}
Waiting for <b class:text-red-500={currentPlayer == 1} class:text-blue-500={currentPlayer == 2}>{opponentName || "opponent"}</b>...
{/if}
{/if} {/if}
</div> </div>
{/key} {/key}
</div> </div>
<div class="info min-w-38 px-4 h-full overflow-y-auto <md:w-full"> <div class="info min-w-38 px-4 h-100vh overflow-y-auto <md:w-full">
<div class="moves"> <div class="moves">
{#if twoPlayer} {#if twoPlayer}
<div class="move text-red-500"> <div class="move text-red-500">

4
client/src/routes/multiplayer/+page.svelte
View file

@ -53,8 +53,8 @@
<Game <Game
twoPlayer twoPlayer
self={$room.host === $connection.name ? 1 : 2} self={$room.host === $connection.name ? 1 : 2}
opponentName={$connection.name} opponentName={[...$connection.players.values()].find(t => t !== $connection?.name)}
selfName={[...$connection.players.values()].find(t => t !== $connection?.name)} selfName={$connection.name}
on:move={addSelfMove} on:move={addSelfMove}
bind:addPlayerMove bind:addPlayerMove
/> />