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

Chore : various fixes

Browse Source
This commit is contained in:
legonzaur
2024-07-14 14:49:05 +02:00
parent fde462166c
commit 8dc263ab50
5 changed files with 147 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/CardPreview.vue
+48 -37
View File
@@ -10,6 +10,7 @@ export interface Props {
interactible?: boolean;
noEffects?: boolean;
used_effects_indexes?: number[];
discardable?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
@@ -18,6 +19,7 @@ const props = withDefaults(defineProps<Props>(), {
locked: () => true,
interactible: () => true,
noEffects: () => false,
discardable: () => false,
});
const emit = defineEmits([
@@ -225,6 +227,7 @@ onUnmounted(() => {
unlocked: !props.locked,
zoom: isZooming,
no_effects: noEffects || !props.locked,
discardable,
}"
@contextmenu.prevent="false"
@mousedown.right="rightClickDown"
@@ -281,43 +284,6 @@ onUnmounted(() => {
</template>
<style scoped>
.card {
--max-height: 250px;
--max-width: 179px;
--margin-bottom: calc(var(--max-height) * 0.05);
position: relative;
display: flex;
justify-content: center;
margin-bottom: 0px;
margin-top: var(--margin-bottom);
transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
pointer-events: all;
max-height: var(--max-height);
max-width: var(--max-width);
/* cursor: grab; */
}
#overlay {
position: absolute;
top: 20%;
width: calc(100% - 8%);
height: 49%;
}
.card.unlocked {
margin-top: 0px;
margin-bottom: var(--margin-bottom);
transform: translateY(calc(var(--margin-bottom) * -0.25));
filter: drop-shadow(
calc(var(--margin-bottom) * 0.3) var(--margin-bottom) 1px rgba(0, 0, 0, 0.6)
);
cursor: pointer;
}
.card:not(svg) {
cursor: grab;
}
.card.dragging {
transform: translateX(v-bind("translateX + 'px'"))
translateY(v-bind("translateY + 'px'"));
@@ -421,4 +387,49 @@ onUnmounted(() => {
.svg_effect text {
cursor: pointer;
}
.card {
--max-height: 250px;
--max-width: 179px;
--margin-bottom: calc(var(--max-height) * 0.05);
position: relative;
display: flex;
justify-content: center;
margin-bottom: 0px;
margin-top: var(--margin-bottom);
transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
pointer-events: all;
max-height: var(--max-height);
max-width: var(--max-width);
/* cursor: grab; */
}
.card:not(svg) {
cursor: grab;
}
#overlay {
position: absolute;
top: 20%;
width: calc(100% - 8%);
height: 49%;
}
.card.unlocked {
margin-top: 0px;
margin-bottom: var(--margin-bottom);
transform: translateY(calc(var(--margin-bottom) * -0.25));
filter: drop-shadow(
calc(var(--margin-bottom) * 0.3) var(--margin-bottom) 1px rgba(0, 0, 0, 0.6)
);
cursor: pointer;
}
.card.discardable {
cursor: not-allowed;
}
.card.discardable svg {
pointer-events: none;
}
</style>
components/CardsGrouped.vue
+27 -15
View File
@@ -18,6 +18,7 @@ export interface Props {
noEffects?: boolean;
tokens?: Effect[];
championsKillable?: boolean;
discardable?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
@@ -26,6 +27,7 @@ const props = withDefaults(defineProps<Props>(), {
noEffects: () => false,
tokens: () => [],
championsKillable: () => false,
discardable: () => false,
});
const emit = defineEmits([
@@ -33,6 +35,7 @@ const emit = defineEmits([
"effectClick",
"tokenClick",
"damageChampionClick",
"discardCardClick",
]);
const settingsStore = useSettingsStore();
@@ -123,6 +126,10 @@ function tokenClick(token: Effect, card: Card) {
function damageChampionClick(card: Card) {
emit("damageChampionClick", card);
}
function discardCardClick(card: Card) {
emit("discardCardClick", card);
}
</script>
<template>
@@ -149,28 +156,24 @@ function damageChampionClick(card: Card) {
return prev
},[] as number[])"
:noEffects="noEffects"
:discardable="discardable"
>
<template v-for="t in tokens">
<TokenComponent
:token="t"
@useToken="tokenClick(t, c)"
v-if="
!(
t.effect == CardEffects.SACRIFICE &&
(!playingTurn ||
playingTurn?.cardsLocked.includes(c._id.toString()))
) &&
!(
t.effect == CardEffects.PREPARE &&
c.cardType == CardType.CHAMPION
) &&
!(
t.effect == CardEffects.STACK_NEXT_ACTION_BOUGHT &&
c.cardType != CardType.ACTION
) &&
t.effect == CardEffects.STUN &&
(t.effect == CardEffects.SACRIFICE &&
playingTurn &&
!playingTurn?.cardsLocked.includes(c._id.toString())) ||
(t.effect == CardEffects.PREPARE &&
c.cardType == CardType.CHAMPION) ||
(t.effect == CardEffects.STACK_NEXT_ACTION_BOUGHT &&
c.cardType == CardType.ACTION) ||
(t.effect == CardEffects.STUN &&
c.cardType == CardType.CHAMPION &&
championsKillable
championsKillable) ||
t.effect == CardEffects.PLAY_NEXT_CARD_BOUGHT
"
></TokenComponent>
</template>
@@ -181,6 +184,15 @@ function damageChampionClick(card: Card) {
>
Damage
</button>
<button
v-if="
discardable && !playingTurn?.cardsLocked.includes(c._id.toString())
"
@mousedown.left.stop=""
@click.stop="discardCardClick(c)"
>
Discard
</button>
</CardPreview>
</TransitionGroup>
<!-- <img :class="`card_image`" :src="'/cards/background.png'" draggable="false"> -->
components/PlayerSlot.vue
+8
View File
@@ -1,6 +1,7 @@
<script setup lang="ts">
import {
damageChampion,
discardCard,
endTurn,
joinGame,
lockCard,
@@ -142,6 +143,9 @@ function tokenClick({ card, token }: { card: Card; token: Effect }) {
function damageChampionClick(card: Card) {
damageChampion(props.game._id, props.player._id, card._id);
}
function discardCardClick(card: Card) {
discardCard(props.game._id, card._id);
}
</script>
<template>
@@ -203,7 +207,11 @@ function damageChampionClick(card: Card) {
:tokens="cardTokens"
@tokenClick="tokenClick"
:championsKillable="!isSelf && isSelfTurn.value"
:discardable="
(player.fuckUMarkers > 0 || player.discardMarkers > 0) && isSelf
"
@damageChampionClick="damageChampionClick"
@discardCardClick="discardCardClick"
>
</CardsGrouped>
netcode/index.ts
+13 -1
View File
@@ -127,7 +127,7 @@ export async function buyGem(game: string) {
export async function useToken(
game: string,
tokenId: string,
cardId: string,
cardId?: string,
playerId?: string
) {
const config = useRuntimeConfig();
@@ -209,3 +209,15 @@ export async function damageChampion(
}
);
}
export async function discardCard(game: string, cardId: string) {
const config = useRuntimeConfig();
await $fetch(
new URL(`games/${game}/turn/discardCard/${cardId}`, config.public.endpoint)
.href,
{
method: "POST",
credentials: "include",
}
);
}
pages/game/[id].vue
+50 -4
View File
@@ -1,8 +1,13 @@
<script setup lang="ts">
import LoadingScreen from "~/components/LoadingScreen.vue";
import { subscribe } from "~/netcode";
import { subscribe, useToken } from "~/netcode";
import { delay } from "~/netcode/events";
import { type Container, type Game, type Player } from "~/netcode/interfaces";
import {
type Container,
type Effect,
type Game,
type Player,
} from "~/netcode/interfaces";
import { playSound } from "~/helpers/audioHelpers";
import TokenComponent from "~/components/tokens/TokenComponent.vue";
@@ -174,7 +179,7 @@ eventSource.addEventListener("message", async (message) => {
});
} else if (data.type == "unlockEffect") {
queueAction(async () => {
const effectIndex = current_game.currentTurn.lockedEffects.findIndex(
const effectIndex = current_game.currentTurn.lockedEffects.indexOf(
data.effect
);
current_game.currentTurn.lockedEffects.splice(effectIndex, 1);
@@ -212,6 +217,42 @@ eventSource.addEventListener("message", async (message) => {
console.log(`adding health amount : ` + data.operation);
team.health = data.health;
});
} else if (data.type == "player.addFuckUMarker") {
queueAction(async () => {
console.log(`adding fuckUMarkers : ` + data.operation);
const targetPlayer = playerList.value.find((p) => p._id == data.playerId);
if (!targetPlayer) {
throw new Error("Cannot add fuckU Markers : player not found");
}
targetPlayer.fuckUMarkers = data.fuckUMarkers;
});
} else if (data.type == "player.removeFuckUMarker") {
queueAction(async () => {
console.log(`adding fuckUMarkers : ` + data.operation);
const targetPlayer = playerList.value.find((p) => p._id == data.playerId);
if (!targetPlayer) {
throw new Error("Cannot remove fuckU Markers : player not found");
}
targetPlayer.fuckUMarkers = data.fuckUMarkers;
});
} else if (data.type == "player.addDiscardMarker") {
queueAction(async () => {
console.log(`adding discardMarkers : ` + data.operation);
const targetPlayer = playerList.value.find((p) => p._id == data.playerId);
if (!targetPlayer) {
throw new Error("Cannot add discard Markers : player not found");
}
targetPlayer.discardMarkers = data.discardMarkers;
});
} else if (data.type == "player.removeDiscardMarker") {
queueAction(async () => {
console.log(`adding fuckUMarkers : ` + data.operation);
const targetPlayer = playerList.value.find((p) => p._id == data.playerId);
if (!targetPlayer) {
throw new Error("Cannot remove discard Markers : player not found");
}
targetPlayer.discardMarkers = data.discardMarkers;
});
} else if (data.type == "killTeam") {
queueAction(async () => {
const index = game.value?.teams.findIndex((t) => t._id == data.teamId);
@@ -290,6 +331,10 @@ function focusPlayer(p: Player) {
// focusPlayer(first_player)
// })
function useTokenClick(t: Effect) {
console.log(t);
useToken(game.value!._id, t._id);
}
onUnmounted(() => {
eventSource.close();
});
@@ -333,6 +378,7 @@ onUnmounted(() => {
<TokenComponent
:token="t"
v-for="t in game.currentTurn.tokens"
@useToken="useTokenClick"
></TokenComponent>
</div>
<div id="player_list_container">
@@ -482,7 +528,7 @@ onUnmounted(() => {
.slide-left-enter-active,
.slide-left-leave-active {
transition: all v-bind("turnChangeAnimationSpeed") ease-out;
transition: all v-bind("settingsStore.animationSpeed * 2 + 'ms'") ease-out;
}
.slide-left-enter-from {