From d12d4f67ff989e7c953a1c519519bd4985004724 Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Sun, 5 May 2024 18:53:16 +0200
Subject: [PATCH] Front rewrite

---
 .vscode/settings.json                         |   6 +
 app.vue                                       |  54 +++-
 components/CardPreview.vue                    |  76 +++---
 components/{CardSlot.vue => CardsGrouped.vue} |  18 +-
 components/GameBoard.vue                      | 109 ++++----
 components/MarketCards.vue                    |  63 +++++
 components/PlayerList.vue                     |  11 -
 components/PlayerListElement.vue              | 137 ++++++++++
 components/PlayerSlot.vue                     | 252 ++++++++++--------
 components/PlayerStats.vue                    |  21 +-
 components/SelfView.vue                       |  87 +-----
 netcode/Effect.ts                             |   9 +-
 netcode/Turn.ts                               |   1 -
 public/images/bg-darkgrass.png                |   3 +
 public/images/bg-grass.png                    |   3 +
 public/images/bg-sand.png                     |   3 +
 16 files changed, 508 insertions(+), 345 deletions(-)
 create mode 100644 .vscode/settings.json
 rename components/{CardSlot.vue => CardsGrouped.vue} (67%)
 create mode 100644 components/MarketCards.vue
 delete mode 100644 components/PlayerList.vue
 create mode 100644 components/PlayerListElement.vue
 create mode 100644 public/images/bg-darkgrass.png
 create mode 100644 public/images/bg-grass.png
 create mode 100644 public/images/bg-sand.png

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..51e1ebb
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,6 @@
+{
+    "files.exclude": {
+        "**/.nuxt/": true,
+        "**/node_modules": true
+    }
+}
\ No newline at end of file
diff --git a/app.vue b/app.vue
index 7aba6ec..e2fb1f9 100644
--- a/app.vue
+++ b/app.vue
@@ -1,22 +1,33 @@
 <script setup lang="ts">
+import { ref } from "vue";
 
-import { ref } from 'vue';
-
-import goStore, { register, setReady } from '@/netcode';
-
-let username = ref<string>('legonzaur')
-
+import goStore, { register, setReady } from "@/netcode";
 
+let username = ref<string>("legonzaur");
 </script>
 <template>
-  <input v-if="!goStore.self && !goStore.game?.started" type="text" v-model="username">
-  <button v-if="!goStore.self && !goStore.game?.started" @click="register(username)">LOGIN</button>
-  <input @change="setReady(($event.target as HTMLInputElement).checked)" v-if="goStore.self && !goStore.game?.started"
-    type="checkbox" id="ready">
-  <label v-if="goStore.self && !goStore.game?.started" for="scales">Ready</label>
-  <div>
-    <GameBoard></GameBoard>
+  <div id="game_status">
+    <template v-if="!goStore.self">
+
+      <div v-if="goStore.game?.started">
+        <b>SPECTATOR MODE</b>
+      </div>
+
+      <template v-if="!goStore.game?.started">
+        <input type="text" v-model="username" />
+        <button @click="register(username)">LOGIN</button>
+      </template>
+    </template>
+
+
+    <template v-if="goStore.self && !goStore.game?.started">
+      <input @change="setReady(($event.target as HTMLInputElement).checked)" type="checkbox" id="ready" />
+      <label for="ready">Ready</label>
+    </template>
   </div>
+
+  <GameBoard></GameBoard>
+
 </template>
 
 <style>
@@ -26,5 +37,20 @@ html {
 
 body {
   margin: 0;
+  height: 100vh;
 }
-</style>
\ No newline at end of file
+
+#__nuxt {
+  height: 100%;
+  user-select: none;
+}
+
+#game_status {
+  position: fixed;
+  z-index: 1;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: rgba(255, 255, 255, .75);
+}
+</style>
diff --git a/components/CardPreview.vue b/components/CardPreview.vue
index 866cf39..a9be10b 100644
--- a/components/CardPreview.vue
+++ b/components/CardPreview.vue
@@ -15,20 +15,13 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits(["click"])
 
-const buttonsElement = ref<HTMLElement | null>(null)
-const rightClicked = ref(false)
+const childCount = ref<number>(0)
 
 function cardClick() {
     if (!props.data) return
     emit("click")
 }
 
-function contextmenu(e: MouseEvent) {
-    if (buttonsElement.value?.childElementCount === 0) { return }
-    buttonsElement.value?.setAttribute("style", `top:${e.clientY + 10}px;left:${e.clientX + 10}px`)
-    rightClicked.value = true
-}
-
 const rotation = ref(0)
 
 // onBeforeUpdate(() => {
