From c8a86eec3fea44572ce9573d9c5b940f43ff5a94 Mon Sep 17 00:00:00 2001
From: root <root@dflike.hookstrapmx>
Date: Sat, 7 Mar 2026 13:40:16 +0000
Subject: [PATCH] feat: wire spawn hotkey and command panel visibility in
 GameScene

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 client/src/scenes/GameScene.ts | 24 +++++++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/client/src/scenes/GameScene.ts b/client/src/scenes/GameScene.ts
index f12bfc5..f4ca8ad 100644
--- a/client/src/scenes/GameScene.ts
+++ b/client/src/scenes/GameScene.ts
@@ -3,6 +3,7 @@ import type { SocketClient } from '../network/SocketClient.js';
 import { CharacterCompositor } from '../sprites/CharacterCompositor.js';
 import { PortraitCompositor } from '../sprites/PortraitCompositor.js';
 import { NpcInfoPanel } from '../ui/NpcInfoPanel.js';
+import { CommandPanel } from '../ui/CommandPanel.js';
 import { InteractionEmojiManager } from '../ui/InteractionEmoji.js';
 import type { WorldState, StateUpdate, EntityState, Appearance } from '@dflike/shared';
 import { TILE_SIZE, SPRITE_FRAME_WIDTH, SPRITE_FRAME_HEIGHT, SPRITE_COLS, Direction } from '@dflike/shared';
@@ -28,6 +29,7 @@ export class GameScene extends Phaser.Scene {
   private portraitCompositor!: PortraitCompositor;
   private npcInfoPanel!: NpcInfoPanel;
   private emojiManager!: InteractionEmojiManager;
+  private commandPanel!: CommandPanel;
 
   constructor() {
     super({ key: 'GameScene' });
@@ -43,6 +45,8 @@ export class GameScene extends Phaser.Scene {
     this.portraitCompositor = new PortraitCompositor();
     this.npcInfoPanel = new NpcInfoPanel();
     this.emojiManager = new InteractionEmojiManager();
+    this.commandPanel = new CommandPanel();
+    this.commandPanel.show(); // Start in camera mode, so show immediately
 
     // Draw tile grid
     this.drawWorld();
@@ -65,21 +69,35 @@ export class GameScene extends Phaser.Scene {
     this.input.keyboard!.addKey('TAB').on('down', () => {
       const prevMode = this.mode;
       if (this.mode === 'camera') {
-        this.mode = 'avatar';
-      } else if (this.mode === 'avatar') {
         this.mode = 'follow';
       } else {
         this.mode = 'camera';
       }
-      this.client.sendInput({ type: 'toggle-mode' });
       this.updateModeText();
 
       // Panel visibility
       if (this.mode === 'follow') {
         this.showFollowPanel();
+        this.commandPanel.hide();
       } else if (prevMode === 'follow') {
         this.npcInfoPanel.hide();
       }
+
+      // Command panel visibility
+      if (this.mode === 'camera') {
+        this.commandPanel.show();
+      } else {
+        this.commandPanel.hide();
+      }
+    });
+
+    // Spawn NPC command (camera mode only)
+    this.input.keyboard!.addKey('ONE').on('down', () => {
+      if (this.mode !== 'camera') return;
+      const cam = this.cameras.main;
+      const centerTileX = Math.floor((cam.scrollX + cam.width / 2) / TILE_SIZE);
+      const centerTileY = Math.floor((cam.scrollY + cam.height / 2) / TILE_SIZE);
+      this.client.spawnNpc(centerTileX, centerTileY);
     });
 
     // UI text