chore: trees sync, energy on screen (#297)

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

@@ -67,6 +67,7 @@ declare global {
   const useId: typeof import('vue')['useId']
   const useLink: typeof import('vue-router')['useLink']
   const useModel: typeof import('vue')['useModel']
+  const useRoom: typeof import('./src/composables/useRoom')['useRoom']
   const useRoute: typeof import('vue-router')['useRoute']
   const useRouter: typeof import('vue-router')['useRouter']
   const useSlots: typeof import('vue')['useSlots']

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

@@ -1,13 +1,18 @@
 <template>
-  <div class="absolute top-0 left-0 right-0 bottom-0 font-serif overflow-hidden select-none bg-orange-200" :class="{ hidden: !isOpened }">
+  <div class="absolute top-0 left-0 right-0 bottom-0 overflow-hidden select-none bg-orange-200" :class="{ hidden: !isOpened }">
     <div ref="canvas" class="absolute w-full h-full bottom-10" />
     <div class="absolute w-full h-35 bottom-0 bg-amber-950" />
 
-    <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="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>Энергия: ??</div>
+        <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">
+          <img src="/energy.png" alt="avatar" class="w-auto h-8">
+          <p class="text-xl font-semibold leading-none tracking-tight">
+            {{ profile?.energy }}
+          </p>
+        </div>
 
-        <div class="opacity-15">
+        <div class="hidden">
           {{ game.websocketService.socket.status }} {{ roomConnected }}
         </div>
       </div>
@@ -20,6 +25,9 @@ import type { BaseGameAddon } from '@chat-game/game'
 import { initData } from '@telegram-apps/sdk-vue'
 import { gameClient, roomConnected } from '../utils/gameClient'
 
+const { hmbanan666 } = useRoom()
+const { profile } = useTelegramProfile()
+
 const data = initData.user()
 const router = useRouter()
 const canvas = ref<HTMLElement>()
@@ -40,4 +48,15 @@ onMounted(async () => {
 watch(router.currentRoute, (value) => {
   isOpened.value = value.path === '/'
 })
+
+watch(
+  () => hmbanan666.value && game.value.player,
+  () => {
+    const isActiveStream = hmbanan666.value?.find((s: any) => s.service === 'HMBANAN666_TWITCH' && s.status === 'RUNNING')
+    if (isActiveStream && !roomConnected.value) {
+      game.value.websocketService.connect('12345')
+      roomConnected.value = '12345'
+    }
+  },
+)
 </script>

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

@@ -1,5 +1,5 @@
 <template>
-  <nav class="bg z-50 font-serif touch-pan-x fixed bottom-0 left-0 right-0 w-full h-[100px]">
+  <nav class="bg z-50 touch-pan-x fixed bottom-0 left-0 right-0 w-full h-[100px]">
     <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)">

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="tg-secondary-bg tg-text tg-content-safe-area overflow-hidden z-30 h-full min-h-dvh w-full font-serif">
+  <div class="tg-secondary-bg tg-text tg-content-safe-area overflow-hidden z-30 h-full min-h-dvh w-full">
     <div class="px-4 py-2 max-w-[28rem] mx-auto flex flex-col">
       <slot />
     </div>

apps/telegram-game/src/composables/useRoom.ts

@@ -0,0 +1,11 @@
+import { useFetch } from '@vueuse/core'
+
+export function useRoom() {
+  const { data: hmbanan666 } = useFetch<{ service: 'HMBANAN666_TWITCH', status: 'RUNNING' | 'STOPPED' }[]>('https://chatgame.space/api/twitch/status', {
+    async onFetchError(ctx) {
+      return ctx
+    },
+  }).get().json()
+
+  return { hmbanan666 }
+}

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

@@ -14,7 +14,7 @@
             {{ room.description }}
           </div>
 
-          <button class="mt-4 p-3 tg-button w-full rounded-2xl" @click="connectToToom(room.roomId)">
+          <button class="mt-4 p-3 tg-button w-full rounded-2xl" @click="connectToRoom(room.roomId)">
             Подключиться
           </button>
         </div>
@@ -29,7 +29,7 @@ import { gameClient, roomConnected } from '../utils/gameClient'
 
 const router = useRouter()
 
-function connectToToom(roomId: string) {
+function connectToRoom(roomId: string) {
   if (hapticFeedback.impactOccurred.isAvailable()) {
     hapticFeedback.impactOccurred('light')
   }

apps/website/server/api/websocket.ts

@@ -108,10 +108,22 @@ export default defineWebSocketHandler({
             wagon.x = parsed.data.x
           }
         }
+        if (parsed.type === 'NEW_PLAYER_TARGET') {
+          const player = activeRoom.objects.find((obj) => obj.type === 'PLAYER' && obj.id === parsed.data.id)
+          if (player) {
+            player.x = parsed.data.x
+          }
+        }
         if (parsed.type === 'NEW_TREE') {
           const tree = activeRoom.objects.find((obj) => obj.type === 'TREE' && obj.id === parsed.data.id)
           if (!tree) {
-            activeRoom.addTree(parsed.data.id, parsed.data.x, parsed.data.zIndex, parsed.data.treeType)
+            activeRoom.addTree({
+              id: parsed.data.id,
+              x: parsed.data.x,
+              zIndex: parsed.data.zIndex,
+              treeType: parsed.data.treeType,
+              maxSize: parsed.data.maxSize,
+            })
           }
         }
         if (parsed.type === 'DESTROY_TREE') {

apps/website/server/core/rooms/wagon.ts

@@ -47,6 +47,7 @@ export class WagonRoom extends BaseRoom {
         health: 100,
         speedPerSecond: 0,
         size: 75,
+        maxSize: getRandomInRange(75, 145),
         zIndex: getRandomInRange(-10, 1),
         variant: 'GREEN',
         treeType: this.getRandomTreeType(),
@@ -68,18 +69,19 @@ export class WagonRoom extends BaseRoom {
     })
   }
 
-  addTree(id: string, x: number, zIndex: number, treeType: '1' | '2' | '3' | '4' | '5') {
+  addTree(data: { id: string, x: number, zIndex: number, treeType: '1' | '2' | '3' | '4' | '5', maxSize: number }) {
     this.objects.push({
       type: 'TREE',
-      id,
-      x,
+      id: data.id,
+      x: data.x,
       state: 'IDLE',
       health: 100,
       speedPerSecond: 0,
       size: 75,
-      zIndex,
+      maxSize: data.maxSize,
+      zIndex: data.zIndex,
       variant: 'GREEN',
-      treeType,
+      treeType: data.treeType,
     })
   }
 

packages/game/src/lib/baseGameAddon.ts

@@ -70,8 +70,8 @@ export class BaseGameAddon extends Container implements GameAddon {
   async init(telegramId: string) {
     await this.app.init({
       backgroundAlpha: 0,
-      antialias: true,
-      roundPixels: true,
+      antialias: false,
+      roundPixels: false,
       resolution: 1,
       resizeTo: window,
     })
@@ -99,6 +99,11 @@ export class BaseGameAddon extends Container implements GameAddon {
           return
         }
 
+        const isTargetAnObject = e.target.children.length === 0
+        if (isTargetAnObject) {
+          return
+        }
+
         const middle = this.app.screen.width / 2
         const offsetX = e.clientX - middle
         const serverX = offsetX + this.leftX

packages/game/src/lib/objects/treeObject.ts

@@ -9,6 +9,7 @@ interface TreeObjectOptions {
   id?: string
   zIndex?: number
   size?: number
+  maxSize?: number
   treeType?: '1' | '2' | '3' | '4' | '5'
 }
 
@@ -18,17 +19,17 @@ export class TreeObject extends BaseObject implements GameObjectTree {
   isReadyToChop!: boolean
   isAnObstacleToWagon = false
   minSizeToChop = 75
-  maxSize = 145
+  maxSize: number
   growSpeedPerSecond = getRandomInRange(2, 4)
   animationAngle = getRandomInRange(-1, 1)
   animationSlowSpeed = 0.04
   animationHighSpeed = 0.5
 
-  constructor({ addon, x, y, size, id, zIndex, treeType }: TreeObjectOptions) {
+  constructor({ addon, x, y, size, maxSize, id, zIndex, treeType }: TreeObjectOptions) {
     super({ id, addon, x, y, type: 'TREE' })
 
     this.size = size ?? 100
-    this.maxSize = getRandomInRange(this.minSizeToChop, this.maxSize)
+    this.maxSize = maxSize ?? getRandomInRange(this.minSizeToChop, 145)
 
     this.health = 100
     this.variant = 'GREEN'

packages/game/src/lib/services/baseTreeService.ts

@@ -8,8 +8,8 @@ export class BaseTreeService implements TreeService {
 
   constructor(readonly addon: GameAddon) {}
 
-  create(data: { id: string, x: number, zIndex: number, treeType: '1' | '2' | '3' | '4' | '5', size: number }) {
-    const tree = new TreeObject({ id: data.id, addon: this.addon, x: data.x, y: this.addon.bottomY, size: data.size, zIndex: data.zIndex, treeType: data.treeType })
+  create(data: { id: string, x: number, zIndex: number, treeType: '1' | '2' | '3' | '4' | '5', size: number, maxSize: number }) {
+    const tree = new TreeObject({ id: data.id, addon: this.addon, x: data.x, y: this.addon.bottomY, size: data.size, maxSize: data.maxSize, zIndex: data.zIndex, treeType: data.treeType })
     this.addon.app.stage.addChild(tree)
     this.addon.addChild(tree)
   }
@@ -50,10 +50,11 @@ export class BaseTreeService implements TreeService {
       zIndex: getRandomInRange(-10, 1),
       treeType: this.getNewType(),
       size: getRandomInRange(4, 8),
+      maxSize: getRandomInRange(75, 145),
     }
     this.create(tree)
 
-    this.addon.websocketService.send({ type: 'NEW_TREE', data: { x: tree.x, id: tree.id, zIndex: tree.zIndex, treeType: tree.treeType } })
+    this.addon.websocketService.send({ type: 'NEW_TREE', data: { x: tree.x, id: tree.id, zIndex: tree.zIndex, treeType: tree.treeType, maxSize: tree.maxSize } })
   }
 
   getNewType(): GameObjectTree['treeType'] {

packages/game/src/lib/services/baseWebSocketService.ts

@@ -60,7 +60,7 @@ export class BaseWebSocketService implements WebSocketService {
         if (obj.type === 'PLAYER') {
           this.addon.createPlayerObject({ id: obj.id, telegramId: obj.telegramId, x: obj.x, zIndex: obj?.zIndex })
         } else if (obj.type === 'TREE') {
-          this.addon.treeService.create({ id: obj.id, x: obj.x, zIndex: obj.zIndex, treeType: obj.treeType, size: 75 })
+          this.addon.treeService.create({ id: obj.id, x: obj.x, zIndex: obj.zIndex, treeType: obj.treeType, size: 75, maxSize: obj.maxSize })
         } else {
           this.addon.createObject({ type: obj.type, id: obj.id, x: obj.x, zIndex: obj?.zIndex })
         }
@@ -91,8 +91,8 @@ export class BaseWebSocketService implements WebSocketService {
         }
       }
       if (message.type === 'NEW_TREE') {
-        const { id, x, zIndex, treeType } = message.data
-        this.addon.treeService.create({ id, x, zIndex, treeType, size: 8 })
+        const { id, x, zIndex, treeType, maxSize } = message.data
+        this.addon.treeService.create({ id, x, zIndex, treeType, size: 8, maxSize })
       }
       if (message.type === 'DESTROY_TREE') {
         const { id } = message.data

packages/game/src/lib/types.ts

@@ -57,6 +57,7 @@ export interface GameObjectTree extends GameObject {
   isAnObstacleToWagon: boolean
   variant: 'GREEN' | 'VIOLET' | 'STONE' | 'TEAL' | 'TOXIC' | 'BLUE'
   treeType: '1' | '2' | '3' | '4' | '5'
+  maxSize: number
 }
 
 export interface GameObjectWagon extends GameObject {
@@ -124,7 +125,7 @@ export interface AssetService {
 }
 
 export interface TreeService {
-  create: (data: { id: string, x: number, zIndex: number, treeType: '1' | '2' | '3' | '4' | '5', size: number }) => void
+  create: (data: { id: string, x: number, zIndex: number, treeType: '1' | '2' | '3' | '4' | '5', size: number, maxSize: number }) => void
   update: () => void
   getNearestObstacle: (x: number) => GameObjectTree | undefined
 }

packages/types/src/lib/websocket.ts

@@ -16,6 +16,7 @@ export interface GameObjectTree {
   type: 'TREE'
   variant: 'GREEN' | 'VIOLET' | 'STONE' | 'TEAL' | 'TOXIC' | 'BLUE'
   treeType: '1' | '2' | '3' | '4' | '5'
+  maxSize: number
 }
 
 export interface GameObjectFlag {
@@ -146,6 +147,7 @@ export interface WebSocketNewTree {
     x: number
     zIndex: number
     treeType: '1' | '2' | '3' | '4' | '5'
+    maxSize: number
   }
 }