@@ -45,40 +38,45 @@ watch(
 </script>
 
 <template>
-    <div :class="`card ${Number(buttonsElement?.childElementCount) > 0 ? 'active' : ''} ${wrapped ? 'wrapped' : ''}`"
-        @contextmenu.prevent="false" @click.left="cardClick" @click.right="contextmenu"
-        :style="`rotate:${rotation}deg;`">
-        <img :class="`card_image ${rightClicked ? 'outlined' : ''} ${props.locked ? 'locked' : ''}`" v-if="props.data"
-            :src="'/cards/' + data?.card_id?.toString().padStart(3, '0') + '.png'">
-
-        <img :class="`card_image ${rightClicked ? 'outlined' : ''} ${props.locked ? 'locked' : ''}`" v-if="!props.data"
-            :src="'/cards/background.png'">
-    </div>
-
-    <div :class="rightClicked ? '' : 'hidden'" id="contextMenu" @click.self.prevent="rightClicked = false">
-        <div id="contextMenuButtons" ref="buttonsElement">
+    <div :class="`card ${childCount > 0 ? 'active' : ''} ${wrapped ? 'wrapped' : ''}`" @contextmenu.prevent="false"
+        @click.left="cardClick" :style="`rotate:${rotation}deg;`">
+        <div id="contextMenuButtons" :ref="(el) => { childCount = ((el as Element)?.childElementCount ?? 0) }">
             <slot></slot>
         </div>
+        <img :class="`card_image ${props.locked ? 'locked' : ''}`" v-if="props.data"
+            :src="'/cards/' + data?.card_id?.toString().padStart(3, '0') + '.png'" draggable="false">
+
+        <img :class="`card_image ${props.locked ? 'locked' : ''}`" v-if="!props.data" :src="'/cards/background.png'"
+            draggable="false">
+
     </div>
 
+
+
+
+
 </template>
 
 <style scoped>
 .card {
     transition: 0.025s rotate linear;
-    transition: max-width .125s linear;
     max-width: 256px;
+    position: relative;
+    display: flex;
 }
 
 .card.active {
     cursor: pointer
 }
 
+.card.active:hover #contextMenuButtons {
+    transform: translateY(100%);
+}
+
 .card_image {
     max-height: 250px;
     transition: all .125s cubic-bezier(0.075, 0.82, 0.165, 1);
-    margin-top: 15px;
-    margin-bottom: 0px
+    z-index: 1;
 }
 
 .card_image.outlined {
@@ -89,39 +87,29 @@ watch(
 .card_image.locked {
     /* filter: brightness(0.5); */
     filter: drop-shadow(5px 15px 2px rgba(0, 0, 0, .60));
-    margin-top: 0px;
-    margin-bottom: 15px;
 }
 
 .card.wrapped {
     max-width: 10px;
 }
 
-.card.wrapped:last-child {
-    max-width: 256px;
-}
-
 .card_image {
     max-height: 250px;
 }
 
-.hidden {
-    display: none;
-}
-
-#contextMenu {
-    z-index: 5;
-    position: fixed;
-    height: 100%;
-    width: 100%;
-    top: 0;
-    left: 0;
-    /* background: rgba(0, 0, 0, .5); */
-}
-
 #contextMenuButtons {
     position: absolute;
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
+    bottom: 0;
+    width: 100%;
+    transform: translateY(0);
+    transition: 0.1s transform cubic-bezier(0.075, 0.82, 0.165, 1);
 }
 </style>
+<style>
+#contextMenuButtons>* {
+    flex: 1;
+    border-radius: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/components/CardSlot.vue b/components/CardsGrouped.vue
similarity index 67%
rename from components/CardSlot.vue
rename to components/CardsGrouped.vue
index ba3b025..ae14fb3 100644
--- a/components/CardSlot.vue
+++ b/components/CardsGrouped.vue
@@ -9,16 +9,13 @@ const props = withDefaults(defineProps<Props>(), {
     stack: () => [],
 })
 
-const unwrapped = ref(false)
-
 </script>
 
 <template>
     <div>
-        <input type="checkbox" v-model="unwrapped" class="checkbox" />
         <div class="cards_container">
             <template v-if="props.stack.length > 0" v-for="c in props.stack">
-                <CardPreview :data="c" :wrapped="!unwrapped">
+                <CardPreview :data="c" :wrapped="true">
                     <slot></slot>
                 </CardPreview>
             </template>
@@ -29,9 +26,16 @@ const unwrapped = ref(false)
 </template>
 
 <style scoped>
+.cards_container::before {
+    width: calc(185px - 10px);
+    display: block;
+    content: "";
+    height: 0;
+}
+
 .cards_container {
-    position: relative;
-    max-width: 30vw;
-    grid-auto-columns: auto;
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: center;
 }
 </style>
\ No newline at end of file
diff --git a/components/GameBoard.vue b/components/GameBoard.vue
index 30a7db8..c4d44a4 100644
--- a/components/GameBoard.vue
+++ b/components/GameBoard.vue
@@ -1,72 +1,65 @@
 <script setup lang="ts">
-import goStore, { buy, useEffect } from '@/netcode';
-import { CardEffects } from '@/netcode/Effect'
-import { CardType } from '@/netcode/Card'
-
-const isTurn = computed(() => goStore.self && goStore.game?.started && (goStore.self.team == goStore.game.current_turn))
+import goStore from '~/netcode';
+import type { Player } from '~/netcode/Player';
 
+const current_players = computed<Array<Player>>(() => Array.from(goStore.players.values()).filter(p => p.team === goStore.game?.current_turn))
 </script>
 
 <template>
