Update ui

client/src/game/GameEngine.ts

@@ -487,8 +487,8 @@ export class GameEngine {
     const isP2Bot = this.localMode && this.localPlayerTypes[1] === 'bot'
     const hasBot = (isP1Bot || isP2Bot) && !(isP1Bot && isP2Bot)
 
-    if (hasBot && this.camera.vw >= 1024) {
-      this.camera.offsetX = (isP2Bot ? -1 : 1) * this.camera.vw / 6
+    if (hasBot && this.camera.vw >= 768) {
+      this.camera.offsetX = (isP2Bot ? -1 : 1) * 125
     } else {
       this.camera.offsetX = 0
     }

client/src/pages/Game.tsx

@@ -159,7 +159,7 @@ function getBotCharacter(
   switch (opponentType) {
     case 'streamer':
       return {
-        name: 'Draco-Streamer',
+        name: 'Vân Long',
         title: 'Live Streamer',
         quotes: {
           start: [
@@ -191,7 +191,7 @@ function getBotCharacter(
       }
     case 'coach':
       return {
-        name: 'Coach Draco',
+        name: 'Sư Long',
         title: 'Tactical Coach',
         quotes: {
           start: [
@@ -223,7 +223,7 @@ function getBotCharacter(
       }
     case 'analyst':
       return {
-        name: 'Draco-Analyst',
+        name: 'Trí Long',
         title: 'Data Analyst',
         quotes: {
           start: [
@@ -258,8 +258,8 @@ function getBotCharacter(
       switch (tauntStyle) {
         case 'friendly':
           return {
-            name: 'Draco-Friendly',
-            title: 'Friendly Taunter',
+            name: 'Hòa Long',
+            title: 'Harmonious Dragon',
             quotes: {
               start: [
                 'Hey there! Let’s have a super fun game!',
@@ -290,8 +290,8 @@ function getBotCharacter(
           }
         case 'lover':
           return {
-            name: 'Draco-Lover',
-            title: 'Romantic Taunter',
+            name: 'Ái Long',
+            title: 'Loving Dragon',
             quotes: {
               start: [
                 'Hello, gorgeous. Let us weave our stones together on this grid.',
@@ -316,14 +316,14 @@ function getBotCharacter(
               lose: [
                 'Losing to you is the greatest victory of all.',
                 'My heart is broken, but you look stunning in victory.',
-                'You’ve captured my stones and my soul. Well played, darling.',
+                'You’ve captured my stones and my soul. Well played, beloved.',
               ],
             },
           }
         case 'serious':
           return {
-            name: 'Draco-Serious',
-            title: 'Serious Taunter',
+            name: 'Uy Long',
+            title: 'Majestic Dragon',
             quotes: {
               start: [
                 'The match has commenced. No distractions.',
@@ -355,8 +355,8 @@ function getBotCharacter(
         case 'funny':
         default:
           return {
-            name: 'Draco-Funny',
-            title: 'Funny Taunter',
+            name: 'Du Rong',
+            title: 'Funny Dragon',
             quotes: {
               start: [
                 'Prepare to be defeated by a highly sophisticated collection of if-statements!',
@@ -852,6 +852,7 @@ export default function Game() {
         }
       }
       e.camera.setInitialZoom(e.boardSize, gameRules.swap2 ? 0.66 : 0.85)
+      e.updateCameraOffset()
 
       const p1ColorNum = parseInt(p1ColorState.replace('#', '0x'), 16)
       const p2ColorNum = parseInt(p2ColorState.replace('#', '0x'), 16)
@@ -1141,9 +1142,11 @@ export default function Game() {
                   boxShadow: isBotThinking ? `0 0 8px ${botColor}` : 'none',
                   animation: isBotThinking ? 'caro5-pulse 1s infinite alternate' : 'none',
                 }} />
+                {!isFinished && (
                 <span style={{ fontSize: '0.8rem', color: theme.textMuted, fontWeight: 500 }}>
                   {isBotThinking ? 'Calculating turn...' : 'Awaiting human move...'}
                 </span>
+                )}
               </div>
             </div>
           )}