feat: wagon can ride on client side (#281)

apps/telegram-game/auto-imports.d.ts

@@ -8,13 +8,15 @@ export {}
 declare global {
   const EffectScope: typeof import('vue')['EffectScope']
   const Icon: typeof import('@iconify/vue')['Icon']
+  const addon: typeof import('./src/utils/gameClient')['addon']
   const computed: typeof import('vue')['computed']
   const createApp: typeof import('vue')['createApp']
   const customRef: typeof import('vue')['customRef']
   const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
   const defineComponent: typeof import('vue')['defineComponent']
   const effectScope: typeof import('vue')['effectScope']
   const eslintConfig: typeof import('./eslint.config.mjs')['default']
+  const gameClient: typeof import('./src/utils/gameClient')['gameClient']
   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
   const getCurrentScope: typeof import('vue')['getCurrentScope']
   const getEnv: typeof import('./src/utils/env')['getEnv']
@@ -48,6 +50,7 @@ declare global {
   const readonly: typeof import('vue')['readonly']
   const ref: typeof import('vue')['ref']
   const resolveComponent: typeof import('vue')['resolveComponent']
+  const roomConnected: typeof import('./src/utils/gameClient')['roomConnected']
   const shallowReactive: typeof import('vue')['shallowReactive']
   const shallowReadonly: typeof import('vue')['shallowReadonly']
   const shallowRef: typeof import('vue')['shallowRef']

apps/telegram-game/components.d.ts

@@ -7,6 +7,7 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    ComingSoon: typeof import('./src/components/ComingSoon.vue')['default']
     Game: typeof import('./src/components/Game.vue')['default']
     Navigation: typeof import('./src/components/Navigation.vue')['default']
     PageContainer: typeof import('./src/components/PageContainer.vue')['default']

apps/telegram-game/package.json

@@ -15,7 +15,7 @@
   "dependencies": {
     "@chat-game/game": "workspace:*",
     "@chat-game/types": "workspace:*",
-    "@telegram-apps/sdk-vue": "^1.0.6",
+    "@telegram-apps/sdk-vue": "^1.0.8",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0"
   },
@@ -34,7 +34,7 @@
     "unplugin-auto-import": "^0.18.6",
     "unplugin-icons": "^0.20.2",
     "unplugin-vue-components": "^0.27.5",
-    "vite": "^6.0.1",
+    "vite": "^6.0.2",
     "vite-plugin-terminal": "^1.2.0",
     "vite-plugin-vue-devtools": "^7.6.7",
     "vue-tsc": "^2.1.10"

apps/telegram-game/src/assets/main.css

@@ -20,7 +20,7 @@
   --tg-theme-accent-text-color: #168dcd;
   --tg-theme-destructive-text-color: #d14e4e;
 
-  --tg-content-safe-area-inset-top: 100;
+  --tg-content-safe-area-inset-top: 20px;
 }
 
 @utility tg-bg {
@@ -68,7 +68,10 @@
   color: var(--tg-theme-section-separator-color);
 }
 
+@utility tg-content-safe-area-top {
+  padding-top: var(--tg-content-safe-area-inset-top);
+}
 @utility tg-content-safe-area {
-  padding-top: calc(var(--tg-content-safe-area-inset-top) * 1px);
+  padding-top: var(--tg-content-safe-area-inset-top);
   padding-bottom: 200px;
 }

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

@@ -0,0 +1,9 @@
+<template>
+  <div class="w-full h-full flex flex-col items-center justify-center">
+    <img src="/units/banana/128.png" alt="coming-soon" class="w-24">
+
+    <h2 class="mt-5 tg-section-header-text text-2xl">
+      Скоро будет готово
+    </h2>
+  </div>
+</template>

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

@@ -1,59 +1,34 @@
 <template>
-  <div class="game-block absolute top-0 left-0 right-0 bottom-0 font-serif" :class="{ hidden: !isOpened }">
-    <div id="game-canvas" ref="stage" />
+  <div class="absolute top-0 left-0 right-0 bottom-0 font-serif overflow-hidden select-none bg-orange-200" :class="{ hidden: !isOpened }">
+    <div ref="canvas" class="w-full h-full" />
 
-    <div class="font-serif touch-pan-x absolute top-0 left-0 right-0 w-full h-16 pt-25">
+    <div class="tg-content-safe-area-top font-serif touch-pan-x absolute top-0 left-0 right-0 w-full h-16">
       <div class="max-w-[28rem] mx-auto px-5">
-        <div>Монеты: 53</div>
         <div>Энергия: 41</div>
 
-        <div v-if="connectedToRoom">
-          Room {{ connectedToRoom }}
+        <div class="opacity-15">
+          {{ gameClient.websocketService.socket.status.value }} {{ roomConnected }} {{ gameClient.websocketService.socket.data }}
         </div>
-        <button v-else class="z-50 p-4 bg-amber-800 text-white" @click="() => { connectFunc('12345'); connectedToRoom = '12345' }">
-          Подключиться
-        </button>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { BaseGameAddon } from '@chat-game/game'
+import { gameClient, roomConnected } from '../utils/gameClient'
 
 const router = useRouter()
-const stage = ref<HTMLElement>()
+const canvas = ref<HTMLElement>()
 const isOpened = ref(false)
-const connectFunc = ref<(roomId: string) => void>(() => {})
-const connectedToRoom = ref<string | null>(null)
-
-const addon = new BaseGameAddon({ websocketUrl: getEnv('VITE_WEBSOCKET_URL'), client: 'TELEGRAM_CLIENT' })
 
 onMounted(async () => {
-  await addon.init()
-  connectFunc.value = addon.websocketService.connect.bind(addon.websocketService)
-  stage.value?.appendChild(addon.app.canvas)
+  await gameClient.init()
+  canvas.value?.appendChild(gameClient.app.canvas)
 
-  return () => addon.destroy()
+  return () => gameClient.destroy()
 })
 
 watch(router.currentRoute, (value) => {
   isOpened.value = value.path === '/'
 })
 </script>
-
-<style scoped>
-.game-block {
-  overflow: hidden;
-  -webkit-user-select: none; /* Safari */
-  -ms-user-select: none; /* IE 10 and IE 11 */
-  user-select: none; /* Standard syntax */
-  background-color: #ffedd5;
-  padding-top: var(--tg-content-safe-area-inset-top);
-}
-
-#game-canvas {
-  width: 100%;
-  height: 100%;
-}
-</style>

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

@@ -3,8 +3,10 @@
     <div class="max-w-[28rem] mx-auto">
       <div class="mt-3 grid grid-cols-5">
         <button v-for="route in routes" :key="route.path" class="flex flex-col items-center justify-center gap-1 px-4 cursor-pointer" :class="{ 'button-active': router.currentRoute.value.path === route.path }" @click="handleClick(route.path)">
-          <div class="icon-block py-1 w-full rounded-2xl flex flex-row items-center justify-center">
+          <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>
           <p class="text text-xs">
             {{ route.meta.title }}

apps/telegram-game/src/router/index.ts

@@ -1,5 +1,6 @@
 import GameView from '@/views/GameView.vue'
 import InventoryView from '@/views/InventoryView.vue'
+import QuestView from '@/views/QuestView.vue'
 import ShopView from '@/views/ShopView.vue'
 import { createRouter, createWebHistory } from 'vue-router'
 import LucideArchiveRestore from '~icons/lucide/archive-restore'
@@ -30,7 +31,7 @@ export const routes = [
   {
     path: '/quest',
     name: 'quest',
-    component: InventoryView,
+    component: QuestView,
     icon: LucideBookCheck,
     meta: {
       title: 'Задания',

apps/telegram-game/src/utils/gameClient.ts

@@ -0,0 +1,7 @@
+import { BaseGameAddon } from '@chat-game/game'
+
+const gameClient = new BaseGameAddon({ websocketUrl: getEnv('VITE_WEBSOCKET_URL'), client: 'TELEGRAM_CLIENT' })
+
+const roomConnected = ref<string>()
+
+export { gameClient, roomConnected }

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

@@ -14,7 +14,7 @@
 
     <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>Вещь</div>
       </div>
     </div>
   </PageContainer>

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

@@ -0,0 +1,42 @@
+<template>
+  <PageContainer>
+    <h2 class="mb-2 tg-section-header-text text-2xl">
+      Активные комнаты
+    </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>
+          <div class="text-xl">
+            {{ room.name }}
+          </div>
+          <div class="tg-hint text-sm">
+            {{ room.description }}
+          </div>
+
+          <button class="mt-4 p-3 tg-button w-full rounded-2xl" @click="connectToToom(room.roomId)">
+            Подключиться
+          </button>
+        </div>
+      </div>
+    </div>
+  </PageContainer>
+</template>
+
+<script setup lang="ts">
+import { gameClient, roomConnected } from '../utils/gameClient'
+
+function connectToToom(roomId: string) {
+  gameClient.websocketService.connect(roomId)
+  roomConnected.value = roomId
+}
+
+const rooms = [
+  {
+    id: 1,
+    name: 'The Wagon',
+    description: 'Только на активном стриме hmbanan666! Группа смельчаков ведет Машину, избавляясь от всех препятствий на пути.',
+    roomId: '12345',
+  },
+]
+</script>

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

@@ -1,27 +1,9 @@
 <template>
   <PageContainer>
-    <div class="tg-section-bg tg-text mb-4 h-16 flex flex-row gap-2 items-center">
-      <img :src="data?.photoUrl" alt="avatar" class="w-14 h-14 rounded-full">
-      <div>
-        <div class="text-xl">
-          {{ data?.username }}
-        </div>
-        <div class="tg-hint text-sm">
-          {{ data?.id }}
-        </div>
-      </div>
-    </div>
-
-    <div class="grid grid-cols-4 gap-2">
-      <div class="tg-section-bg aspect-square p-2 inventory-item">
-        <div>Вещь</div>
-      </div>
-    </div>
+    <ComingSoon />
   </PageContainer>
 </template>
 
 <script setup lang="ts">
-import { initData } from '@telegram-apps/sdk-vue'
-
-const data = initData.user()
+import ComingSoon from '@/components/ComingSoon.vue'
 </script>

apps/website/app/pages/(games)/wagon/index.vue

@@ -33,11 +33,12 @@ onMounted(async () => {
     width: 100vw;
     height: 100vh;
     overflow: hidden;
+    position: relative;
   }
 
   #game-canvas {
     width: 100%;
-    height: 250px;
+    height: 350px;
     bottom: -100px;
     position: absolute;
     overflow: hidden;

packages/game/package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "@chat-game/types": "workspace:*",
     "@paralleldrive/cuid2": "^2.2.2",
+    "@vueuse/core": "^12.0.0",
     "pixi.js": "^8.6.1"
   },
   "devDependencies": {

packages/game/src/lib/assets.d.ts

@@ -0,0 +1,4 @@
+declare module '*.png' {
+  const value: string
+  export default value
+}