-    <div @contextmenu.prevent="false">
-        <div v-if="!goStore.self"><b>SPECTATOR MODE</b></div>
-        <div>
-            market_amount = {{ goStore.game?.market_stack?.length }}
-            <br>
-            <div class="cards_container">
-                <CardSlot :stack="goStore.game?.gem_stack">
-                    <template v-if="isTurn && goStore.game?.gem_stack.length && goStore.game?.gem_stack.length > 0">
-                        <button @click="buy(goStore.game.gem_stack.at(-1)!)">
-                            BUY
-                        </button>
-                        <button
-                            @click="useEffect(goStore.self!.turn.find_effect(CardEffects.PLAY_NEXT_CARD_BOUGHT)!, goStore.game.gem_stack.at(-1))"
-                            :disabled="(goStore.self === undefined || goStore.game.gem_stack.at(-1)!.cost === undefined || (goStore.self?.turn.gold_reserve ?? 0) < goStore.game.gem_stack.at(-1)!.cost!) || !goStore.self!.turn.find_effect(CardEffects.PLAY_NEXT_CARD_BOUGHT)">
-                            BUY IN HAND</button>
-                        <button
-                            @click="useEffect(goStore.self!.turn.find_effect(CardEffects.STACK_NEXT_CARD_BOUGHT)!, goStore.game.gem_stack.at(-1))"
-                            :disabled="(goStore.self === undefined || goStore.game.gem_stack.at(-1)?.cost === undefined || (goStore.self?.turn.gold_reserve ?? 0) < (goStore.game.gem_stack.at(-1)?.cost ?? Infinity)) || !goStore.self!.turn.find_effect(CardEffects.STACK_NEXT_CARD_BOUGHT)">
-                            BUY IN STACK(generic)
-                        </button>
-                    </template>
-                </CardSlot>
-                <CardPreview :data="c" v-for="c in goStore.game?.market" @click="c && buy(c)">
-                    <template v-if="isTurn && c">
-                        <button @click="buy(c)"
-                            :disabled="goStore.self === undefined || c.cost === undefined || (goStore.self?.turn.gold_reserve ?? 0) < c.cost">BUY</button>
-                        <button
-                            @click="useEffect(goStore.self!.turn.find_effect(CardEffects.PLAY_NEXT_CARD_BOUGHT)!, c)"
-                            :disabled="(goStore.self === undefined || c.cost === undefined || (goStore.self?.turn.gold_reserve ?? 0) < c.cost) || !goStore.self!.turn.find_effect(CardEffects.PLAY_NEXT_CARD_BOUGHT)">
-                            BUY IN HAND</button>
-                        <button
-                            @click="useEffect(goStore.self!.turn.find_effect(CardEffects.STACK_NEXT_CARD_BOUGHT)!, c)"
-                            :disabled="(goStore.self === undefined || c.cost === undefined || (goStore.self?.turn.gold_reserve ?? 0) < c.cost) || !goStore.self!.turn.find_effect(CardEffects.STACK_NEXT_CARD_BOUGHT)">
-                            BUY IN STACK (generic)</button>
-                        <button v-if="c.card_type == CardType.ACTION"
-                            @click="useEffect(goStore.self!.turn.find_effect(CardEffects.STACK_NEXT_ACTION_BOUGHT)!, c)"
-                            :disabled="(goStore.self === undefined || c.cost === undefined || (goStore.self?.turn.gold_reserve ?? 0) < c.cost) || !goStore.self!.turn.find_effect(CardEffects.STACK_NEXT_ACTION_BOUGHT)">
-                            BUY IN STACK (actions)</button>
-                    </template>
-                </CardPreview>
-
-            </div>
-
+    <div @contextmenu.prevent="false" id="game_board">
+        <div id="market">
+            <MarketCards></MarketCards>
         </div>
-        <div>
-            <PlayerList>
-            </PlayerList>
+        <div id="player_list">
+            <PlayerListElement v-for="[l, p] in goStore.players" :player="p">
+            </PlayerListElement>
         </div>
+        <div id="current_player">
+            <PlayerSlot v-for="p in current_players" :player="p"></PlayerSlot>
+        </div>
+        <SelfView></SelfView>
     </div>
 </template>
 
-<style>
-.cards_container {
-    display: flex;
-    flex-direction: row-reverse;
-    justify-content: center;
+<style scoped>
+#game_board {
+    display: grid;
+    grid-template-columns: 1fr 400px;
+    grid-template-rows: min-content 1fr;
+    grid-template-areas:
+        "market         player_list"
+        "current_player player_list";
+    height: 100%;
 }
 
-.separator {
-    margin-left: 100px;
+#player_list,
+#current_player {
+    overflow: scroll;
+}
+
+#market {
+    grid-area: market;
+    background-image: url("/images/bg-sand.png");
+    padding: 10px;
+}
+
+#current_player {
+    grid-area: current_player;
+    background-image: url("/images/bg-grass.png");
+    padding-left: 70px;
+}
+
+#player_list {
+    grid-area: player_list;
+    border-left: 5px solid black;
+    border-bottom: 5px solid black;
+    height: 100%;
+    background-image: url("/images/bg-grass.png");
+}
+</style>
+
+<style>
+#player_list .card_image {
+    max-width: 64px;
 }
 </style>
