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

Feat : Beta animations

Browse Source
This commit is contained in:
legonzaur
2024-06-30 14:51:06 +02:00
parent 1fbe9a57ee
commit 28bc888cb1
9 changed files with 173 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/CardPreview.vue
+1 -1
View File
@@ -82,7 +82,7 @@ onMounted(() => {
justify-content: center;
margin-bottom: 0px;
margin-top: var(--margin-bottom);
transition: filter .125s cubic-bezier(0.075, 0.82, 0.165, 1), rotate 0.075s cubic-bezier(1, 1.81, .59, 1.42);
transition: all 0.250s cubic-bezier(1, 1.81, .59, 1.42), filter .125s cubic-bezier(0.075, 0.82, 0.165, 1), rotate 0.075s cubic-bezier(1, 1.81, .59, 1.42);
isolation: isolate;
pointer-events: all;
max-height: var(--max-height);
components/CardsGrouped.vue
+74 -24
View File
@@ -1,35 +1,73 @@
<script setup lang="ts">
import { containerEvents } from '~/netcode/events';
import { containerEvents, delay } from '~/netcode/events';
import type { Container } from '~/netcode/interfaces';
export interface Props {
container: Container
wrapped?: boolean
hidden?: boolean
}
const props = defineProps<Props>()
const props = withDefaults(defineProps<Props>(), {
wrapped: () => false,
hidden: () => false
})
const settingsStore = useSettingsStore()
const cards = computed(() => {
if (props.hidden) {
return props.container.cards.map((_v, i) => ({ _id: i, cardId: undefined }))
}
return props.container.cards
})
const animationSpeed = computed(() => settingsStore.animationSpeed + 'ms')
const shuffleAnimationSpeed = computed(() => settingsStore.animationSpeed * 2 + 'ms')
function populateContainer() {
}
function shuffleContainer() {
const rotate = ref(false)
async function shuffleContainer() {
console.log("rotate")
rotate.value = true
await delay(settingsStore.animationSpeed * 2)
rotate.value = false
await delay(settingsStore.animationSpeed * 2)
}
function hideCards(cards: CardParser[]) {
}
function showCards(cards: CardParser[]) {
}
function getCardsPosition(cards: string) {
}
containerEvents.set(props.container._id, { populateContainer, shuffleContainer, getCardsPosition, hideCards, showCards })
const animationCallbacks = ref<Array<() => void>>([])
function startAnimation() {
animationCallbacks.value.forEach(p => p())
animationCallbacks.value = []
}
function endAnimation() {
animationCallbacks.value.forEach(p => p())
}
containerEvents.set(props.container._id, { populateContainer, shuffleContainer, getCardsPosition, startAnimation, endAnimation })
async function onEnter(_el: any, done: () => void) {
animationCallbacks.value.push(done)
}
async function onLeave(_el: any, done: () => void) {
animationCallbacks.value.push(done)
}
async function onBeforeEnter() {
}
onUnmounted(() => {
containerEvents.delete(props.container._id)
@@ -37,34 +75,46 @@ onUnmounted(() => {
</script>
<template>
<div class="cards_container">
<template v-if="props.container.cards.length > 0" v-for="c in props.container.cards">
<CardPreview :card_id="c?.cardId" :wrapped="true">
<div class="cards_container" :class="{ wrapped, rotate }">
<TransitionGroup name="list" @enter="onEnter" @leave="onLeave" @before-enter="onBeforeEnter">
<CardPreview :card_id="c.cardId" :wrapped="wrapped" v-for="c in cards" :key="c?._id">
<slot></slot>
</CardPreview>
</template>
<template v-else>
<div class="empty">
<img :class="`card_image`" :src="'/cards/background.png'" draggable="false">
</div>
</template>
</TransitionGroup>
<!-- <img :class="`card_image`" :src="'/cards/background.png'" draggable="false"> -->
</div>
</template>
<style scoped>
.cards_container::before {
.list-enter-active,
.list-leave-active {
transition: all v-bind('animationSpeed') ease;
}
.list-leave-to,
.list-enter-from {
opacity: 0;
transform: translateX(30px);
}
.cards_container.wrapped:before {
height: calc(250px - 10px);
display: block;
content: "";
width: 0;
}
.rotate {
rotate: 360deg;
}
.cards_container {
display: flex;
flex-direction: column-reverse;
justify-content: center;
min-width: 200px;
transition: rotate v-bind('shuffleAnimationSpeed') ease;
}
.empty {
components/GlobalOverlay.vue
+1 -2
View File
@@ -1,5 +1,4 @@
<script setup lang="ts">
import goStore from '~/netcode';
const displayOptions = ref(false)
@@ -7,7 +6,7 @@ const displayOptions = ref(false)
<template>
<div :class="`card_overlay`" ref="card">
<img class="settings_button" src="/images/settings.png" alt="settings" @click="displayOptions = true"/>
<img class="settings_button" src="/images/settings.png" alt="settings" @click="displayOptions = true" />
</div>
<OptionsDialog :isVisible="displayOptions" @close="displayOptions = false" />
</template>
components/OptionsDialog.vue
+12
View File
@@ -32,6 +32,18 @@ const close = () => {
<div class="dialog-body">
<button @click="settingsStore.switchCardStyles">Toggle Card style</button>
</div>
<div class="dialog-footer">
<span>{{ settingsStore.cardStyle }}</span>
</div>
<div class="dialog-header">
<span>Animation Speed</span>
</div>
<div class="dialog-body">
<input type="range" min="50" max="250" step="25" v-model="settingsStore.animationSpeed">
</div>
<div class="dialog-footer">
<span>{{ settingsStore.animationSpeed }}ms</span>
</div>
<div class="dialog-header">
<h3>Graphics</h3>
</div>
components/PlayerSlot.vue
+13 -18
View File
@@ -118,11 +118,14 @@ function checkEndTurn() {
make Discard
</button>
</div> -->
<br />
<!-- <br /> -->
<div class="cards_container">
<!-- HAND -->
<!-- <template v-if="isSelf">
<CardsGrouped :container="player.board" :wrapped="false">
</CardsGrouped>
<!-- <div class="cards_container"> -->
<!-- HAND -->
<!-- <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"
@@ -132,12 +135,12 @@ function checkEndTurn() {
</CardPreview>
</template> -->
<!-- BOARD -->
<CardPreview :card_id="c.cardId" v-for="c in props.player.board.cards"
<!-- BOARD -->
<!-- <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">
:locked="/*props.player.turn && c.uuid in props.player.turn.cards_locked*/ false"> -->
<!-- <template v-if="c && isSelf && isPlayerTurn && props.player.turn">
<!-- <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">
@@ -190,8 +193,8 @@ function checkEndTurn() {
STUN
</button>
</template> -->
</CardPreview>
</div>
<!-- </CardPreview> -->
<!-- </div> -->
</div>
</div>
</template>
@@ -271,14 +274,6 @@ function checkEndTurn() {
}
.discard_overlay {
grid-template-areas:
"player_stats player_stats"
"stack player";
justify-items: center;
}
#current_player_board {
grid-area: player;
}
components/SelfView.vue
+13 -5
View File
@@ -1,14 +1,22 @@
<script setup lang="ts">
import goStore, { useEffect, playCard, playAllCards, discard, lockCard, heal, damage_champion, damage_team, endTurn } from '~/netcode';
import type { Container } from '~/netcode/interfaces';
export interface Props {
container: Container
}
const props = defineProps<Props>()
</script>
<template>
<div class="cards_container" id="self_hand">
<CardPreview :card_id="c?.card_id" v-for=" c in goStore.self?.hand " @click="c && playCard(c)">
<button v-if="c && goStore.self?.turn && (goStore.self.turn.fuck_u_markers ?? 0) > 0"
@click.stop="discard(c)">DISCARD</button>
</CardPreview>
<!-- <CardPreview :card_id="c.cardId" v-for="c in container.cards "> -->
<!-- <button v-if="c && goStore.self?.turn && (goStore.self.turn.fuck_u_markers ?? 0) > 0"
@click.stop="discard(c)">DISCARD</button> -->
<!-- </CardPreview> -->
<CardsGrouped :container="container" :wrapped="false">
</CardsGrouped>
</div>
</template>
netcode/events.ts
+8 -5
View File
@@ -1,12 +1,15 @@
import type { Container } from "./interfaces";
import type { CardParser } from "./interfaces/cards";
export function delay(delay: number) {
return new Promise((resolve) => {
setTimeout(resolve, delay);
});
}
export type ContainerHandler = {
populateContainer: () => void;
shuffleContainer: () => void;
getCardsPosition: (cards: string) => any;
hideCards: (cards: CardParser[]) => void;
showCards: (cards: CardParser[]) => void;
startAnimation: () => void;
endAnimation: () => void;
};
export const containerEvents = new Map<string, ContainerHandler>();
export const containerEvents = reactive(new Map<string, ContainerHandler>());
pages/game/[id].vue
+50 -22
View File
@@ -1,10 +1,11 @@
<script setup lang="ts">
import LoadingScreen from '~/components/LoadingScreen.vue';
import { subscribe } from '~/netcode';
import { containerEvents } from '~/netcode/events';
import { containerEvents, delay } from '~/netcode/events';
import { type Container, type Game, type Player } from '~/netcode/interfaces';
const config = useRuntimeConfig()
const settingsStore = useSettingsStore()
const route = useRoute()
const gameId = route.params.id
@@ -41,8 +42,24 @@ const containers = computed<Record<string, Container>>(() => ({
const eventSource = subscribe(`/games/${gameId}/subscribe`)
const actions = ref<(() => Promise<any>)[]>([])
eventSource.addEventListener("message", (message) => {
function queueAction(callback: (() => Promise<any>)) {
actions.value.push(callback)
if (actions.value.length == 1) {
execAction(callback)
}
}
async function execAction(callback: (() => Promise<any>)) {
await callback()
actions.value.shift()
if (actions.value.length > 0) {
execAction(actions.value[0])
}
}
eventSource.addEventListener("message", async (message) => {
const data = JSON.parse(message.data)
console.log(data)
if (data.type == 'start') {
@@ -50,23 +67,36 @@ eventSource.addEventListener("message", (message) => {
} else if (data.type == "populateContainer") {
throw new Error("not implemented")
} else if (data.type == "shuffleContainer") {
containerEvents.get(data.container._id)?.shuffleContainer()
queueAction(async () => {
await containerEvents.get(data.container)?.shuffleContainer()
})
} else if (data.type == "distributeCards") {
containerEvents.get(data.from._id)?.hideCards(data.cards)
containerEvents.get(data.from._id)?.getCardsPosition(data.cards)
// containerEvents.get(data.from)?.getCardsPosition(data.cards)
queueAction(async () => {
containerEvents.get(data.from)?.startAnimation()
containerEvents.get(data.to)?.startAnimation()
})
const fromContainer = containers.value[data.from as string]
const toContainer = containers.value[data.to as string]
for (const card of data.cards) {
const index = fromContainer.cards.findIndex(c => c._id == card._id)
fromContainer.cards.splice(index, 1)
}
queueAction(async () => {
const index = fromContainer.cards.findIndex(c => c._id == card._id)
fromContainer.cards.splice(index, 1)
await delay(settingsStore.animationSpeed)
})
for (const card of data.cards) {
toContainer.cards.push(card)
queueAction(async () => {
toContainer.cards.push(card)
await delay(settingsStore.animationSpeed)
})
}
queueAction(async () => {
containerEvents.get(data.from)?.endAnimation()
containerEvents.get(data.to)?.endAnimation()
await delay(settingsStore.animationSpeed * 2)
})
} else if (data.type == "endTurn") {
throw new Error("not implemented")
@@ -79,8 +109,6 @@ const authStore = useAuthStore()
const playerList = computed(() => game.value!.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)
// TODO : current turn sound
// TODO : winner screen
@@ -135,32 +163,32 @@ onUnmounted(() => {
<AnimatedBackground @ready="loaded = true"></AnimatedBackground>
<div id="stack_discard">
<div id="stack">
<CardsGrouped :container="focusedPlayer.stack">
<CardsGrouped :container="focusedPlayer.stack" :wrapped="true" :hidden="true">
</CardsGrouped>
</div>
<div id="discard" :class="{ invisible: discard_unwrapped }" @click="() => discard_unwrapped = true">
<CardsGrouped :container="focusedPlayer.discard">
<CardsGrouped :container="focusedPlayer.discard" :wrapped="true">
</CardsGrouped>
</div>
</div>
<!-- <MarketCards :container="game.market"></MarketCards> -->
<div id="player_list_container">
<!-- <div id="player_list_container">
<div id="player_list">
<!-- <PlayerListElement v-for="p in playerList" :player="p" @click="focusPlayer(p)" :focused="focusedPlayer">
</PlayerListElement> -->
<PlayerListElement v-for="p in playerList" :player="p" @click="focusPlayer(p)" :focused="focusedPlayer">
</PlayerListElement>
</div>
</div>
</div> -->
<div id="current_player">
<PlayerSlot v-if="focusedPlayer" :player="focusedPlayer" :game="game!"></PlayerSlot>
</div>
<ResultDialog :isVisible="showResults" :won="isWinner" :players="playerList" @close="showResults = false">
</ResultDialog>
<!-- <GlobalOverlay></GlobalOverlay>
<SelfView></SelfView> -->
<GlobalOverlay></GlobalOverlay>
<SelfView v-if="selfPlayer" :container="selfPlayer.hand"></SelfView>
<LoadingScreen v-if="!loaded"></LoadingScreen>
</div>
</template>
stores/settingsStore.ts
+1
View File
@@ -8,6 +8,7 @@ enum CardStyles {
export const useSettingsStore = defineStore("settingstore", {
state: () => ({
cardStyle: CardStyles.HERON,
animationSpeed: 100,
shaderQuality: 3,
shaderFramerate: 10,
shaderPixelated: true,