Designed "Vier Gewinnt"

vplan-fr · Jan 5, 2024 · 19bb677 · 19bb677
1 parent 042d1ce
commit 19bb677
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 56 deletions.
diff --git a/src/lib/NavContentLayout.svelte b/src/lib/NavContentLayout.svelte
@@ -5,15 +5,17 @@
 
 <div class="absolute flex justify-between top-0 left-0 right-0 p-1 px-3 rounded-b-xl bg-[#e69900] text-white h-fit z-50" style="view-transition-name: navbar">
     <a style="view-transition-name: {$page.url.pathname.slice(1)};" href="/">Zurück</a>
-    <button>
-        <svg class="w-5 h-5 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
-            <path d="M18 7.5h-.423l-.452-1.09.3-.3a1.5 1.5 0 0 0 0-2.121L16.01 2.575a1.5 1.5 0 0 0-2.121 0l-.3.3-1.089-.452V2A1.5 1.5 0 0 0 11 .5H9A1.5 1.5 0 0 0 7.5 2v.423l-1.09.452-.3-.3a1.5 1.5 0 0 0-2.121 0L2.576 3.99a1.5 1.5 0 0 0 0 2.121l.3.3L2.423 7.5H2A1.5 1.5 0 0 0 .5 9v2A1.5 1.5 0 0 0 2 12.5h.423l.452 1.09-.3.3a1.5 1.5 0 0 0 0 2.121l1.415 1.413a1.5 1.5 0 0 0 2.121 0l.3-.3 1.09.452V18A1.5 1.5 0 0 0 9 19.5h2a1.5 1.5 0 0 0 1.5-1.5v-.423l1.09-.452.3.3a1.5 1.5 0 0 0 2.121 0l1.415-1.414a1.5 1.5 0 0 0 0-2.121l-.3-.3.452-1.09H18a1.5 1.5 0 0 0 1.5-1.5V9A1.5 1.5 0 0 0 18 7.5Zm-8 6a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7Z"/>
-        </svg>
-    </button>
-    <Dropdown class="shadow-2xl">
-        <slot name="settings" />
-    </Dropdown>
+    {#if $$slots.settings}    
+        <button>
+            <svg class="w-5 h-5 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+                <path d="M18 7.5h-.423l-.452-1.09.3-.3a1.5 1.5 0 0 0 0-2.121L16.01 2.575a1.5 1.5 0 0 0-2.121 0l-.3.3-1.089-.452V2A1.5 1.5 0 0 0 11 .5H9A1.5 1.5 0 0 0 7.5 2v.423l-1.09.452-.3-.3a1.5 1.5 0 0 0-2.121 0L2.576 3.99a1.5 1.5 0 0 0 0 2.121l.3.3L2.423 7.5H2A1.5 1.5 0 0 0 .5 9v2A1.5 1.5 0 0 0 2 12.5h.423l.452 1.09-.3.3a1.5 1.5 0 0 0 0 2.121l1.415 1.413a1.5 1.5 0 0 0 2.121 0l.3-.3 1.09.452V18A1.5 1.5 0 0 0 9 19.5h2a1.5 1.5 0 0 0 1.5-1.5v-.423l1.09-.452.3.3a1.5 1.5 0 0 0 2.121 0l1.415-1.414a1.5 1.5 0 0 0 0-2.121l-.3-.3.452-1.09H18a1.5 1.5 0 0 0 1.5-1.5V9A1.5 1.5 0 0 0 18 7.5Zm-8 6a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7Z"/>
+            </svg>
+        </button>
+        <Dropdown class="shadow-2xl">
+            <slot name="settings" />
+        </Dropdown>
+    {/if}
 </div>
-<div class="mt-7">
+<main class="flex flex-col justify-start items-center gap-1 mt-7 p-2 m-auto" style="width: calc(100vmin - 1.75rem); height: calc(100vmin - 1.75rem);">
     <slot />
-</div>
+</main>
diff --git a/src/lib/VierGewinnt/BoardView.svelte b/src/lib/VierGewinnt/BoardView.svelte
@@ -4,39 +4,29 @@
     export let board: Board;
 </script>
 
-{#if board.getWinner() != Winner.Pending}
-    Gewonnen hat: {winnerToString(board.getWinner())} !!!
-{/if}
-<div class="container">
+<div class="flex flex-row gap-1 w-full bg-[#48547c] p-1 rounded-md">
     {#each board.columns as column, index}
-    <div class="box">
-        <br>
-        <button on:click={() => {board.doMove(index); board = board}}>X</button>
-        {#each column as field}
-        <div class="box2">
-            {winnerToString(field)}
-        </div>
-        {/each}
-    </div>
+      <div class="flex flex-col gap-1 flex-1">
+          <button on:click={() => {board.doMove(index); board = board}} class="aspect-square flex justify-center items-center">
+            <svg class="w-7 h-7 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 8">
+              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 5.326 5.7a.909.909 0 0 0 1.348 0L13 1"/>
+            </svg>
+          </button>
+          {#each column as field}
+          <div class="flex-1 justify-center items-center">
+            <div class="aspect-square rounded-full bg-white" class:red={field === Winner.Red} class:yellow={field === Winner.Yellow}></div>
+          </div>
+          {/each}
+      </div>
     {/each}
 </div>
 
-
 <style>
-    .container {
-      display: flex;
-    }
-
-    .box {
-      width: 100px;
-      height: 100px;
-      margin: 10px;
-      display: flex;
-      flex-direction: column;
+    .red {
+        background: #e60000;
     }
-
-    .box2 {
-      margin: 10px;
-      border: 1px solid #000;
+    
+    .yellow {
+        background: #e6d700;
     }
 </style>
diff --git a/src/lib/VierGewinnt/VierGewinnt.ts b/src/lib/VierGewinnt/VierGewinnt.ts
@@ -10,7 +10,7 @@ type Player = Exclude<PlayerField, Winner.Pending>;
 
 export class Board {
     columns: PlayerField[][];
-    current_player: Player = Winner.Red;
+    currentPlayer: Player = Winner.Red;
 
     constructor(height: number, width: number) {
         this.columns = [];
@@ -29,11 +29,11 @@ export class Board {
         while (this.columns[column][index] === Winner.Pending) {
             index++;
         }
-        this.columns[column][index-1] = this.current_player;
-        if (this.current_player === Winner.Red) {
-            this.current_player = Winner.Yellow;
+        this.columns[column][index-1] = this.currentPlayer;
+        if (this.currentPlayer === Winner.Red) {
+            this.currentPlayer = Winner.Yellow;
         } else {
-            this.current_player = Winner.Red;
+            this.currentPlayer = Winner.Red;
         }
     }
 
@@ -104,9 +104,9 @@ export class Board {
 export function winnerToString(value: Winner): string {
     switch (value) {
         case Winner.Red:
-            return "R";
+            return "Rot";
         case Winner.Yellow:
-            return "Y";
+            return "Gelb";
         case Winner.Draw:
             return "%";
         case Winner.Pending:

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     const games = {
-        tictactoe: "TicTacToe"
+        tictactoe: "TicTacToe",
+        viergewinnt: "Vier Gewinnt"
     }
 </script>
 

diff --git a/src/routes/tictactoe/+page.svelte b/src/routes/tictactoe/+page.svelte
@@ -12,20 +12,18 @@
 </script>
 
 <NavContentLayout>
-    <main class="flex flex-col justify-start items-center gap-1 p-2 m-auto" style="width: calc(100vmin - 1.75rem); height: calc(100vmin - 1.75rem);">
-        <span class="font-semibold relative mb-2 db-accent-line">
+    <span class="font-semibold relative mb-2 text-nowrap db-accent-line">
         {#if board.getWinner() === Winner.Pending}
             Spieler an der Reihe: {currentPlayerString}
         {:else if board.getWinner() === Winner.Draw}
             Unentschieden 🤯
         {:else}
             {winnerToString(board.getWinner())} hat gewonnen :D 🎉🎉🎉
         {/if}
-        </span>
-        <div class="flex flex-1 relative justify-center items-stretch aspect-square">
-            <BoardView bind:data={board} />
-        </div>
-    </main>
+    </span>
+    <div class="flex flex-1 relative justify-center items-stretch aspect-square">
+        <BoardView bind:data={board} />
+    </div>
     <div slot="settings">
         <DropdownItem>            
             <label for="minmax-range" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Tiefe {depth}</label>

diff --git a/src/routes/viergewinnt/+page.svelte b/src/routes/viergewinnt/+page.svelte
@@ -1,15 +1,33 @@
 <script lang="ts">
-    import { Board } from "$lib/VierGewinnt/VierGewinnt";
+    import { Board, Winner, winnerToString } from "$lib/VierGewinnt/VierGewinnt";
     import BoardView from "$lib/VierGewinnt/BoardView.svelte";
+    import NavContentLayout from "$lib/NavContentLayout.svelte";
+    import { Button, DropdownItem } from "flowbite-svelte";
 
     let board = new Board(10, 12);
+    let barColor: Winner;
+    $: barColor = board.getWinner() === Winner.Pending ? board.currentPlayer : board.getWinner();
 </script>
 
-<main class="w-auto h-screen flex flex-col justify-start items-center gap-1 p-2">
+<NavContentLayout>
+    <span class="font-semibold relative mb-2 text-nowrap db-accent-line" class:red={barColor === Winner.Red} class:yellow={barColor === Winner.Yellow}>
+        {#if board.getWinner() === Winner.Pending}
+            Spieler an der Reihe: {winnerToString(board.currentPlayer)}
+        {:else if board.getWinner() === Winner.Draw}
+            Unentschieden 🤯
+        {:else}
+            {winnerToString(board.getWinner())} hat gewonnen :D 🎉🎉🎉
+        {/if}
+    </span>
     <div class="flex flex-1 relative justify-center items-stretch aspect-square">
         <BoardView bind:board={board} />
     </div>
-</main>
+    <div slot="settings">
+        <DropdownItem>
+            <Button on:click={() => {board = new Board(10, 12)}} class="w-full">Board resetten</Button>
+        </DropdownItem>
+    </div>
+</NavContentLayout>
 
 <style lang="postcss">
     .db-accent-line::after {
@@ -22,6 +40,15 @@
         width: 100%;
         height: 0.35rem;
         background: #e69900;
+        transition: background .2s ease;
         border-radius: 999vw;
     }
+
+    .db-accent-line.red::after {
+        background: #e60000;
+    }
+    
+    .db-accent-line.yellow::after {
+        background: #e6d700;
+    }
 </style>