\ No newline at end of file
diff --git a/components/MarketCards.vue b/components/MarketCards.vue
new file mode 100644
index 0000000..2cddb46
--- /dev/null
+++ b/components/MarketCards.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import goStore, { buy, useEffect } from '@/netcode';
+import { CardEffects } from '@/netcode/Effect'
+import { CardType } from '@/netcode/Card'
+
+const isTurn = computed(() => goStore.self && goStore.game?.started && (goStore.self.team == goStore.game.current_turn))
+
+</script>
+
+<template>
+    <div id="market">
+        <CardPreview :data="null"></CardPreview>
+        <div class="separator"></div>
+        <CardPreview :data="c" v-for="c in goStore.game?.market" @click="c && buy(c)">
+            <template v-if="isTurn && c && c.cost && (goStore.self?.turn.gold_reserve ?? 0) >= c.cost">
+                <button @click="buy(c)">BUY</button>
+                <button @click="useEffect(goStore.self!.turn.find_effect(CardEffects.PLAY_NEXT_CARD_BOUGHT)!, c)"
+                    v-if="goStore.self?.turn.find_effect(CardEffects.PLAY_NEXT_CARD_BOUGHT)">
+                    BUY IN HAND</button>
+                <button @click="useEffect(goStore.self!.turn.find_effect(CardEffects.STACK_NEXT_CARD_BOUGHT)!, c)"
+                    v-if="goStore.self?.turn.find_effect(CardEffects.STACK_NEXT_CARD_BOUGHT)">
+                    BUY IN STACK (generic)</button>
+                <button @click="useEffect(goStore.self!.turn.find_effect(CardEffects.STACK_NEXT_ACTION_BOUGHT)!, c)"
+                    v-if="c.card_type == CardType.ACTION && goStore.self?.turn.find_effect(CardEffects.STACK_NEXT_ACTION_BOUGHT)">
+                    BUY IN STACK (actions)</button>
+            </template>
+        </CardPreview>
+        <div class="separator"></div>
+        <CardPreview :data="goStore.game?.gem_stack.at(-1)" @click="buy(goStore.game?.gem_stack.at(-1)!)">
+            <template
+                v-if="isTurn && goStore.game?.gem_stack.length && goStore.game?.gem_stack.length > 0 && (goStore.self?.turn.gold_reserve ?? 0) >= (goStore.game?.gem_stack.at(-1)?.cost ?? Infinity)">
+                <button @click="buy(goStore.game.gem_stack.at(-1)!)">
+                    BUY
+                </button>
+                <button
+                    @click="useEffect(goStore.self!.turn.find_effect(CardEffects.PLAY_NEXT_CARD_BOUGHT)!, goStore.game.gem_stack.at(-1))"
+                    v-if="goStore.self?.turn.find_effect(CardEffects.PLAY_NEXT_CARD_BOUGHT)">
+                    BUY IN HAND</button>
+                <button
+                    @click="useEffect(goStore.self!.turn.find_effect(CardEffects.STACK_NEXT_CARD_BOUGHT)!, goStore.game.gem_stack.at(-1))"
+                    v-if="goStore.self?.turn.find_effect(CardEffects.STACK_NEXT_CARD_BOUGHT)">
+                    BUY IN STACK(generic)
+                </button>
+            </template>
+        </CardPreview>
+    </div>
+
+</template>
+
+<style scoped>
+#market {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    z-index: 2;
+    position: relative;
+}
+
+.separator {
+    width: 50px;
+}
+</style>
\ No newline at end of file
diff --git a/components/PlayerList.vue b/components/PlayerList.vue
deleted file mode 100644
index 630c519..0000000
--- a/components/PlayerList.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script setup lang="ts">
-import goStore from '@/netcode';
-
-</script>
-
-<template>
-    <div v-for="[k, l] in goStore.players">
-        <PlayerSlot :player="l" v-if="l !== goStore.self" :key="k" />
-    </div>
-    <SelfView v-if="goStore.self"></SelfView>
-</template>
\ No newline at end of file
diff --git a/components/PlayerListElement.vue b/components/PlayerListElement.vue
new file mode 100644
index 0000000..be699a8
--- /dev/null
+++ b/components/PlayerListElement.vue
@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import goStore from '@/netcode';
+import type { Player } from "~/netcode/Player";
+
+const view = ref<"main" | "discard">("main")
+
+function show(data: "main" | "discard") {
+    view.value = data
+}
+
+
+export interface Props {
+    player: Player;
+}
+const props = defineProps<Props>()
+
+</script>
+
+<template>
+    <div class="player_list_element">
+        <div class="button" id="player_list_buttons">
+            <div class="main_button" @click="show('main')">
+                <div class="tooltip">Board</div>
+                <img :src="`/cards/${player.board.at(-1)?.card_id.toString().padStart(3, '0') ?? 'background'}.png`"
+                    draggable="false" :class="view === 'main' && 'selected'">
+                <span class="button_card_number">{{ player.board.length }}</span>
+
+            </div>
+            <div class="stack_button">
+                <div class="tooltip">Stack</div>
+                <img :src="'/cards/background.png'" draggable="false">
+                <span class="button_card_number">{{ player.stack_pile.length }}</span>
+
+            </div>
+            <div class="discard_button" @click="show('discard')">
+                <div class="tooltip">Discard</div>
+                <img :src="`/cards/${player.discard_pile.at(-1)?.card_id.toString().padStart(3, '0') ?? 'background'}.png`"
+                    draggable="false" :class="view === 'discard' && 'selected'">
+                <span class="button_card_number">{{ player.discard_pile.length }}</span>
+
+            </div>
+        </div>
+
+        <div class="view">
+            <PlayerSlot :player="player" :hide_stack_and_discard="true" v-if="view == 'main'" />
+            <CardPreview v-for=" card  in  player.discard_pile " :data="card" v-if="view == 'discard'">
+            </CardPreview>
+        </div>
+
+    </div>
+</template>
+
+<style scoped>
+.button>div>img:not(.selected) {
+    filter: brightness(.5)
+}
+
+
+
+.tooltip {
+    visibility: visible;
+    position: absolute;
+    transition: .1s transform;
+    background: white;
+    right: 0;
+}
+
+.button {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    z-index: 1;
+}
+
+.button>div {
+    flex: 1 1 0;
+    border-right: 5px solid black;
+    width: 45px;
+    position: relative;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.button>div:not(.stack_button) {
+    cursor: pointer;
+}
+
+.button div:hover .tooltip {
+    visibility: visible;
+
+    transform: translateX(100%);
+}
+
+.button_card_number {
+    font-size: 2em;
+    position: absolute;
+    text-shadow: white 0 0 1px;
+}
+
+
+.button>div:not(:last-child) {
+    border-bottom: 5px solid black;
+}
+
+
+
+.player_list_element {
+    display: grid;
+    grid-template-columns: min-content 1fr;
+    grid-template-areas:
+        "button     player";
+    border-bottom: 5px solid black;
+    min-height: 200px;
+}
+
+.view {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-content: center;
+    justify-content: center;
+}
+</style>
+
+<style>
+#player_list_buttons img {
+    max-width: 100%;
+    object-fit: contain;
+    position: absolute;
+    display: block;
+    top: 0;
+    bottom: 0;
+    margin: auto 0;
+}
+</style>
\ No newline at end of file
diff --git a/components/PlayerSlot.vue b/components/PlayerSlot.vue
index 392d52b..b798db8 100644
--- a/components/PlayerSlot.vue
+++ b/components/PlayerSlot.vue
@@ -1,156 +1,172 @@
 <script setup lang="ts">
