From fba7bf1c99e384e3a0a3b33452ddba6dbd2ef2ca Mon Sep 17 00:00:00 2001
From: Daniel Bulant <danbulant@gmail.com>
Date: Thu, 19 Jan 2023 19:16:57 +0100
Subject: [PATCH] clean, working singleplayer

---
 client/src/lib/game.svelte                    | 260 ++++++++++++++++--
 client/src/lib/move.svelte                    |  44 +++
 .../{test => singleplayer}/+page.svelte       |   0
 3 files changed, 274 insertions(+), 30 deletions(-)
 create mode 100644 client/src/lib/move.svelte
 rename client/src/routes/{test => singleplayer}/+page.svelte (100%)

diff --git a/client/src/lib/game.svelte b/client/src/lib/game.svelte
index d5f402d..613b420 100644
--- a/client/src/lib/game.svelte
+++ b/client/src/lib/game.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import Move from "./move.svelte";
+
     var classes = [
         'top left',
         'top middle',
@@ -11,60 +13,250 @@
         'bottom right'
     ];
 
-    var containers: HTMLDivElement[] = new Array(9);
-
     var hoveredPiece: null | { i: number, j: number } = null;
 
     var highlightedContainer: null | number = null;
 
-    $: highlightedContainer = hoveredPiece?.j ?? null;
+    $: highlightedContainer = hoveredPiece ? highlightContainerByPiece(hoveredPiece.j) : null;
+
+    function highlightContainerByPiece(j: number) {
+        if(!containerStates[j]) return j;
+        return getCurrentContainer();
+    }
+
+    function backtrack() {
+        for(let i = moves.length - 1; i >= 0; i--) {
+            if(containerStates[moves[i].i] == 0) {
+                return moves[i].i;
+            }
+        }
+    }
 
     var currentContainer: number = 4;
+    var currentPlayer: 1 | 2 = 1;
 
-    var moves = [
-        { p: 1, i: 4, j: 1 },
-        { p: 2, i: 1, j: 2 },
-        { p: 1, i: 2, j: 4 }
-    ];
+    var moves: { p: 1 | 2, i: number, j: number }[] = [];
+
+    $: currentContainer = getCurrentContainer(moves);
+    $: currentPlayer = moves[moves.length - 1]?.p == 1 ? 2 : 1;
+
+    function getCurrentContainer(_moves?: any) {
+        let last = moves[moves.length - 1]?.j;
+        if(last == null || last == undefined) return 4;
+        
+        if(containerStates[last] == 0) return last;
+        return backtrack() ?? -1;
+    }
+
+    let containerStates = new Array(9).fill(0);
+    let overallState = 0;
+
+    function addMove(i: number, j: number) {
+        if(moves.find(move => move.i == i && move.j == j))
+            return;
+        if(currentContainer !== i) return;
+        moves.push({ p: currentPlayer, i, j });
+        moves = moves;
+
+        updateContainerStates();
+    }
+
+    function updateContainerStates() {
+        for(var i in containerStates) {
+            if(containerStates[i]) continue;
+            var containerMoves = moves.filter(move => move.i === Number(i));
+            var state: number[][] = new Array(3).fill(0).map(t => new Array(3).fill(0));
+            for(var move of containerMoves) {
+                state[Math.floor(move.j / 3)][move.j % 3] = move.p;
+            }
+
+            var winner = 0;
+            for(let num = 0; num < 3; num++) {
+                if(state[num][0] == state[num][1] && state[num][1] == state[num][2] && state[num][0] != 0) {
+                    winner = state[num][0];
+                }
+                if(state[0][num] == state[1][num] && state[1][num] == state[2][num] && state[0][num] != 0) {
+                    winner = state[0][num];
+                }
+            }
+            if(state[0][0] == state[1][1] && state[1][1] == state[2][2] && state[0][0] != 0) {
+                winner = state[0][0];
+            }
+            if(state[0][2] == state[1][1] && state[1][1] == state[2][0] && state[0][2] != 0) {
+                winner = state[0][2];
+            }
+            if(!winner && containerMoves.length == 9) {
+                winner = 3;
+            }
+            
+            containerStates[i] = winner;
+        }
+
+        overallState = 0;
+
+        if(containerStates[0] == containerStates[1] && containerStates[1] == containerStates[2] && containerStates[0] != 0) {
+            overallState = containerStates[0];
+        }
+        if(containerStates[3] == containerStates[4] && containerStates[4] == containerStates[5] && containerStates[3] != 0) {
+            overallState = containerStates[3];
+        }
+        if(containerStates[6] == containerStates[7] && containerStates[7] == containerStates[8] && containerStates[6] != 0) {
+            overallState = containerStates[6];
+        }
+        if(containerStates[0] == containerStates[3] && containerStates[3] == containerStates[6] && containerStates[0] != 0) {
+            overallState = containerStates[0];
+        }
+        if(containerStates[1] == containerStates[4] && containerStates[4] == containerStates[7] && containerStates[1] != 0) {
+            overallState = containerStates[1];
+        }
+        if(containerStates[2] == containerStates[5] && containerStates[5] == containerStates[8] && containerStates[2] != 0) {
+            overallState = containerStates[2];
+        }
+        if(containerStates[0] == containerStates[4] && containerStates[4] == containerStates[8] && containerStates[0] != 0) {
+            overallState = containerStates[0];
+        }
+        if(containerStates[2] == containerStates[4] && containerStates[4] == containerStates[6] && containerStates[2] != 0) {
+            overallState = containerStates[2];
+        }
+        if(!overallState && moves.length == 81) {
+            overallState = 3;
+        }
+    }
+
+    function reset() {
+        moves = [];
+        containerStates = new Array(9).fill(0);
+    }
 </script>
 
