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

Feat : card distribute

Browse Source
This commit is contained in:
legonzaur
2024-06-13 22:39:46 -04:00
parent 4a56f3ed62
commit a22c6e1352
11 changed files with 565 additions and 487 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/AnimatedBackground.vue
+39 -29
View File
@@ -3,7 +3,9 @@ const settingsStore = useSettingsStore()
import gsap from 'gsap';
import ShaderWorker from '~/assets/workers/ShaderWorker?worker'
import goStore from '~/netcode';
import type { Game } from '~/netcode/interfaces';
const emit = defineEmits(["ready"])
const worker = new ShaderWorker()
const canvas = ref<HTMLCanvasElement | null>(null)
@@ -27,18 +29,29 @@ const _colorEnd = reactive(props.colorEnd)
function initShader() {
if (!canvas.value) { return }
const offscreen = canvas.value?.transferControlToOffscreen()
worker.postMessage({
command: "initShader",
canvas: offscreen,
screen: { height: window.innerHeight * devicePixelRatio, width: window.innerWidth * devicePixelRatio, devicePixelRatio },
shaderOptions: { quality: settingsStore.shaderQuality, framerate: settingsStore.shaderFramerate },
}, [offscreen])
if (settingsStore.shaderFramerate == 0) {
killShader()
}
resizeShader()
return new Promise<void>((resolve, reject) => {
if (!canvas.value) {
reject("canvas is null");
return
}
const offscreen = canvas.value?.transferControlToOffscreen()
worker.postMessage({
command: "initShader",
canvas: offscreen,
screen: { height: window.innerHeight * devicePixelRatio, width: window.innerWidth * devicePixelRatio, devicePixelRatio },
shaderOptions: { quality: settingsStore.shaderQuality, framerate: settingsStore.shaderFramerate },
}, [offscreen])
if (settingsStore.shaderFramerate == 0) {
killShader()
}
resizeShader()
worker.onmessage = (e) => {
if (e.data == "ready") {
resolve()
}
}
})
}
function recolorShader() {
@@ -83,15 +96,15 @@ watch(() => [settingsStore.shaderQuality], () => {
resizeShader()
})
watch(() => [goStore.current_game?.current_turn], () => {
if (goStore.current_game?.current_turn != goStore.self?.team) {
gsap.to(_colorStart, { duration: 0.5, 0: 0, 1: .2, 2: .3 })
gsap.to(_colorEnd, { duration: 0.5, 0: 0, 1: 1, 2: 1 })
} else {
gsap.to(_colorStart, { duration: 0.5, 0: 0, 1: .3, 2: 0 })
gsap.to(_colorEnd, { duration: 0.5, 0: 0, 1: 1, 2: 0 })
}
}, { immediate: true })
// watch(() => [props.game.currentTurn], () => {
// if (props.game.teams.find() != goStore.self?.team) {
// gsap.to(_colorStart, { duration: 0.5, 0: 0, 1: .2, 2: .3 })
// gsap.to(_colorEnd, { duration: 0.5, 0: 0, 1: 1, 2: 1 })
// } else {
// gsap.to(_colorStart, { duration: 0.5, 0: 0, 1: .3, 2: 0 })
// gsap.to(_colorEnd, { duration: 0.5, 0: 0, 1: 1, 2: 0 })
// }
// }, { immediate: true })
watch([_colorEnd, _colorStart], () => {
@@ -99,18 +112,16 @@ watch([_colorEnd, _colorStart], () => {
})
onMounted(async () => {
nextTick(() => {
recolorShader()
initShader()
window.addEventListener("resize", resizeShader, true)
})
recolorShader()
await initShader()
window.addEventListener("resize", resizeShader, true)
emit("ready")
})
onUnmounted(() => {
window.removeEventListener("resize", resizeShader)
killShader()
})
</script>
<template>
@@ -124,7 +135,6 @@ onUnmounted(() => {
position: absolute;
height: 100%;
width: 100%;
image-rendering: smooth;
}
#background.pixelated {
components/CardPreview.vue
+1 -1
View File
@@ -9,13 +9,13 @@ export interface Props {
tilted?: boolean
}
const props = withDefaults(defineProps<Props>(), {
wrapped: () => false,
tilted: () => true,
locked: () => true
})
const emit = defineEmits(["click"])
const settingsStore = useSettingsStore()
components/CardsGrouped.vue
+34 -8
View File
@@ -1,24 +1,50 @@
<script setup lang="ts">
import type { Card } from '~/netcode/Card';
import { containerEvents } from '~/netcode/events';
import type { Container } from '~/netcode/interfaces';
import type { CardParser } from '~/netcode/interfaces/cards';
export interface Props {
stack: (Card | null)[]
container: Container
}
const props = withDefaults(defineProps<Props>(), {
stack: () => [],
})
const props = defineProps<Props>()
function populateContainer() {
}
function shuffleContainer() {
}
function hideCards(cards: CardParser[]) {
}
function showCards(cards: CardParser[]) {
}
function getCardsPosition(cards: string) {
}
containerEvents.set(props.container._id, { populateContainer, shuffleContainer, getCardsPosition, hideCards, showCards })
onUnmounted(() => {
containerEvents.delete(props.container._id)
})
</script>
<template>
<div class="cards_container">
<template v-if="props.stack.length > 0" v-for="c in props.stack">
<CardPreview :card_id="c?.card_id" :wrapped="true">
<template v-if="props.container.cards.length > 0" v-for="c in props.container.cards">
<CardPreview :card_id="c?.cardId" :wrapped="true">
<slot></slot>
</CardPreview>
</template>
<template v-if="props.stack.length == 0">
<template v-else>
<div class="empty">
<img :class="`card_image`" :src="'/cards/background.png'" draggable="false">
</div>
components/LoadingScreen.vue
+17
View File
@@ -0,0 +1,17 @@
<script setup lang="ts">
</script>
<template>
<div id="loading_screen">Loading...</div>
</template>
<style scoped>
#loading_screen {
left: 0;
position: absolute;
height: 100%;
width: 100%;
background: white;
}
</style>
components/PlayerSlot.vue
+72 -83
View File
@@ -1,92 +1,88 @@
<script setup lang="ts">
import goStore, {
useEffect,
playCard,
playAllCards,
discard,
lockCard,
heal,
damage_champion,
damage_team,
endTurn
} from "~/netcode";
import { CardType, type Card } from "~/netcode/Card";
import type { Player } from "~/netcode/Player";
import { CardEffects, type Effect, EffectType } from "@/netcode/Effect";
import type { Team } from "~/netcode/Team";
import { endTurn } from "~/netcode";
import type { Game, Player } from "~/netcode/interfaces";
import { CardEffects, type CardParser } from "~/netcode/interfaces/cards";
import { useClientSideStore } from "~/stores/turn";
export interface Props {
player: Player;
game: Game,
hide_stack_and_discard?: boolean;
}
const authStore = useAuthStore()
const props = withDefaults(defineProps<Props>(), {
hide_stack_and_discard: () => false,
})
const playerList = computed(() => props.game.teams.reduce((acc, t) => acc.concat(t.players), [] as Player[]))
const selfPlayer = computed(() => authStore.logged ? playerList.value?.find(p => p.user.userId == authStore.selfUser.userId) : undefined)
const currentTeam = computed(() => props.game.teams.find(t => t._id == props.game.currentTurn))
const isPlayerTurn = computed(() => currentTeam.value?.players.some(p => p.user.userId == authStore.selfUser.userId));
const isSelf = computed(() => props.player.user.userId === authStore.selfUser.userId);
const isSelfTurn = computed(() => isSelf && isPlayerTurn)
const isPlayerTurn = computed(() => props.player.team === goStore.current_game?.current_turn);
const isSelf = computed(() => props.player.uuid === goStore.self?.uuid);
const isSelfTurn = computed(() => goStore.self?.team === goStore.current_game?.current_turn)
const isPlayerEnemy = computed(() => goStore.self?.team !== props.player.team)
const warningText = ref("Effets restants!")
const clientStore = useClientSideStore()
const make_discard = (target: Player) =>
clientStore.findUseEffect(CardEffects.MAKE_DISCARD, target);
const sacrifice = (target: Card) => clientStore.findUseEffect(CardEffects.SACRIFICE, target);
const stun = (target: Card) => clientStore.findUseEffect(CardEffects.STUN, target)
// const make_discard = (target: Player) =>
// clientStore.findUseEffect(CardEffects.MAKE_DISCARD, target);
// const sacrifice = (target: CardParser) => clientStore.findUseEffect(CardEffects.SACRIFICE, target);
// const stun = (target: CardParser) => clientStore.findUseEffect(CardEffects.STUN, target)
// 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 prepare_champion = (target: Card) => clientStore.findUseEffect(CardEffects.PREPARE, target)
// const prepare_champion = (target: CardParser) => clientStore.findUseEffect(CardEffects.PREPARE, target)
let warning = ref(false)
function has_actions_remaining(): boolean {
return (goStore.self?.turn?.damage_reserve ? goStore.self?.turn?.damage_reserve > 0 : false)
|| (goStore.self?.turn?.gold_reserve ? goStore.self?.turn?.gold_reserve >= (goStore.current_game?.market.reduce((min, card) => Math.min(min, card?.cost ?? Infinity), Infinity) ?? Infinity) : false)
|| (goStore.self?.turn?.fuck_u_markers ? goStore.self?.turn?.fuck_u_markers > 0 : false)
|| !goStore.self?.turn?.effects_availables.every(e => !e.usable || e.effect_type == EffectType.SUICIDE)
|| !goStore.self?.board.every(c => (c.uuid in (goStore.self?.turn?.cards_locked ?? {})))
|| false
}
// function has_actions_remaining(): boolean {
// return (goStore.self?.turn?.damage_reserve ? goStore.self?.turn?.damage_reserve > 0 : false)
// || (goStore.self?.turn?.gold_reserve ? goStore.self?.turn?.gold_reserve >= (goStore.current_game?.market.reduce((min, card) => Math.min(min, card?.cost ?? Infinity), Infinity) ?? Infinity) : false)
// || (goStore.self?.turn?.fuck_u_markers ? goStore.self?.turn?.fuck_u_markers > 0 : false)
// || !goStore.self?.turn?.effects_availables.every(e => !e.usable || e.effect_type == EffectType.SUICIDE)
// || !goStore.self?.board.every(c => (c.uuid in (goStore.self?.turn?.cards_locked ?? {})))
// || false
// }
function can_buy_fire_gem(): boolean {
return (goStore.self?.turn?.gold_reserve ? goStore.self?.turn?.gold_reserve >= 2 : false)
}
// function can_buy_fire_gem(): boolean {
// return (goStore.self?.turn?.gold_reserve ? goStore.self?.turn?.gold_reserve >= 2 : false)
// }
function checkEndTurn() {
// TODO: Add a confirmation dialog if resources are left
if (
(!warning.value)
&& has_actions_remaining()) {
// Set a warning flag to true
// Display an alert somehow using this warning flag
warning.value = true
}
else if (!warning.value && can_buy_fire_gem()) {
warningText.value = "P'tite Fire gem?"
warning.value = true
}
else {
warningText.value = "Effets restants!"
warning.value = false
endTurn()
}
// if (
// (!warning.value)
// && has_actions_remaining()) {
// // Set a warning flag to true
// // Display an alert somehow using this warning flag
// warning.value = true
// }
// else if (!warning.value && can_buy_fire_gem()) {
// warningText.value = "P'tite Fire gem?"
// warning.value = true
// }
// else {
// warningText.value = "Effets restants!"
// warning.value = false
// endTurn()
// }
endTurn(props.game._id)
}
function damage_team_all(team: Team) {
for (let i = 0; i < (goStore.self?.turn?.damage_reserve ?? 0); i++) {
damage_team(team)
}
}
// function damage_team_all(team: Team) {
// for (let i = 0; i < (goStore.self?.turn?.damage_reserve ?? 0); i++) {
// damage_team(team)
// }
// }
function check_for_guard(player: Player) {
return player.board.some(c => c.guard === true)
}
// function check_for_guard(player: Player) {
// return player.board.some(c => c.guard === true)
// }
</script>
@@ -105,7 +101,7 @@ function check_for_guard(player: Player) {
<div id="current_player_board">
<div class="other_player_buttons_container">
<!-- <div class="other_player_buttons_container">
<button @click.stop="damage_team(props.player.team)"
v-if="isSelfTurn && isPlayerEnemy && goStore.self?.turn && props.player.team" class="damage_button"
:disabled="(goStore.self?.turn.damage_reserve ?? 0) <= 0 || check_for_guard(props.player)">
@@ -122,12 +118,12 @@ function check_for_guard(player: Player) {
:disabled="!clientStore.activatedClientside.find((e: Effect) => (e.effect == CardEffects.MAKE_DISCARD) && e.usable)">
make Discard
</button>
</div>
</div> -->
<br />
<div class="cards_container">
<!-- HAND -->
<template v-if="props.player != goStore.self">
<!-- <template v-if="isSelf">
<CardPreview :card_id="c?.card_id" v-for="c in props.player.hand" @click="c && playCard(c)">
<button
v-if="props.player.turn && c && isSelf && (props.player.turn.discard_markers + props.player.turn.fuck_u_markers) > 0"
@@ -135,14 +131,15 @@ function check_for_guard(player: Player) {
DISCARD
</button>
</CardPreview>
</template>
</template> -->
<!-- BOARD -->
<CardPreview :card_id="c.card_id" v-for="c in props.player.board" @click="lockCard(c)"
:locked="props.player.turn && c.uuid in props.player.turn.cards_locked">
<CardPreview :card_id="c.cardId" v-for="c in props.player.board.cards"
@click="console.log/*lockCard(c)*/"
:locked="/*props.player.turn && c.uuid in props.player.turn.cards_locked*/ false">
<template v-if="c && isSelf && isPlayerTurn && props.player.turn">
<!-- Card Locked -->
<!-- <template v-if="c && isSelf && isPlayerTurn && props.player.turn">
// Card Locked
<template v-if="c.uuid in props.player.turn.cards_locked">
<template v-for="e in clientStore.maskedServerEffects">
<template v-if="e.card == c">
@@ -164,7 +161,7 @@ function check_for_guard(player: Player) {
v-if="clientStore.activatedClientside.find((e: Effect) => (e.effect == CardEffects.PREPARE) && e.usable) && c.card_type == CardType.CHAMPION"
@click.stop="prepare_champion(c)">PREPARE</button>
</template>
<!-- Card Unlocked -->
// Card Unlocked
<template v-if="!(c.uuid in props.player.turn.cards_locked)">
<button v-if="(props.player.turn.discard_markers + props.player.turn.fuck_u_markers) > 0"
@click.stop="discard(c)">
@@ -193,7 +190,7 @@ function check_for_guard(player: Player) {
@click.stop="stun(c)" :disabled="(check_for_guard(props.player) && !c.guard)">
STUN
</button>
</template>
</template> -->
</CardPreview>
</div>
</div>
@@ -272,19 +269,15 @@ function check_for_guard(player: Player) {
"player_stats"
"player";
transition: all 1s;
<<<<<<< HEAD
/* margin-bottom: -75px;
padding-bottom: 75px; */
}
.discard_overlay {
grid-template-areas:
"player_stats player_stats"
"stack player";
=======justify-items: center;
/* margin-bottom: -75px;
padding-bottom: 75px; */
>>>>>>>feat/panels-visuals
justify-items: center;
}
#current_player_board {
@@ -379,14 +372,10 @@ function check_for_guard(player: Player) {
}
#player_banner.big {
<<<<<<< HEAD padding: 0;
padding: 0;
left: 50%;
transform: translateX(-50%);
=======
/* padding: 0;
left: 50%;
transform: translateX(-50%); */
>>>>>>>feat/panels-visuals max-width: min-content;
max-width: min-content;
border: 5px solid black;
border-radius: 10px;
filter: drop-shadow(2.5px 7.5px 1px rgba(0, 0, 0, .60));