-import goStore, { useEffect, playCard, playAllCards, discard, lockCard, heal, damage_champion, damage_team } from '~/netcode';
-import type { Card } from '~/netcode/Card';
-import type { Player } from '~/netcode/Player';
-import { CardEffects } from '@/netcode/Effect'
-import { CardType } from '~/netcode/Card';
+import goStore, {
+    useEffect,
+    playCard,
+    playAllCards,
+    discard,
+    lockCard,
+    heal,
+    damage_champion,
+    damage_team,
+} from "~/netcode";
+import type { Card } from "~/netcode/Card";
+import type { Player } from "~/netcode/Player";
+import { CardEffects, type Effect } from "@/netcode/Effect";
 
 export interface Props {
-    player: Player
+    player: Player;
+    hide_stack_and_discard?: boolean;
 }
-const props = defineProps<Props>()
 
-const isTurn = computed(() => props.player.team == goStore.game?.current_turn)
-const isSelf = computed(() => props.player.uuid == goStore.self?.uuid)
+const props = withDefaults(defineProps<Props>(), {
+    hide_stack_and_discard: () => false,
+})
 
-const discard_unwrapped = ref(false)
+const isPlayerTurn = computed(() => props.player.team === goStore.game?.current_turn);
+const isSelf = computed(() => props.player.uuid === goStore.self?.uuid);
+const isSelfTurn = computed(() => goStore.self?.team === goStore.game?.current_turn)
+const isPlayerEnemy = computed(() => goStore.self?.team !== props.player.team)
 
+function run_effect(
+    effect_type: CardEffects,
+    target: Player | Card
+) {
+    const effect = goStore.self?.turn.find_effect(effect_type);
+    if (!effect) {
+        return;
+    }
+    useEffect(effect, target);
+}
 
+const make_discard = (target: Player) =>
+    run_effect(CardEffects.DISCARD, target);
+const sacrifice = (target: Card) => run_effect(CardEffects.SACRIFICE, target);
+const stun = (target: Card) => run_effect(CardEffects.STUN, target)
 
 </script>
 
 <template>
-    <div :class="'player ' + (isTurn ? 'turn' : '')">
-        <button @click="heal" v-if="props.player.team == goStore.self?.team"
-            :disabled="(goStore.self?.turn.heal_reserve ?? 0) <= 0">
-            Heal
-        </button>
-        <button @click="damage_team(props.player.team)" v-if="props.player.team != goStore.self?.team"
-            :disabled="(goStore.self?.turn.damage_reserve ?? 0) <= 0">
-            Damage
-        </button>
-        <button v-if="props.player.team != goStore.self?.team"
-            @click="useEffect(goStore.self?.turn.find_effect(CardEffects.DISCARD)!, props.player)"
-            :disabled="!goStore.self?.turn.find_effect(CardEffects.DISCARD)">
-            make Discard</button>
-        <div id="turn_data">
-            <div class="turn_icon">
-                <img src="/images/champion-shield.png" />
-                <span class="turn_icon_number">
-                    {{ props.player.team.health }}
-                </span>
+    <div :class="`player ${isPlayerTurn ? 'turn' : ''}`">
+        <template v-if="!hide_stack_and_discard">
+            <div class="stack">
+                <span>stack =</span>
+                <CardsGrouped :stack="props.player.stack_pile">
+                    <!-- <button v-if="isSelf && isTurn" @click="draw">DRAW</button> -->
+                </CardsGrouped>
             </div>
-            <div class="turn_icon">
-                <img src="/images/heal.png" />
-                <span class="turn_icon_number">
-                    {{ props.player.turn.heal_reserve }}
-                </span>
+            <div class="discard">
+                <CardsGrouped :stack="props.player.discard_pile"> </CardsGrouped>
             </div>
