From 8ea33c56b972f0b548990536017cd08edd90748c Mon Sep 17 00:00:00 2001
From: Nick Kosarev <hmbanan666@hotmail.com>
Date: Wed, 18 Dec 2024 17:20:55 +0000
Subject: [PATCH] feat: simple shop page

---
 apps/telegram-game/auto-imports.d.ts          |   1 +
 apps/telegram-game/components.d.ts            |   4 ++
 apps/telegram-game/public/coin-small.png      | Bin 0 -> 475 bytes
 apps/telegram-game/public/coin.png            | Bin 0 -> 691 bytes
 apps/telegram-game/public/coupon-small.png    | Bin 0 -> 553 bytes
 .../src/components/ActiveCard.vue             |  15 ++++
 apps/telegram-game/src/components/Button.vue  |  15 ++++
 .../components/CharacterActivationBlock.vue   |  28 ++++++++
 apps/telegram-game/src/components/Game.vue    |   4 +-
 .../src/components/GameNavigator.vue          |   4 +-
 apps/telegram-game/src/components/Modal.vue   |  26 +++----
 .../src/components/SectionHeader.vue          |   9 +++
 .../src/composables/useCharacters.ts          |   8 +++
 .../src/composables/useTelegramProfile.ts     |  21 +++---
 .../telegram-game/src/views/InventoryView.vue |  16 ++---
 apps/telegram-game/src/views/QuestView.vue    |   5 +-
 apps/telegram-game/src/views/ShopView.vue     |  66 +++++++++++++++++-
 .../index.get.ts}                             |   6 +-
 .../character/[characterId]/activate.get.ts   |  37 ++++++++++
 .../{[id].get.ts => [profileId]/index.get.ts} |   0
 .../server/api/telegram/profile/index.post.ts |  27 -------
 21 files changed, 219 insertions(+), 73 deletions(-)
 create mode 100644 apps/telegram-game/public/coin-small.png
 create mode 100644 apps/telegram-game/public/coin.png
 create mode 100644 apps/telegram-game/public/coupon-small.png
 create mode 100644 apps/telegram-game/src/components/ActiveCard.vue
 create mode 100644 apps/telegram-game/src/components/Button.vue
 create mode 100644 apps/telegram-game/src/components/CharacterActivationBlock.vue
 create mode 100644 apps/telegram-game/src/components/SectionHeader.vue
 create mode 100644 apps/telegram-game/src/composables/useCharacters.ts
 rename apps/website/server/api/telegram/{[telegramId].get.ts => [telegramId]/index.get.ts} (88%)
 create mode 100644 apps/website/server/api/telegram/profile/[profileId]/character/[characterId]/activate.get.ts
 rename apps/website/server/api/telegram/profile/{[id].get.ts => [profileId]/index.get.ts} (100%)
 delete mode 100644 apps/website/server/api/telegram/profile/index.post.ts

