feat: particles on modal bg

apps/telegram-game/components.d.ts

@@ -11,8 +11,10 @@ declare module 'vue' {
     Button: typeof import('./src/components/Button.vue')['default']
     CharacterActivationBlock: typeof import('./src/components/CharacterActivationBlock.vue')['default']
     CharacterUnlockBlock: typeof import('./src/components/CharacterUnlockBlock.vue')['default']
+    CoinBackground: typeof import('./src/components/CoinBackground.vue')['default']
     ComingSoon: typeof import('./src/components/ComingSoon.vue')['default']
     Confetti: typeof import('./src/components/Confetti.vue')['default']
+    ConfettiBackground: typeof import('./src/components/ConfettiBackground.vue')['default']
     CouponActivationBlock: typeof import('./src/components/CouponActivationBlock.vue')['default']
     Game: typeof import('./src/components/Game.vue')['default']
     GameNavigator: typeof import('./src/components/GameNavigator.vue')['default']

apps/telegram-game/package.json

@@ -17,6 +17,8 @@
     "@chat-game/types": "workspace:*",
     "@neoconfetti/vue": "^2.2.1",
     "@telegram-apps/sdk-vue": "^1.0.10",
+    "@tsparticles/slim": "^3.7.1",
+    "@tsparticles/vue3": "^3.0.1",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0"
   },

apps/telegram-game/src/App.vue

@@ -1,6 +1,5 @@
 <template>
   <main>
-    <Confetti />
     <Game />
     <RouterView />
   </main>

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

@@ -0,0 +1,121 @@
+<template>
+  <vue-particles
+    id="tsparticles"
+    :options="options"
+  />
+</template>
+
+<script setup lang="ts">
+const { coinsAmount = 50 } = defineProps<{ coinsAmount?: number }>()
+
+const options = {
+  fullScreen: {
+    zIndex: 40,
+  },
+  particles: {
+    move: {
+      direction: 'bottom',
+      enable: true,
+      outModes: {
+        default: 'out',
+      },
+      size: true,
+      speed: {
+        min: 1,
+        max: 3,
+      },
+    },
+    number: {
+      value: coinsAmount,
+      density: {
+        enable: true,
+        area: 800,
+      },
+    },
+    opacity: {
+      value: 1,
+      animation: {
+        enable: false,
+        startValue: 'max',
+        destroy: 'min',
+        speed: 0.3,
+        sync: true,
+      },
+    },
+    rotate: {
+      value: {
+        min: 0,
+        max: 360,
+      },
+      direction: 'random',
+      move: true,
+      animation: {
+        enable: true,
+        speed: 60,
+      },
+    },
+    tilt: {
+      direction: 'random',
+      enable: true,
+      move: true,
+      value: {
+        min: 0,
+        max: 360,
+      },
+      animation: {
+        enable: true,
+        speed: 60,
+      },
+    },
+    shape: {
+      type: [
+        'image',
+      ],
+      options: {
+        image: [
+          {
+            src: '/coin-small.png',
+            width: 32,
+            height: 32,
+            particles: {
+              size: {
+                value: 16,
+              },
+            },
+          },
+        ],
+      },
+    },
+    size: {
+      value: {
+        min: 2,
+        max: 4,
+      },
+    },
+    roll: {
+      darken: {
+        enable: true,
+        value: 30,
+      },
+      enlighten: {
+        enable: true,
+        value: 30,
+      },
+      enable: true,
+      speed: {
+        min: 15,
+        max: 25,
+      },
+    },
+    wobble: {
+      distance: 30,
+      enable: true,
+      move: true,
+      speed: {
+        min: -15,
+        max: 15,
+      },
+    },
+  },
+}
+</script>

apps/telegram-game/src/components/Confetti.vue → apps/telegram-game/src/components/ConfettiBackground.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="isShown" class="z-50 mx-auto h-dvh w-full fixed top-0 left-0 right-0 bottom-0 overflow-y-hidden overscroll-y-none">
+  <div v-if="isShown" class="z-40 mx-auto h-dvh w-full fixed top-0 left-0 right-0 bottom-0 overflow-y-hidden overscroll-y-none">
     <div v-confetti="{ particleCount: 240, duration: 4500, stageHeight: 1200, stageWidth: 900, force: 0.4 }" />
   </div>
 </template>

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

@@ -3,6 +3,11 @@
     class="z-40 left-0 right-0 top-0 bottom-0 tg-secondary-bg opacity-0 transition-all duration-500"
     :class="{ 'fixed! block! opacity-70': isOpened, 'opacity-0!': isClosing }"
   />
+
+  <div v-if="$slots.bg && isOpened && !isClosing">
+    <slot name="bg" />
+  </div>
+
   <div
     class="z-40 flex flex-col justify-end fixed left-0 right-0 bottom-0 mx-auto w-full max-w-lg max-h-[100dvh] overflow-y-auto p-4 m-0 pb-20 shadow-none translate-y-full transition-transform duration-500"
     :class="{ 'top-0! translate-y-0!': isOpened, 'translate-y-full!': isClosing }"

apps/telegram-game/src/main.ts

@@ -1,4 +1,6 @@
 import { retrieveLaunchParams } from '@telegram-apps/sdk-vue'
+import { loadSlim } from '@tsparticles/slim'
+import Particles from '@tsparticles/vue3'
 import { createApp } from 'vue'
 import App from './App.vue'
 import { errorHandler } from './errorHandler'
@@ -13,4 +15,9 @@ init(retrieveLaunchParams().startParam === 'debug' || import.meta.env.DEV)
 const app = createApp(App)
 app.config.errorHandler = errorHandler
 app.use(router)
+app.use(Particles, {
+  init: async (engine) => {
+    await loadSlim(engine)
+  },
+})
 app.mount('#app')

apps/telegram-game/src/views/ShopView.vue

@@ -33,6 +33,9 @@
         <p class="font-medium text-lg leading-tight">
           {{ product.title }}
         </p>
+        <p v-if="product.bonusCoins" class="text-sm tg-hint">
+          + бонусы
+        </p>
 
         <div :style="{ 'background-image': `url('/shop/${product.id}/512.png')` }" class="absolute top-0 left-0 right-0 bottom-0 bg-bottom bg-no-repeat bg-cover" />
       </ActiveCard>
@@ -65,6 +68,10 @@
   </PageContainer>
 
   <Modal :title="`&laquo;${selectedCharacter?.nickname}&raquo; ${selectedCharacter?.name}`" :is-opened="isCharacterOpened" @close="isCharacterOpened = false">
+    <template #bg>
+      <ConfettiBackground />
+    </template>
+
     <img :src="`/units/${selectedCharacter?.codename}/idle.gif`" alt="" class="absolute -top-30 left-0 w-34 h-34">
 
     <p class="text-sm tg-hint leading-tight">
@@ -76,6 +83,10 @@
   </Modal>
 
   <Modal :title="selectedProduct?.title ?? ''" :is-opened="isProductOpened" @close="isProductOpened = false">
+    <template #bg>
+      <CoinBackground :coins-amount="selectedProduct?.coins" />
+    </template>
+
     <p class="text-sm tg-hint leading-tight">
       {{ selectedProduct?.description }}
     </p>