-            <div class="turn_icon">
-                <img src="/images/damage.png" />
-                <span class="turn_icon_number">
-                    {{ props.player.turn.damage_reserve }}
-                </span>
-            </div>
-            <div class="turn_icon">
-                <img src="/images/gold.png" />
-                <span class="turn_icon_number">
-                    {{ props.player.turn.gold_reserve }}
-                </span>
+        </template>
+        <div id="player_stats">
+            <PlayerStats :player="props.player"></PlayerStats>
+            <b>{{ props.player.username }}</b>
+        </div>
+        <div id="current_player_board">
+            <button @click="damage_team(props.player.team)" v-if="isSelfTurn && isPlayerEnemy"
+                :disabled="(goStore.self?.turn.damage_reserve ?? 0) <= 0">
+                Damage
+            </button>
+            <button v-if="isSelfTurn && isPlayerEnemy" @click="make_discard(props.player)"
+                :disabled="!goStore.self?.turn.find_effect(CardEffects.DISCARD)">
+                make Discard
+            </button>
+            <span>effects_availables =
+                <div v-for="e in props.player.turn.effects_availables">
+                    <button v-if="e" @click="useEffect(e)" :disabled="!e.usable">
+                        {{ e.effect + " " + e.effect_type }}
+                    </button>
+                </div>
+            </span>
+            <br />
+
+            <div class="cards_container">
+                <!-- HAND -->
+                <CardPreview :data="c" v-for="c in props.player.hand" @click="c && playCard(c)">
+                    <button v-if="c && isSelf && props.player.turn.discard_markers > 0" @click="discard(c)">
+                        DISCARD
+                    </button>
+                </CardPreview>
+                <!-- BOARD -->
+                <CardPreview :data="c" v-for="c in props.player.board" @click="lockCard(c)"
+                    :locked="c.uuid in props.player.turn.cards_locked">
+                    <template v-if="c && isSelf && isPlayerTurn">
+                        <button v-if="props.player.turn.discard_markers > 0" @click="discard(c)">
+                            DISCARD
+                        </button>
+                        <button
+                            v-if="goStore.self?.turn.find_effect(CardEffects.SACRIFICE) && !(c.uuid in props.player.turn.cards_locked)"
+                            @click="sacrifice(c)">
+                            SACRIFICE
+                        </button>
+                        <button
+                            v-if="c && isSelf && isPlayerTurn && !(c.uuid in (goStore.self?.turn.cards_locked ?? []))"
+                            @click="lockCard(c)">
+                            LOCK
+                        </button>
+                    </template>
+                    <button v-if="isPlayerEnemy && isSelfTurn && (c.health_as_champion ?? 0) > 0"
+                        :disabled="(goStore.self?.turn.damage_reserve ?? 0) <= 0" @click="damage_champion(c)">
+                        DAMAGE
+                    </button>
+                    <button
+                        v-if="isPlayerEnemy && isSelfTurn && goStore.self?.turn.find_effect(CardEffects.STUN) && (c.health_as_champion ?? 0) > 0"
+                        @click="stun(c)">
+                        STUN
+                    </button>
+                </CardPreview>
             </div>
         </div>
-
-        <span>discard_markers = {{ props.player.turn.discard_markers }} </span>
-
-        <span>effects_availables = <div v-for=" e  in  props.player.turn.effects_availables ">
-                <button v-if="e" @click="useEffect(e)" :disabled="!e.usable">
-                    {{ e.effect + ' ' + e.effect_type }}
-                </button>
-
-            </div></span>
-        <br>
-        username = <b>{{ props.player.username }}</b>
-        <br>
-
-        hand =
-        <div class="cards_container">
-            <CardPreview :data="c" v-for="  c  in  props.player.hand  " @click="c && playCard(c)">
-                <button v-if="c && isSelf && isTurn" @click="playCard(c)">PLAY</button>
-                <button v-if="c && isSelf && isTurn && props.player.turn.discard_markers > 0"
-                    @click="discard(c)">DISCARD</button>
-            </CardPreview>
-        </div>
-        <button v-if="isSelf && isTurn && props.player.hand.length > 1"
-            @click="playAllCards(props.player.hand as Card[])">PLAY
-            ALL</button>
-        <br>
-        board =
-        <div class="cards_container">
-            <CardPreview :data="c" v-for="  c   in   props.player.board  " @click="lockCard(c)"
-                :locked="c.uuid in props.player.turn.cards_locked">
-                <button v-if="isSelf && isTurn && props.player.turn.discard_markers > 0"
-                    @click="discard(c)">DISCARD</button>
-                <button v-if="isSelf && isTurn && props.player.turn.discard_markers == 0" @click="lockCard(c)"
-                    :disabled="c.uuid in props.player.turn.cards_locked">
-                    LOCK
-                </button>
-                <button v-if="isSelf && isTurn && props.player.turn.find_effect(CardEffects.SACRIFICE)"
-                    :disabled="!goStore.self || !c || c.uuid in props.player.turn.cards_locked"
-                    @click="useEffect(props.player.turn.find_effect(CardEffects.SACRIFICE)!, c)">SACRIFICE</button>
-
-
-                <div>{{ c.health_as_champion }}</div>
-                <button
-                    v-if="!isSelf && !isTurn && goStore.self?.team == goStore.game?.current_turn && (c.health_as_champion ?? 0) > 0"
-                    :disabled="(goStore.self?.turn.damage_reserve ?? 0) <= 0"
-                    @click="damage_champion(c)">DAMAGE</button>
-                <button
-                    v-if="!isSelf && !isTurn && goStore.self?.team == goStore.game?.current_turn && goStore.self?.turn.find_effect(CardEffects.STUN) && (c.health_as_champion ?? 0) > 0"
-                    @click="useEffect(goStore.self.turn.find_effect(CardEffects.STUN)!, c)">STUN</button>
-            </CardPreview>
-        </div>
-
-        <div class="stack_and_discard">
-            <CardSlot :stack="props.player.stack_pile">
-                <!-- <button v-if="isSelf && isTurn" @click="draw">DRAW</button> -->
-            </CardSlot>
-            <div class="separator"></div>
-            <div class="separator"></div>
-
-            <CardSlot :stack="props.player.discard_pile">
-
-            </CardSlot>
-        </div>
-
-
     </div>
 </template>
 
 <style scoped>