-<main class="flex">
-    <div class="board">
+<a href="/" class="arrow-back fixed top-0 left-0 w-4 h-4 m-4 p-2 transform transition-transform hover:-translate-x-1">
+    <svg width="16" height="16">
+        <line y1="50%" x1="0" y2="50%" x2="100%" stroke="currentColor" stroke-width="2" />
+        <line y1="50%" x1="0" y2="100%" x2="50%" stroke="currentColor" stroke-width="2" />
+        <line y1="50%" x1="0" y2="0" x2="50%" stroke="currentColor" stroke-width="2" />
+    </svg>
+</a>
+
+<div on:click={reset} class="reload fixed top-0 left-10 w-4 h-4 m-4 p-2 transform transition-transform rotate-180 hover:rotate-360 active:rotate-540">
+    <svg fill="currentColor" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 489.645 489.645" xml:space="preserve" class="w-full h-full">
+        <g>
+            <path d="M460.656,132.911c-58.7-122.1-212.2-166.5-331.8-104.1c-9.4,5.2-13.5,16.6-8.3,27c5.2,9.4,16.6,13.5,27,8.3
+                c99.9-52,227.4-14.9,276.7,86.3c65.4,134.3-19,236.7-87.4,274.6c-93.1,51.7-211.2,17.4-267.6-70.7l69.3,14.5
+                c10.4,2.1,21.8-4.2,23.9-15.6c2.1-10.4-4.2-21.8-15.6-23.9l-122.8-25c-20.6-2-25,16.6-23.9,22.9l15.6,123.8
+                c1,10.4,9.4,17.7,19.8,17.7c12.8,0,20.8-12.5,19.8-23.9l-6-50.5c57.4,70.8,170.3,131.2,307.4,68.2
+                C414.856,432.511,548.256,314.811,460.656,132.911z"/>
+        </g>
+    </svg>
+</div>
+
+<main class:disabled={overallState} class="flex flex-wrap min-h-100vh min-w-full items-center">
+    <div class="board relative">
         {#each classes as className, i}
-            <div bind:this={containers[i]} class:current={currentContainer === i} class:highlighted={highlightedContainer === i} class="squares-container {className}">
+            <div class:disabled={containerStates[i]} class:current={currentContainer === i} class:highlighted={highlightedContainer === i} class="squares-container {className}">
                 {#each (new Array(9)) as _, j}
-                    <div class="square" on:click={() => console.log(i, j)} on:mouseover={() => hoveredPiece = { i, j }} on:mouseleave={() => { if(hoveredPiece?.i == i && hoveredPiece.j == j) hoveredPiece = null; }}>
-                        {#if moves.find(move => move.i == i && move.j == j)}
-                            {#if moves.find(move => move.i == i && move.j == j)?.p == 1}
+                    {@const move = moves.find(move => move.i == i && move.j == j)}
+                    <div on:click={() => addMove(i, j)} class="square" class:move class:preview={!move} class:cross={move && move.p==1} class:circle={move && move.p==2} on:mouseover={() => hoveredPiece = { i, j }} on:mouseleave={() => { if(hoveredPiece?.i == i && hoveredPiece.j == j) hoveredPiece = null; }}>
+                        {#if move}
+                            {#if move.p == 1}
                                 <svg width="16" height="16">
-                                    <line x1="0" y1="0" x2="100%" y2="100%" stroke="black" stroke-width="2" />
-                                    <line x1="100%" y1="0" x2="0" y2="100%" stroke="black" 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" />
                                 </svg>
                             {:else}
                                 <svg width="16" height="16">
-                                    <circle cx="50%" cy="50%" r="7" stroke="black" stroke-width="2" fill="none" />
+                                    <circle cx="50%" cy="50%" r="45%" stroke="currentColor" stroke-width="2" fill="none" />
+                                </svg>
+                            {/if}
+                        {:else}
+                            {#if currentPlayer == 1}
+                                <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" />
+                                </svg>
+                            {:else}
+                                <svg width="16" height="16">
+                                    <circle cx="50%" cy="50%" r="45%" stroke="currentColor" stroke-width="2" fill="none" />
                                 </svg>
                             {/if}
                         {/if}
                     </div>
                 {/each}
+
+                {#if containerStates[i] == 1}
+                    <div class="winner winner-1">
+                        <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" />
+                        </svg>
+                    </div>
+                {:else if containerStates[i] == 2}
+                    <div class="winner winner-2">
+                        <svg width="16" height="16">
+                            <circle cx="50%" cy="50%" r="45%" stroke="currentColor" stroke-width="2" fill="none" />
+                        </svg>
+                    </div>
+                {:else if containerStates[i] == 3}
+                    <div class="winner winner-3">
+                        <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>
+                    </div>
+                {/if}
             </div>
         {/each}
+
+        {#if overallState == 1}
+            <div class="winner winner-1">
+                <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" />
+                </svg>
+            </div>
+        {:else if overallState == 2}
+            <div class="winner winner-2">
+                <svg width="16" height="16">
+                    <circle cx="50%" cy="50%" r="45%" stroke="currentColor" stroke-width="2" fill="none" />
+                </svg>
+            </div>
+        {:else if overallState == 3}
+            <div class="winner winner-3">
+                <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>
+            </div>
+        {/if}
     </div>
 
-    <div class="moves">
-        {#each moves as move}
-            <div class="move">{move.p == 1 ? "X" : "O"} B{move.i} #{move.j}</div>
-        {/each}
+    <div class="info min-w-60 px-4 min-h-full">
+        <div class="moves">
+            {#each moves as move}
+                <Move player={move.p} board={move.i} piece={move.j} />
+            {/each}
+            <Move latest player={currentPlayer} board={hoveredPiece?.i ?? "?"} piece={hoveredPiece?.j ?? "?"} />
+        </div>
     </div>
 </main>
 
-<div class="chat">
-    
-</div>
 
 
 <style>
+    .winner {
+        @apply absolute inset-4 pointer-events-none;
+    }
+    .winner svg {
+        @apply w-full h-full;
+    }
+    .winner-2 {
+        @apply text-blue-500;
+    }
+    .winner-1 {
+        @apply text-red-500;
+    }
     .moves {
         @apply p-4 font-mono;
     }
@@ -72,27 +264,35 @@
         @apply grid grid-cols-3 grid-rows-3 gap-10 w-max h-max m-auto my-5;
     }
     .squares-container {
-        @apply grid grid-cols-3 grid-rows-3 gap-5 w-max h-max;
+        @apply grid grid-cols-3 grid-rows-3 gap-5 w-max h-max bg-black/5 opacity-35 relative;
     }
 
     .square {
         @apply border-black border-solid border w-6 h-6 p-4 cursor-pointer flex items-center justify-center;
     }
+    .square.preview svg {
+        @apply hidden opacity-20;
+    }
+    .square.preview:hover svg {
+        @apply block;
+    }
+    .square.move, .disabled .square {
+        @apply cursor-not-allowed;
+    }
     .square svg {
         @apply w-full h-full;
     }
     .square:hover {
-        @apply bg-black/20;
+        @apply bg-black/5;
     }
-
     .highlighted {
-        @apply bg-red-700/20;
+        @apply opacity-75;
     }
     .current {
-        @apply bg-green-700/20;
+        @apply opacity-100;
     }
     .highlighted.current {
-        @apply bg-black/20;
+        @apply bg-yellow-600/5;
     }
 
     .top.left, .middle-middle, .bottom.middle, .bottom.right, .middle.right, .top.left .square:first-child, .middle-middle .square:first-child, .bottom.middle .square:first-child, .bottom.right .square:first-child, .middle.right .square:first-child {
diff --git a/client/src/lib/move.svelte b/client/src/lib/move.svelte
new file mode 100644
index 0000000..98f530c
--- /dev/null
+++ b/client/src/lib/move.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+    export var player: number;
+    export var board: number | string;
+    export var piece: number | string;
+    export var latest: boolean = false;
+</script>
+<div class="move" class:latest>
+    <span class="player player-{player}">
+        {#if player == 1}
+            <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" />
+            </svg>
+        {:else}
+            <svg width="16" height="16">
+                <circle cx="50%" cy="50%" r="45%" stroke="currentColor" stroke-width="2" fill="none" />
+            </svg>
+        {/if}
+    </span>
+    <span class="board">B<b>{board}</b></span>
+    <span class="piece">#<b>{piece}</b></span>
+</div>
+
+<style>
+    .move {
+        @apply flex gap-2 p-1 items-center leading-none;
+    }
+    .latest {
+        @apply opacity-35;
+    }
+    .player {
+        @apply inline-block w-1em h-1em;
+        margin-top: -0.225em;
+    }
+    .player svg {
+        @apply w-full h-full;
+    }
+    .player-1 {
+        @apply text-red-500;
+    }
+    .player-2 {
+        @apply text-blue-500;
+    }
+</style>
\ No newline at end of file
diff --git a/client/src/routes/test/+page.svelte b/client/src/routes/singleplayer/+page.svelte
similarity index 100%
rename from client/src/routes/test/+page.svelte
rename to client/src/routes/singleplayer/+page.svelte