Merge branch 'feat/panels-visuals' into feat/netcode-rework

app.vue

@@ -4,7 +4,7 @@ const lobby = await login()
 
 // import goStore, { oauth2_register_discord, setup_websocket, heron_cookie_login } from "@/netcode";
 
-// await setup_websocket()
+const router = useRouter();
 
 // useHead
 //   ({

assets/shaders/noise.frag

@@ -23,12 +23,12 @@ void main(){
     
     q=q*.5+.5;
     vec2 r=vec2(0.);
-    r.x=fbm(st+1.*q+vec2(1.7,9.2)+.00515*u_time);
+    r.x=fbm(st+1.*q+vec2(1.7,9.2)+.00215*u_time);
-    r.y=fbm(st+1.*q+vec2(8.3,2.8)+.0126*u_time);
+    r.y=fbm(st+1.*q+vec2(8.3,2.8)+.00526*u_time);
     r=r*.5+.5;
     
     float f=fbm(st+r);
-    
+    f = floor((f+.4)*4.)/4.;
     vec3 color=mix(u_color_start,u_color_end,f*.3);
     
     gl_FragColor=vec4(color,1.);

components/CardPreview.vue

@@ -79,6 +79,7 @@ onMounted(() => {
     max-width: 256px;
     position: relative;
     display: flex;
+    justify-content: center;
     margin-bottom: 0px;
     margin-top: var(--margin-bottom);
     transition: filter .125s cubic-bezier(0.075, 0.82, 0.165, 1), rotate 0.075s cubic-bezier(1, 1.81, .59, 1.42);
@@ -94,6 +95,7 @@ onMounted(() => {
 .card_image {
     max-height: var(--max-height);
     z-index: 1;
+    height: var(--max-height);
 }
 
 .card_image.outlined {
@@ -138,7 +140,12 @@ onMounted(() => {
 }
 
 .card.wrapped {
-    max-width: 10px;
+    max-height: 6px;
+    margin: 0;
+}
+
+.card.wrapped .card_image {
+    filter: drop-shadow(.5px .5px .5px gray) drop-shadow(-.5px -.5px .5px gray);
 }
 
 #contextMenuButtons {

components/CardsGrouped.vue

@@ -12,41 +12,38 @@ const props = withDefaults(defineProps<Props>(), {
 </script>
 
 <template>
-    <div>
+    <div class="cards_container">
-        <div class="cards_container">
+        <template v-if="props.stack.length > 0" v-for="c in props.stack">
-            <template v-if="props.stack.length > 0" v-for="c in props.stack">
+            <CardPreview :card_id="c?.card_id" :wrapped="true">
-                <CardPreview :card_id="c?.card_id" :wrapped="true">
+                <slot></slot>
-                    <slot></slot>
+            </CardPreview>
-                </CardPreview>
+        </template>
-            </template>
+        <template v-if="props.stack.length == 0">
-            <template v-if="props.stack.length == 0">
+            <div class="empty">
-                <div class="empty">
+                <img :class="`card_image`" :src="'/cards/background.png'" draggable="false">
-                    <img :class="`card_image`" :src="'/cards/background.png'" draggable="false">
+            </div>
-                </div>
 
-            </template>
+        </template>
-        </div>
     </div>
-
-
 </template>
 
 <style scoped>
 .cards_container::before {
-    width: calc(185px - 10px);
+    height: calc(250px - 10px);
     display: block;
     content: "";
-    height: 0;
+    width: 0;
 }
 
 .cards_container {
     display: flex;
-    flex-direction: row-reverse;
+    flex-direction: column-reverse;
     justify-content: center;
+    min-width: 200px;
 }
 
 .empty {
-    max-width: 10px;
+    max-height: 10px;
 }
 
 .empty>.card_image {

components/GameBoard.vue

@@ -1,144 +0,0 @@
-<script setup lang="ts">
-import goStore from '~/netcode';
-import type { Player } from '~/netcode/Player';
-import { playSound } from '~/helpers/audioHelpers';
-
-const current_players = computed<Array<Player>>(() => Array.from(goStore.current_game?.players ?? []).filter(p => p.team === goStore.current_game?.current_turn))
-
-watch(
-    () => goStore.current_game?.current_turn?.uuid,
-    () => {
-        if (goStore.current_game?.current_turn?.uuid == goStore.self?.team?.uuid) {
-            playSound('/sounds/ding.mp3')
-        }
-    })
-
-watch(
-    () => goStore.current_game?.losers,
-    () => {
-        if (goStore.self?.uuid && goStore.current_game?.losers && goStore.current_game.losers.includes(goStore.self.uuid)) {
-            showLoserScreen()
-        }
-    })
-
-watch(
-    () => goStore.current_game?.ended,
-    () => {
-        if (goStore.current_game?.ended && goStore.self?.uuid && goStore.current_game?.losers && !goStore.current_game.losers.includes(goStore.self.uuid)) {
-            showWinnerScreen()
-        }
-    })
-
-watch(
-    () => goStore.current_game?.players,
-    (newList, oldList) => {
-        if (!oldList || !newList) { return }
-        if (goStore.current_game?.started) { return }
-        if (newList?.length > oldList.length) {
-            playSound('/sounds/teleport.mp3')
-        }
-
-    })
-
-const showResults = ref(false)
-const showOptions = ref(false)
-const isWinner = ref(false)
-
-function showLoserScreen() {
-    // playSound('/sounds/ding.mp3')
-    showResults.value = true
-    isWinner.value = false
-}
-
-function showWinnerScreen() {
-    // playSound('/sounds/ding.mp3')
-    showResults.value = true
-    isWinner.value = true
-}
-</script>
-
-<template>
-    <div @contextmenu.prevent="false" id="game_board">
-        <AnimatedBackground></AnimatedBackground>
-        <div id="market">
-            <MarketCards></MarketCards>
-        </div>
-        <div id="player_list_container">
-            <div id="player_list">
-                <PlayerListElement v-for="p in goStore.current_game?.players" :player="p">
-                </PlayerListElement>
-            </div>
-        </div>
-
-        <div id="current_player">
-            <template v-for="p in current_players">
-                <!-- <AnimatedBackground :color-start="goStore.self == p ? [.0, .3, .3] : undefined"
-                    :color-end="goStore.self == p ? [.0, 1, 1] : undefined" /> -->
-                <PlayerSlot :player="p"></PlayerSlot>
-            </template>
-
-        </div>
-    </div>
-    <ResultDialog :isVisible="showResults" :won="isWinner" :players="goStore.current_game?.players"
-        @close="showResults = false">
-    </ResultDialog>
-    <GlobalOverlay></GlobalOverlay>
-    <SelfView></SelfView>
-</template>
-
-<style scoped>
-#game_board {
-    display: grid;
-    grid-template-columns: 1fr 450px;
-    grid-template-rows: min-content 1fr;
-    grid-template-areas:
-        "market         player_list"
-        "current_player player_list";
-    height: 100%;
-}
-
-#player_list,
-#current_player {
-    overflow: auto;
-    position: relative;
-    isolation: isolate;
-    /* background: url('/images/bg-darkgrass.png'); */
-}
-
-#current_player {
-    grid-area: current_player;
-}
-
-#market {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-}
-
-#player_list_container {
-    grid-area: player_list;
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    justify-content: center;
-
-    /* background-image: url("/images/bg-darkgrass.png"); */
-}
-
-#player_list {
-    min-height: 90%;
-    background: rgba(0, 0, 0, 0.35);
-    border: 5px solid #000;
-    border-radius: 10px;
-    filter: drop-shadow(2.5px 7.5px 1px rgba(0, 0, 0, .60));
-    margin: 10px;
-    backdrop-filter: blur(10px) contrast(90%) brightness(165%);
-    background: rgba(26, 70, 91, 0.7);
-}
-</style>
-
-<style>
-#player_list .card {
-    --max-height: 90px;
-}
-</style>

components/MarketCards.vue

@@ -2,35 +2,59 @@
 import goStore, { buy, useEffect } from '@/netcode';
 import { CardEffects, type Effect } from '@/netcode/Effect'
 import { CardType } from '@/netcode/Card'
+import gsap from 'gsap'
+
+
 
 const isTurn = computed(() => goStore.self && goStore.current_game?.started && (goStore.self.team == goStore.current_game.current_turn))
 const clientStore = useClientSideStore()
 
 const buyableFiregem = computed(() => goStore?.current_game?.gem_stack.at(-1))
 
+
+function onBeforeEnter(el: Element) {
+    (el as HTMLElement).style.visibility = "hidden"
+    const element = el as HTMLElement
+    element.style.top = element.offsetTop + "px"
+    element.style.left = element.offsetLeft + "px"
+    element.style.zIndex = "999"
+}
+
+function onEnter(el: any, done: () => unknown) {
+    console.log("enter")
+    // setTimeout(() => {
+    //     el.style.visibility = null
+    //     done()
+    // }, 1000)
+    done()
+
+}
+
 </script>
 
 <template>
     <div id="market">
         <CardPreview :tilted="false" :card_id="undefined"></CardPreview>
         <div class="separator"></div>
-        <CardPreview :tilted="false" :card_id="c?.card_id" v-for="c in goStore.current_game?.market"
+        <TransitionGroup name="market_card">
-            @click="c && buy(c)">
+            <CardPreview :tilted="false" :card_id="c?.card_id" v-for="c in goStore.current_game?.market"
-            <template
+                :key="c?.card_id" @click="c && buy(c)">
-                v-if="isTurn && goStore.self?.turn && c && c.cost && (goStore.self?.turn.gold_reserve ?? 0) >= c.cost">
+                <template
-                <button @click.stop="buy(c)">BUY</button>
+                    v-if="isTurn && goStore.self?.turn && c && c.cost && (goStore.self?.turn.gold_reserve ?? 0) >= c.cost">
-                <button @click.stop="clientStore.findUseEffect(CardEffects.PLAY_NEXT_CARD_BOUGHT, c);"
+                    <button @click.stop="buy(c)">BUY</button>
-                    v-if="clientStore.activatedClientside.find((e: Effect) => (e.effect == CardEffects.PLAY_NEXT_CARD_BOUGHT) && e.usable)">
+                    <button @click.stop="clientStore.findUseEffect(CardEffects.PLAY_NEXT_CARD_BOUGHT, c);"
-                    BUY IN HAND</button>
+                        v-if="clientStore.activatedClientside.find((e: Effect) => (e.effect == CardEffects.PLAY_NEXT_CARD_BOUGHT) && e.usable)">
-                <button @click.stop="clientStore.findUseEffect(CardEffects.STACK_NEXT_CARD_BOUGHT, c)"
+                        BUY IN HAND</button>
-                    v-if="clientStore.activatedClientside.find((e: Effect) => (e.effect == CardEffects.STACK_NEXT_CARD_BOUGHT) && e.usable)">
+                    <button @click.stop="clientStore.findUseEffect(CardEffects.STACK_NEXT_CARD_BOUGHT, c)"
-                    BUY IN STACK (generic)</button>
+                        v-if="clientStore.activatedClientside.find((e: Effect) => (e.effect == CardEffects.STACK_NEXT_CARD_BOUGHT) && e.usable)">
+                        BUY IN STACK (generic)</button>
 
-                <button @click.stop="clientStore.findUseEffect(CardEffects.STACK_NEXT_ACTION_BOUGHT, c)"
+                    <button @click.stop="clientStore.findUseEffect(CardEffects.STACK_NEXT_ACTION_BOUGHT, c)"
-                    v-if="c.card_type == CardType.ACTION && clientStore.activatedClientside.find((e: Effect) => (e.effect == CardEffects.STACK_NEXT_ACTION_BOUGHT) && e.usable)">
+                        v-if="c.card_type == CardType.ACTION && clientStore.activatedClientside.find((e: Effect) => (e.effect == CardEffects.STACK_NEXT_ACTION_BOUGHT) && e.usable)">
-                    BUY IN STACK (actions)</button>
+                        BUY IN STACK (actions)</button>
-            </template>
+                </template>
-        </CardPreview>
+            </CardPreview>
+        </TransitionGroup>
         <div class="separator"></div>
         <CardPreview :tilted="false" :card_id="goStore.current_game?.gem_stack.at(-1)?.card_id"
             @click="buy(goStore.current_game?.gem_stack.at(-1)!)">
@@ -52,6 +76,23 @@ const buyableFiregem = computed(() => goStore?.current_game?.gem_stack.at(-1))
 
 </template>
 
+
+<style scoped>
+/* .market_card-leave-active,
+.market_card-move {
+    display: none;
+}
+
+.market_card-enter-from {
+    transform: translate(-500px);
+}
+
+
+.market_card-enter-active,
+.market_card-leave-active {
+    transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
+} */
+</style>
 <style scoped>
 #market {
     width: min-content;

components/PlayerIcon.vue

@@ -12,7 +12,7 @@ const props = defineProps<Props>()
 
 <template>
     <div class="player-icon-container">
-        <img class="avatar" v-if="props.player.image" :src="props.player.image">
+        <img class="avatar" v-if="props.player.image" :src="props.player.image" draggable="false">
         <b class="player-name">{{ props.player.username }}</b>
     </div>
 </template>
@@ -31,7 +31,7 @@ const props = defineProps<Props>()
 
 .player-name {
     font-size: 20px;
-    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     margin-left: 10px;
 
     color: white;

components/PlayerListElement.vue

@@ -2,7 +2,8 @@
 import goStore from '@/netcode';
 import type { Player } from "~/netcode/Player";
 
-const settingsStore = useSettingsStore()
+const emit = defineEmits(['click'])
+
 
 const view = ref<"main" | "discard">("main")
 
@@ -10,150 +11,116 @@ function show(data: "main" | "discard") {
     view.value = data
 }
 
-
 export interface Props {
     player: Player;
+    focused?: Player
 }
 const props = defineProps<Props>()
 
 </script>
 
 <template>
-    <div :class="`player_list_element ${goStore.self === props.player ? 'self' : ''}`">
+    <div class="player_list_element" @click="$emit('click')"
-        <!-- <AnimatedBackground v-if="goStore.self === props.player" :color-start="[.0, .3, .3]" :color-end="[.0, 1, 1]" /> -->
+        :class="{ self: props.player == goStore.self, focused: props.focused == props.player, isTurn: props.player.team == goStore.current_game?.current_turn }">
-        <div class="button" id="player_list_buttons">
+        <div id="player_banner" class="small">
-            <div class="main_button" @click="show('main')">
+            <div class="ready-bubble not-ready" v-if="!props.player.ready && !goStore.current_game?.started">Pas encore
-                <div class="tooltip">Board</div>
+                prêt...
-                <img :src="`/cards/${settingsStore.cardStyle}/${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="ready-bubble ready" v-if="props.player.ready && !goStore.current_game?.started">Prêt!</div>
-                <div class="tooltip">Stack</div>
+            <div id="player_info">
-                <img :src="'/cards/background.png'" draggable="false">
+                <PlayerIcon :player="props.player"></PlayerIcon>
-                <span class="button_card_number">{{ player.stack_pile.length }}</span>
-
             </div>
-            <div class="discard_button" @click="show('discard')">
+            <div id="player_stats">
-                <div class="tooltip">Discard</div>
+                <template v-if="goStore.current_game?.started">
-                <img :src="`/cards/${settingsStore.cardStyle}/${player.discard_pile.at(-1)?.card_id.toString().padStart(3, '0') ?? 'background'}.png`"
+                    <PlayerStats :player="props.player">
-                    draggable="false" :class="view === 'discard' && 'selected'">
+                    </PlayerStats>
-                <span class="button_card_number">{{ player.discard_pile.length }}</span>
+                </template>
-
             </div>
         </div>
 
-        <div class="view">
-            <PlayerSlot :player="player" :hide_stack_and_discard="true" v-if="view == 'main'" />
-            <template v-if="view == 'discard'">
-                <CardPreview :tilted="false" v-for=" card in player.discard_pile " :card_id="card.card_id">
-                </CardPreview>
-            </template>
-
-        </div>
-
     </div>
 </template>
 
 <style scoped>
-.button>div>img:not(.selected) {
-    filter: brightness(.5)
-}
-
-
-
-.tooltip {
-    visibility: hidden;
-    position: absolute;
-    transition: .1s transform;
-    background: white;
-    right: -0px;
-    border-top-right-radius: 1em;
-    border-bottom-right-radius: 1em;
-    padding-right: 1em;
-    transition-property: visibility, transform;
-    transition-duration: 0.5s, 0.1s;
-    transition-timing-function: ease-in-out, ease-in-out;
-}
-
-.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;
-    display: block;
-    transform: translateX(100%);
-    transition-duration: 0, 0.1s;
-}
-
-.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;
+    border-radius: 10px;
-    grid-template-columns: min-content 1fr;
+    margin: 10px;
-    grid-template-areas:
+    filter: drop-shadow(2.5px 7.5px 1px rgba(0, 0, 0, .60));
-        "button     player";
+    transform: translate(-2.5px, -7.5px);
-    border: 5px solid black;
+    backdrop-filter: blur(5px);
-    min-height: 200px;
-    position: relative;
-}
-
-.player_list_element.self {
-    /* background-image: url('/images/bg-grass.png'); */
-}
-
-.view {
     display: flex;
+    justify-content: center;
+    box-sizing: border-box;
+    transition: all .1s;
+    width: 300px;
+    cursor: pointer
+}
+
+.player_list_element::before {
+    border-radius: 10px;
+    background: rgb(15, 179, 255);
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: .5;
+}
+
+.player_list_element.focused {
+    filter: unset;
+    transform: unset;
+}
+
+.player_list_element.isTurn::before {
+    opacity: .1;
+}
+
+.player_list_element.self::before {
+    background: rgb(33, 177, 76);
+}
+
+#player_banner {
+    display: flex;
+    grid-area: player_stats;
     flex-direction: row;
-    flex-wrap: wrap;
+    align-items: center;
-    align-content: center;
+    justify-content: center;
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    pointer-events: none;
+}
+
+#player_banner.small {
+    flex-direction: row
+}
+
+#player_banner>* {
+    pointer-events: all;
+}
+
+#player_stats {
+    display: flex;
+    grid-area: player_stats;
+    flex-direction: row;
+    align-items: center;
     justify-content: center;
 }