-.stack_and_discard {
+.stack,
+.discard,
+.cards_container {
     display: flex;
-    flex-direction: row-reverse;
+    flex-direction: row;
     justify-content: center;
+    flex-wrap: wrap-reverse;
+}
 
+.stack {
+    grid-area: stack;
+}
+
+.discard {
+    grid-area: discard;
 }
 
 .player {
-    border-top: 5px solid black;
+    display: grid;
+    grid-template-columns: min-content 1fr;
+    grid-template-rows: min-content min-content 1fr;
+    /* border-top: 5px solid black; */
+    grid-template-areas:
+        "player_stats   player_stats"
+        "stack          player"
+        "discard        player";
 }
 
-.turn {
-    background: lightgreen;
+#current_player_board {
+    grid-area: player;
 }
 
 .turn_icon {
     position: relative;
 }
 
-#turn_data {
+#player_stats {
     display: flex;
-    flex-direction: row;
-    align-items: flex-start;
+    grid-area: player_stats;
+    flex-direction: row-reverse;
+    align-items: center;
     justify-content: center;
+    position: sticky;
+    top: 0;
+    padding-top: 1em;
+    z-index: 1;
 }
 
 .turn_icon img {
@@ -163,4 +179,4 @@ const discard_unwrapped = ref(false)
     left: 50%;
     transform: translate(-50%, -50%);
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/components/PlayerStats.vue b/components/PlayerStats.vue
index 658356c..031ab4d 100644
--- a/components/PlayerStats.vue
+++ b/components/PlayerStats.vue
@@ -11,32 +11,30 @@ const props = defineProps<Props>()
 </script>
 
 <template>
-
     <div class="turn_icon">
-        <img src="/images/heal.png" />
-        <span class="turn_icon_number">
-            {{ player.turn.heal_reserve }}
-        </span>
+        <span class="icon_img">🖕</span>
+        <span class="turn_icon_number">{{ player.turn.discard_markers }}</span>
     </div>
     <div class="turn_icon">
-        <img src="/images/damage.png" />
+        <img src="/images/damage.png" class="icon_img" draggable="false" />
         <span class="turn_icon_number">
             {{ player.turn.damage_reserve }}
         </span>
     </div>
     <div class="turn_icon">
-        <img src="/images/gold.png" />
+        <img src="/images/gold.png" class="icon_img" draggable="false" />
         <span class="turn_icon_number">
             {{ player.turn.gold_reserve }}
         </span>
     </div>
     <div class="turn_icon">
-        <img src="/images/champion-shield.png" />
+        <img src="/images/champion-shield.png" class="icon_img" draggable="false" />
         <span class="turn_icon_number">
             {{ player.team.health }}
         </span>
     </div>
 
+
 </template>
 
 <style scoped>
@@ -45,12 +43,17 @@ const props = defineProps<Props>()
     display: flex;
     justify-content: center;
     align-items: center;
+    height: 50px;
 }
 
