feat: modal on telegram client

chat-game · Dec 16, 2024 · 03b68d6 · 03b68d6
1 parent 9322165
commit 03b68d6
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 148 deletions.
diff --git a/apps/telegram-game/components.d.ts b/apps/telegram-game/components.d.ts
@@ -9,6 +9,7 @@ declare module 'vue' {
   export interface GlobalComponents {
     ComingSoon: typeof import('./src/components/ComingSoon.vue')['default']
     Game: typeof import('./src/components/Game.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']
     RouterLink: typeof import('vue-router')['RouterLink']

diff --git a/apps/telegram-game/public/wood.png b/apps/telegram-game/public/wood.png
diff --git a/apps/telegram-game/src/components/Game.vue b/apps/telegram-game/src/components/Game.vue
@@ -4,8 +4,8 @@
     <div class="absolute w-full h-35 bottom-0 bg-amber-950" />
 
     <div class="tg-content-safe-area-top touch-pan-x absolute top-0 left-0 right-0 w-full h-16">
-      <div class="max-w-[28rem] mx-auto px-5">
-        <div v-if="profile?.energy >= 0" class="w-fit px-4 py-1 flex flex-row items-center gap-1 bg-orange-100 text-amber-600 rounded-full">
+      <div class="max-w-[28rem] mx-auto px-4">
+        <div v-if="profile?.energy >= 0" class="w-fit px-5 py-1 flex flex-row items-center gap-1 bg-orange-100/80 text-amber-600 rounded-full">
           <img src="/energy.png" alt="avatar" class="w-auto h-8">
           <p class="text-xl font-semibold leading-none tracking-tight">
             {{ profile?.energy }}

diff --git a/apps/telegram-game/src/components/Modal.vue b/apps/telegram-game/src/components/Modal.vue
@@ -0,0 +1,54 @@
+<template>
+  <div
+    class="z-40 left-0 right-0 top-0 bottom-0 tg-secondary-bg opacity-0 transition-all duration-600"
+    :class="{ 'fixed! block! opacity-70': isOpened, 'opacity-0!': isClosing }"
+  />
+  <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 }"
+  >
+    <div ref="target" class="mb-10 p-4 md:p-6 lg:p-8 tg-section-bg tg-text rounded-2xl shadow-lg max-h-[70dvh] overflow-y-auto">
+      <div class="mb-4 flex flex-row justify-between items-center">
+        <h3 class="text-xl md:text-2xl font-medium">
+          {{ title }}
+        </h3>
+      </div>
+
+      <slot />
+
+      <button class="mt-4 p-3 tg-button w-full rounded-2xl font-medium" @click="onClose()">
+        Закрыть
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onClickOutside, usePointerSwipe } from '@vueuse/core'
+
+const { isOpened } = defineProps<{
+  isOpened: boolean
+  title: string
+}>()
+
+const emit = defineEmits(['close'])
+const isClosing = ref(false)
+const target = ref(null)
+
+onClickOutside(target, () => isOpened && onClose())
+const { isSwiping, direction } = usePointerSwipe(target)
+
+watch(isSwiping, () => {
+  if (direction.value === 'down') {
+    onClose()
+  }
+})
+
+function onClose() {
+  isClosing.value = true
+  setTimeout(() => {
+    emit('close')
+    isClosing.value = false
+  }, 600)
+}
+</script>
diff --git a/apps/telegram-game/src/components/Navigation.vue b/apps/telegram-game/src/components/Navigation.vue
@@ -6,9 +6,9 @@
           <div class="icon-block relative py-1 w-full rounded-2xl flex flex-row items-center justify-center">
             <Component :is="route.icon" class="w-6 h-6" />
 
-            <div v-if="route.meta.title === 'Задания'" class="absolute top-0 right-1 w-4 h-4 rounded-full tg-button animate-pulse" />
+            <div v-if="route.meta.title === 'Задания'" class="hidden absolute top-0 right-1 w-4 h-4 rounded-full tg-button animate-pulse" />
           </div>
-          <p class="text text-xs">
+          <p class="text text-xs font-medium">
             {{ route.meta.title }}
           </p>
         </button>

diff --git a/apps/telegram-game/src/views/InventoryView.vue b/apps/telegram-game/src/views/InventoryView.vue
@@ -1,9 +1,9 @@
 <template>
   <PageContainer>
-    <div class="tg-section-bg mb-4 px-3 py-3 flex flex-row gap-2 items-center rounded-md">
+    <div class="tg-section-bg mb-4 px-3 py-3 flex flex-row gap-2 items-center rounded-2xl">
       <img :src="data?.photoUrl" alt="avatar" class="w-14 h-14 rounded-full">
       <div>