-</style>
 
-<style>
+.ready-bubble {
-#player_list_buttons img {
+    color: white;
-    max-width: 100%;
+    padding: 0.5em;
-    object-fit: contain;
+    border-radius: 1em;
-    position: absolute;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-    display: block;
-    top: 0;
-    bottom: 0;
-    margin: auto 0;
 }
 
-.view #contextMenuButtons button:not(.enemy_action) {
+.ready {
-    display: none
+    background-color: green;
+}
+
+.not-ready {
+    background-color: maroon;
 }
 </style>

components/PlayerSlot.vue

@@ -26,7 +26,7 @@ const props = withDefaults(defineProps<Props>(), {
     hide_stack_and_discard: () => false,
 })
 
-const discard_unwrapped = ref(false)
+
 const isPlayerTurn = computed(() => props.player.team === goStore.current_game?.current_turn);
 const isSelf = computed(() => props.player.uuid === goStore.self?.uuid);
 const isSelfTurn = computed(() => goStore.self?.team === goStore.current_game?.current_turn)
@@ -38,8 +38,8 @@ const make_discard = (target: Player) =>
     clientStore.findUseEffect(CardEffects.MAKE_DISCARD, target);
 const sacrifice = (target: Card) => clientStore.findUseEffect(CardEffects.SACRIFICE, target);
 const stun = (target: Card) => clientStore.findUseEffect(CardEffects.STUN, target)
-const restack_discarded_champion = (target: Card) => clientStore.findUseEffect(CardEffects.RESTACK_DISCARDED_CHAMPION, target)
+// const restack_discarded_champion = (target: Card) => clientStore.findUseEffect(CardEffects.RESTACK_DISCARDED_CHAMPION, target)
-const restack_discarded_card = (target: Card) => clientStore.findUseEffect(CardEffects.RESTACK_DISCARDED_CARD, target)
+// const restack_discarded_card = (target: Card) => clientStore.findUseEffect(CardEffects.RESTACK_DISCARDED_CARD, target)
 const prepare_champion = (target: Card) => clientStore.findUseEffect(CardEffects.PREPARE, target)
 
 
