feat: pop confetti on lvl up

apps/telegram-game/components.d.ts

@@ -24,6 +24,7 @@ declare module 'vue' {
     Image: typeof import('./src/components/Image.vue')['default']
     InventoryItemActivationBlock: typeof import('./src/components/InventoryItemActivationBlock.vue')['default']
     InventoryItemCard: typeof import('./src/components/InventoryItemCard.vue')['default']
+    ItemCard: typeof import('./src/components/ItemCard.vue')['default']
     Modal: typeof import('./src/components/Modal.vue')['default']
     Navigation: typeof import('./src/components/Navigation.vue')['default']
     PageContainer: typeof import('./src/components/PageContainer.vue')['default']

apps/telegram-game/src/components/Game.vue

@@ -19,6 +19,8 @@
         </div>
       </div>
     </div>
+
+    <ConfettiBackground />
   </div>
 
   <Modal title="Приветствуем в игре!" :is-opened="isHelpModalOpened" @close="isHelpModalOpened = false">

apps/telegram-game/src/components/GameCharacterProgression.vue

@@ -22,8 +22,23 @@
 
 <script setup lang="ts">
 const { character } = useCharacter()
+const { pop: popConfetti } = useConfetti()
 
 const progressWidth = computed(() => character.value?.xp && character.value.nextLevel && character.value.currentLevel ? ((character.value.xp - character.value.currentLevel.requiredXp) / (character.value.nextLevel.requiredXp - character.value.currentLevel.requiredXp)) * 100 : 100)
 
 const isCharacterProgressionOpened = ref(false)
+
+const currentLevel = ref<number>(character.value?.level ?? 0)
+
+watch(() => character.value?.level, () => {
+  if (!character.value?.level) {
+    return
+  }
+
+  if (currentLevel.value < character.value?.level) {
+    // Level up!
+    popConfetti()
+    currentLevel.value = character.value.level
+  }
+})
 </script>

apps/telegram-game/src/components/InventoryItemActivationBlock.vue

@@ -1,14 +1,8 @@
 <template>
   <div v-if="checkIfItemIsConsumable(itemId)">
-    <div class="mb-2 px-8 text-center leading-tight">
-      <div class="flex flex-row items-center justify-center gap-1">
-        <div class="border tg-border tg-secondary-bg tg-text px-3 py-1 rounded-2xl">
-          +100 WP <Image src="woodland-small.png" class="inline-block w-5 h-5" />
-        </div>
-        <div class="border tg-border tg-secondary-bg tg-text px-3 py-1 rounded-2xl">
-          +1 Монета <Image src="coin.png" class="inline-block w-5 h-5" />
-        </div>
-      </div>
+    <div class="mb-2 grid grid-cols-4 gap-2">
+      <ItemCard :item="{ type: 'PATRON_POINT', amount: 100, entityId: null }" />
+      <ItemCard :item="{ type: 'COIN', amount: 1, entityId: null }" />
     </div>
 
     <Button class="flex flex-row gap-2 items-center justify-center" @click="activate()">

apps/telegram-game/src/components/ItemCard.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="px-2 py-3 tg-secondary-bg rounded-2xl flex flex-col justify-center items-center gap-1">
+    <Image :src="getItemIconByType(item.type, item.entityId)" class="w-10 h-10" />
+    <p class="font-medium text-sm leading-tight">
+      {{ item.amount > 1 ? `+${item.amount}` : getItemLabelByType(item.type) }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ProductItem } from '@chat-game/types'
+
+defineProps<{
+  item: Pick<ProductItem, 'type' | 'amount' | 'entityId'>
+}>()
+
+const { characters } = useCharacters()
+
+function getItemIconByType(type: ProductItem['type'], entityId: string | null) {
+  if (entityId) {
+    if (type === 'CHARACTER') {
+      const character = characters.value?.find(({ id }) => id === entityId)
+      if (character) {
+        return `units/${character.codename}/head.png`
+      }
+    }
+  }
+
+  switch (type) {
+    case 'COIN':
+      return 'coin.png'
+    case 'TROPHY':
+      return 'trophy.png'
+    case 'PATRON_POINT':
+      return 'woodland-small.png'
+    default:
+      return ''
+  }
+}
+
+function getItemLabelByType(type: ProductItem['type']) {
+  switch (type) {
+    case 'CHARACTER':
+      return 'Персонаж'
+    case 'COIN':
+      return 'Монета'
+    case 'TROPHY':
+      return 'Трофей'
+    case 'PATRON_POINT':
+      return 'Point'
+    default:
+      return ''
+  }
+}
+</script>

apps/telegram-game/src/components/ProductActivationBlock.vue

@@ -1,11 +1,6 @@
 <template>
   <div v-if="product?.items?.length" class="grid grid-cols-4 gap-2">
-    <div v-for="item in product.items" :key="item.id" class="px-2 py-3 tg-secondary-bg rounded-2xl flex flex-col justify-center items-center gap-1">
-      <Image :src="getItemIconByType(item.type, item.entityId)" class="w-10 h-10" />
-      <p class="font-medium text-sm leading-tight">
-        {{ item.amount > 0 ? item.amount : getItemLabelByType(item.type) }}
-      </p>
-    </div>
+    <ItemCard v-for="item in product.items" :key="item.id" :item="item" />
   </div>
 
   <Button v-if="product?.starsPrice && !wasPurchased" class="flex flex-row gap-1 items-center justify-center" @click="activateProduct()">
@@ -15,7 +10,6 @@
 </template>
 
 <script setup lang="ts">
-import type { ProductItem } from '@chat-game/types'
 import { hapticFeedback } from '@telegram-apps/sdk-vue'
 
 const { productId } = defineProps<{
@@ -24,7 +18,7 @@ const { productId } = defineProps<{
 
 const { open: openInvoice } = useInvoice()
 const { products, refreshShop } = useShop()
-const { characters, refreshCharacters } = useCharacters()
+const { refreshCharacters } = useCharacters()
 const { profile, refreshProfile, useApiFetch } = useTelegramProfile()
 const { pop: popConfetti } = useConfetti()
 
@@ -58,41 +52,4 @@ async function activateProduct() {
     }
   }
 }
-
-function getItemLabelByType(type: ProductItem['type']) {
-  switch (type) {
-    case 'CHARACTER':
-      return 'Персонаж'
-    case 'COIN':
-      return 'Монета'
-    case 'TROPHY':
-      return 'Трофей'
-    case 'PATRON_POINT':
-      return 'Патрон'
-    default:
-      return ''
-  }
-}
-
-function getItemIconByType(type: ProductItem['type'], entityId: string | null) {
-  if (entityId) {
-    if (type === 'CHARACTER') {
-      const character = characters.value?.find(({ id }) => id === entityId)
-      if (character) {
-        return `units/${character.codename}/head.png`
-      }
-    }
-  }
-
-  switch (type) {
-    case 'COIN':
-      return 'coin.png'
-    case 'TROPHY':
-      return 'trophy.png'
-    case 'PATRON_POINT':
-      return 'woodland-small.png'
-    default:
-      return ''
-  }
-}
 </script>