2 Commits

Author SHA1 Message Date
TeamCity
ee8523d51a ci: bump version to v0.14.0 2025-12-15 09:08:10 +00:00
70a44fd1ea feat(ui): FRO-5 Animation Card Played (#23)
Added a fade Up Out animation. Also added a sliding animation for the remaining cards

Co-authored-by: LQ63 <lkhermann@web.de>
Reviewed-on: #23
Co-authored-by: lq64 <lq@blackhole.local>
Co-committed-by: lq64 <lq@blackhole.local>
2025-12-15 10:06:02 +01:00
3 changed files with 38 additions and 6 deletions

View File

@@ -109,3 +109,9 @@
### Features ### Features
* **ui:** FRO-35 Animations ([#22](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/22)) ([d73b4f3](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/d73b4f396be89b4f8ce2a446afe47c604cfe8598)) * **ui:** FRO-35 Animations ([#22](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/22)) ([d73b4f3](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/d73b4f396be89b4f8ce2a446afe47c604cfe8598))
## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.13.0...0.0.0) (2025-12-15)
### Features
* **ui:** FRO-34 Lobby ([#21](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/21)) ([bb6355d](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/bb6355d9ed6745b4852a52040d880ee1dcc6d797))
* **ui:** FRO-5 Animation Card Played ([#23](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/23)) ([70a44fd](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/70a44fd1ea119d43f875e6cfac56fb25747d8913))

View File

@@ -25,8 +25,7 @@ function triggerWiggle(index: number) {
function handlePlayCard(index: number | null) { function handlePlayCard(index: number | null) {
if (index === null) return if (index === null) return
wb.sendAndWait("PlayCard", { cardindex: index }) wb.sendAndWait("PlayCard", { cardindex: index }).catch((error) => {
.catch((error) => {
triggerWiggle(index) triggerWiggle(index)
$q.notify({ $q.notify({
@@ -37,7 +36,14 @@ function handlePlayCard(index: number | null) {
}) })
} }
function onBeforeLeave(el: Element) {
const element = el as HTMLElement;
const { marginLeft, marginTop, width, height } = window.getComputedStyle(element);
element.style.left = `${element.offsetLeft - parseFloat(marginLeft)}px`;
element.style.top = `${element.offsetTop - parseFloat(marginTop)}px`;
element.style.width = width;
element.style.height = height;
}
function handleSkipDogLife() { function handleSkipDogLife() {
//TODO: Add some animation or feedback for skipping turn //TODO: Add some animation or feedback for skipping turn
} }
@@ -52,13 +58,19 @@ function getCardImagePath(cardPath: string) {
<template> <template>
<div class="hand-container"> <div class="hand-container">
<div id="card-slide" class="ingame-cards-slide"> <div id="card-slide" class="ingame-cards-slide">
<div class="cards-row"> <transition-group
tag="div"
class="cards-row"
name="card-move"
enter-active-class="animate__animated animate__fadeIn"
@before-leave="onBeforeLeave"
move-class="card-moving">
<div v-for="card in (<GameInfo>wi.data)?.hand?.cards" :key="card.identifier" :class="['handcard', { wiggle: wiggleIdx === card.idx }]"> <div v-for="card in (<GameInfo>wi.data)?.hand?.cards" :key="card.identifier" :class="['handcard', { wiggle: wiggleIdx === card.idx }]">
<div class="card-btn" aria-label="Play card"> <div class="card-btn" aria-label="Play card">
<q-img :src="getCardImagePath(card.path)" v-on:click="handlePlayCard(card.idx)" :alt="card.identifier" class="card" /> <q-img :src="getCardImagePath(card.path)" v-on:click="handlePlayCard(card.idx)" :alt="card.identifier" class="card" />
</div> </div>
</div> </div>
</div> </transition-group>
<div v-if="(<GameInfo>wi.data)?.self?.dogLife" class="dog-actions"> <div v-if="(<GameInfo>wi.data)?.self?.dogLife" class="dog-actions">
<q-btn color="negative" label="Skip Turn" @click="handleSkipDogLife" /> <q-btn color="negative" label="Skip Turn" @click="handleSkipDogLife" />
</div> </div>
@@ -136,4 +148,18 @@ function getCardImagePath(cardPath: string) {
border-radius: 4px; border-radius: 4px;
} }
} }
.card-moving {
transition: transform 0.5s ease;
transition-delay: 1s;
}
.card-move-leave-active {
position: absolute;
transition: all 0.5s ease;
pointer-events: none;
}
.card-move-leave-to {
opacity: 0;
transform: translateY(-400px);
}
</style> </style>

View File

@@ -1,3 +1,3 @@
MAJOR=0 MAJOR=0
MINOR=13 MINOR=14
PATCH=0 PATCH=0