@@ -91,70 +91,19 @@ function check_for_guard(player: Player) {
 </script>
 
 <template>
-    <div class="player" :class="{ turn: isPlayerTurn, discard_unwrapped, self: isSelf }">
+    <div class="player" :class="{ turn: isPlayerTurn, self: isSelf }">
-        <template v-if="!hide_stack_and_discard">
+        <div id="player_banner" class="big">test</div>
-            <div class="stack">
+        <div id="turn_buttons">
+            <button id="end_turn" class="end_turn_button turn_icon" :class="{ hidden: !isSelfTurn }"
+                @click="checkEndTurn">END TURN</button>
 
-                <CardsGrouped :stack="props.player.stack_pile">
+            <div class="warning"
-                    <!-- <button v-if="isSelf && isTurn" @click="draw">DRAW</button> -->
+                :class="{ 'warning-fire-gem': warningText == 'P\'tite Fire gem?', 'visible': warning }">
-                </CardsGrouped>
+                /!\<br>{{ warningText }}
-            </div>
-
-            <div class="discard" :class="{ invisible: discard_unwrapped }" @click="() => discard_unwrapped = true">
-                <CardsGrouped :stack="props.player.discard_pile" :visible="!discard_unwrapped"> </CardsGrouped>
-            </div>
-
-            <div class="discard_overlay" v-if="discard_unwrapped">
-                <CardPreview :tilted="false" v-if="discard_unwrapped" :card_id="c.card_id"
-                    v-for="c in props.player.discard_pile">
-                    <template v-if="goStore.self?.turn && c && isSelf && isPlayerTurn">
-                        <button
-                            v-if="clientStore.activatedClientside.find((e: Effect) => (e.effect == CardEffects.SACRIFICE) && e.usable)"
-                            @click.stop="sacrifice(c)">
-                            SACRIFICE
-                        </button>
-                        <button
-                            v-if="c.card_type == CardType.CHAMPION && clientStore.activatedClientside.find((e: Effect) => (e.effect == CardEffects.RESTACK_DISCARDED_CHAMPION) && e.usable)"
-                            @click.stop="restack_discarded_champion(c)">
-                            RESTACK_DISCARDED_CHAMPION
-                        </button>
-                        <button
-                            v-if="clientStore.activatedClientside.find((e: Effect) => (e.effect == CardEffects.RESTACK_DISCARDED_CARD) && e.usable)"
-                            @click.stop="restack_discarded_card(c)">
-                            RESTACK_DISCARDED_CARD
-                        </button>
-
-                    </template>
-                </CardPreview>
-            </div>
-            <div :id="`discard_unwrapped_bg`" :class="`${discard_unwrapped ? 'unwrapped' : ''}`"
-                @click="() => discard_unwrapped = false"></div>
-        </template>
-        <div id="player_banner" :class="hide_stack_and_discard ? 'small' : 'big'">
-            <div class="ready-bubble not-ready" v-if="!props.player.ready && !goStore.current_game?.started">Pas encore
-                prêt...
-            </div>
-            <div class="ready-bubble ready" v-if="props.player.ready && !goStore.current_game?.started">Prêt!</div>
-            <div id="player_info">
-                <PlayerIcon :player="props.player"></PlayerIcon>
-            </div>
-            <div id="player_stats">
-                <template v-if="goStore.current_game?.started">
-                    <PlayerStats :player="props.player">
-                    </PlayerStats>
-                    <template v-if="!hide_stack_and_discard">
-                        <button id="end_turn" class="end_turn_button turn_icon" :class="{ hidden: !isSelfTurn }"
-                            @click="checkEndTurn">END TURN</button>
-
-                        <div class="warning"
-                            :class="{ 'warning-fire-gem': warningText == 'P\'tite Fire gem?', 'visible': warning }">
-                            /!\<br>{{ warningText }}
-                        </div>
-                    </template>
-
-                </template>
             </div>
         </div>
+
+
         <div id="current_player_board">
             <div class="other_player_buttons_container">
                 <button @click.stop="damage_team(props.player.team)"
@@ -178,13 +127,16 @@ function check_for_guard(player: Player) {
 
             <div class="cards_container">
                 <!-- HAND -->
-                <CardPreview :card_id="c?.card_id" v-for="c in props.player.hand" @click="c && playCard(c)">
+                <template v-if="props.player != goStore.self">
-                    <button
+                    <CardPreview :card_id="c?.card_id" v-for="c in props.player.hand" @click="c && playCard(c)">
-                        v-if="props.player.turn && c && isSelf && (props.player.turn.discard_markers + props.player.turn.fuck_u_markers) > 0"
+                        <button
-                        @click.stop="discard(c)">
+                            v-if="props.player.turn && c && isSelf && (props.player.turn.discard_markers + props.player.turn.fuck_u_markers) > 0"
-                        DISCARD
+                            @click.stop="discard(c)">
-                    </button>
+                            DISCARD
-                </CardPreview>
+                        </button>
+                    </CardPreview>
+                </template>
+
                 <!-- BOARD -->
                 <CardPreview :card_id="c.card_id" v-for="c in props.player.board" @click="lockCard(c)"
                     :locked="props.player.turn && c.uuid in props.player.turn.cards_locked">
@@ -268,6 +220,13 @@ function check_for_guard(player: Player) {
     background-color: rgba(255, 165, 0, 0.7);
 }
 
+#turn_buttons {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
 #end_turn {
     z-index: 10;
     height: 100%;
@@ -304,52 +263,16 @@ function check_for_guard(player: Player) {
     visibility: hidden;
 }
 
-
-.discard_overlay {
-    z-index: 9;
-    display: flex;
-    /* background: blue; */
-    pointer-events: none;
-    gap: 2px;
-    flex-wrap: wrap-reverse;
-    align-content: flex-end;
-    cursor: default;
-    position: absolute;
-    padding-bottom: inherit;
-    padding-left: 40px;
-    height: calc(100% - 64px);
-    padding-top: 64px;
-    width: calc(100% -40px);
-    margin-left: 0;
-}
-
-#discard_unwrapped_bg {
-    display: none;
-    position: absolute;
-    left: 0;
-    top: 0;
-    height: 100%;
-    width: 100%;
-    z-index: 8;
-    background: rgba(0, 0, 0, 0.5);
-    pointer-events: all;
-    padding: inherit;
-}
-
-#discard_unwrapped_bg.unwrapped {
-    display: block;
-}
-
 .player {
     display: grid;
-    grid-template-columns: min-content 1fr;
+    grid-template-columns: 1fr;
-    grid-template-rows: min-content min-content 1fr;
+    grid-template-rows: min-content 1fr;
     /* border-top: 5px solid black; */
     grid-template-areas:
-        "player_stats   player_stats"
+        "player_stats"
-        "stack          player"
+        "player";
-        "discard        player";
     transition: all 1s;
+    <<<<<<< HEAD
     /* margin-bottom: -75px;
     padding-bottom: 75px; */
 }
@@ -358,20 +281,16 @@ function check_for_guard(player: Player) {
     grid-template-areas:
         "player_stats   player_stats"
         "stack          player";
+    =======justify-items: center;
+    /* margin-bottom: -75px;
+    padding-bottom: 75px; */
+    >>>>>>>feat/panels-visuals
 }
 
 #current_player_board {
     grid-area: player;
 }
 
-.other_player_buttons_container {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: 0 5px;
-}
-
 .damage_button {
     background-color: #ff4d4d;
     color: white;
@@ -453,28 +372,6 @@ function check_for_guard(player: Player) {
 }
 
 
-#player_banner {
-    display: flex;
-    grid-area: player_stats;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    position: sticky;
-    top: 0;
-    padding-top: 1em;
-    z-index: 1;
-    pointer-events: none;
-}
-
-#player_banner.small {
-    flex-direction: column
-}
-
-#player_banner>* {
-    pointer-events: all;
-}
-
-
 #player_info {
     display: flex;
     align-items: center;
@@ -482,23 +379,21 @@ function check_for_guard(player: Player) {
 }
 
 #player_banner.big {
-    padding: 0;
+    <<<<<<< HEAD padding: 0;
     left: 50%;
     transform: translateX(-50%);
-    max-width: min-content;
+    =======
+    /* padding: 0;
+    left: 50%;
+    transform: translateX(-50%); */
+    >>>>>>>feat/panels-visuals max-width: min-content;
     border: 5px solid black;
     border-radius: 10px;
     filter: drop-shadow(2.5px 7.5px 1px rgba(0, 0, 0, .60));
     backdrop-filter: blur(5px) brightness(80%) grayscale(80%);
 }
 
-#player_stats {
+
-    display: flex;
-    grid-area: player_stats;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-}
 
 #player_banner img {
     height: 50px;
@@ -544,22 +439,6 @@ function check_for_guard(player: Player) {
     /* Remove shadow on click */
 }
 
