feat: game navigator, player debouncer (#303)

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']
+    GameNavigator: typeof import('./src/components/GameNavigator.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']

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

@@ -1,13 +1,15 @@
 <template>
   <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="absolute w-full h-35 bottom-0 bg-red-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-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">
+        <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">
           <img src="/energy.png" alt="avatar" class="w-auto h-8">
-          <p class="text-xl font-semibold leading-none tracking-tight">
+          <p class="text-2xl font-semibold leading-none tracking-tight">
             {{ profile?.energy }}
           </p>
         </div>

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

@@ -0,0 +1,30 @@
+<template>
+  <div class="relative mb-2 h-8 bg-red-950/25 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">
+      </div>
+    </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="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) }} м
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { playerX, wagonX } = defineProps<{
+  playerX?: number
+  wagonX?: number
+}>()
+
+const wagonOnNavigator = computed(() => playerX && wagonX ? (wagonX - playerX) / 50 + 50 : 0)
+
+// player can see objects between player X - 2500 and player X + 2500
+// calculate wagon position on navigator relative to player X (in the middle)
+</script>

apps/website/server/api/websocket.ts

@@ -75,6 +75,12 @@ export default defineWebSocketHandler({
             return
           }
 
+          // Check, if already exists by Telegram
+          const playerExist = activeRoom.objects.find((obj) => obj.type === 'PLAYER' && obj.telegramId === parsed.data.token)
+          if (playerExist) {
+            return
+          }
+
           activeRoom.addPlayer({ id: peer.id, telegramId: parsed.data.token, x: wagon?.x ? wagon.x - 200 : 100, character })
 
           peer.subscribe(activeRoom.id)

packages/game/src/lib/baseGameAddon.ts

@@ -95,7 +95,7 @@ export class BaseGameAddon extends Container implements GameAddon {
       this.cameraTarget = this.player
 
       this.app.stage.addEventListener('pointerdown', (e) => {
-        if (!this.player) {
+        if (!this.player || !this.player.canClick) {
           return
         }
 
@@ -116,6 +116,8 @@ export class BaseGameAddon extends Container implements GameAddon {
         }
         this.player.target = flag
 
+        this.player.click()
+
         this.websocketService.send({
           type: 'NEW_PLAYER_TARGET',
           data: {

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

@@ -54,6 +54,11 @@ export class TreeObject extends BaseObject implements GameObjectTree {
   }
 
   click() {
+    if (!this.addon.player || !this.addon.player?.canClick) {
+      return
+    }
+
+    this.addon.player.click()
     this.chop()
   }
 

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

@@ -17,6 +17,8 @@ export class PlayerObject extends UnitObject implements GameObjectPlayer {
   refuellerPoints!: number
   raiderPoints!: number
   lastActionAt: GameObjectPlayer['lastActionAt']
+  canClick: boolean
+  nextClick: number
 
   public inventoryId?: string
 
@@ -26,21 +28,17 @@ export class PlayerObject extends UnitObject implements GameObjectPlayer {
     this.telegramId = telegramId
     this.speedPerSecond = 70
     this.lastActionAt = new Date()
+    this.canClick = true
+    this.nextClick = 0
   }
 
   async initChar(character?: CharacterEditionWithCharacter): Promise<void> {
     super.initVisual(character?.character?.codename ?? 'telegramo')
   }
 
-  updateCoins(amount: number): void {
-    this.coins = this.coins + amount
-
-    // return db.player.update({
-    //   where: { id: this.id },
-    //   data: {
-    //     coins: this.coins,
-    //   },
-    // })
+  click(): void {
+    this.canClick = false
+    this.nextClick = 15
   }
 
   addReputation(amount: number) {

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

@@ -116,11 +116,11 @@ export class UnitObject extends BaseObject implements GameObjectUnit {
       this.animationIdle.animationSpeed = 0.05
       this.animationIdle.visible = true
 
-      if (this.direction === 'LEFT') {
+      if (this.direction === 'RIGHT') {
         this.animationIdle.scale.x = 4
         this.animationIdle.play()
       }
-      if (this.direction === 'RIGHT') {
+      if (this.direction === 'LEFT') {
         this.animationIdle.scale.x = -4
         this.animationIdle.play()
       }

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

@@ -7,7 +7,14 @@ export class BasePlayerService implements PlayerService {
   constructor(readonly addon: GameAddon) {}
 
   update() {
-    // this.#removeInactivePlayers()
+    // Debounce
+    if (this.addon.player?.canClick === false) {
+      this.addon.player.nextClick -= 1
+
+      if (this.addon.player.nextClick <= 0) {
+        this.addon.player.canClick = true
+      }
+    }
   }
 
   get activePlayers() {

packages/game/src/lib/types.ts

@@ -91,13 +91,15 @@ export interface GameObjectPlayer extends GameObjectUnit {
   refuellerPoints: number
   raiderPoints: number
   lastActionAt: Date
+  canClick: boolean
+  nextClick: number
+  click: () => void
   initChar: (character?: CharacterEditionWithCharacter) => Promise<void>
   updateLastActionAt: () => void
   addReputation: (amount: number) => void
   addVillainPoints: (amount: number) => void
   addRefuellerPoints: (amount: number) => void
   addRaiderPoints: (amount: number) => void
-  updateCoins: (amount: number) => void
 }
 
 export interface ServerService {