chore: some fixes

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

@@ -69,7 +69,7 @@
 }
 
 @utility tg-content-safe-area-top {
-  padding-top: var(--tg-content-safe-area-inset-top);
+  padding-top: 100px;
 }
 @utility tg-content-safe-area {
   padding-top: 100px;

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

@@ -1,6 +1,7 @@
 <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 ref="canvas" class="w-full h-full" />
+    <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="max-w-[28rem] mx-auto px-5">
@@ -24,7 +25,11 @@ const canvas = ref<HTMLElement>()
 const isOpened = ref(false)
 
 onMounted(async () => {
-  await gameClient.init(data?.id.toString())
+  if (!data?.id) {
+    return
+  }
+
+  await gameClient.init(data.id.toString())
   canvas.value?.appendChild(gameClient.app.canvas)
 
   return () => gameClient.destroy()

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

@@ -35,7 +35,7 @@ const game = ref<BaseGameAddon>()
 
 onMounted(async () => {
   game.value = new BaseGameAddon({ websocketUrl: publicEnv.websocketUrl, client: 'WAGON_CLIENT' })
-  await game.value.init()
+  await game.value.init('wagon')
   game.value.websocketService.connect(id)
   stage.value?.appendChild(game.value.app.canvas)
 

apps/website/server/api/websocket.ts

@@ -60,7 +60,7 @@ export default defineWebSocketHandler({
 
           // add to objects
           const wagon = activeRoom.objects.find((obj) => obj.type === 'WAGON')
-          activeRoom.addPlayer(peer.id, wagon?.x ? wagon.x - 200 : 100)
+          activeRoom.addPlayer(peer.id, parsed.data?.telegramId, wagon?.x ? wagon.x - 200 : 100)
 
           peer.subscribe(activeRoom.id)
           void sendMessage({ type: 'CONNECTED_TO_WAGON_ROOM', data: { type: 'PLAYER', id: peer.id, objects: activeRoom.objects } }, activeRoom.token)
@@ -132,8 +132,6 @@ export default defineWebSocketHandler({
     // Remove peer from peers array
     const room = activeRooms.find((room) => room.peers.find((id) => id === peer.id))
     if (room) {
-      room.peers = room.peers.filter((id) => id !== peer.id)
-
       // if player - remove from objects
       if (room.type === 'WAGON') {
         const wagonRoom = room as WagonRoom
@@ -144,6 +142,8 @@ export default defineWebSocketHandler({
 
         void sendMessage({ type: 'DISCONNECTED_FROM_WAGON_ROOM', data: { id: peer.id } }, room.token)
       }
+
+      room.peers = room.peers.filter((id) => id !== peer.id)
     }
   },
 

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

@@ -52,10 +52,11 @@ export class WagonRoom extends BaseRoom {
     }
   }
 
-  addPlayer(id: string, x: number) {
+  addPlayer(id: string, telegramId: string, x: number) {
     this.objects.push({
       type: 'PLAYER',
       id,
+      telegramId,
       x,
       state: 'IDLE',
       health: 100,

packages/game/src/lib/baseGameAddon.ts

@@ -1,4 +1,3 @@
-import type { CharacterEditionWithCharacter } from '@chat-game/types'
 import type {
   GameAddon,
   GameObject,
@@ -70,7 +69,7 @@ export class BaseGameAddon extends Container implements GameAddon {
     this.serverService = new BaseServerService()
   }
 
-  async init(id?: string) {
+  async init(telegramId: string) {
     await this.app.init({
       backgroundAlpha: 0,
       antialias: true,
@@ -94,7 +93,7 @@ export class BaseGameAddon extends Container implements GameAddon {
     this.app.stage.addChild(this)
 
     if (this.client === 'TELEGRAM_CLIENT') {
-      this.player = await this.playerService.createPlayer({ id: id || createId(), x: 200 })
+      this.player = await this.playerService.createPlayer({ id: createId(), telegramId, x: 200 })
       this.cameraTarget = this.player
 
       this.app.stage.addEventListener('pointerdown', (e) => {
@@ -150,9 +149,6 @@ export class BaseGameAddon extends Container implements GameAddon {
       return
     }
 
-    if (type === 'PLAYER' && !this.player) {
-      this.playerService.createPlayer({ id, x })
-    }
     if (type === 'WAGON' && !this.wagon) {
       this.wagon = new BaseWagonObject({ addon: this, x, y: this.bottomY })
       this.app.stage.addChild(this.wagon)
@@ -199,19 +195,6 @@ export class BaseGameAddon extends Container implements GameAddon {
     // this.app.ticker.remove()
   }
 
-  async handleMessage({ playerId, text, character }: {
-    playerId: string
-    text: string
-    character?: CharacterEditionWithCharacter
-  }) {
-    const player = await this.playerService.init(playerId, character)
-
-    player.addMessage(text)
-    player.updateLastActionAt()
-
-    return { ok: true, message: null }
-  }
-
   updateObjects() {
     for (const object of this.children) {
       object.animate()

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

@@ -57,7 +57,7 @@ export class TreeObject extends BaseObject implements GameObjectTree {
 
   chop() {
     this.state = 'CHOPPING'
-    this.health -= getRandomInRange(10, 20)
+    this.health -= getRandomInRange(3, 8)
     this.alpha = 0.9
   }
 

packages/game/src/lib/objects/unit/playerObject.ts

@@ -5,11 +5,13 @@ import { UnitObject } from './unitObject'
 interface PlayerObjectOptions {
   addon: GameAddon
   id: string
+  telegramId: string
   x: number
   y: number
 }
 
 export class PlayerObject extends UnitObject implements GameObjectPlayer {
+  telegramId: string
   reputation!: number
   villainPoints!: number
   refuellerPoints!: number
@@ -18,9 +20,10 @@ export class PlayerObject extends UnitObject implements GameObjectPlayer {
 
   public inventoryId?: string
 
-  constructor({ addon, id, x, y }: PlayerObjectOptions) {
+  constructor({ addon, id, telegramId, x, y }: PlayerObjectOptions) {
     super({ addon, id, x, y, type: 'PLAYER' })
 
+    this.telegramId = telegramId
     this.speedPerSecond = 70
     this.lastActionAt = new Date()
   }

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

@@ -10,22 +10,6 @@ export class BasePlayerService implements PlayerService {
     // this.#removeInactivePlayers()
   }
 
-  async init(id: string, character?: CharacterEditionWithCharacter) {
-    const player = await this.findOrCreatePlayer(id, character)
-
-    this.addon.addChild(player)
-    player.updateLastActionAt()
-
-    // const target = this.addon.randomNearFlag
-
-    // player.script = new MoveToTargetScript({
-    //   object: player,
-    //   target,
-    // })
-
-    return player
-  }
-
   get activePlayers() {
     return this.addon.children.filter(
       (obj) => obj.type === 'PLAYER',
@@ -34,11 +18,12 @@ export class BasePlayerService implements PlayerService {
 
   async findOrCreatePlayer(
     id: string,
+    telegramId: string,
     character?: CharacterEditionWithCharacter,
   ): Promise<GameObjectPlayer> {
     const player = this.findPlayer(id)
     if (!player) {
-      return this.createPlayer({ id, character, x: 0 })
+      return this.createPlayer({ id, telegramId, character, x: 0 })
     }
 
     return player
@@ -50,10 +35,11 @@ export class BasePlayerService implements PlayerService {
     ) as PlayerObject | undefined
   }
 
-  async createPlayer({ id, x, character }: { id: string, x: number, character?: CharacterEditionWithCharacter }) {
+  async createPlayer({ id, telegramId, x, character }: { id: string, telegramId: string, x: number, character?: CharacterEditionWithCharacter }) {
     const player = new PlayerObject({
       addon: this.addon,
       id,
+      telegramId,
       x,
       y: this.addon.bottomY,
     })

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

@@ -37,7 +37,6 @@ export class BaseWebSocketService implements WebSocketService {
       data: {
         client: this.addon.client,
         id: roomId,
-        telegramId: this.addon.player?.id,
       },
     }
     this.send(connectMessage)
@@ -56,11 +55,19 @@ export class BaseWebSocketService implements WebSocketService {
         this.addon.createObject(obj.type, obj.id, obj.x, obj.zIndex)
       }
 
-      if (type === 'PLAYER' && this.addon.client === 'TELEGRAM_CLIENT' && this.addon.player) {
+      if (type === 'PLAYER' && this.addon.client === 'TELEGRAM_CLIENT') {
         const player = objects.find((obj) => obj.type === 'PLAYER' && obj.id === id)
         if (player) {
-          this.addon.player.id = player.id
-          this.addon.player.x = player.x
+          // Me?
+          const telegramId = player.telegramId
+          if (telegramId) {
+            if (telegramId !== this.addon.player?.telegramId) {
+              this.addon.playerService.createPlayer({ id, telegramId, x: player.x })
+            } else {
+              this.addon.player.id = id
+              this.addon.player.x = player.x
+            }
+          }
         }
       }
     }

packages/game/src/lib/types.ts

@@ -28,18 +28,6 @@ export interface GameAddon extends Container {
   createObject: (type: GameObject['type'], id: string, x: number, zIndex?: number) => void
   removeObject: (id: string) => void
   rebuildScene: () => Promise<void>
-  handleMessage: ({
-    playerId,
-    text,
-    character,
-  }: {
-    playerId: string
-    text: string
-    character?: CharacterEditionWithCharacter
-  }) => Promise<{
-    ok: boolean
-    message: string | null
-  }>
 }
 
 export interface GameObject extends Container {
@@ -96,6 +84,7 @@ export interface GameObjectUnit extends GameObject {
 }
 
 export interface GameObjectPlayer extends GameObjectUnit {
+  telegramId: string
   reputation: number
   villainPoints: number
   refuellerPoints: number
@@ -123,14 +112,10 @@ export interface WebSocketService {
 
 export interface PlayerService {
   activePlayers: GameObjectPlayer[]
-  createPlayer: (data: { id: string, x: number, character?: CharacterEditionWithCharacter }) => Promise<GameObjectPlayer>
+  createPlayer: (data: { id: string, telegramId: string, x: number, character?: CharacterEditionWithCharacter }) => Promise<GameObjectPlayer>
   removePlayer: (id: string) => void
   movePlayer: (data: { id: string, x: number }) => void
   update: () => void
-  init: (
-    id: string,
-    character?: CharacterEditionWithCharacter,
-  ) => Promise<GameObjectPlayer>
 }
 
 export interface AssetService {

packages/types/src/lib/websocket.ts

@@ -2,6 +2,7 @@ import type { CharacterEditionWithCharacter, Player, Profile, WoodlandPlayer } f
 
 export interface GameObject {
   id: string
+  telegramId?: string
   x: number
   type: 'PLAYER' | 'FLAG' | 'WAGON' | 'TREE'
   state: 'IDLE' | 'MOVING'
@@ -33,7 +34,6 @@ export interface WebSocketConnect {
     client: 'ADDON' | 'TELEGRAM_CLIENT' | 'WAGON_CLIENT'
     id: string
     token?: string
-    telegramId?: string
   }
 }