-.turn_icon img {
+img.icon_img {
     height: 50px;
 }
 
+span.icon_img {
+    font-size: 50px;
+}
+
 .turn_icon_number {
     position: absolute;
     text-shadow: white 0 0 1px;
diff --git a/components/SelfView.vue b/components/SelfView.vue
index a8e330b..6a4e96f 100644
--- a/components/SelfView.vue
+++ b/components/SelfView.vue
@@ -1,21 +1,13 @@
 <script setup lang="ts">
 import goStore, { useEffect, playCard, playAllCards, discard, lockCard, heal, damage_champion, damage_team, endTurn } from '~/netcode';
-import type { Card } from '~/netcode/Card';
 import { CardEffects } from '@/netcode/Effect'
-import { CardType } from '~/netcode/Card';
 
 const isTurn = computed(() => goStore.self?.team == goStore.game?.current_turn)
 
-const discard_unwrapped = ref(false)
-
 </script>
 
 <template>
     <div :class="'player ' + (isTurn ? 'turn' : '')">
-        <button @click="heal" v-if="goStore.self?.team == goStore.self?.team"
-            :disabled="(goStore.self?.turn.heal_reserve ?? 0) <= 0">
-            Heal
-        </button>
         <button v-if="goStore.self && goStore.self?.team != goStore.self?.team"
             @click="useEffect(goStore.self!.turn.find_effect(CardEffects.DISCARD)!, goStore.self)"
             :disabled="!goStore.self!.turn.find_effect(CardEffects.DISCARD)">
@@ -31,78 +23,16 @@ const discard_unwrapped = ref(false)
                     @click="discard(c!)">DISCARD</button>
             </CardPreview>
         </div>
-
-        <span>discard_markers = {{ goStore.self?.turn.discard_markers }} <br></span>
-        <span>effects_availables = <div v-for="e in goStore.self?.turn.effects_availables">
-                <button @click="useEffect(e)" :disabled="!e.usable">
-                    {{ e.effect + ' ' + e.effect_type + ' ' + e.amount }}
-                </button>
-
-            </div></span>
-        <br>
-        board =
-        <div class="cards_container">
-            <CardPreview :data="c" v-for="  c in goStore.self?.board  " @click="lockCard(c)"
-                :locked="c.uuid in (goStore.self?.turn.cards_locked ?? [])">
-                <button v-if="isTurn && (goStore.self?.turn.discard_markers ?? 0) > 0"
-                    @click="discard(c)">DISCARD</button>
-                <button v-if="isTurn && goStore.self?.turn.discard_markers == 0" @click="lockCard(c)"
-                    :disabled="c.uuid in goStore.self?.turn.cards_locked">
-                    LOCK
-                </button>
-                <button v-if="isTurn && goStore.self!.turn.find_effect(CardEffects.SACRIFICE)"
-                    :disabled="!goStore.self || !c || c.uuid in goStore.self?.turn.cards_locked"
-                    @click="useEffect(goStore.self!.turn.find_effect(CardEffects.SACRIFICE)!, c)">SACRIFICE</button>
-
-                <button
-                    v-if="isTurn && goStore.self!.turn.find_effect(CardEffects.PREPARE) && c.card_type == CardType.CHAMPION"
-                    :disabled="!goStore.self || !c || !(c.uuid in goStore.self?.turn.cards_locked)"
-                    @click="useEffect(goStore.self!.turn.find_effect(CardEffects.PREPARE)!, c)">PREPARE</button>
-
-
-                <div>{{ c.health_as_champion }}</div>
-
-            </CardPreview>
-        </div>
-        <br>
-
-        <div class="stack_and_discard">
-            <div>
-                <input type="checkbox" v-model="discard_unwrapped" />
-                <div class="cards_container">
-
-                    <template v-for="c in  goStore.self?.discard_pile   ">
-                        <CardPreview :data="c" :wrapped="!discard_unwrapped">
-                            <!-- <button v-if="isSelf && isTurn" @click="play_from_discard(c)">DRAW</button>
-<button v-if="isSelf && isTurn" @click="put_on_stack_from_discard(c)">PUT ON STACK</button>
--->
-                            <button v-if="isTurn && c.card_type == CardType.CHAMPION"
-                                :disabled="!goStore.self || !c || !goStore.self!.turn.find_effect(CardEffects.RESTACK_DISCARDED_CHAMPION)"
-                                @click="useEffect(goStore.self!.turn.find_effect(CardEffects.RESTACK_DISCARDED_CHAMPION)!, c)">RESTACK
-                                (champion)</button>
-
-                            <button v-if="isTurn"
-                                :disabled="!goStore.self || !c || !goStore.self!.turn.find_effect(CardEffects.RESTACK_DISCARDED_CARD)"
-                                @click="useEffect(goStore.self!.turn.find_effect(CardEffects.RESTACK_DISCARDED_CARD)!, c)">RESTACK
-                                (card)</button>
-                            <button v-if="isTurn"
-                                :disabled="!goStore.self || !c || !goStore.self!.turn.find_effect(CardEffects.SACRIFICE)"
-                                @click="useEffect(goStore.self!.turn.find_effect(CardEffects.SACRIFICE)!, c)">SACRIFICE</button>
-                        </CardPreview>
-                    </template>
-                </div>
-            </div>
-
-            <CardSlot :stack="goStore.self?.stack_pile">
-                <!-- <button v-if="isSelf && isTurn" @click="draw">DRAW</button> -->
-            </CardSlot>
-        </div>
-
-
     </div>
 </template>
 
 <style scoped>
+.cards_container {
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: center;
+}
+
 .stack_and_discard {
     display: flex;
     flex-direction: row-reverse;
@@ -114,10 +44,6 @@ const discard_unwrapped = ref(false)
     border-top: 5px solid black;
 }
 
-.turn {
-    background: lightgreen;
-}
-
 #play_all {
     display: flex;
     flex-direction: row;
@@ -132,6 +58,7 @@ const discard_unwrapped = ref(false)
     display: flex;
     flex-direction: column;
     align-items: flex-start;
+    /* background: lightgreen; */
 }
 
 
diff --git a/netcode/Effect.ts b/netcode/Effect.ts
index de68fd4..d598faa 100644
--- a/netcode/Effect.ts
+++ b/netcode/Effect.ts
@@ -57,13 +57,16 @@ export function create_effect(input: EffectNetcode, register: GameObjectRegister
                     return Object.fromEntries(Object.entries(register.effects).filter(([i, v]) => i in target.mutex))
                 }
                 if (prop == "usable") {
-                    if (target.effect_type == EffectType.FACTION_COMBO) {
+                    if (target.effect_type === EffectType.FACTION_COMBO) {
                         if (!register.self) { return false }
                         // ugly bastard
-                        const card = register.self.value?.board.find(c => c.effects.map(e => e.uuid).includes(effect.uuid))
+                        let cardLocked = register.self.value?.turn.cards_locked
+                        if(!cardLocked) { return false }
+                        let cardList = Object.values(cardLocked)
+                        const card = cardList.find(c => c.effects.map(e => e.uuid).includes(effect.uuid))
 
                         if (!card) { return false }
-                        return register.self.value?.board.some(c => c !== card && c.faction === card.faction)
+                        return cardList.some(c => c !== card && c.faction === card.faction)
                     }
                     return true
                 }
diff --git a/netcode/Turn.ts b/netcode/Turn.ts
index 2b72b7b..0339b07 100644
--- a/netcode/Turn.ts
+++ b/netcode/Turn.ts
@@ -8,7 +8,6 @@ export interface TurnNetcode extends GameObjectNetcode {
     champions_health: { [key: string]: string }
     discard_markers: number
     damage_reserve: number
-    heal_reserve: number
     gold_reserve: number
 }
 
diff --git a/public/images/bg-darkgrass.png b/public/images/bg-darkgrass.png
new file mode 100644
index 0000000..77f3c12
--- /dev/null
+++ b/public/images/bg-darkgrass.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:00dcf0d45261d24ddf6f2cf5ebb95f8b39cdf36c686c1347b19cec220942fd66
+size 1165
diff --git a/public/images/bg-grass.png b/public/images/bg-grass.png
new file mode 100644
index 0000000..c3e685a
--- /dev/null
+++ b/public/images/bg-grass.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3932eab55a27ce4721b57aef801d930b70553fbdf00c2f9ab50518662c35c62f
+size 941
diff --git a/public/images/bg-sand.png b/public/images/bg-sand.png
new file mode 100644
index 0000000..52a2c8b
--- /dev/null
+++ b/public/images/bg-sand.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a8253ca16106b505c7c9cfe3a705c544d08843bfc06a161b98f5a3c6ee712852
+size 786