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

Feat : add prepare token

Browse Source
This commit is contained in:
legonzaur
2024-07-13 16:49:22 +02:00
parent 6bef7778e8
commit 2709bb799c
7 changed files with 154 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/CardPreview.vue
+4 -4
View File
@@ -234,8 +234,6 @@ onUnmounted(() => {
@mouseenter="mouseenter"
@mouseleave="mouseleave"
>
<div id="overlay"><slot></slot></div>
<template v-if="props.card_id">
<!-- <svg
width="180"
@@ -270,7 +268,7 @@ onUnmounted(() => {
"
draggable="false"
/>
<div></div>
<div id="overlay"><slot></slot></div>
</template>
<img
@@ -301,7 +299,9 @@ onUnmounted(() => {
#overlay {
position: absolute;
z-index: 111;
top: 20%;
width: calc(100% - 8%);
height: 49%;
}
.card.unlocked {
components/CardsGrouped.vue
+26 -11
View File
@@ -1,6 +1,12 @@
<script setup lang="ts">
import { delay } from "~/netcode/events";
import type { Card, Container, PlayingTurn } from "~/netcode/interfaces";
import type {
Card,
Container,
Effect,
PlayingTurn,
} from "~/netcode/interfaces";
import TokenComponent from "./tokens/TokenComponent.vue";
export interface Props {
container: Container;
@@ -8,12 +14,14 @@ export interface Props {
wrapped?: boolean;
hidden?: boolean;
noEffects?: boolean;
tokens?: Effect[];
}
const props = withDefaults(defineProps<Props>(), {
wrapped: () => false,
hidden: () => false,
noEffects: () => false,
tokens: () => [],
});
const emit = defineEmits(["cardClick", "effectClick"]);
@@ -34,6 +42,7 @@ const animationSpeed = computed(() => settingsStore.animationSpeed + "ms");
const shuffleAnimationSpeed = computed(
() => settingsStore.animationSpeed * 2 + "ms"
);
function populateContainer() {}
// const rotate = ref(false);
@@ -89,14 +98,16 @@ onUnmounted(() => {
});
const interval = ref<ReturnType<typeof setInterval>>();
function startMove() {
interval.value = setInterval(() => {
props.container.cards.sort((a, b) => Math.random() - 0.5);
}, 1000);
}
function stopMove() {
clearInterval(interval.value);
}
// function startMove() {
// interval.value = setInterval(() => {
// props.container.cards.sort((a, b) => Math.random() - 0.5);
// }, 1000);
// }
// function stopMove() {
// clearInterval(interval.value);
// }
function useToken(token: Effect, card: Card) {}
</script>
<template>
@@ -108,8 +119,6 @@ function stopMove() {
<CardPreview
@click="$emit('cardClick', c._id)"
@effectClick="$emit('effectClick', c._id, $event)"
@startMove="startMove"
@stopMove="stopMove"
v-for="c in cards"
:card_id="c.cardId"
:wrapped="wrapped"
@@ -126,6 +135,12 @@ function stopMove() {
},[] as number[])"
:noEffects="noEffects"
>
<template v-for="t in tokens">
<TokenComponent
:token="t"
@useToken="useToken(t, c)"
></TokenComponent>
</template>
</CardPreview>
</TransitionGroup>
<!-- <img :class="`card_image`" :src="'/cards/background.png'" draggable="false"> -->
components/MarketCards.vue
+25 -2
View File
@@ -1,6 +1,7 @@
<script setup lang="ts">
import { buyCard, buyGem } from "~/netcode";
import type { Container, Game } from "~/netcode/interfaces";
import { CardEffects, type Container, type Game } from "~/netcode/interfaces";
import TokenComponent from "./tokens/TokenComponent.vue";
export interface Props {
game: Game;
@@ -27,6 +28,25 @@ function marketCardClick(e: string) {
function fireGemCardClick(e: string) {
buyGem(props.game._id);
}
const marketTokens = computed(() =>
props.game.currentTurn.tokens.filter((t) =>
[
CardEffects.STACK_NEXT_CARD_BOUGHT,
CardEffects.STACK_NEXT_ACTION_BOUGHT,
CardEffects.PLAY_NEXT_CARD_BOUGHT,
].includes(t.effect)
)
);
const gemsTokens = computed(() =>
props.game.currentTurn.tokens.filter((t) =>
[
CardEffects.STACK_NEXT_CARD_BOUGHT,
CardEffects.PLAY_NEXT_CARD_BOUGHT,
].includes(t.effect)
)
);
</script>
<template>
@@ -41,13 +61,16 @@ function fireGemCardClick(e: string) {
:container="market"
@cardClick="marketCardClick"
:noEffects="true"
></CardsGrouped>
:tokens="marketTokens"
>
</CardsGrouped>
<div class="separator"></div>
<CardsGrouped
:container="fire_gems"
:wrapped="true"
@cardClick="fireGemCardClick"
:noEffects="true"
:tokens="gemsTokens"
></CardsGrouped>
</div>
</template>
components/PlayerSlot.vue
+8 -2
View File
@@ -1,6 +1,6 @@
<script setup lang="ts">
import { endTurn, joinGame, lockCard, lockEffect, startGame } from "~/netcode";
import type { Game, Player } from "~/netcode/interfaces";
import { CardEffects, type Game, type Player } from "~/netcode/interfaces";
import { useTurnStore } from "~/stores/turnStore";
export interface Props {
@@ -37,8 +37,13 @@ const isSelf = computed(
);
const isSelfTurn = computed(() => isSelf && isPlayerTurn);
const cardTokens = computed(() =>
props.game.currentTurn.tokens.filter((t) =>
[CardEffects.SACRIFICE, CardEffects.PREPARE].includes(t.effect)
)
);
const warningText = ref("Effets restants!");
const turnStore = useTurnStore();
// const make_discard = (target: Player) =>
// clientStore.findUseEffect(CardEffects.MAKE_DISCARD, target);
@@ -172,6 +177,7 @@ function effectClick(cardUUID: string, effectIndex: number) {
:playingTurn="props.game.currentTurn"
@cardClick="boardCardClick"
@effectClick="effectClick"
:tokens="cardTokens"
>
</CardsGrouped>
components/tokens/TokenComponent.vue
+37
View File
@@ -0,0 +1,37 @@
<script setup lang="ts">
import type { Effect } from "~/netcode/interfaces";
type Props = {
token: Effect;
};
const props = defineProps<Props>();
const emit = defineEmits(["useToken"]);
function onClick(e: MouseEvent) {
emit("useToken", props.token);
}
</script>
<template>
<div @click.stop="onClick" @mousedown.left.stop="" id="token">
{{ props.token.effect }}
</div>
</template>
<style scoped>
#token {
width: 50px;
height: 50px;
background: white;
border: 1px solid white;
cursor: pointer;
box-sizing: border-box;
transition: 0.2s all;
border-radius: 15px;
}
#token:hover {
border: 1px solid red;
}
</style>
netcode/interfaces.ts
+46 -1
View File
@@ -1,3 +1,46 @@
export enum CardEffects {
//Base
GOLD = "gold",
DAMAGE = "damage",
HEAL = "heal",
PREPARE = "prepare",
STUN = "stun",
SACRIFICE = "sacrifice",
DRAW = "draw",
DRAW_AND_DISCARD = "draw_and_discard",
MAKE_DISCARD = "make_discard",
RESTACK_DISCARDED_CHAMPION = "restack_discarded_champion",
RESTACK_DISCARDED_CARD = "restack_discarded_card",
STACK_NEXT_ACTION_BOUGHT = "stack_next_action_bought",
STACK_NEXT_CARD_BOUGHT = "stack_next_card_bought",
PLAY_NEXT_CARD_BOUGHT = "play_next_card_bought",
//DLCs
BUY_FOR_FREE = "buy_for_free",
//Journeys
DAMAGE_ALL_CHAMPIONS = "damage_all_champions",
//Journeys: Hunters
DISCARD_X_AND_DRAW_X = "discard_x_and_draw_x",
PREPARE_ANOTHER_CHAMPION = "prepare_another_champion",
//Journey: Travelers
PREPARE_ALL_CHAMPIONS = "prepare_all_champions",
CHEAPER_CHAMPION = "cheaper_champion",
CHEAPER_CHAMPIONS_PASSIVE = "cheaper_champions_passive",
CHEAPER_ACTION = "cheaper_action",
CONTROL_OPPOSING_CHAMPION_PASSIVE = "control_opposing_champion_passive",
RESTACK_DISCARDED_ACTION = "restack_discarded_action",
//Ancestry
KEEP_IN_HAND = "keep_in_hand",
BUY_GEM_FOR_FREE = "buy_gem_for_free",
CHEAPER_SKILLS_PASSIVE = "cheaper_skills_passive",
CHEAPER_CARD_IF_HIGHER_PRICE = "cheaper_card_if_higher_price",
PICK_FACTION = "pick_faction",
}
export interface GameObject {
_id: string;
}
@@ -47,7 +90,9 @@ export interface Container extends GameObject {
shuffling?: boolean;
}
export interface Effect extends GameObject {}
export interface Effect extends GameObject {
effect: CardEffects;
}
export interface Card extends GameObject {
cardId: number;
effects: Effect[];
pages/game/[id].vue
+8 -1
View File
@@ -171,6 +171,14 @@ eventSource.addEventListener("message", async (message) => {
current_game.currentTurn.lockedEffects.push(data.effect);
await delay(settingsStore.animationSpeed);
});
} else if (data.type == "unlockEffect") {
queueAction(async () => {
const effectIndex = current_game.currentTurn.lockedEffects.findIndex(
data.effect
);
current_game.currentTurn.lockedEffects.splice(effectIndex, 1);
await delay(settingsStore.animationSpeed);
});
} else if (data.type == "currentTurn.updateGold") {
queueAction(async () => {
console.log(`adding gold amount : ` + data.operation);
@@ -298,7 +306,6 @@ onUnmounted(() => {
:fire_gems="game.fireGems"
:marketStack="game.marketStack"
></MarketCards>
<div id="turnStats">{{ game.currentTurn.tokens }}</div>
<div id="player_list_container">
<div id="player_list">
<PlayerListElement