Circuit-Forge/avocet
3
0
Fork 0
Code Issues 9 Pull requests 1 Projects Releases Packages Wiki Activity Actions

feat(avocet): badge pop via Anime.js spring transition hook

Browse source
This commit is contained in:
pyr0ball 2026-03-08 07:35:49 -07:00
parent 6829bebdd4
commit e01f743c39
1 changed files with 25 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
web/src/views/LabelView.vue
View file

@ -8,12 +8,24 @@
{{ store.totalRemaining }} remaining {{ store.totalRemaining }} remaining
</template> </template>
<span v-else class="queue-status">Queue empty</span> <span v-else class="queue-status">Queue empty</span>
<Transition @enter="onBadgeEnter" :css="false">
<span v-if="onRoll" class="badge badge-roll">🔥 On a roll!</span> <span v-if="onRoll" class="badge badge-roll">🔥 On a roll!</span>
</Transition>
<Transition @enter="onBadgeEnter" :css="false">
<span v-if="speedRound" class="badge badge-speed">⚡ Speed round!</span> <span v-if="speedRound" class="badge badge-speed">⚡ Speed round!</span>
</Transition>
<Transition @enter="onBadgeEnter" :css="false">
<span v-if="fiftyDeep" class="badge badge-fifty">🎯 Fifty deep!</span> <span v-if="fiftyDeep" class="badge badge-fifty">🎯 Fifty deep!</span>
</Transition>
<Transition @enter="onBadgeEnter" :css="false">
<span v-if="centuryMark" class="badge badge-century">💯 Century!</span> <span v-if="centuryMark" class="badge badge-century">💯 Century!</span>
</Transition>
<Transition @enter="onBadgeEnter" :css="false">
<span v-if="cleanSweep" class="badge badge-sweep">🧹 Clean sweep!</span> <span v-if="cleanSweep" class="badge badge-sweep">🧹 Clean sweep!</span>
</Transition>
<Transition @enter="onBadgeEnter" :css="false">
<span v-if="midnightLabeler" class="badge badge-midnight">🦉 Midnight labeler!</span> <span v-if="midnightLabeler" class="badge badge-midnight">🦉 Midnight labeler!</span>
</Transition>
</span> </span>
<div class="header-actions"> <div class="header-actions">
<button @click="handleUndo" :disabled="!store.lastAction" class="btn-action">↩ Undo</button> <button @click="handleUndo" :disabled="!store.lastAction" class="btn-action">↩ Undo</button>
@ -125,6 +137,13 @@ watch(isHeld, (held) => {
) )
}) })
function onBadgeEnter(el: Element, done: () => void) {
if (!motion.rich.value) { done(); return }
animate(el as HTMLElement,
{ scale: [0.6, 1], opacity: [0, 1], ease: spring({ mass: 1.5, stiffness: 80, damping: 8 }), duration: 300, onComplete: done }
)
}
// Easter egg state // Easter egg state
const consecutiveLabeled = ref(0) const consecutiveLabeled = ref(0)
const recentLabels = ref<number[]>([]) const recentLabels = ref<number[]>([])
@ -364,12 +383,6 @@ onUnmounted(() => {
font-size: 0.75rem; font-size: 0.75rem;
font-weight: 700; font-weight: 700;
font-family: var(--font-body, sans-serif); font-family: var(--font-body, sans-serif);
animation: badge-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes badge-pop {
from { transform: scale(0.6); opacity: 0; }
to { transform: scale(1); opacity: 1; }
} }
.badge-roll { background: #ff6b35; color: #fff; } .badge-roll { background: #ff6b35; color: #fff; }