diff --git a/app.vue b/app.vue
index 7e0f710..a091d14 100644
--- a/app.vue
+++ b/app.vue
@@ -2,7 +2,7 @@
 
 import goStore, { oauth2_register_discord, setup_websocket, heron_cookie_login } from "@/netcode";
 
-await setup_websocket()
+const router = useRouter();
 
 useHead
   ({
@@ -10,27 +10,6 @@ useHead
       : 'Héron Realms',
   })
 
-const heron_session = useCookie('heron_session')
-const route = useRoute()
-
-onMounted(async () => {
-  const code = route.query.code
-  if (!code) { return }
-  if (Array.isArray(code)) { return }
-  await setup_websocket()
-  oauth2_register_discord(code)
-  history.pushState(
-    {},
-    '',
-    '/'
-  )
-})
-
-
-onMounted(async () => {
-  if (!heron_session.value) { return }
-  heron_cookie_login(heron_session.value)
-})
 
 function keyDownHandler(e: KeyboardEvent) {
   if (e.repeat) { return }
@@ -85,8 +64,6 @@ onUnmounted(() => {
   window.removeEventListener("mouseup", mouseUpHandler)
   document.removeEventListener("mousemove", follow_mouse)
 })
-
-onDeactivated
 </script>
 <template>
   <div class="root_dom_div">
diff --git a/components/GameBoard.vue b/components/GameBoard.vue
deleted file mode 100644
index 86d22fa..0000000
--- a/components/GameBoard.vue
+++ /dev/null
@@ -1,143 +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: hue-rotate(73deg) blur(10px) contrast(90%) brightness(165%);
-}
-</style>
-
-<style>
-#player_list .card {
-    --max-height: 90px;
-}
-</style>
\ No newline at end of file
diff --git a/components/RulesDisplay.vue b/components/RulesDisplay.vue
deleted file mode 100644
index 5180a44..0000000
--- a/components/RulesDisplay.vue
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/components/SelfView.vue b/components/SelfView.vue
index 9552838..0445a82 100644
--- a/components/SelfView.vue
+++ b/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>
\ No newline at end of file
diff --git a/middleware/auth.global.ts b/middleware/auth.global.ts
new file mode 100644
index 0000000..0873a9a
--- /dev/null
+++ b/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('/')
+        }
+    })
\ No newline at end of file
diff --git a/netcode/index.ts b/netcode/index.ts
index 6c0d55b..5e70e23 100644
--- a/netcode/index.ts
+++ b/netcode/index.ts
@@ -15,6 +15,7 @@ import { type Lobby, create_lobby, type LobbyNetcode } from "./Lobby";
 
 import { type Ref } from "vue";
 
+const socketTimeout = 1000
 let socket: WebSocket;
 
 export class GameObjectRegister {
@@ -25,6 +26,8 @@ export class GameObjectRegister {
   readonly turns: Map<string, Turn>;
   readonly games: Map<string, Game>;
 
+  readonly gameRoutingCallbacks: Map<string, [() => void, () => void]>;
+  readonly loginCallbacks: Set<() => void>;
   context: "lobby" | "login" | "pregame" | "game" | "rules" = "login";
   private readonly objects: Map<string, GameObjectNetcode>;
   current_game: Ref<Game | null>;
@@ -37,6 +40,9 @@ export class GameObjectRegister {
   clientMouseY: Ref<number>
   discordId: Ref<string>
   constructor() {
+    this.gameRoutingCallbacks = new Map();
+    this.loginCallbacks = new Set();
+
     this.effects = reactive(new Map());
     this.cards = reactive(new Map());
     this.teams = reactive(new Map());
@@ -117,6 +123,12 @@ export class GameObjectRegister {
   }
   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)
+    }
   };
 }
 
@@ -179,6 +191,8 @@ export const setup_websocket = () =>
           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()
         }
       } else {
         // console.log(data.type, data.data_type, data.data);
@@ -188,24 +202,42 @@ export const setup_websocket = () =>
 
 export async function heron_cookie_login(cookie: string) {
   await setup_websocket();
-  socket.send(
-    JSON.stringify({
-      type: "cookie_login",
-      data_type: "cookie",
-      data: cookie,
-    })
-  );
+  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();
-  socket.send(
-    JSON.stringify({
-      type: "discord_login",
-      data_type: "code",
-      data: code,
-    })
-  );
+  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) {
@@ -364,12 +396,20 @@ export async function netcode_create_game() {
 
 export async function join_game(game_uuid: string) {
   await setup_websocket();
-  socket.send(
-    JSON.stringify({
-      type: "join",
-      data_type: "game",
-      data: game_uuid,
-    })
-  );
+  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;
diff --git a/pages/games/[id].vue b/pages/games/[id].vue
new file mode 100644
index 0000000..3662950
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index d32c610..fc3cbc0 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,23 +1,11 @@
 <script setup lang="ts">
 
 import goStore, { setReady } from "@/netcode";
-
-
 </script>
 
 <template>
   <div class="root_page_div">
-    <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>
-    <LoginView v-if="goStore.context === 'login'"></LoginView>
-    <GameBoard v-if="goStore.context != 'lobby' && goStore.context != 'login'"></GameBoard>
-    <LobbyView v-if="goStore.context == 'lobby'"></LobbyView>
+    tehe
   </div>
 </template>
 
@@ -25,13 +13,4 @@ import goStore, { setReady } from "@/netcode";
 .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>
\ No newline at end of file
diff --git a/components/LobbyView.vue b/pages/lobby.vue
similarity index 93%
rename from components/LobbyView.vue
rename to pages/lobby.vue
index 9b61404..badf7a8 100644
--- a/components/LobbyView.vue
+++ b/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>
diff --git a/components/LoginView.vue b/pages/login.vue
similarity index 93%
rename from components/LoginView.vue
rename to pages/login.vue
index 541b3aa..160068b 100644
--- a/components/LoginView.vue
+++ b/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>
\ No newline at end of file
+</style>import { useRuntimeConfig, navigateTo } from 'nuxt/app';
diff --git a/pages/rules.vue b/pages/rules.vue
index c9cd031..645e122 100644
--- a/pages/rules.vue
+++ b/pages/rules.vue
@@ -1,3 +1,319 @@
+<script setup lang="ts">
+
+import type { Card } from '~/netcode/Card';
+
+const router = useRouter();
+
+</script>
+
 <template>
-    <RulesDisplay></RulesDisplay>
-</template>
\ No newline at end of file
+    <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 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>
\ No newline at end of file