Feat : move code into pages for routing
This commit is contained in:
@@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
import goStore, { oauth2_register_discord, setup_websocket, heron_cookie_login } from "@/netcode";
|
import goStore, { oauth2_register_discord, setup_websocket, heron_cookie_login } from "@/netcode";
|
||||||
|
|
||||||
await setup_websocket()
|
const router = useRouter();
|
||||||
|
|
||||||
useHead
|
useHead
|
||||||
({
|
({
|
||||||
@@ -10,27 +10,6 @@ useHead
|
|||||||
: 'Héron Realms',
|
: '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) {
|
function keyDownHandler(e: KeyboardEvent) {
|
||||||
if (e.repeat) { return }
|
if (e.repeat) { return }
|
||||||
@@ -85,8 +64,6 @@ onUnmounted(() => {
|
|||||||
window.removeEventListener("mouseup", mouseUpHandler)
|
window.removeEventListener("mouseup", mouseUpHandler)
|
||||||
document.removeEventListener("mousemove", follow_mouse)
|
document.removeEventListener("mousemove", follow_mouse)
|
||||||
})
|
})
|
||||||
|
|
||||||
onDeactivated
|
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div class="root_dom_div">
|
<div class="root_dom_div">
|
||||||
|
|||||||
@@ -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>
|
|
||||||
@@ -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>​</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>​</p>
|
|
||||||
<hr>
|
|
||||||
<p>​</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>​</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>​</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>​</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>​</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>​</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>​</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>​</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>​</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>​</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>​</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>​</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>​</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>​</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>​</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>​</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>​</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>​</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>
|
|
||||||
@@ -103,8 +103,4 @@ import goStore, { useEffect, playCard, playAllCards, discard, lockCard, heal, da
|
|||||||
transform: translateY(-40px);
|
transform: translateY(-40px);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.cards_container {
|
|
||||||
min-width: 250px;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
@@ -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('/')
|
||||||
|
}
|
||||||
|
})
|
||||||
+61
-21
@@ -15,6 +15,7 @@ import { type Lobby, create_lobby, type LobbyNetcode } from "./Lobby";
|
|||||||
|
|
||||||
import { type Ref } from "vue";
|
import { type Ref } from "vue";
|
||||||
|
|
||||||
|
const socketTimeout = 1000
|
||||||
let socket: WebSocket;
|
let socket: WebSocket;
|
||||||
|
|
||||||
export class GameObjectRegister {
|
export class GameObjectRegister {
|
||||||
@@ -25,6 +26,8 @@ export class GameObjectRegister {
|
|||||||
readonly turns: Map<string, Turn>;
|
readonly turns: Map<string, Turn>;
|
||||||
readonly games: Map<string, Game>;
|
readonly games: Map<string, Game>;
|
||||||
|
|
||||||
|
readonly gameRoutingCallbacks: Map<string, [() => void, () => void]>;
|
||||||
|
readonly loginCallbacks: Set<() => void>;
|
||||||
context: "lobby" | "login" | "pregame" | "game" | "rules" = "login";
|
context: "lobby" | "login" | "pregame" | "game" | "rules" = "login";
|
||||||
private readonly objects: Map<string, GameObjectNetcode>;
|
private readonly objects: Map<string, GameObjectNetcode>;
|
||||||
current_game: Ref<Game | null>;
|
current_game: Ref<Game | null>;
|
||||||
@@ -37,6 +40,9 @@ export class GameObjectRegister {
|
|||||||
clientMouseY: Ref<number>
|
clientMouseY: Ref<number>
|
||||||
discordId: Ref<string>
|
discordId: Ref<string>
|
||||||
constructor() {
|
constructor() {
|
||||||
|
this.gameRoutingCallbacks = new Map();
|
||||||
|
this.loginCallbacks = new Set();
|
||||||
|
|
||||||
this.effects = reactive(new Map());
|
this.effects = reactive(new Map());
|
||||||
this.cards = reactive(new Map());
|
this.cards = reactive(new Map());
|
||||||
this.teams = reactive(new Map());
|
this.teams = reactive(new Map());
|
||||||
@@ -117,6 +123,12 @@ export class GameObjectRegister {
|
|||||||
}
|
}
|
||||||
setCurrentGame = (uuid: string) => {
|
setCurrentGame = (uuid: string) => {
|
||||||
this.current_game.value = this.games.get(uuid) ?? null;
|
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;
|
heron_session.value = data.data;
|
||||||
} else if (data.data_type == "self_discord_id") {
|
} else if (data.data_type == "self_discord_id") {
|
||||||
goStore.setDiscordId(data.data)
|
goStore.setDiscordId(data.data)
|
||||||
|
goStore.loginCallbacks.forEach(c => c())
|
||||||
|
goStore.loginCallbacks.clear()
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
// console.log(data.type, data.data_type, data.data);
|
// 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) {
|
export async function heron_cookie_login(cookie: string) {
|
||||||
await setup_websocket();
|
await setup_websocket();
|
||||||
socket.send(
|
return new Promise<void>((resolve, reject) => {
|
||||||
JSON.stringify({
|
goStore.loginCallbacks.add(resolve)
|
||||||
type: "cookie_login",
|
socket.send(
|
||||||
data_type: "cookie",
|
JSON.stringify({
|
||||||
data: cookie,
|
type: "cookie_login",
|
||||||
})
|
data_type: "cookie",
|
||||||
);
|
data: cookie,
|
||||||
|
})
|
||||||
|
);
|
||||||
|
setTimeout(() => {
|
||||||
|
goStore.loginCallbacks.delete(resolve);
|
||||||
|
reject()
|
||||||
|
}
|
||||||
|
, socketTimeout)
|
||||||
|
})
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function oauth2_register_discord(code: string) {
|
export async function oauth2_register_discord(code: string) {
|
||||||
await setup_websocket();
|
await setup_websocket();
|
||||||
socket.send(
|
return new Promise<void>((resolve, reject) => {
|
||||||
JSON.stringify({
|
goStore.loginCallbacks.add(resolve)
|
||||||
type: "discord_login",
|
|
||||||
data_type: "code",
|
socket.send(
|
||||||
data: code,
|
JSON.stringify({
|
||||||
})
|
type: "discord_login",
|
||||||
);
|
data_type: "code",
|
||||||
|
data: code,
|
||||||
|
})
|
||||||
|
);
|
||||||
|
setTimeout(() => {
|
||||||
|
goStore.loginCallbacks.delete(resolve);
|
||||||
|
reject()
|
||||||
|
}
|
||||||
|
, socketTimeout)
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function register(username: string) {
|
export async function register(username: string) {
|
||||||
@@ -364,12 +396,20 @@ export async function netcode_create_game() {
|
|||||||
|
|
||||||
export async function join_game(game_uuid: string) {
|
export async function join_game(game_uuid: string) {
|
||||||
await setup_websocket();
|
await setup_websocket();
|
||||||
socket.send(
|
return new Promise<void>(((resolve, reject) => {
|
||||||
JSON.stringify({
|
goStore.gameRoutingCallbacks.set(game_uuid, [resolve, reject])
|
||||||
type: "join",
|
setTimeout(() => {
|
||||||
data_type: "game",
|
const cb = goStore.gameRoutingCallbacks.get(game_uuid)
|
||||||
data: game_uuid,
|
if (!cb) { return }
|
||||||
})
|
cb[1]()
|
||||||
);
|
}, socketTimeout)
|
||||||
|
socket.send(
|
||||||
|
JSON.stringify({
|
||||||
|
type: "join",
|
||||||
|
data_type: "game",
|
||||||
|
data: game_uuid,
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}))
|
||||||
}
|
}
|
||||||
export default goStore;
|
export default goStore;
|
||||||
|
|||||||
@@ -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>
|
||||||
+1
-22
@@ -1,23 +1,11 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|
||||||
import goStore, { setReady } from "@/netcode";
|
import goStore, { setReady } from "@/netcode";
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="root_page_div">
|
<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>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -25,13 +13,4 @@ import goStore, { setReady } from "@/netcode";
|
|||||||
.root_page_div {
|
.root_page_div {
|
||||||
height: 100%;
|
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>
|
</style>
|
||||||
@@ -10,6 +10,14 @@ function killErika() {
|
|||||||
playSound('/sounds/splat1.mp3')
|
playSound('/sounds/splat1.mp3')
|
||||||
erika_alive.value = false;
|
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>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
@@ -26,7 +34,8 @@ function killErika() {
|
|||||||
|
|
||||||
<div class="games-list-zone">
|
<div class="games-list-zone">
|
||||||
<div v-for="g in goStore.lobby?.games">
|
<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">
|
<template v-if="g.started && g.ended">
|
||||||
GAME OVER
|
GAME OVER
|
||||||
</template>
|
</template>
|
||||||
@@ -57,7 +66,7 @@ function killErika() {
|
|||||||
|
|
||||||
<div class="overlay" v-if="erika_alive">
|
<div class="overlay" v-if="erika_alive">
|
||||||
<div class="erika-zone">
|
<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"
|
src="https://static.wikia.nocookie.net/umineko/images/9/9d/PC_Erika.Casual.Sprite_36.png"
|
||||||
alt="pétasse" />
|
alt="pétasse" />
|
||||||
<div class="overlay-button">
|
<div class="overlay-button">
|
||||||
@@ -76,8 +85,6 @@ function killErika() {
|
|||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
@@ -1,5 +1,6 @@
|
|||||||
<script setup lang="ts">
|
<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()
|
const config = useRuntimeConfig()
|
||||||
|
|
||||||
@@ -103,4 +104,4 @@ footer {
|
|||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
</style>
|
</style>import { useRuntimeConfig, navigateTo } from 'nuxt/app';
|
||||||
+318
-2
@@ -1,3 +1,319 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
|
||||||
|
import type { Card } from '~/netcode/Card';
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
<template>
|
<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>​</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>​</p>
|
||||||
|
<hr>
|
||||||
|
<p>​</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>​</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>​</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>​</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>​</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>​</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>​</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>​</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>​</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>​</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>​</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>​</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>​</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>​</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>​</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>​</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>​</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>​</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>
|
||||||
Reference in New Issue
Block a user