-        <div class="text-xl">
+        <div class="text-xl font-medium">
           {{ data?.username }}
         </div>
         <div class="tg-hint text-sm">
@@ -12,12 +12,28 @@
       </div>
     </div>
 
-    <div class="grid grid-cols-4 gap-2">
-      <div v-for="item in items" :key="item.id" class="tg-section-bg aspect-square p-2 rounded-md">
-        <div>Вещь</div>
+    <div class="grid grid-cols-3 gap-2">
+      <div v-for="item in items" :key="item.id" class="tg-section-bg aspect-square p-4 rounded-2xl cursor-pointer" @click="isOpened = true">
+        <div class="relative">
+          <img src="/wood.png" alt="" class="w-full h-auto">
+          <div class="absolute -bottom-2 right-0 left-0">
+            <p class="mx-auto w-fit px-3 py-1 tg-secondary-bg rounded-full text-xl leading-none">
+              {{ item.amount }}
+            </p>
+          </div>
+        </div>
+        <p class="mt-3 text-xs text-center">
+          {{ item.name }}
+        </p>
       </div>
     </div>
   </PageContainer>
+
+  <Modal title="Название" :is-opened="isOpened" @close="isOpened = false">
+    <div>
+      123
+    </div>
+  </Modal>
 </template>
 
 <script setup lang="ts">
@@ -29,143 +45,10 @@ const { profile } = useTelegramProfile()
 const items = [
   {
     id: 1,
-    name: 'Топор',
-    price: 100,
-  },
-  {
-    id: 2,
-    name: 'Топор',
-    price: 100,
-  },
-  {
-    id: 3,
-    name: 'Топор',
-    price: 100,
-  },
-  {
-    id: 4,
-    name: 'Топор',
-    price: 100,
-  },
-  {
-    id: 5,
-    name: 'Топор',
-    price: 100,
-  },
-  {
-    id: 6,
-    name: 'Топор',
-    price: 100,
-  },
-  {
-    id: 7,
-    name: 'Топор',
-    price: 100,
-  },
-  {
-    id: 8,
-    name: 'Топор',
-    price: 100,
-  },
-  {
-    id: 9,
-    name: 'Топор',
-    price: 100,
-  },
-  {
-    id: 10,
-    name: 'Топор',
-    price: 100,
-  },
-  {
-    id: 11,
-    name: 'Топор',
-    price: 100,
-  },
-  {
-    id: 12,
-    name: 'Топор',
-    price: 100,
-  },
-  {
-    id: 13,
-    name: 'Топор',
-    price: 100,
-  },
-  {
-    id: 14,
-    name: 'Топор',
-    price: 100,
-  },
-  {
-    id: 15,
-    name: 'Топор',
-    price: 100,
-  },
-  {
-    id: 16,
-    name: 'Топор',
-    price: 100,
-  },
-  {
-    id: 17,
-    name: 'Топор',
-    price: 100,
-  },
-  {
-    id: 18,
-    name: 'Топор',
-    price: 100,
-  },
-  {
-    id: 19,
-    name: 'Топор',
-    price: 100,
-  },
-  {
-    id: 20,
-    name: 'Топор',
-    price: 100,
-  },
-  {
-    id: 21,
-    name: 'Топор',
-    price: 100,
-  },
-  {
-    id: 22,
-    name: 'Топор',
-    price: 100,
-  },
-  {
-    id: 23,
-    name: 'Топор',
-    price: 100,
-  },
-  {
-    id: 24,
-    name: 'Топор',
-    price: 100,
-  },
-  {
-    id: 25,
-    name: 'Топор',
-    price: 100,
-  },
-  {
-    id: 26,
-    name: 'Топор',
-    price: 100,
-  },
-  {
-    id: 27,
-    name: 'Топор',
-    price: 100,
-  },
-  {
-    id: 28,
-    name: 'Топор',
-    price: 100,
+    name: 'Древесина',
+    amount: 0,
   },
 ]
+
+const isOpened = ref(false)
 </script>
diff --git a/apps/telegram-game/src/views/QuestView.vue b/apps/telegram-game/src/views/QuestView.vue
@@ -5,9 +5,9 @@
     </h2>
 
     <div class="flex flex-col gap-2">
-      <div v-for="room in rooms" :key="room.id" class="tg-section-bg mb-4 px-3 py-3 flex flex-col gap-2 items-center rounded-md">
+      <div v-for="room in rooms" :key="room.id" class="tg-section-bg mb-4 px-3 py-3 flex flex-col gap-2 items-center rounded-2xl">
         <div>
-          <div class="text-xl">
+          <div class="text-xl font-medium">
             {{ room.name }}
           </div>
           <div class="tg-hint text-sm">