-.ready-bubble {
-    color: white;
-    padding: 0.5em;
-    border-radius: 1em;
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-    margin-bottom: 3%;
-}
-
-.ready {
-    background-color: green;
-}
-
-.not-ready {
-    background-color: maroon;
-}
-
 .suicide_effect {
     background: linear-gradient(to bottom right, #666666, #ccc);
     color: red;

components/PlayerStats.vue

@@ -17,20 +17,20 @@ const props = defineProps<Props>()
             {{ player.team?.health }}
         </span>
     </div>
-    <div class="turn_icon">
+    <!-- <div class="turn_icon" v-if="showTurnData">
         <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">
+    <div class="turn_icon" v-if="showTurnData">
         <img src="/images/damage.png" class="icon_img" draggable="false" />
         <span class="turn_icon_number">
             {{ player.turn?.damage_reserve }}
         </span>
-    </div>
+    </div> -->
     <div class="turn_icon">
-        <span class="icon_img">🖕</span>
+        <img src="/images/fuck.svg" class="icon_img" draggable="false" />
         <span class="turn_icon_number">{{ (player.turn?.discard_markers ?? 0) + (player.turn?.fuck_u_markers ?? 0)
             }}</span>
     </div>
@@ -47,11 +47,11 @@ const props = defineProps<Props>()
     display: flex;
     justify-content: center;
     align-items: center;
-    height: 50px;
 }
 
 img.icon_img {
     height: 50px;
+    width: 50px;
 }
 
 span.icon_img {

components/RulesDisplay.vue

@@ -1,319 +0,0 @@
-<script setup lang="ts">
-
-import type { Card } from '~/netcode/Card';
-
-const router = useRouter();
-
-</script>
-<template>
-    <div class="background">
-        <div class="overlay-2">
-            <div class="erika-zone-2">
-                <img @click="router.push({ path: '/' })" class="overlay-image"
-                    src="https://static.wikia.nocookie.net/umineko/images/9/9d/PC_Erika.Casual.Sprite_36.png"
-                    alt="pétasse" />
-            </div>
-        </div>
-        <div class="text-content">
-            <h1>Règles de Héron Realms</h1>
-            <section>
-                <p>Héron Realms, c'est un jeu de <span style="text-decoration:line-through;">héron building</span>
-                    deck-building.</p>
-                <p>Tout le monde part d'un même deck de base.</p>
-                <p>Le but du jeu est de l'enrichir pour obtenir de quoi gagner.</p>
-                <p>Et comme la violence est une solution universelle, ça se traduit en battre ses adversaires.</p>
-                <p>&#8203;</p>
-                <p>Et quoi de mieux pour faire ça que des cartes colorées?</p>
-                <div class="card-row">
-                    <CardPreview :card_id="6" :tilted="false"></CardPreview>
-                    <CardPreview :card_id="19" :tilted="false"></CardPreview>
-                    <CardPreview :card_id="36" :tilted="false"></CardPreview>
-                    <CardPreview :card_id="46" :tilted="false"></CardPreview>
-                </div>
-                <p>&#8203;</p>
-                <hr>
-                <p>&#8203;</p>
-                <h2>Objectif</h2>
-                <p>L'unique objectif du jeu est d'être le dernier en lice. Pour y arriver, il faut descendre les Points
-                    de Vie de vos adversaires à 0 en partant de 50.</p>
-                <p>
-                    Le moyen principal d'y arriver, c'est de faire des <span style="color: red">Dégats</span> <img
-                        src="/images/damage.png" class="icon_img" draggable="false" />. Tout le reste des mécaniques du
-                    jeu sont là pour vous faciliter la tâche,
-                    ou pour mettre des bâtons dans les roues de vos adversaires.
-                </p>
-                <p>&#8203;</p>
-                <hr>
-                <h2>Deckbuilding</h2>
-                <p>Comme c'est un jeu de "deckbuilding", on va expliquer ce qu'est le "deck" et ce qui nous permet de le
-                    "build".</p>
-                <div class="card-row">
-                    <CardPreview :card_id="undefined" :tilted="false"></CardPreview>
-                </div>
-                <p>&#8203;</p>
-                <p>
-                    Le deck d'un joueur est-ce qui constitue sa pioche, qui lui permettra ensuite de constituer sa main
-                    (la main est préparée à la fin du tour et permet de jouer le tour d'après).
-                </p>
-                <p>
-                    Quand la pioche est vide, elle est recyclée à partir de sa défausse.
-
-                </p>
-                <p>
-                    La défausse est ce qui contient les cartes déjà jouées. Mais aussi celles qui sont achetées! Elle
-                    finit par être mélangée pour former la nouvelle pioche.
-                </p>
-                <p>&#8203;</p>
-                <hr>
-                <h2>Deck de base</h2>
-                <p>
-                    Tout le monde commence avec 10 cartes divisées en 4 types:
-                </p>
-                <ul>
-                    <li>7x Or (1)</li>
-                    <li>1x Or (2)</li>
-                    <li>1x Dégats (1)</li>
-                    <li>1x Dégats (2)</li>
-                </ul>
-                <div class="card-row">
-                    <CardPreview :card_id="56" :tilted="false"></CardPreview>
-                    <CardPreview :card_id="59" :tilted="false"></CardPreview>
-                    <CardPreview :card_id="58" :tilted="false"></CardPreview>
-                    <CardPreview :card_id="57" :tilted="false"></CardPreview>
-                </div>
-                <p>
-                    La pioche est formée au hasard: on peut donc avoir une main de départ avec 5 or et 2 dégats, ou 3 or
-                    et 4 dégats, ou 4 or et 3 dégats, etc.
-                </p>
-                <p>
-                    A partir de sa main, on peut jouer des cartes. Ces cartes peuvent déclencher des effets: on peut
-                    considérer qu'ils vont dans un "pool commun", et qu'on peut les utiliser dans
-                    l'ordre qu'on souhaite. 1 de dégats et 2 de dégats me donnent 3 ressources de dégats que je split
-                    comme je veux ensuite. Pareil pour l'or et pour le soin, qui sont les 3 ressources
-                    principales du jeu.
-                </p>
-                <p>&#8203;</p>
-                <hr>
-                <h2>Types de cartes</h2>
-                <p>
-                    Les cartes sont divisées en 3 catégories: objets, actions et champions.
-                </p>
-                <div class="card-row">
-                    <CardPreview :card_id="56" :tilted="false"></CardPreview>
-                    <CardPreview :card_id="52" :tilted="false"></CardPreview>
-                    <CardPreview :card_id="43" :tilted="false"></CardPreview>
-                </div>
-                <p>&#8203;</p>
-                <h3>Objets & actions</h3>
-                <div class="card-row">
-                    <CardPreview :card_id="56" :tilted="false"></CardPreview>
-                    <CardPreview :card_id="52" :tilted="false"></CardPreview>
-                </div>
-                <p>
-                    Par simplicité, disons que les objets et les actions sont pareil: on les joue, ils font un effet
-                    disponible durant le tour actuel, et ils sont défaussés.
-                </p>
-                <h3>Champions (& gardes)</h3>
-                <div class="card-row">
-                    <CardPreview :card_id="43" :tilted="false"></CardPreview>
-                </div>
-                <p>
-                    Les champions sont un peu plus complexes: ils restent sur le terrain, et on peut les utiliser à
-                    chaque tour (en les mobilisant).
-                </p>
-                <p>Ils ont une défense <img src="/images/champion-shield.png" style="height: 30px" draggable="false" />
-                    indiquée en bas à droite et ils ne sont assommés (défaussés) que si on leur fait des dégats =
-                    défense.</p>
-                <p>Ces dégats doivent être faits d'un coup. Je ne peux pas faire un peu de dégats pendant un tour, et un
-                    peu le tour d'après pour les tuer.</p>
-                <div class="card-row">
-                    <CardPreview :card_id="49" :tilted="false"></CardPreview>
-                </div>
-                <p>
-                    Par ailleurs, certains champions sont des Gardes <img src="/images/champion-shield-guard.png"
-                        style="height: 30px" draggable="false" /> (ils ont un bouclier noir), ce qui veut dire qu'on est
-                    obligés de les tuer pour faire des dégats à des champions non-gardes ou au joueur.
-                </p>
-                <p>
-                    (J'en profite pour préciser qu'on peut en effet, sans garde, choisir d'attaquer le joueur
-                    directement ou ses champions.)
-                    Incidentellement, ça veut dire qu'avec seulement 2 de dégats, je ne peux rien faire à un joueur avec
-                    un garde à 3 de défense.
-                </p>
-                <p>&#8203;</p>
-                <hr>
-                <h2>Building</h2>
-                <p>
-                    Passons au "building": on peut acheter des cartes pour les ajouter à notre défausse qui, si vous
-                    avez suivi, constituera la prochaine pioche.
-                    Avec le jeu de base, <span style="color: darkgoldenrod">l'or</span> <img src="/images/gold.png"
-                        class="icon_img" draggable="false" /> sert exclusivement à accomplir ce but: acheter des cartes.
-                </p>
-                <div class="card-row">
-                    <CardPreview :card_id="6" :tilted="false"></CardPreview>
-                    <CardPreview :card_id="19" :tilted="false"></CardPreview>
-                    <CardPreview :card_id="36" :tilted="false"></CardPreview>
-                    <CardPreview :card_id="46" :tilted="false"></CardPreview>
-                </div>
-                <p>
-                    Un marché est mis à disposition de tous les joueurs, mettant à disposition 5 cartes (pas ici parce
-                    que j'ai pas la place).
-                </p>
-                <p>
-                    Ces cartes ont chacune un coût indiqué en haut à droite.
-                    Il faut au moins autant d'or que ce qui est indiqué pour acheter une carte. Une carte achetée laisse
-                    la place à une nouvelle carte directement, qu'on peut
-                    décider d'acheter juste après (tant qu'on a l'argent).
-                </p>
-                <p>
-                    Il ne nous reste plus qu'à comprendre ce que font les cartes du marché, puisqu'elles sont plus
-                    complexes (et bien plus fortes) que votre deck de base.
-                    Prenons des exemples!
-                </p>
-                <hr>
-                <h2>Couleurs</h2>
-                <p>
-                    La première chose qui ne vous échappera pas, c'est qu'on a 4 couleurs différentes pour les cartes.
-                </p>
-                <p>&#8203;</p>
-                <div class="card-row">
-                    <CardPreview :card_id="13" :tilted="false"></CardPreview>
-                    <CardPreview :card_id="3" :tilted="false"></CardPreview>
-                    <CardPreview :card_id="1" :tilted="false"></CardPreview>
-                </div>
-                <p>&#8203;</p>
-                <p>Les cartes <span style="color: darkgoldenrod">jaunes</span> sont les cartes Empire.</p>
-                <p>Elles font beaucoup de soin, et activent souvent des effets de pioche.</p>
-                <p>&#8203;</p>
-                <div class="card-row">
-                    <CardPreview :card_id="39" :tilted="false"></CardPreview>
-                    <CardPreview :card_id="34" :tilted="false"></CardPreview>
-                    <CardPreview :card_id="40" :tilted="false"></CardPreview>
-                </div>
-                <p>&#8203;</p>
-                <p>Les cartes <span style="color: red">rouges</span> sont les cartes Necros.</p>
-                <p>Elles sont les seules à pouvoir sacrifier des cartes pour les sortir de son deck de façon permanente.
-                </p>
-                <p>&#8203;</p>
-                <div class="card-row">
-                    <CardPreview :card_id="52" :tilted="false"></CardPreview>
-                    <CardPreview :card_id="46" :tilted="false"></CardPreview>
-                    <CardPreview :card_id="47" :tilted="false"></CardPreview>
-                </div>
-                <p>&#8203;</p>
-                <p>Les cartes <span style="color: darkgreen">vertes</span> sont les cartes Sauvages.</p>
-                <p>Elles font beaucoup de dégats, et forcent vos adversaires à jouer moins de cartes.</p>
-                <p>&#8203;</p>
-                <div class="card-row">
-                    <CardPreview :card_id="24" :tilted="false"></CardPreview>
-                    <CardPreview :card_id="25" :tilted="false"></CardPreview>
-                    <CardPreview :card_id="19" :tilted="false"></CardPreview>
-                </div>
-                <p>&#8203;</p>
-                <p>Les cartes <span style="color: darkblue">bleues</span> sont les cartes Guilde.</p>
-                <p>Elles donnent beaucoup d'or, assomment les champions adverses et manipulent votre pioche.</p>
-                <p>&#8203;</p>
-                <hr>
-                <h2>Déclencheurs</h2>
-                <p>Les effets de cartes peuvent se déclencher pour 3 raisons différentes.</p>
-                <div class="card-row">
-                    <CardPreview :card_id="14" :tilted="false"></CardPreview>
-                </div>
-                <p>Sur cette carte, on peut voir les trois en même temps.</p>
-                <p>La 1ère ligne s'active tout le temps.</p>
-                <p>La 2ème ligne est une capacité Allié: il faut une autre carte de la même couleur en jeu pour pouvoir
-                    en profiter.</p>
-                <p>La 3ème ligne est un Effet Poubelle (différent du sacrifice des cartes rouges): vous pouvez retirer
-                    cette carte de votre jeu pour bénéficier, en plus des autres effets, de l'effet marqué. Mais la
-                    carte sera défaussée à tout jamais.</p>
-                <p>&#8203;</p>
-                <hr>
-                <h2>Effets</h2>
-                <p>Une variété d'effets peuvent être inclus dans les cartes.</p>
-                <p>Il y en a plein et les expliquer ici serait relou, alors je vous laisse poser la question en vocal si
-                    vous n'en comprenez pas un.</p>
-                <p>&#8203;</p>
-                <hr>
-                <h2>Activer les cartes dans la version en ligne</h2>
-                <p>Il suffit de cliquer sur la carte que vous voulez activer dans votre main pour la "LOCK".</p>
-                <p>Une carte "LOCKED" est considérée en jeu, & peut activer des effets Allié pour d'autres cartes, etc.
-                </p>
-                <p>Si vous avez des choix à faire sur la carte, un menu apparaîtra pour vous laisser choisir.</p>
-                <p>Pour faire des dommages, il y aura un bouton "Damage" sur vos ennemis. Pareil sur leurs champions.
-                </p>
-                <p>Quand vous avez un effet "Sacrifice", vous pouvez fouiller votre défausse pour choisir la carte à
-                    sacrifier. Vous pouvez également sacrifier une carte de la main qui n'est pas encore locked!</p>
-                <h2>Zoomer sur les cartes</h2>
-                <p>Pour zoomer sur une carte, maintenez votre clic droit.</p>
-            </section>
-        </div>
-    </div>
-
-</template>
-
-<style>
-.background {
-    background-color: #f0f0f0;
-    background-image: url('/images/bg-darkgrass.png');
-    background-size: auto;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    width: 100vw;
-    ;
-}
-
-.text-content {
-    background-color: rgba(255, 255, 255, .75);
-    padding: 1em;
-    border-radius: 1em;
-    max-width: 800px;
-    margin-top: 2em;
-    text-align: left;
-
-    h1 {
-        text-align: center;
-        font-size: 2em;
-        margin-bottom: 1.5em;
-    }
-
-    p {
-        margin: 1em 0;
-        font-size: 1.2em;
-    }
-}
-
-.card-row {
-    display: flex;
-    justify-content: center;
-    gap: 1em;
-}
-
-.overlay-2 {
-    height: 00px;
-    width: 100%;
-    position: sticky;
-    z-index: 2;
-    top: 0;
-    pointer-events: none;
-
-    .erika-zone-2 {
-        position: absolute;
-        top: 300px;
-        display: flex;
-        justify-content: right;
-        z-index: 2;
-        height: 300px;
-        width: 100%;
-        object-fit: cover;
-
-        .overlay-image {
-            position: sticky;
-            height: 100%;
-            cursor: pointer;
-            pointer-events: all;
-        }
-    }
-}
-</style>

components/SelfView.vue

@@ -103,8 +103,4 @@ import goStore, { useEffect, playCard, playAllCards, discard, lockCard, heal, da
     transform: translateY(-40px);
 
 }
-
-.cards_container {
-    min-width: 250px;
-}
 </style>

middleware/auth.global.ts

@@ -0,0 +1,66 @@
+import goStore, { oauth2_register_discord, setup_websocket, heron_cookie_login, join_game } from "@/netcode";
+
+export default defineNuxtRouteMiddleware
+    (async (to, from) => {
+        await setup_websocket()
+
+
+        if (to.path == '/login') {
+            return
+        }
+
+        if (to.path == '/') {
+            const code = to.query.code
+            if (code) {
+                if (!Array.isArray(code)) {
+                    try {
+                        await oauth2_register_discord(code)
+                        return navigateTo('/lobby')
+                    } catch {
+                        return navigateTo('/login')
+                    }
+                } else {
+                    return navigateTo('/login')
+                }
+            }
+            return navigateTo("/lobby")
+        }
+
+        if (!goStore.discordId) {
+            const heron_session = useCookie('heron_session')
+            if (!heron_session.value) { return navigateTo('/login') }
+
+            try {
+                await heron_cookie_login(heron_session.value)
+                if (to.path == '/') {
+                    return navigateTo("/lobby")
+                }
+            } catch {
+                return navigateTo('/login')
+            }
+        }
+
+
+
+        if (to.path.startsWith("/games")) {
+            if (Array.isArray(to.params.id)) { return navigateTo('/lobby') }
+            try {
+                await join_game(to.params.id)
+                return
+            } catch {
+                return navigateTo("/lobby")
+            }
+        }
+        if (to.path == "/lobby") {
+            return
+        }
+        if (to.path == "/rules") {
+            return
+        }
+        // In a real app you would probably not redirect every route to `/`
+        // however it is important to check `to.path` before redirecting or you
+        // might get an infinite redirect loop
+        if (to.path !== '/') {
+            return navigateTo('/')
+        }
+    })

netcode/index.ts

@@ -3,81 +3,400 @@ import type { ServerMessage } from "./interfaces/generic";
 import { ServerQueryType, ClientQueryType } from "./interfaces/generic";
 import { Query } from "./Query";
 
-let socket: WebSocket
+import { type Ref } from "vue";
-export function setupWebsocket(): Promise<WebSocket> {
-    return new Promise<WebSocket>((resolve, reject) => {
-        if (socket) {
-            if (!socket.OPEN) {
-                return reject("socket closed")
-            }
-            return resolve(socket);
-        }
-        const config = useRuntimeConfig();
-        socket = new WebSocket(config.public.websocketEndpoint);
 
-        socket.onopen = function (e) {
+const socketTimeout = 1000
-            if (socket.readyState == 1) {
+let socket: WebSocket;
-                resolve(socket);
-            }
-            console.log("[open] Connection established");
-        };
 
-        socket.onclose = function (event) {
+export class GameObjectRegister {
-            if (event.wasClean) {
+  readonly effects: Map<string, Effect>;
-                console.warn(
+  readonly cards: Map<string, Card>;
-                    `[close] Connection closed cleanly, code=${event.code} reason=${event.reason}`
+  readonly teams: Map<string, Team>;
-                );
+  readonly players: Map<string, Player>;
-            } else {
+  readonly turns: Map<string, Turn>;
-                // e.g. server process killed or network down
+  readonly games: Map<string, Game>;
-                // event.code is usually 1006 in this case
-                console.error("[close] Connection died");
-            }
-        };
 
-        socket.onerror = function (error) {
+  readonly gameRoutingCallbacks: Map<string, [() => void, () => void]>;
-            console.error(error);
+  readonly loginCallbacks: Set<() => void>;
-        };
+  context: "lobby" | "login" | "pregame" | "game" | "rules" = "login";
+  private readonly objects: Map<string, GameObjectNetcode>;
+  current_game: Ref<Game | null>;
+  lobby: Ref<Lobby | null>;
+  self: Ref<Player | null>;
+  zoomKeyPressed: Ref<boolean>
+  hoveredCard: Ref<number | undefined>
 
-        socket.onmessage = function (ev: MessageEvent) {
+  clientMouseX: Ref<number>
-            const data = ev.data as ServerMessage
+  clientMouseY: Ref<number>
-            const answer_to = ev.data.answer_to
+  discordId: Ref<string>
-            if (!answer_to) { return }
+  constructor() {
-            const callback = Query.callbacks.get(answer_to)
+    this.gameRoutingCallbacks = new Map();
-            if (!callback) { return }
+    this.loginCallbacks = new Set();
-            if (data.type == ServerQueryType.ERROR) {
+
-                callback.reject()
+    this.effects = reactive(new Map());
-            } else {
+    this.cards = reactive(new Map());
-                callback.resolve(ev.data)
+    this.teams = reactive(new Map());
-            }
+    this.players = reactive(new Map());
-        }
+    this.turns = reactive(new Map());
-    });
+    this.games = reactive(new Map());
+
+    this.objects = reactive(new Map());
+    this.current_game = ref(null);
+    this.lobby = ref(null);
+    this.self = ref(null);
+    this.zoomKeyPressed = ref(false);
+    this.hoveredCard = ref()
+    this.clientMouseX = ref(0)
+    this.clientMouseY = ref(0)
+    this.discordId = ref("")
+  }
+
+  update_object(obj: GameObjectNetcode) {
+    // console.log(obj);
+    // console.log(obj.uuid);
+    // console.log(this.objects.get(obj.uuid));
+    Object.assign(this.objects.get(obj.uuid) as GameNetcode, obj);
+    if (unref(this.current_game)?.uuid === obj.uuid) {
+      triggerRef(this.current_game);
+    } else if (unref(this.lobby)?.uuid === obj.uuid) {
+      triggerRef(this.lobby);
+    } else if (unref(this.self)?.uuid === obj.uuid) {
+      triggerRef(this.self);
+    } else if (unref(this.self)?.turn?.uuid === obj.uuid) {
+      triggerRef(this.self);
+    }
+  }
+
+  createObject = {
+    effect: (data: EffectNetcode) => {
+      const effect = create_effect(data, this);
+      this.effects.set(data.uuid, effect);
+      this.objects.set(data.uuid, data);
+    },
+    card: (data: CardNetcode) => {
+      const card = create_card(data, this);
+      this.cards.set(data.uuid, card);
+      this.objects.set(data.uuid, card);
+    },
+    player: (data: PlayerNetcode) => {
+      const player = create_player(data, this);
+      this.players.set(data.uuid, player);
+      this.objects.set(data.uuid, player);
+    },
+    team: (data: TeamNetcode) => {
+      const team = create_team(data, this);
+      this.teams.set(data.uuid, team);
+      this.objects.set(data.uuid, team);
+    },
+    game: (data: GameNetcode) => {
+      const game = create_game(data, this);
+      this.games.set(data.uuid, game);
+      this.objects.set(data.uuid, game);
+    },
+    turn: (data: any) => {
+      const turn = create_turn(data, this);
+      this.turns.set(data.uuid, turn);
+      this.objects.set(data.uuid, turn);
+    },
+    lobby: (data: LobbyNetcode) => {
+      this.lobby.value = create_lobby(data, this);
+      this.objects.set(data.uuid, this.lobby.value);
+    },
+  } as { [id: string]: (data: any) => any };
+
+  setSelf = (uuid: string) => {
+    this.self.value = this.players.get(uuid) ?? null;
+  };
+
+  setDiscordId = (username: string) => {
+    this.discordId.value = username
+  }
+  setCurrentGame = (uuid: string) => {
+    this.current_game.value = this.games.get(uuid) ?? null;
+    this.gameRoutingCallbacks.get(uuid)?.[0]()
+    this.gameRoutingCallbacks.delete(uuid)
+    for (let [_key, value] of this.gameRoutingCallbacks) {
+      value[1]()
+      this.gameRoutingCallbacks.delete(_key)
+    }
+  };
 }
 
+const goStore = reactive(new GameObjectRegister());
 
-export async function login() {
+export const setup_websocket = () =>
-    const socket = await setupWebsocket()
+  new Promise<void>((resolve, reject) => {
+    if (socket) {
+      return resolve();
+    }
+    const config = useRuntimeConfig();
+    const heron_session = useCookie("heron_session");
+    socket = new WebSocket(config.public.websocketEndpoint);
 
-    const query = new Query(socket, {
+    socket.onopen = function (e) {
-        type: ClientQueryType.LOGIN,
+      if (socket.readyState == 1) {
-        method: "anon",
+        resolve();
-        args: { code: "" },
+      }
-        target: ""
+
+      console.log("[open] Connection established");
+    };
+
+    socket.onclose = function (event) {
+      if (event.wasClean) {
+        console.warn(
+          `[close] Connection closed cleanly, code=${event.code} reason=${event.reason}`
+        );
+      } else {
+        // e.g. server process killed or network down
+        // event.code is usually 1006 in this case
+        console.error("[close] Connection died");
+      }
+    };
+
+    socket.onerror = function (error) {
+      console.error(error);
+    };
+
+    socket.onmessage = function (event) {
+      const data = JSON.parse(event.data);
+
+      if (data.type == "create" && data.data_type == "object") {
+        if (!(data.data.object_type in goStore.createObject)) {
+          throw new Error(
+            `Object ${data.data.object_type} couldn't be created`
+          );
+        }
+        goStore.createObject[data.data.object_type](data.data);
+      } else if (data.type == "update" && data.data_type == "object") {
+        goStore.update_object(data.data);
+      } else if (data.type === "context") {
+        goStore.context = data.data;
+        // console.log(data.data);
+      } else if (data.type === "set") {
+        if (data.data_type == "self") {
+          goStore.setSelf(data.data);
+        } else if (data.data_type == "current_game") {
+          goStore.setCurrentGame(data.data);
+        } else if (data.data_type == "session_cookie") {
+          heron_session.value = data.data;
+        } else if (data.data_type == "self_discord_id") {
+          goStore.setDiscordId(data.data)
+          goStore.loginCallbacks.forEach(c => c())
+          goStore.loginCallbacks.clear()
+        }
+      });
+}
+
+export async function heron_cookie_login(cookie: string) {
+  await setup_websocket();
+  return new Promise<void>((resolve, reject) => {
+    goStore.loginCallbacks.add(resolve)
+    socket.send(
+      JSON.stringify({
+        type: "cookie_login",
+        data_type: "cookie",
+        data: cookie,
+      })
+    );
+    setTimeout(() => {
+      goStore.loginCallbacks.delete(resolve);
+      reject()
+    }
+      , socketTimeout)
+  })
+
+}
+
+export async function oauth2_register_discord(code: string) {
+  await setup_websocket();
+  return new Promise<void>((resolve, reject) => {
+    goStore.loginCallbacks.add(resolve)
+
+    socket.send(
+      JSON.stringify({
+        type: "discord_login",
+        data_type: "code",
+        data: code,
+      })
+    );
+    setTimeout(() => {
+      goStore.loginCallbacks.delete(resolve);
+      reject()
+    }
+      , socketTimeout)
+  })
+}
+
+export async function register(username: string) {
+  await setup_websocket();
+
+  socket.send(
+    JSON.stringify({
+      type: "register",
+      data_type: "username",
+      data: username,
     })
-    const loginInfo = await query.send()
+  );
-    // return new Promise<Lobby>((resolve, reject) => {
-    //     const handler = ((e: MessageEvent) => {
-    //         const data = e.data as ServerMessage
-    //         if (data.type == ServerQueryType.CREATE) {
-    //             if (data.args.objectType == "Lobby") {
-    //                 const lobby = new Lobby(socket, data.args as any)
-    //                 socket.removeEventListener("message", handler)
-    //                 resolve(lobby)
-    //             }
-    //         }
-    //     })
-    //     socket.onmessage = handler
-
-
-    // })
 }
 
+export async function login(username: string) {
+  await setup_websocket();
+  socket.send(
+    JSON.stringify({
+      type: "login",
+      data_type: "username",
+      data: username,
+    })
+  );
+}
+
+export async function setReady(value: boolean) {
+  await setup_websocket();
+  socket.send(
+    JSON.stringify({
+      type: "ready",
+      data_type: "ready_state",
+      data: value,
+    })
+  );
+}
+
+export async function buy(card: Card) {
+  await setup_websocket();
+  socket.send(
+    JSON.stringify({
+      type: "action",
+      data_type: "buy",
+      data: card.uuid,
+    })
+  );
+}
+
+export async function endTurn() {
+  await setup_websocket();
+  socket.send(
+    JSON.stringify({
+      type: "action",
+      data_type: "end_turn",
+      data: true,
+    })
+  );
+}
+
+export function playAllCards(cards: Card[]) {
+  cards.forEach((c: any) => {
+    playCard(c);
+  });
+}
+
+export async function playCard(card: Card) {
+  //   console.log(card.uuid);
+  await setup_websocket();
+  socket.send(
+    JSON.stringify({
+      type: "action",
+      data_type: "play_card",
+      data: card.uuid,
+    })
+  );
+}
+
+export async function lockCard(card: Card) {
+  await setup_websocket();
+  socket.send(
+    JSON.stringify({
+      type: "action",
+      data_type: "lock_card",
+      data: card.uuid,
+    })
+  );
+}
+
+export async function useEffect(
+  effect: Effect,
+  target?: Effect | Card | Player | Team
+) {
+  await setup_websocket();
+  socket.send(
+    JSON.stringify({
+      type: "action",
+      data_type: "use_effect",
+      data: { effect_id: effect.uuid, target: target?.uuid },
+    })
+  );
+}
+
+export async function discard(card: Card) {
+  await setup_websocket();
+  socket.send(
+    JSON.stringify({
+      type: "action",
+      data_type: "discard",
+      data: card.uuid,
+    })
+  );
+}
+h;
+export async function heal() {
+  await setup_websocket();
+  socket.send(
+    JSON.stringify({
+      type: "action",
+      data_type: "heal",
+      data: 1,
+    })
+  );
+}
+
+export async function damage_team(target: Team) {
+  await setup_websocket();
+  socket.send(
+    JSON.stringify({
+      type: "action",
+      data_type: "damage_team",
+      data: target.uuid,
+    })
+  );
+}
+
+export async function damage_champion(target: Card) {
+  await setup_websocket();
+  socket.send(
+    JSON.stringify({
+      type: "action",
+      data_type: "damage_champion",
+      data: target.uuid,
+    })
+  );
+}
+
+export async function netcode_create_game() {
+  await setup_websocket();
+  socket.send(
+    JSON.stringify({
+      type: "create",
+      data_type: "game",
+      data: "bite",
+    })
+  );
+}
+
+export async function join_game(game_uuid: string) {
+  await setup_websocket();
+  return new Promise<void>(((resolve, reject) => {
+    goStore.gameRoutingCallbacks.set(game_uuid, [resolve, reject])
+    setTimeout(() => {
+      const cb = goStore.gameRoutingCallbacks.get(game_uuid)
+      if (!cb) { return }
+      cb[1]()
+    }, socketTimeout)
+    socket.send(
+      JSON.stringify({
+        type: "join",
+        data_type: "game",
+        data: game_uuid,
+      })
+    );
+  }))
+}
+export default goStore;

pages/games/[id].vue

@@ -0,0 +1,276 @@
+<script setup lang="ts">
+import goStore, { setReady } from '../../netcode';
+import type { Player } from '../../netcode/Player';
+import { playSound } from '../../helpers/audioHelpers';
+import { CardType, type Card } from '../../netcode/Card';
+import { CardEffects, type Effect } from '../../netcode/Effect';
+import type { Team } from '~/netcode/Team';
+
+const current_players = computed<Array<Player>>(() => Array.from(goStore.current_game?.players ?? []).filter(p => p.team === goStore.current_game?.current_turn))
+
+watch(
+    () => goStore.current_game?.current_turn?.uuid,
+    () => {
+        if (goStore.current_game?.current_turn?.uuid == goStore.self?.team?.uuid) {
+            playSound('/sounds/ding.mp3')
+        }
+    })
+
+watch(
+    () => goStore.current_game?.losers,
+    () => {
+        if (goStore.self?.uuid && goStore.current_game?.losers && goStore.current_game.losers.includes(goStore.self.uuid)) {
+            showLoserScreen()
+        }
+    })
+
+watch(
+    () => goStore.current_game?.ended,
+    () => {
+        if (goStore.current_game?.ended && goStore.self?.uuid && goStore.current_game?.losers && !goStore.current_game.losers.includes(goStore.self.uuid)) {
+            showWinnerScreen()
+        }
+    })
+
+watch(
+    () => goStore.current_game?.players,
+    (newList, oldList) => {
+        if (!oldList || !newList) { return }
+        if (goStore.current_game?.started) { return }
+        if (newList?.length > oldList.length) {
+            playSound('/sounds/teleport.mp3')
+        }
+
+    })
+
+const showResults = ref(false)
+const showOptions = ref(false)
+const isWinner = ref(false)
+
+function showLoserScreen() {
+    // playSound('/sounds/ding.mp3')
+    showResults.value = true
+    isWinner.value = false
+}
+
+function showWinnerScreen() {
+    // playSound('/sounds/ding.mp3')
+    showResults.value = true
+    isWinner.value = true
+}
+
+const discard_unwrapped = ref(false)
+const focusedPlayer = ref<Player>((goStore.current_game?.players.find(p => p.team == goStore.current_game?.current_turn) ?? goStore.current_game?.players[0])!)
+const clientStore = useClientSideStore()
+const restack_discarded_champion = (target: Card) => clientStore.findUseEffect(CardEffects.RESTACK_DISCARDED_CHAMPION, target)
+const restack_discarded_card = (target: Card) => clientStore.findUseEffect(CardEffects.RESTACK_DISCARDED_CARD, target)
+const sacrifice = (target: Card) => clientStore.findUseEffect(CardEffects.SACRIFICE, target);
+
+function focusPlayer(p: Player) {
+    focusedPlayer.value = p
+}
+
+watch<Team>(() => goStore.current_game!.current_turn, (new_team, old_team) => {
+    if (focusedPlayer.value.team != old_team) { return }
+    const first_player = goStore.current_game?.players.find(p => p.team == goStore.current_game?.current_turn)
+    if (!first_player) {
+        return
+    }
+    focusPlayer(first_player)
+})
+</script>
+
+<template>
+    <div @contextmenu.prevent="false" id="game_board">
+        <AnimatedBackground></AnimatedBackground>
+        <div id="game_status">
+
+            <template v-if="goStore.self && !goStore.current_game?.started">
+                <input @click.prevent="setReady(($event.target as HTMLInputElement).checked)" type="checkbox" id="ready"
+                    :checked="goStore.self?.ready" />
+                <label for="ready">Ready</label>
+            </template>
+        </div>
+        <div id="stack_discard">
+            <div id="stack">
+                <template v-for="p in current_players">
+                    <CardsGrouped :stack="p.stack_pile">
+
+                    </CardsGrouped>
+                </template>
+            </div>
+
+            <div id="discard" :class="{ invisible: discard_unwrapped }" @click="() => discard_unwrapped = true">
+                <template v-for="p in current_players">
+                    <CardsGrouped :stack="p.discard_pile" :visible="!discard_unwrapped">
+                    </CardsGrouped>
+                </template>
+                <template v-for="p in current_players">
+                    <div class="discard_overlay" v-if="discard_unwrapped">
+                        <CardPreview :tilted="false" v-if="discard_unwrapped" :card_id="c.card_id"
+                            v-for="c in p.discard_pile">
+                            <template
+                                v-if="goStore.self?.turn && c && p == goStore.self && goStore.current_game?.current_turn == goStore.self.team">
+                                <button
+                                    v-if="clientStore.activatedClientside.find((e: Effect) => (e.effect == CardEffects.SACRIFICE) && e.usable)"
+                                    @click.stop="sacrifice(c)">
+                                    SACRIFICE
+                                </button>
+                                <button
+                                    v-if="c.card_type == CardType.CHAMPION && clientStore.activatedClientside.find((e: Effect) => (e.effect == CardEffects.RESTACK_DISCARDED_CHAMPION) && e.usable)"
+                                    @click.stop="restack_discarded_champion(c)">
+                                    RESTACK_DISCARDED_CHAMPION
+                                </button>
+                                <button
+                                    v-if="clientStore.activatedClientside.find((e: Effect) => (e.effect == CardEffects.RESTACK_DISCARDED_CARD) && e.usable)"
+                                    @click.stop="restack_discarded_card(c)">
+                                    RESTACK_DISCARDED_CARD
+                                </button>
+                            </template>
+                        </CardPreview>
+                    </div>
+                    <div :id="`discard_unwrapped_bg`" :class="{ unwrapped: discard_unwrapped }"
+                        @click.stop="() => { discard_unwrapped = false; console.log(discard_unwrapped); }"></div>
+                </template>
+            </div>
+        </div>
+
+        <MarketCards></MarketCards>
+
+        <div id="player_list_container">
+            <div id="player_list">
+                <PlayerListElement v-for="p in goStore.current_game?.players" :player="p" @click="focusPlayer(p)"
+                    :focused="focusedPlayer">
+                </PlayerListElement>
+            </div>
+        </div>
+
+        <div id="current_player">
+
+            <!-- <AnimatedBackground :color-start="goStore.self == p ? [.0, .3, .3] : undefined"
+                    :color-end="goStore.self == p ? [.0, 1, 1] : undefined" /> -->
+            <PlayerSlot v-if="focusedPlayer" :player="focusedPlayer"></PlayerSlot>
+
+
+        </div>
+        <ResultDialog :isVisible="showResults" :won="isWinner" :players="goStore.current_game?.players"
+            @close="showResults = false">
+        </ResultDialog>
+        <GlobalOverlay></GlobalOverlay>
+        <SelfView></SelfView>
+    </div>
+</template>
+
+<style scoped>
+#game_status {
+    position: fixed;
+    z-index: 10;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: rgba(255, 255, 255, .75);
+}
+
+
+#game_board {
+    display: grid;
+    grid-template-columns: 1fr min-content 1fr;
+    grid-template-rows: min-content min-content 1fr;
+    grid-template-areas:
+        "stack_discard market empty"
+        "player_list player_list player_list"
+        "current_player current_player current_player";
+    height: 100%;
+}
+
+#player_list,
+#current_player {
+    overflow: auto;
+    position: relative;
+    isolation: isolate;
+    /* background: url('/images/bg-darkgrass.png'); */
+}
+
+#current_player {
+    grid-area: current_player;
+}
+
+#stack_discard {
+    grid-area: stack_discard;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+}
+
+#stack,
+#discard {
+    display: flex;
+    flex-direction: row;
+}
+
+#discard {
+    cursor: pointer;
+}
+
+.discard_overlay {
+    z-index: 9;
+    display: flex;
+    /* background: blue; */
+    pointer-events: none;
+    gap: 2px;
+    flex-wrap: wrap-reverse;
+    align-content: flex-end;
+    cursor: default;
+    position: absolute;
+    padding-bottom: inherit;
+    padding-left: 40px;
+    height: calc(100% - 64px);
+    padding-top: 64px;
+    width: calc(100% -40px);
+    margin-left: 0;
+}
+
+#discard_unwrapped_bg {
+    display: none;
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 100%;
+    z-index: 8;
+    background: rgba(0, 0, 0, 0.5);
+    pointer-events: all;
+    padding: inherit;
+}
+
+#discard_unwrapped_bg.unwrapped {
+    display: block;
+}
+
+#market {
+    grid-area: market;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+
+#player_list_container {
+    grid-area: player_list;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+
+    /* background-image: url("/images/bg-darkgrass.png"); */
+}
+
+#player_list {
+    /* border: 5px solid #000; */
+    display: flex;
+}
+</style>
+
+<style>
+#player_list .card {
+    --max-height: 90px;
+}
+</style>

