feat: updates

.github/workflows/release.yml

@@ -2,7 +2,7 @@ name: Release
 
 on:
   release:
-    types: [published]
+    types: [created]
   workflow_dispatch:
     inputs:
       release:

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

@@ -1,14 +1,14 @@
 <template>
   <div class="flex flex-row gap-2">
-    <div class="z-10 relative w-14 h-14 flex flex-col justify-center items-center bg-gradient-to-br from-orange-300 to-orange-500 rounded-2xl">
-      <Image :src="headImage" class="p-2 h-16 w-16" />
+    <div class="z-10 relative w-16 h-16 flex flex-col justify-center items-center bg-gradient-to-br from-orange-300 to-orange-500 rounded-2xl">
+      <Image :src="character?.character.codename ? `units/${character?.character.codename}/head.png` : 'units/santa/head.png'" class="p-3 h-16 w-16" />
       <div class="absolute -bottom-1 -right-3 px-1 w-fit min-w-6 bg-orange-50 text-orange-600 text-base font-semibold text-center rounded-full">
         {{ character?.level ?? 1 }}
       </div>
     </div>
 
-    <div class="relative h-7 grow bg-blue-900 rounded-2xl">
-      <div class="h-full w-[4%] bg-gradient-to-br from-blue-300 to-blue-600 rounded-2xl" :style="{ width: `${width > 10 ? width : 10}%` }" />
+    <div class="relative h-8 grow bg-blue-900 rounded-2xl">
+      <div class="h-full bg-gradient-to-br from-blue-300 to-blue-600 rounded-2xl" :style="{ width: `${character?.xp && character.nextLevel ? (character.xp / character.nextLevel.requiredXp) * 100 : 100}%` }" />
       <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-row justify-center items-center">
         <p class="font-semibold text-lg text-white tracking-tight">
           {{ character?.xp ?? 0 }} <span class="text-xs">XP</span>
@@ -20,7 +20,4 @@
 
 <script setup lang="ts">
 const { character } = useCharacter()
-
-const headImage = computed(() => character.value?.character.codename ? `units/${character.value?.character.codename}/head.png` : 'units/santa/head.png')
-const width = computed(() => character.value?.xp && character.value.nextLevel ? (character.value.xp / character.value.nextLevel.requiredXp) * 100 : 100)
 </script>

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

@@ -1,8 +1,8 @@
 <template>
-  <div class="relative h-10 bg-red-950/15 text-white rounded-full">
+  <div class="relative h-8 bg-red-950/15 text-white rounded-full">
     <div v-if="wagonOnNavigator > 3 && wagonOnNavigator < 97" class="absolute transform -translate-x-1/2" :style="{ left: `${wagonOnNavigator}%` }">
-      <div class="p-1 bg-purple-300 rounded-xl">
-        <Image src="wheel-1.png" class="w-8 h-8" />
+      <div class="p-1 bg-purple-200 rounded-xl">
+        <Image src="wheel-1.png" class="w-6 h-6" />
       </div>
     </div>
 

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

@@ -2,8 +2,12 @@ import { BaseGameAddon } from '@chat-game/game'
 
 const { refreshCharacter } = useCharacter()
 
+function updateUI() {
+  refreshCharacter()
+}
+
 const websocketUrl = 'wss://chatgame.space/api/websocket'
-const gameClient = new BaseGameAddon({ websocketUrl, client: 'TELEGRAM_CLIENT', updateUI: refreshCharacter })
+const gameClient = new BaseGameAddon({ websocketUrl, client: 'TELEGRAM_CLIENT', updateUI })
 
 const roomConnected = ref<string>()