I'm human

frontend/src/App.svelte

@@ -1,22 +1,9 @@
 <script lang="ts">
-import {fetchState} from "./functions/fetchState";
-    import { CardSuit } from "./types/CardSuit";
-
-async function getState() {
-  let state = await fetchState();
-  console.debug(state);
-
-  if (state.dealerUpcard.suit == CardSuit.Spades){
-    console.debug("Heureka");
-  }else{
-    console.debug("FUCK");
-  }
-
-}
+    import Blackjack from "./lib/Blackjack.svelte";
 
+  
 </script>
 
 <main>
-  <div>Hello world</div>
-  <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" on:click={getState}>Get state</button>
+  <Blackjack/>
 </main>

frontend/src/functions/doAction.ts

@@ -0,0 +1,15 @@
+import type { Action } from "../types/Action";
+import type { Gamestate } from "../types/Gamestate";
+
+export async function doAction(action: Action): Promise<Gamestate> {
+    let res = await fetch("/api/state", {
+        method: "POST",
+        body: JSON.stringify(action),
+        headers: {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json'
+        },
+    });
+
+    return await res.json();
+}

frontend/src/index.css

@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+body {
+    @apply bg-blue-950 text-white;
+}

frontend/src/lib/Blackjack.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+    import { doAction } from "../functions/doAction";
+    import type { Action } from "../types/Action";
+    import type { Gamestate } from "./../types/Gamestate";
+    import { fetchState } from "../functions/fetchState";
+    import Card from "./Card.svelte";
+    import PlayerHand from "./PlayerHand.svelte";
+
+    let state: Gamestate;
+
+    onMount(async () => {
+        state = await fetchState();
+    });
+
+    async function actionBtn(action: Action) {
+       state = await doAction(action);
+    }
+</script>
+
+{#if state}
+    {#if state.type == "starting"}
+        Game has not yet started. Press "Deal" to start.
+    {:else if state.type == "over"}
+        Game over. Press "Deal" to start again.
+        <br>
+        Player:
+        {#each state.players as player}
+            {#each player.hands as hand}
+                <PlayerHand playingHand={hand}/>
+            {/each}
+        {/each}
+    {:else if state.type == "playing"}
+        Dealer: <Card card={state.dealerUpcard} />
+
+        Player:
+        {#each state.players as player}
+            {#each player.hands as hand}
+                <PlayerHand playingHand={hand}/>
+            {/each}
+        {/each}
+    {/if}
+{:else}
+    Loading...
+{/if}
+
+<div>
+    <button
+        class="action-btn bg-blue-700 hover:bg-blue-600"
+        on:click={() => actionBtn({ type: "Deal", players: 1 })}>Deal</button
+    >
+    <button
+        class="action-btn bg-green-700 hover:bg-green-600"
+        on:click={() => actionBtn({ type: "Hit" })}>Hit</button
+    >
+    <button
+        class="action-btn bg-red-700 hover:bg-red-600"
+        on:click={() => actionBtn({ type: "Stand" })}>Stand</button
+    >
+    <button
+        class="action-btn bg-orange-700 hover:bg-orange-600"
+        on:click={() => actionBtn({ type: "DoubleDown" })}>Double down</button
+    >
+    <button
+        class="action-btn bg-cyan-700 hover:bg-cyan-600"
+        on:click={() => actionBtn({ type: "Split" })}>Split</button
+    >
+</div>
+
+<style>
+    .action-btn {
+        @apply py-2 px-4 rounded text-white;
+    }
+</style>

frontend/src/lib/Card.svelte

@@ -2,8 +2,9 @@
     import type { Card } from "../types/Card";
 
     export let card: Card;
+    console.debug(card);
 </script>
 
-<div class="w-2 h-5">
-    I am a {card.index} of {card.suit}!
-</div>
+<div class="w-32 h-36 bg-slate-400 m-1 p-2">
+    {card.index} of {card.suit}
+</div>

frontend/src/lib/PlayerHand.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+    import type { PlayingHand } from "../types/Gamestate";
+    import Card from "./Card.svelte";
+
+    export let playingHand: PlayingHand;
+
+</script>
+
+{#each playingHand.hand as hand}
+    <Card card={hand}/>
+{/each}

frontend/src/types/Action.ts

@@ -0,0 +1,22 @@
+export interface Deal {
+    type: "Deal",
+    players: Number
+}
+
+export interface Hit {
+    type: "Hit"
+}
+
+export interface Stand {
+    type: "Stand"
+}
+
+export interface DoubleDown{
+    type: "DoubleDown"
+}
+
+export interface Split {
+    type: "Split"
+}
+
+export type Action = Deal | Hit | Stand | DoubleDown | Split;

frontend/src/types/CardSuit.ts

@@ -1,6 +1,6 @@
 export enum CardSuit {
-    Spades = "Spades",
-    Clubs = "Clubs",
-    Hearts = "Hearts",
-    Diamonds = "Diamonds",
+    Spades = "S",
+    Clubs = "C",
+    Hearts = "H",
+    Diamonds = "D",
 }

frontend/src/types/Gamestate.ts

@@ -1,5 +1,37 @@
 import type { Card } from "./Card";
 
-export interface Gamestate{
-    dealerUpcard: Card,
+export interface Player {
+    hands: [PlayingHand]
 }
+
+export enum PlayingHandState {
+    Playing = "Playing",
+    Standing = "Standing",
+    DoubleDown = "DoubleDown",
+    Busted = "Busted",
+    Blackjack = "Blackjack",
+    Maxed = "Maxed",
+}
+
+export interface PlayingHand {
+    state: PlayingHandState,
+    hand: [Card]
+}
+
+export interface Over {
+    type: "over",
+    dealerHand: [Card],
+    players: [Player],
+}
+
+export interface Starting {
+    type: "starting",
+}
+
+export interface Playing {
+    type: "playing",
+    dealerUpcard: Card,
+    players: [Player],
+}
+
+export type Gamestate = Over | Starting | Playing;