heronfief/front
3
1
Fork 0
Code Issues 44 Pull Requests 1 Actions Packages Projects Releases 1 Activity

Merge branch 'main' into feat-discard-unwrap

Browse Source
This commit is contained in:
legonzaur
2024-05-14 18:20:05 +00:00
parent 2cec8bf54c 3b541c3827
commit f6936f5fb9
7 changed files with 122 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.vscode/settings.json
Vendored
+2 -1
View File
@@ -2,5 +2,6 @@
"files.exclude": {
"**/.nuxt/": true,
"**/node_modules": true
}
},
"vue.server.hybridMode": true
}
app.vue
+25 -4
View File
@@ -43,20 +43,40 @@ function keyUpHandler(e: KeyboardEvent) {
return false
}
function contextMenuHandler(e: MouseEvent) {
e.preventDefault()
}
function mouseDownHandler(e: MouseEvent) {
if (e.button !== 2) { return }
goStore.zoomKeyPressed = true
e.preventDefault()
return false
}
function mouseUpHandler(e: MouseEvent) {
if (e.button !== 2) { return }
goStore.zoomKeyPressed = false
e.preventDefault()
return false
}
function follow_mouse(e: MouseEvent) {
goStore.clientMouseX = e.clientX
goStore.clientMouseY = e.clientY
}
onMounted(() => {
window.addEventListener("keydown", (keyDownHandler))
window.addEventListener("keyup", keyUpHandler)
window.addEventListener("contextmenu", contextMenuHandler)
window.addEventListener("mousedown", mouseDownHandler)
window.addEventListener("mouseup", mouseUpHandler)
document.addEventListener("mousemove", follow_mouse)
})
onUnmounted(() => {
window.removeEventListener("keydown", (keyDownHandler))
window.removeEventListener("keyup", keyUpHandler)
window.removeEventListener("contextmenu", contextMenuHandler)
window.removeEventListener("mousedown", mouseDownHandler)
window.removeEventListener("mouseup", mouseUpHandler)
document.removeEventListener("mousemove", follow_mouse)
})
@@ -64,6 +84,7 @@ onDeactivated
</script>
<template>
<div class="root_dom_div">
<CardOverlay v-if="goStore.zoomKeyPressed" :card_id="goStore.hoveredCard" />
<NuxtPage />
</div>
</template>
components/MarketCards.vue
+1
View File
@@ -60,6 +60,7 @@ const isTurn = computed(() => goStore.self && goStore.current_game?.started && (
align-items: center;
z-index: 2;
position: relative;
gap: 2px;
}
.separator {
components/PlayerIcon.vue
+40
View File
@@ -0,0 +1,40 @@
<script setup lang="ts">
import type { Player } from '~/netcode/Player';
export interface Props {
player: Player;
}
const props = defineProps<Props>()
</script>
<template>
<div class="player-icon-container">
<img class="avatar" v-if="props.player.image" :src="props.player.image">
<b class="player-name">{{ props.player.username }}</b>
</div>
</template>
<style scoped>
.player-icon-container {
display: flex;
align-items: center;
margin: 10px;
}
.avatar {
height: 50px;
border-radius: 25px;
}
.player-name {
font-size: 20px;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin-left: 10px;
color: white;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}
</style>
components/PlayerSlot.vue
+21 -8
View File
@@ -92,18 +92,15 @@ const prepare_champion = (target: Card) => run_effect(CardEffects.PREPARE, targe
</div>
</template>
<div id="player_banner">
<div class="ready-bubble not-ready" v-if="!props.player.ready && !goStore.current_game?.started">Pas encore prêt...</div>
<div class="ready-bubble ready" v-if="props.player.ready && !goStore.current_game?.started">Prêt!</div>
<div id="player_info">
<PlayerIcon :player="props.player"></PlayerIcon>
</div>
<div id="player_stats">
<img v-if="props.player.image" :src="props.player.image">
<b>{{ props.player.username }}</b>
<PlayerStats :player="props.player"></PlayerStats>
<PlayerStats v-if="goStore.current_game?.started" :player="props.player"></PlayerStats>
</div>
<div v-if="props.player.ready && !goStore.current_game?.started">READY</div>
</div>
<div id="current_player_board">
<button @click.stop="damage_team(props.player.team)"
@@ -294,4 +291,20 @@ const prepare_champion = (target: Card) => run_effect(CardEffects.PREPARE, targe
left: 50%;
transform: translate(-50%, -50%);
}
.ready-bubble {
color: white;
padding: 0.5em;
border-radius: 1em;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-bottom: 3%;
}
.ready {
background-color: green;
}
.not-ready {
background-color: maroon;
}
</style>
components/RulesDisplay.vue
+33 -33
View File
@@ -25,10 +25,10 @@ const router = useRouter();
<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"></CardPreview>
<CardPreview :card_id="19"></CardPreview>
<CardPreview :card_id="36"></CardPreview>
<CardPreview :card_id="46"></CardPreview>
<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>
@@ -48,7 +48,7 @@ const router = useRouter();
<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"></CardPreview>
<CardPreview :card_id="undefined" :tilted="false"></CardPreview>
</div>
<p>&#8203;</p>
<p>
@@ -76,10 +76,10 @@ const router = useRouter();
<li>1x Dégats (2)</li>
</ul>
<div class="card-row">
<CardPreview :card_id="56"></CardPreview>
<CardPreview :card_id="59"></CardPreview>
<CardPreview :card_id="58"></CardPreview>
<CardPreview :card_id="57"></CardPreview>
<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
@@ -99,15 +99,15 @@ const router = useRouter();
Les cartes sont divisées en 3 catégories: objets, actions et champions.
</p>
<div class="card-row">
<CardPreview :card_id="56"></CardPreview>
<CardPreview :card_id="52"></CardPreview>
<CardPreview :card_id="43"></CardPreview>
<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"></CardPreview>
<CardPreview :card_id="52"></CardPreview>
<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
@@ -115,7 +115,7 @@ const router = useRouter();
</p>
<h3>Champions (& gardes)</h3>
<div class="card-row">
<CardPreview :card_id="43"></CardPreview>
<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 à
@@ -127,7 +127,7 @@ const router = useRouter();
<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"></CardPreview>
<CardPreview :card_id="49" :tilted="false"></CardPreview>
</div>
<p>
Par ailleurs, certains champions sont des Gardes <img src="/images/champion-shield-guard.png"
@@ -150,10 +150,10 @@ const router = useRouter();
class="icon_img" draggable="false" /> sert exclusivement à accomplir ce but: acheter des cartes.
</p>
<div class="card-row">
<CardPreview :card_id="6"></CardPreview>
<CardPreview :card_id="19"></CardPreview>
<CardPreview :card_id="36"></CardPreview>
<CardPreview :card_id="46"></CardPreview>
<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
@@ -177,18 +177,18 @@ const router = useRouter();
</p>
<p>&#8203;</p>
<div class="card-row">
<CardPreview :card_id="13"></CardPreview>
<CardPreview :card_id="3"></CardPreview>
<CardPreview :card_id="1"></CardPreview>
<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"></CardPreview>
<CardPreview :card_id="34"></CardPreview>
<CardPreview :card_id="40"></CardPreview>
<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>
@@ -196,18 +196,18 @@ const router = useRouter();
</p>
<p>&#8203;</p>
<div class="card-row">
<CardPreview :card_id="52"></CardPreview>
<CardPreview :card_id="46"></CardPreview>
<CardPreview :card_id="47"></CardPreview>
<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"></CardPreview>
<CardPreview :card_id="25"></CardPreview>
<CardPreview :card_id="19"></CardPreview>
<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>
@@ -217,7 +217,7 @@ const router = useRouter();
<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"></CardPreview>
<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>
pages/index.vue
-2
View File
@@ -18,8 +18,6 @@ import goStore, { setReady } from "@/netcode";
<GameBoard v-if="goStore.context != 'lobby' && goStore.context != 'login'"></GameBoard>
<LobbyView v-if="goStore.context == 'lobby'"></LobbyView>
<RulesDisplay v-if="goStore.context == 'rules'"></RulesDisplay>
<CardOverlay v-if="goStore.zoomKeyPressed" :card_id="goStore.hoveredCard">
</CardOverlay>
</div>
</template>