diff --git a/apps/telegram-game/auto-imports.d.ts b/apps/telegram-game/auto-imports.d.ts
index cbe017f8..42dcc681 100644
--- a/apps/telegram-game/auto-imports.d.ts
+++ b/apps/telegram-game/auto-imports.d.ts
@@ -62,6 +62,7 @@ declare global {
   const unref: typeof import('vue')['unref']
   const useAttrs: typeof import('vue')['useAttrs']
   const useBackButton: typeof import('./src/composables/useBackButton')['useBackButton']
+  const useCharacters: typeof import('./src/composables/useCharacters')['useCharacters']
   const useCssModule: typeof import('vue')['useCssModule']
   const useCssVars: typeof import('vue')['useCssVars']
   const useId: typeof import('vue')['useId']
diff --git a/apps/telegram-game/components.d.ts b/apps/telegram-game/components.d.ts
index dfb0235c..6acec0c2 100644
--- a/apps/telegram-game/components.d.ts
+++ b/apps/telegram-game/components.d.ts
@@ -7,6 +7,9 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    ActiveCard: typeof import('./src/components/ActiveCard.vue')['default']
+    Button: typeof import('./src/components/Button.vue')['default']
+    CharacterActivationBlock: typeof import('./src/components/CharacterActivationBlock.vue')['default']
     ComingSoon: typeof import('./src/components/ComingSoon.vue')['default']
     Game: typeof import('./src/components/Game.vue')['default']
     GameNavigator: typeof import('./src/components/GameNavigator.vue')['default']
@@ -15,5 +18,6 @@ declare module 'vue' {
     PageContainer: typeof import('./src/components/PageContainer.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    SectionHeader: typeof import('./src/components/SectionHeader.vue')['default']
   }
 }
diff --git a/apps/telegram-game/public/coin-small.png b/apps/telegram-game/public/coin-small.png
new file mode 100644
index 0000000000000000000000000000000000000000..ebfe6273a349fa3ebb8a56959ad561671cf4ba60
GIT binary patch
literal 475
zcmeAS@N?(olHy`uVBq!ia0vp^4j|0I1|(Ny7TyC=jKx9jP7LeL$-D%zr+T_LhE&XX
zJA0!Sv!g)U_nx`m%EX+wbUzCv<tDzA<}eFuREW6AvCq+qJNu)m&Q^{k9?zL0viAz_
zNHnVc$zvS9U1j&5KWFUAx4$Vndh+1o%j?T|`GLH->Hp%i6?c0{IdCtyx!rHV%=#TW
zbC#zuFIyT?wZ>MlhII+!76vI(eWTBhS8slJCFj7`i<zeL?DmHxuT^hZ-(b=p=CFAh
zfA+KK@~e+c`eiv&=KH_Ax10~P6?hl0UMPurwta4)_Pu!m`<N~<L@}JbRp;>f%;}y}
zKIiV;i+%0AH_Cqk)R5$R!c!uQ?X>^S%)P5@awyyZ<e<Rn2Ghl#J^$BqZo7BERte&m
zSs*(nvt3}yICG!r^ZWH#HT8vYy?f6WzW%;v`UlYoAQ_NlzF-sXGjFLa{~5Qy_W0WW
z@>Tr?P!E0WxsXw_!`75{f^F)@Pm#T!dnSNgJmWmq|LyY<&hAlxD*QaxdY5{Iu|8)!
rV<v-c!?Du$+otTX-t!q0EVJxm_hcKcmo7*G#ukI8tDnm{r-UW|m5t7k

literal 0
HcmV?d00001

diff --git a/apps/telegram-game/public/coin.png b/apps/telegram-game/public/coin.png
new file mode 100644
index 0000000000000000000000000000000000000000..ef44ac0d1ce5573e9a6473d68a3a8ecec4314f2d
GIT binary patch
literal 691
zcmeAS@N?(olHy`uVBq!ia0vp^4Is?H1|$#LC7uRSjKx9jP7LeL$-HD>V9ND$aSW-L
z^Y)IR7jvM9!$rxh-FxS@PH;M%<FrOs=WgQ!wNM3)uuP_R2QD3oy3?{$tf_S_w}-5_
z!k_j%HUDN*`&+-_`S|Ift?#dO8!r}Z&HT%wyEgsuzNde`N8O8gE6Fg2@c@F5y|T~I
z<oW%(G1ux^9A}rue*C&}ulfg;24e;bW+cM<{EUlp?DtunzL&H-R(`J7`t$GScU|9H
z&E$`&&X{3GLE9SJ=k@#QmhP*6;iq<d<@@#641B%0_}{woAGdD3CtSgV<Q}lgTIcf{
ze6h5jwRo{*<;Opp&L01{`Nh|>?>Lp_F%+;dq$3ko?bQu}s{7(gc3M`ysBY20bk7&L
z1>a=;8l1dqKdE-#|9$S5o<s91n7jJlzJ~Vq-yeOw-TnE|*K76t>;L}ybIpeF0T07D
z1_H#T|NImF?)m-VKkFutzR&Id{{8PzM-6vLh8X$UgBd$-O<DK8pMU#zlV7U0f@^H{
ziLPIte)-Y+8^Y+;=-pv<xg-4K%Dm6Yn4$2})}dvedWP+DcT5+qde5kIabCjpt5|i~
ZKR=hfu|+v(Dlio?c)I$ztaD0e0stLn9KZko

literal 0
HcmV?d00001

diff --git a/apps/telegram-game/public/coupon-small.png b/apps/telegram-game/public/coupon-small.png
new file mode 100644
index 0000000000000000000000000000000000000000..9028ecc00da1cbac35eae39301e7894ffc2584e9
GIT binary patch
literal 553
zcmeAS@N?(olHy`uVBq!ia0vp^4j|0I1|(Ny7TyC=jKx9jP7LeL$-D%zAA7nuhE&XX
zJKNBk*-@bNyHi((?*`7WrWK9?+{xKb^*O}CqO#XdZJj!IYVWmgkMuVPad&4o`HHY~
zYh=1?=#W`-&6wR<r?~um!SmN@yQf!I&b%vK_FYJQ!n@o*UbU}$-aj(?xYc}>P*C_8
zhAj*xzW*5IKd=7Fmnk39KX?7!jD2=>A=j7p{gbm(cbU(a#t_9Y%SGyQ=wjK=Yq$Nk
ze_9;zMKXbH0qcU3R~dzFSv}Zjtyoy~-}lkJ*?d!%DE;CwV7|a~f#p2oEvv*#3)e?i
zYA5}8@T~R7^4Z1r-cO$QTj*kXgJgqP!?I6S4VyRHDSZ6)hUc}RO5nF^p?CX*YuRQn
zW-w+HWj{+@&u=3BuIX30vYmQ>)a2BB>-n2=d?zG=Y}VYv_u{SnL<`$^m5&#%adrBy
zliTz5c>4M{+e?2{7M*7>X3%BueOcP@<&OOObCY)z|MW>(&FpoI$AQ}+xI$JS>h)(s
zeZ}6N0Z^sAziJ#_%y{l`zOt{3Z^LIs9+3XtU3?MNU%vCpKHmBIrk%s;wZC@BK%MSZ
zYo{Q+mpwNA%e{HiUKk$$n|q+DVZWLF?>Fn=B0u&y+&#AEEjI_)OMBj5wMu`__rDq(
a=Jih>b@)ycm5Kz$J%gvKpUXO@geCw!=<-bf

literal 0
HcmV?d00001

diff --git a/apps/telegram-game/src/components/ActiveCard.vue b/apps/telegram-game/src/components/ActiveCard.vue
new file mode 100644
index 00000000..0674f5d3
--- /dev/null
+++ b/apps/telegram-game/src/components/ActiveCard.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="relative h-full tg-section-bg aspect-square p-4 rounded-2xl cursor-pointer active:scale-90 duration-200" @click="handleClick()">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { hapticFeedback } from '@telegram-apps/sdk-vue'
+
+function handleClick() {
+  if (hapticFeedback.impactOccurred.isAvailable()) {
+    hapticFeedback.impactOccurred('light')
+  }
+}
+</script>
diff --git a/apps/telegram-game/src/components/Button.vue b/apps/telegram-game/src/components/Button.vue
new file mode 100644
index 00000000..7094d679
--- /dev/null
+++ b/apps/telegram-game/src/components/Button.vue
@@ -0,0 +1,15 @@
+<template>
+  <button class="p-3 tg-button w-full rounded-2xl font-medium cursor-pointer active:scale-95 duration-200" @click="handleClick()">
+    <slot />
+  </button>
+</template>
+
+<script setup lang="ts">
+import { hapticFeedback } from '@telegram-apps/sdk-vue'
+
+function handleClick() {
+  if (hapticFeedback.impactOccurred.isAvailable()) {
+    hapticFeedback.impactOccurred('light')
+  }
+}
+</script>
diff --git a/apps/telegram-game/src/components/CharacterActivationBlock.vue b/apps/telegram-game/src/components/CharacterActivationBlock.vue
new file mode 100644
index 00000000..b9a3d71d
--- /dev/null
+++ b/apps/telegram-game/src/components/CharacterActivationBlock.vue
@@ -0,0 +1,28 @@
+<template>
+  <div v-if="isActive" class="px-8 tg-hint text-center font-medium leading-tight">
+    Это твой активный персонаж
+  </div>
+  <Button v-else class="mt-3" @click="activateCharacter()">
+    Активировать
+  </Button>
+</template>
+
+<script setup lang="ts">
+import { useFetch } from '@vueuse/core'
+
+const { characterId } = defineProps<{
+  characterId: string
+}>()
+
+const { characters, refreshCharacters } = useCharacters()
+const { profile, refreshProfile } = useTelegramProfile()
+
+const character = computed(() => characters.value?.find(({ id }) => id === characterId))
+const isActive = computed(() => profile.value.profile?.activeEditionId === character.value?.editions?.find(({ profileId }) => profileId === profile.value?.profile.id)?.id)
+
+async function activateCharacter() {
+  await useFetch(`https://chatgame.space/api/telegram/profile/${profile.value.id}/character/${characterId}/activate`).get().json<{ ok: boolean }>()
+  await refreshProfile()
+  await refreshCharacters()
+}
+</script>
diff --git a/apps/telegram-game/src/components/Game.vue b/apps/telegram-game/src/components/Game.vue
index 1dff86bd..07c8e2aa 100644
--- a/apps/telegram-game/src/components/Game.vue
+++ b/apps/telegram-game/src/components/Game.vue
@@ -7,9 +7,9 @@
       <div class="max-w-[28rem] mx-auto px-4">
         <GameNavigator :player-x="game.player?.x" :wagon-x="game.wagon?.x" />
 
-        <div v-if="profile?.energy >= 0" class="w-fit px-5 py-1 flex flex-row items-center gap-2 bg-orange-100/80 text-amber-600 rounded-full">
+        <div v-if="profile?.energy >= 0" class="w-fit h-10 px-5 py-0 flex flex-row items-center gap-2 bg-orange-100/80 text-amber-600 rounded-full">
           <img src="/energy.png" alt="avatar" class="w-auto h-8">
-          <p class="text-2xl font-semibold leading-none tracking-tight">
+          <p class="text-xl font-semibold leading-none tracking-tight">
             {{ profile?.energy }}
           </p>
         </div>
diff --git a/apps/telegram-game/src/components/GameNavigator.vue b/apps/telegram-game/src/components/GameNavigator.vue
index f932aa09..5956c70a 100644
--- a/apps/telegram-game/src/components/GameNavigator.vue
+++ b/apps/telegram-game/src/components/GameNavigator.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="relative mb-2 h-8 bg-red-950/25 text-white rounded-full">
+  <div class="relative mb-2 h-10 bg-red-950/15 text-white rounded-full">
     <div v-if="wagonOnNavigator > 1 && wagonOnNavigator < 99" class="absolute transform -translate-x-1/2" :style="{ left: `${wagonOnNavigator}%` }">
       <div class="-mt-1 p-1 bg-purple-300 rounded-lg">
         <img src="/wheel-1.png" alt="" class="w-8 h-8">
@@ -7,7 +7,7 @@
     </div>
 
     <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-      <div class="mt-6 mx-auto w-2 h-10 bg-red-900 rounded-lg" />
+      <div class="mt-6 mx-auto w-2 h-12 bg-red-900 rounded-lg" />
       <div class="min-w-12 h-6 flex flex-col justify-center items-center gap-0 text-red-950">
         <p class="text-sm font-medium">
           {{ Math.floor(playerX ? playerX / 50 : 0) }} м
diff --git a/apps/telegram-game/src/components/Modal.vue b/apps/telegram-game/src/components/Modal.vue
index 33dfb96b..9fcee898 100644
--- a/apps/telegram-game/src/components/Modal.vue
+++ b/apps/telegram-game/src/components/Modal.vue
@@ -1,30 +1,27 @@
 <template>
   <div
-    class="z-40 left-0 right-0 top-0 bottom-0 tg-secondary-bg opacity-0 transition-all duration-600"
+    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
     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>
+    <div ref="target" class="relative mb-10 p-4 md:p-6 lg:p-8 space-y-3 tg-section-bg tg-text rounded-2xl shadow-lg max-h-[70dvh] overflow-y-auto !overflow-visible">
+      <h3 class="text-xl md:text-2xl font-medium leading-tight">
+        {{ title }}
+      </h3>
 
       <slot />
 
-      <button class="mt-4 p-3 tg-button w-full rounded-2xl font-medium" @click="onClose()">
+      <Button @click="onClose()">
         Закрыть
-      </button>
+      </Button>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { hapticFeedback } from '@telegram-apps/sdk-vue'
 import { onClickOutside, usePointerSwipe } from '@vueuse/core'
 
 const { isOpened } = defineProps<{
@@ -46,17 +43,10 @@ watch(isSwiping, () => {
 })
 
 function onClose() {
-  handleFeedback()
   isClosing.value = true
   setTimeout(() => {
     emit('close')
     isClosing.value = false
-  }, 600)
-}
-
-function handleFeedback() {
-  if (hapticFeedback.impactOccurred.isAvailable()) {
-    hapticFeedback.impactOccurred('light')
-  }
+  }, 500)
 }
 </script>
diff --git a/apps/telegram-game/src/components/SectionHeader.vue b/apps/telegram-game/src/components/SectionHeader.vue
new file mode 100644
index 00000000..6c44ccbf
--- /dev/null
+++ b/apps/telegram-game/src/components/SectionHeader.vue
@@ -0,0 +1,9 @@
+<template>
+  <h2 class="mb-2 tg-section-header-text text-2xl">
+    {{ text }}
+  </h2>
+</template>
+
+<script setup lang="ts">
+defineProps<{ text: string }>()
+</script>
diff --git a/apps/telegram-game/src/composables/useCharacters.ts b/apps/telegram-game/src/composables/useCharacters.ts
new file mode 100644
index 00000000..31c5d78c
--- /dev/null
+++ b/apps/telegram-game/src/composables/useCharacters.ts
@@ -0,0 +1,8 @@
+import type { CharacterWithEditions } from '@chat-game/types'
+import { useFetch } from '@vueuse/core'
+
+const { data, execute: refreshCharacters } = useFetch('https://chatgame.space/api/character').get().json<CharacterWithEditions[]>()
+
+export function useCharacters() {
+  return { characters: data, refreshCharacters }
+}
diff --git a/apps/telegram-game/src/composables/useTelegramProfile.ts b/apps/telegram-game/src/composables/useTelegramProfile.ts
index b0ddb547..b7c23f23 100644
--- a/apps/telegram-game/src/composables/useTelegramProfile.ts
+++ b/apps/telegram-game/src/composables/useTelegramProfile.ts
@@ -1,14 +1,17 @@
 import { initData } from '@telegram-apps/sdk-vue'
 import { useFetch } from '@vueuse/core'
 
-export function useTelegramProfile() {
-  const user = initData.user()
-
-  const { data } = useFetch(`https://chatgame.space/api/telegram/${user?.id}?username=${user?.username}`, {
-    async onFetchError(ctx) {
-      return ctx
-    },
-  }).get().json()
+const { data, execute: refreshProfile } = useFetch(`https://chatgame.space/api/telegram/`, {
+  async beforeFetch() {
+    const user = initData.user()
+    if (user) {
+      return {
+        url: `https://chatgame.space/api/telegram/${user.id}?username=${user.username}`,
+      }
+    }
+  },
+}).get().json()
 
-  return { profile: data }
+export function useTelegramProfile() {
+  return { profile: data, refreshProfile }
 }
diff --git a/apps/telegram-game/src/views/InventoryView.vue b/apps/telegram-game/src/views/InventoryView.vue
index f149665a..4d9e0cec 100644
--- a/apps/telegram-game/src/views/InventoryView.vue
+++ b/apps/telegram-game/src/views/InventoryView.vue
@@ -30,16 +30,14 @@
     </div>
 
     <div class="grid grid-cols-3 gap-2">
-      <div v-for="item in items" :key="item.id" class="h-full tg-section-bg aspect-square p-4 rounded-2xl cursor-pointer" @click="isOpened = true">
-        <div class="relative">
-          <img :src="item.img" alt="" class="w-full h-auto">
-          <div class="absolute -bottom-2 -right-2">
-            <p class="mx-auto w-fit px-3 py-1 tg-secondary-bg rounded-full text-xl leading-none">
-              {{ item.amount }}
-            </p>
-          </div>
+      <ActiveCard v-for="item in items" :key="item.id" @click="isOpened = true">
+        <img :src="item.img" alt="" class="w-full h-auto">
+        <div class="absolute bottom-0 right-0">
+          <p class="mx-auto w-fit px-3 py-2 tg-secondary-bg rounded-tl-2xl rounded-br-2xl text-xl leading-none">
+            {{ item.amount }}
+          </p>
         </div>
-      </div>
+      </ActiveCard>
     </div>
   </PageContainer>
 
diff --git a/apps/telegram-game/src/views/QuestView.vue b/apps/telegram-game/src/views/QuestView.vue
index 6b987ab2..501d166f 100644
--- a/apps/telegram-game/src/views/QuestView.vue
+++ b/apps/telegram-game/src/views/QuestView.vue
@@ -1,8 +1,6 @@
 <template>
   <PageContainer>
-    <h2 class="mb-2 tg-section-header-text text-2xl">
-      Активные комнаты
-    </h2>
+    <SectionHeader text="Активные комнаты" />
 
     <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-2xl">
@@ -24,6 +22,7 @@
 </template>
 
 <script setup lang="ts">
+import SectionHeader from '@/components/SectionHeader.vue'
 import { hapticFeedback } from '@telegram-apps/sdk-vue'
 import { gameClient, roomConnected } from '../utils/gameClient'
 
diff --git a/apps/telegram-game/src/views/ShopView.vue b/apps/telegram-game/src/views/ShopView.vue
index d524cb2a..a065f374 100644
--- a/apps/telegram-game/src/views/ShopView.vue
+++ b/apps/telegram-game/src/views/ShopView.vue
@@ -1,9 +1,71 @@
 <template>
   <PageContainer>
-    <ComingSoon />
+    <div class="tg-section-bg mb-4 px-3 py-3 flex flex-row gap-2 items-center rounded-2xl">
+      <img src="/coin.png" alt="" class="w-14 h-14">
+      <div>
+        <div class="text-2xl font-medium">
+          {{ profile?.profile?.coins }}
+        </div>
+        <div class="tg-hint text-sm">
+          Монеты
+        </div>
+      </div>
+    </div>
+
+    <SectionHeader text="Коллекция персонажей 2024" />
+
+    <div class="grid grid-cols-2 gap-2">
+      <ActiveCard v-for="char in characters" :key="char?.id" @click="() => { isCharacterOpened = true; selectedCharacterId = char?.id }">
+        <div v-if="!char?.editions?.find(({ profileId }) => profileId === profile?.profile.id)" class="z-10 absolute top-0 left-0 right-0 bottom-0 tg-secondary-bg opacity-40" />
+
+        <div v-if="profile?.profile?.activeEditionId === char?.editions?.find(({ profileId }) => profileId === profile?.profile.id)?.id" class="tg-accent-text text-base font-medium leading-tight">
+          Активный
+        </div>
+        <p class="font-medium text-lg">
+          {{ char?.nickname }}
+        </p>
+        <div v-if="char?.price && !char?.editions?.find(({ profileId }) => profileId === profile?.profile.id)" class="flex flex-row gap-1 items-center">
+          <img src="/coin-small.png" alt="" class="w-5 h-5 grayscale-100">
+          <p>{{ char?.price }}</p>
+        </div>
+
+        <img :src="`/units/${char?.codename}/128.png`" alt="" class="absolute bottom-0 right-0 w-32 h-auto" :class="{ 'grayscale-100 opacity-70': !char?.editions?.find(({ profileId }) => profileId === profile?.profile.id) }">
+      </ActiveCard>
+    </div>
   </PageContainer>
+
+  <Modal :title="`&laquo;${selectedCharacter?.nickname}&raquo; ${selectedCharacter?.name}`" :is-opened="isCharacterOpened" @close="isCharacterOpened = false">
+    <img :src="`/units/${selectedCharacter?.codename}/idle.gif`" alt="" class="absolute -top-24 left-0 w-28 h-28">
+
+    <p class="text-sm">
+      {{ selectedCharacter?.description }}
+    </p>
+
+    <div v-if="selectedCharacter?.editions?.find(({ profileId }) => profileId === profile?.profile.id)">
+      <CharacterActivationBlock :character-id="selectedCharacterId" />
+    </div>
+    <div v-else>
+      <Button v-if="selectedCharacter?.price" class="mt-3 flex flex-row gap-2 items-center justify-center" @click="() => {}">
+        <p>Разблокировать за</p>
+        <div class="flex flex-row gap-2 items-center text-xl">
+          <p>{{ selectedCharacter?.price }}</p>
+          <img src="/coin-small.png" alt="" class="w-8 h-8">
+        </div>
+      </Button>
+      <div v-else class="px-8 tg-hint text-center font-medium leading-tight">
+        Персонажа нельзя разблокировать за Монеты
+      </div>
+    </div>
+  </Modal>
 </template>
 
 <script setup lang="ts">
-import ComingSoon from '@/components/ComingSoon.vue'
+import CharacterActivationBlock from '@/components/CharacterActivationBlock.vue'
+
+const { profile } = useTelegramProfile()
+const { characters } = useCharacters()
+
+const isCharacterOpened = ref(false)
+const selectedCharacterId = ref()
+const selectedCharacter = computed(() => characters.value?.find(({ id }) => id === selectedCharacterId.value))
 </script>
diff --git a/apps/website/server/api/telegram/[telegramId].get.ts b/apps/website/server/api/telegram/[telegramId]/index.get.ts
similarity index 88%
rename from apps/website/server/api/telegram/[telegramId].get.ts
rename to apps/website/server/api/telegram/[telegramId]/index.get.ts
index 079aa922..ba3a9abe 100644
--- a/apps/website/server/api/telegram/[telegramId].get.ts
+++ b/apps/website/server/api/telegram/[telegramId]/index.get.ts
@@ -14,7 +14,11 @@ export default defineEventHandler(async (event) => {
     const profile = await prisma.telegramProfile.findFirst({
       where: { telegramId },
       include: {
-        profile: true,
+        profile: {
+          include: {
+            characterEditions: true,
+          },
+        },
       },
     })
     if (!profile) {
diff --git a/apps/website/server/api/telegram/profile/[profileId]/character/[characterId]/activate.get.ts b/apps/website/server/api/telegram/profile/[profileId]/character/[characterId]/activate.get.ts
new file mode 100644
index 00000000..1bbe7933
--- /dev/null
+++ b/apps/website/server/api/telegram/profile/[profileId]/character/[characterId]/activate.get.ts
@@ -0,0 +1,37 @@
+export default defineEventHandler(async (event) => {
+  const telegramId = getRouterParam(event, 'telegramId')
+  const characterId = getRouterParam(event, 'characterId')
+
+  const telegramProfile = await prisma.telegramProfile.findFirst({
+    where: { id: telegramId },
+    include: {
+      profile: {
+        include: {
+          characterEditions: true,
+        },
+      },
+    },
+  })
+  if (!telegramProfile || !telegramProfile?.profile) {
+    throw createError({
+      status: 404,
+    })
+  }
+
+  const edition = telegramProfile.profile.characterEditions.find((e) => e.characterId === characterId)
+  if (!edition) {
+    throw createError({
+      status: 400,
+      message: 'You do not have this character',
+    })
+  }
+
+  await prisma.profile.update({
+    where: { id: telegramProfile.profile.id },
+    data: {
+      activeEditionId: edition.id,
+    },
+  })
+
+  return { ok: true }
+})
diff --git a/apps/website/server/api/telegram/profile/[id].get.ts b/apps/website/server/api/telegram/profile/[profileId]/index.get.ts
similarity index 100%
rename from apps/website/server/api/telegram/profile/[id].get.ts
rename to apps/website/server/api/telegram/profile/[profileId]/index.get.ts
diff --git a/apps/website/server/api/telegram/profile/index.post.ts b/apps/website/server/api/telegram/profile/index.post.ts
deleted file mode 100644
index 0de2e1c3..00000000
--- a/apps/website/server/api/telegram/profile/index.post.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { DBRepository } from '../../../utils/repository'
-
-export default defineEventHandler(async (event) => {
-  try {
-    const body = await readBody(event)
-
-    if (!body.telegramId) {
-      throw createError({
-        statusCode: 400,
-        message: 'You must provide telegramId',
-      })
-    }
-
-    const repository = new DBRepository()
-    const profile = await repository.findOrCreateTelegramProfile({
-      telegramId: body.telegramId,
-      username: body.username,
-    })
-
-    return {
-      ok: true,
-      result: profile,
-    }
-  } catch (error) {
-    throw errorResolver(error)
-  }
-})