pages/index.vue

@@ -1,21 +1,11 @@
 <script setup lang="ts">
 
+// import goStore, { setReady } from "@/netcode";
 </script>
 
 <template>
   <div class="root_page_div">
-    <!-- <div id="game_status">
+    tehe
-
-      <template v-if="goStore.self && !goStore.current_game?.started">
-        <input @click.prevent="setReady(($event.target as HTMLInputElement).checked)" type="checkbox" id="ready"
-          :checked="goStore.self?.ready" />
-        <label for="ready">Ready</label>
-      </template>
-</div>
-<LoginView v-if="goStore.context === 'login'"></LoginView>
-<GameBoard v-if="goStore.context != 'lobby' && goStore.context != 'login'"></GameBoard>
-<LobbyView v-if="goStore.context == 'lobby'"></LobbyView>
-<RulesDisplay v-if="goStore.context == 'rules'"></RulesDisplay> -->
   </div>
 </template>
 
@@ -23,13 +13,4 @@
 .root_page_div {
   height: 100%;
 }
-
-#game_status {
-  position: fixed;
-  z-index: 10;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background-color: rgba(255, 255, 255, .75);
-}
 </style>

pages/lobby.vue

@@ -10,6 +10,14 @@ function killErika() {
     playSound('/sounds/splat1.mp3')
     erika_alive.value = false;
 }
+
+// Autojoin broken
+// watch(() => goStore.context, () => {
+//     console.log(goStore.context)
+//     if (goStore.context == "pregame") {
+//         router.push(`/games/${goStore.current_game?.uuid}`)
+//     }
+// })
 </script>
 
 
@@ -26,7 +34,8 @@ function killErika() {
 
             <div class="games-list-zone">
                 <div v-for="g in goStore.lobby?.games">
-                    <button v-if="g" @click="join_game(g.uuid)" :class="goStore.discordId == g.owner ? 'own_game' : ''">
+                    <button v-if="g" @click="router.push({ path: `/games/${g.uuid}` })"
+                        :class="goStore.discordId == g.owner ? 'own_game' : ''">
                         <template v-if="g.started && g.ended">
                             GAME OVER
                         </template>
@@ -57,7 +66,7 @@ function killErika() {
 
         <div class="overlay" v-if="erika_alive">
             <div class="erika-zone">
-                <img @click="router.push({ path: 'rules' })" class="overlay-image"
+                <img @click="router.push('/rules')" class="overlay-image"
                     src="https://static.wikia.nocookie.net/umineko/images/9/9d/PC_Erika.Casual.Sprite_36.png"
                     alt="pétasse" />
                 <div class="overlay-button">
@@ -76,8 +85,6 @@ function killErika() {
 
 
     </div>
-
-
 </template>
 
 <style scoped>

pages/login.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import goStore, { netcode_create_game, join_game } from '~/netcode';
+import { navigateTo, useRuntimeConfig } from 'nuxt/app';
+import goStore, { netcode_create_game, join_game } from '../netcode';
 
 const config = useRuntimeConfig()
 
@@ -103,4 +104,4 @@ footer {
     font-size: 12px;
     text-align: center;
 }
-</style>
+</style>import { useRuntimeConfig, navigateTo } from 'nuxt/app';

pages/rules.vue

@@ -1,3 +1,319 @@
+<script setup lang="ts">
+
+import type { Card } from '~/netcode/Card';
+
+const router = useRouter();
+
+</script>
+
 <template>
-    <RulesDisplay></RulesDisplay>
+    <div class="background">
-</template>
+        <div class="overlay-2">
+            <div class="erika-zone-2">
+                <img @click="router.push({ path: '/' })" class="overlay-image"
+                    src="https://static.wikia.nocookie.net/umineko/images/9/9d/PC_Erika.Casual.Sprite_36.png"
+                    alt="pétasse" />
+            </div>
+        </div>
+        <div class="text-content">
+            <h1>Règles de Héron Realms</h1>
+            <section>
+                <p>Héron Realms, c'est un jeu de <span style="text-decoration:line-through;">héron building</span>
+                    deck-building.</p>
+                <p>Tout le monde part d'un même deck de base.</p>
+                <p>Le but du jeu est de l'enrichir pour obtenir de quoi gagner.</p>
+                <p>Et comme la violence est une solution universelle, ça se traduit en battre ses adversaires.</p>
+                <p>&#8203;</p>
+                <p>Et quoi de mieux pour faire ça que des cartes colorées?</p>
+                <div class="card-row">
+                    <CardPreview :card_id="6" :tilted="false"></CardPreview>
+                    <CardPreview :card_id="19" :tilted="false"></CardPreview>
+                    <CardPreview :card_id="36" :tilted="false"></CardPreview>
+                    <CardPreview :card_id="46" :tilted="false"></CardPreview>
+                </div>
+                <p>&#8203;</p>
+                <hr>
+                <p>&#8203;</p>
+                <h2>Objectif</h2>
+                <p>L'unique objectif du jeu est d'être le dernier en lice. Pour y arriver, il faut descendre les Points
+                    de Vie de vos adversaires à 0 en partant de 50.</p>
+                <p>
+                    Le moyen principal d'y arriver, c'est de faire des <span style="color: red">Dégats</span> <img
+                        src="/images/damage.png" class="icon_img" draggable="false" />. Tout le reste des mécaniques du
+                    jeu sont là pour vous faciliter la tâche,
+                    ou pour mettre des bâtons dans les roues de vos adversaires.
+                </p>
+                <p>&#8203;</p>
+                <hr>
+                <h2>Deckbuilding</h2>
+                <p>Comme c'est un jeu de "deckbuilding", on va expliquer ce qu'est le "deck" et ce qui nous permet de le
+                    "build".</p>
+                <div class="card-row">
+                    <CardPreview :card_id="undefined" :tilted="false"></CardPreview>
+                </div>
+                <p>&#8203;</p>
+                <p>
+                    Le deck d'un joueur est-ce qui constitue sa pioche, qui lui permettra ensuite de constituer sa main
+                    (la main est préparée à la fin du tour et permet de jouer le tour d'après).
+                </p>
+                <p>
+                    Quand la pioche est vide, elle est recyclée à partir de sa défausse.
+
+                </p>
+                <p>
+                    La défausse est ce qui contient les cartes déjà jouées. Mais aussi celles qui sont achetées! Elle
+                    finit par être mélangée pour former la nouvelle pioche.
+                </p>
+                <p>&#8203;</p>
+                <hr>
+                <h2>Deck de base</h2>
+                <p>
+                    Tout le monde commence avec 10 cartes divisées en 4 types:
+                </p>
+                <ul>
+                    <li>7x Or (1)</li>
+                    <li>1x Or (2)</li>
+                    <li>1x Dégats (1)</li>
+                    <li>1x Dégats (2)</li>
+                </ul>
+                <div class="card-row">
+                    <CardPreview :card_id="56" :tilted="false"></CardPreview>
+                    <CardPreview :card_id="59" :tilted="false"></CardPreview>
+                    <CardPreview :card_id="58" :tilted="false"></CardPreview>
+                    <CardPreview :card_id="57" :tilted="false"></CardPreview>
+                </div>
+                <p>
+                    La pioche est formée au hasard: on peut donc avoir une main de départ avec 5 or et 2 dégats, ou 3 or
+                    et 4 dégats, ou 4 or et 3 dégats, etc.
+                </p>
+                <p>
+                    A partir de sa main, on peut jouer des cartes. Ces cartes peuvent déclencher des effets: on peut
+                    considérer qu'ils vont dans un "pool commun", et qu'on peut les utiliser dans
+                    l'ordre qu'on souhaite. 1 de dégats et 2 de dégats me donnent 3 ressources de dégats que je split
+                    comme je veux ensuite. Pareil pour l'or et pour le soin, qui sont les 3 ressources
+                    principales du jeu.
+                </p>
+                <p>&#8203;</p>
+                <hr>
+                <h2>Types de cartes</h2>
+                <p>
+                    Les cartes sont divisées en 3 catégories: objets, actions et champions.
+                </p>
+                <div class="card-row">
+                    <CardPreview :card_id="56" :tilted="false"></CardPreview>
+                    <CardPreview :card_id="52" :tilted="false"></CardPreview>
+                    <CardPreview :card_id="43" :tilted="false"></CardPreview>
+                </div>
+                <p>&#8203;</p>
+                <h3>Objets & actions</h3>
+                <div class="card-row">
+                    <CardPreview :card_id="56" :tilted="false"></CardPreview>
+                    <CardPreview :card_id="52" :tilted="false"></CardPreview>
+                </div>
+                <p>
+                    Par simplicité, disons que les objets et les actions sont pareil: on les joue, ils font un effet
+                    disponible durant le tour actuel, et ils sont défaussés.
+                </p>
+                <h3>Champions (& gardes)</h3>
+                <div class="card-row">
+                    <CardPreview :card_id="43" :tilted="false"></CardPreview>
+                </div>
+                <p>
+                    Les champions sont un peu plus complexes: ils restent sur le terrain, et on peut les utiliser à
+                    chaque tour (en les mobilisant).
+                </p>
+                <p>Ils ont une défense <img src="/images/champion-shield.png" style="height: 30px" draggable="false" />
+                    indiquée en bas à droite et ils ne sont assommés (défaussés) que si on leur fait des dégats =
+                    défense.</p>
+                <p>Ces dégats doivent être faits d'un coup. Je ne peux pas faire un peu de dégats pendant un tour, et un
+                    peu le tour d'après pour les tuer.</p>
+                <div class="card-row">
+                    <CardPreview :card_id="49" :tilted="false"></CardPreview>
+                </div>
+                <p>
+                    Par ailleurs, certains champions sont des Gardes <img src="/images/champion-shield-guard.png"
+                        style="height: 30px" draggable="false" /> (ils ont un bouclier noir), ce qui veut dire qu'on est
+                    obligés de les tuer pour faire des dégats à des champions non-gardes ou au joueur.
+                </p>
+                <p>
+                    (J'en profite pour préciser qu'on peut en effet, sans garde, choisir d'attaquer le joueur
+                    directement ou ses champions.)
+                    Incidentellement, ça veut dire qu'avec seulement 2 de dégats, je ne peux rien faire à un joueur avec
+                    un garde à 3 de défense.
+                </p>
+                <p>&#8203;</p>
+                <hr>
+                <h2>Building</h2>
+                <p>
+                    Passons au "building": on peut acheter des cartes pour les ajouter à notre défausse qui, si vous
+                    avez suivi, constituera la prochaine pioche.
+                    Avec le jeu de base, <span style="color: darkgoldenrod">l'or</span> <img src="/images/gold.png"
+                        class="icon_img" draggable="false" /> sert exclusivement à accomplir ce but: acheter des cartes.
+                </p>
+                <div class="card-row">
+                    <CardPreview :card_id="6" :tilted="false"></CardPreview>
+                    <CardPreview :card_id="19" :tilted="false"></CardPreview>
+                    <CardPreview :card_id="36" :tilted="false"></CardPreview>
+                    <CardPreview :card_id="46" :tilted="false"></CardPreview>
+                </div>
+                <p>
+                    Un marché est mis à disposition de tous les joueurs, mettant à disposition 5 cartes (pas ici parce
+                    que j'ai pas la place).
+                </p>
+                <p>
+                    Ces cartes ont chacune un coût indiqué en haut à droite.
+                    Il faut au moins autant d'or que ce qui est indiqué pour acheter une carte. Une carte achetée laisse
+                    la place à une nouvelle carte directement, qu'on peut
+                    décider d'acheter juste après (tant qu'on a l'argent).
+                </p>
+                <p>
+                    Il ne nous reste plus qu'à comprendre ce que font les cartes du marché, puisqu'elles sont plus
+                    complexes (et bien plus fortes) que votre deck de base.
+                    Prenons des exemples!
+                </p>
+                <hr>
+                <h2>Couleurs</h2>
+                <p>
+                    La première chose qui ne vous échappera pas, c'est qu'on a 4 couleurs différentes pour les cartes.
+                </p>
+                <p>&#8203;</p>
+                <div class="card-row">
+                    <CardPreview :card_id="13" :tilted="false"></CardPreview>
+                    <CardPreview :card_id="3" :tilted="false"></CardPreview>
+                    <CardPreview :card_id="1" :tilted="false"></CardPreview>
+                </div>
+                <p>&#8203;</p>
+                <p>Les cartes <span style="color: darkgoldenrod">jaunes</span> sont les cartes Empire.</p>
+                <p>Elles font beaucoup de soin, et activent souvent des effets de pioche.</p>
+                <p>&#8203;</p>
+                <div class="card-row">
+                    <CardPreview :card_id="39" :tilted="false"></CardPreview>
+                    <CardPreview :card_id="34" :tilted="false"></CardPreview>
+                    <CardPreview :card_id="40" :tilted="false"></CardPreview>
+                </div>
+                <p>&#8203;</p>
+                <p>Les cartes <span style="color: red">rouges</span> sont les cartes Necros.</p>
+                <p>Elles sont les seules à pouvoir sacrifier des cartes pour les sortir de son deck de façon permanente.
+                </p>
+                <p>&#8203;</p>
+                <div class="card-row">
+                    <CardPreview :card_id="52" :tilted="false"></CardPreview>
+                    <CardPreview :card_id="46" :tilted="false"></CardPreview>
+                    <CardPreview :card_id="47" :tilted="false"></CardPreview>
+                </div>
+                <p>&#8203;</p>
+                <p>Les cartes <span style="color: darkgreen">vertes</span> sont les cartes Sauvages.</p>
+                <p>Elles font beaucoup de dégats, et forcent vos adversaires à jouer moins de cartes.</p>
+                <p>&#8203;</p>
+                <div class="card-row">
+                    <CardPreview :card_id="24" :tilted="false"></CardPreview>
+                    <CardPreview :card_id="25" :tilted="false"></CardPreview>
+                    <CardPreview :card_id="19" :tilted="false"></CardPreview>
+                </div>
+                <p>&#8203;</p>
+                <p>Les cartes <span style="color: darkblue">bleues</span> sont les cartes Guilde.</p>
+                <p>Elles donnent beaucoup d'or, assomment les champions adverses et manipulent votre pioche.</p>
+                <p>&#8203;</p>
+                <hr>
+                <h2>Déclencheurs</h2>
+                <p>Les effets de cartes peuvent se déclencher pour 3 raisons différentes.</p>
+                <div class="card-row">
+                    <CardPreview :card_id="14" :tilted="false"></CardPreview>
+                </div>
+                <p>Sur cette carte, on peut voir les trois en même temps.</p>
+                <p>La 1ère ligne s'active tout le temps.</p>
+                <p>La 2ème ligne est une capacité Allié: il faut une autre carte de la même couleur en jeu pour pouvoir
+                    en profiter.</p>
+                <p>La 3ème ligne est un Effet Poubelle (différent du sacrifice des cartes rouges): vous pouvez retirer
+                    cette carte de votre jeu pour bénéficier, en plus des autres effets, de l'effet marqué. Mais la
+                    carte sera défaussée à tout jamais.</p>
+                <p>&#8203;</p>
+                <hr>
+                <h2>Effets</h2>
+                <p>Une variété d'effets peuvent être inclus dans les cartes.</p>
+                <p>Il y en a plein et les expliquer ici serait relou, alors je vous laisse poser la question en vocal si
+                    vous n'en comprenez pas un.</p>
+                <p>&#8203;</p>
+                <hr>
+                <h2>Activer les cartes dans la version en ligne</h2>
+                <p>Il suffit de cliquer sur la carte que vous voulez activer dans votre main pour la "LOCK".</p>
+                <p>Une carte "LOCKED" est considérée en jeu, & peut activer des effets Allié pour d'autres cartes, etc.
+                </p>
+                <p>Si vous avez des choix à faire sur la carte, un menu apparaîtra pour vous laisser choisir.</p>
+                <p>Pour faire des dommages, il y aura un bouton "Damage" sur vos ennemis. Pareil sur leurs champions.
+                </p>
+                <p>Quand vous avez un effet "Sacrifice", vous pouvez fouiller votre défausse pour choisir la carte à
+                    sacrifier. Vous pouvez également sacrifier une carte de la main qui n'est pas encore locked!</p>
+                <h2>Zoomer sur les cartes</h2>
+                <p>Pour zoomer sur une carte, maintenez votre clic droit.</p>
+            </section>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.background {
+    background-color: #f0f0f0;
+    background-image: url('/images/bg-darkgrass.png');
+    background-size: auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100vw;
+    ;
+}
+
+.text-content {
+    background-color: rgba(255, 255, 255, .75);
+    padding: 1em;
+    border-radius: 1em;
+    max-width: 800px;
+    margin-top: 2em;
+    text-align: left;
+
+    h1 {
+        text-align: center;
+        font-size: 2em;
+        margin-bottom: 1.5em;
+    }
+
+    p {
+        margin: 1em 0;
+        font-size: 1.2em;
+    }
+}
+
+.card-row {
+    display: flex;
+    justify-content: center;
+    gap: 1em;
+}
+
+.overlay-2 {
+    height: 00px;
+    width: 100%;
+    position: sticky;
+    z-index: 2;
+    top: 0;
+    pointer-events: none;
+
+    .erika-zone-2 {
+        position: absolute;
+        top: 300px;
+        display: flex;
+        justify-content: right;
+        z-index: 2;
+        height: 300px;
+        width: 100%;
+        object-fit: cover;
+
+        .overlay-image {
+            position: sticky;
+            height: 100%;
+            cursor: pointer;
+            pointer-events: all;
+        }
+    }
+}
+</style>

public/images/fuck.svg

@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="88.73304mm"
+   height="134.13795mm"
+   viewBox="0 0 88.73304 134.13795"
+   version="1.1"
+   id="svg1"
+   xml:space="preserve"
+   sodipodi:docname="fuck.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
+     id="namedview1"
+     pagecolor="#505050"
+     bordercolor="#ffffff"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="1"
+     inkscape:deskcolor="#505050"
+     inkscape:document-units="mm"
+     inkscape:zoom="0.71891835"
+     inkscape:cx="134.22943"
+     inkscape:cy="468.06428"
+     inkscape:window-width="2560"
+     inkscape:window-height="1371"
+     inkscape:window-x="1680"
+     inkscape:window-y="32"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" /><defs
+     id="defs1" /><g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-59.418203,-70.094122)"><path
+       style="opacity:1;fill:#e5d600;fill-opacity:1;stroke:none;stroke-width:3.49999;stroke-opacity:1;paint-order:stroke fill markers"
+       d="m 96.352499,125.0496 v -5.30232 c -2.421262,-8.41348 -13.713084,-12.75856 -18.744229,-0.044 v 5.33484 4.73839 0 l -6.716543,0.0313 c -3.042502,0.51774 -4.401994,2.29774 -5.382434,4.36203 l -5.635456,19.68959 c -0.536458,2.04722 -0.674646,4.17979 0,6.48653 11.431564,61.83841 86.704933,55.09416 88.200633,0 0,0 0.17274,-17.73214 0,-18.58223 -1.91851,-9.4414 -12.83795,-12.2172 -15.51392,-4.15694 0.48306,-9.71109 -7.76736,-14.78186 -17.64884,-10.18956 0,0 0.0508,-48.350297 0,-49.216216 -0.60205,-10.268778 -18.30446,-11.336423 -18.559211,0 V 125.0496"
+       id="path1"
+       sodipodi:nodetypes="cccccccccccsccscc" /><path
+       style="opacity:1;fill:none;fill-opacity:1;stroke:#eea200;stroke-width:3.9172;stroke-opacity:1;paint-order:stroke fill markers"
+       d="m 75.857311,129.7732 v 39.46359"
+       id="path2" /></g></svg>