Merge pull request #64 from Visual-Intelligence-UMN/harry-react-dev

Harry react dev

Author: HarryLuUMN

src/App.tsx

@@ -13,13 +13,21 @@ export interface Report{
     department: string,
 }
 
+export interface AgentInformation{
+    mssg: string,
+    agent: string,
+}
+
+
+
 function App()
 {
     const [report, setReport] = useState<Report[]>([]);
     const [isOpen, setIsOpen] = useState(false);
     const [currentReport, setCurrentReport] = useState("");
     const [htmlReport, setHtmlReport] = useState<any>("");
     const [isConstitutionOpen, setIsConstitutionOpen] = useState(false);
+    const [agentProfiles, setAgentProfiles] = useState<AgentInformation[]>([]);
 
 
     const [charts, setCharts] = useState<{id: string; code: string}[]>([]);
@@ -47,6 +55,25 @@ function App()
             // setIsOpen(true);
         };
 
+        const handleAgentInformation = (data: {agent: string, mssg: string}) =>{
+          console.log("Agent information received", data.agent, data.mssg);
+          const curReport:AgentInformation = {
+                mssg: data.mssg,
+                agent: data.agent,
+            }
+            // check if the report'department is already in the list, if yes, update the report; if no, add the report
+            const index = agentProfiles.findIndex((r) => r.agent === data.agent);
+            if(index !== -1){
+                agentProfiles[index] = curReport;
+                setAgentProfiles([...agentProfiles]);
+            }else{
+                agentProfiles.push(curReport);
+                setAgentProfiles([...agentProfiles]);
+            }
+
+            console.log("agentProfiles", agentProfiles);
+        }
+
         // have a handler for setting currentReport and open the reporting window
         const handleReportOpen = (data: { department: string}) => {
             const index = report.findIndex((r) => r.department === data.department);
@@ -100,6 +127,45 @@ function App()
             // embedding the markdown into the draggable window
         }
 
+
+        const handleAgentInformationOpen = (data: { agent: string}) => {
+  const index = agentProfiles.findIndex((r) => r.agent === data.agent);
+  if(index !== -1){
+      setCurrentReport(agentProfiles[index].mssg);
+
+      marked.use({
+        extensions: [
+          {
+            name: 'highlight',
+            level: 'inline',
+            start(src) { return src.indexOf("=="); },
+            tokenizer(src, tokens) {
+              const rule = /^==([^=]+)==/;
+              const match = rule.exec(src);
+              if (match) {
+                return {
+                  type: 'highlight',
+                  raw: match[0],
+                  text: match[1],
+                  tokens: this.lexer.inlineTokens(match[1]),
+                };
+              }
+            },
+            renderer(token: any) {
+              return `<mark>${marked.parser(token.tokens)}</mark>`;
+            },
+          },
+        ],
+      });
+
+      console.log("agentProfiles[index].mssg", agentProfiles[index].mssg);
+
+      setHtmlReport(agentProfiles[index].mssg);
+      if(!isOpen)setIsOpen(true);
+  }
+}
+
+
         // EventBus.on("d3-code", (data: {d3Code: string, id: string}) => {
         //   setCharts(prev => [
         //     ...prev,
@@ -125,6 +191,10 @@ function App()
 
         EventBus.on("final-report", handleReportReceiving);
         EventBus.on("open-report", handleReportOpen);
+
+        EventBus.on("agent-information", handleAgentInformation);
+        EventBus.on("open-agent-information", handleAgentInformationOpen);
+
         EventBus.on("d3-code", handleD3Code);
         EventBus.on("open-constitution", handleConstitutionOpen);
 

src/game/assets/sprites/agent-idle.png

@@ -19,3 +19,5 @@ export { default as dialog_icon } from "./dialog_char_icon.png"
 export { default as idle_icon } from "./idle_char_icon.png"
 export { default as record_icon } from "./record_char_icon.png"
 export { default as pdf } from "./pdf.png"
+export { default as agent_mssg } from "./agent-mssg.png"
+export { default as agent_idle } from "./agent-idle.png"

src/game/assets/sprites/agent-mssg.png

@@ -32,6 +32,8 @@ const image = {
   voting: "voting",
   single_agent: "single_agent",
   pdfIcon: 'pdfIcon',
+  agent_mssg: 'agent_mssg',
+  agent_idle: 'agent_idle',
 } as const;
 
 const scene = {

src/game/assets/sprites/index.ts

@@ -28,6 +28,8 @@ export class Boot extends Scene {
     this.load.image(key.image.interior, assets.tilesets.interior);
     this.load.image(key.image.exterior, assets.tilesets.exterior);
     this.load.image(key.image.coinIcon, assets.sprites.coinIcon);
+    this.load.image(key.image.agent_mssg, assets.sprites.agent_mssg);
+    this.load.image(key.image.agent_idle, assets.sprites.agent_idle);
 
     this.load.image(key.image.dialog_icon, assets.sprites.dialog_icon);
     this.load.image(key.image.idle_icon, assets.sprites.idle_icon);

src/game/constants/key.ts

@@ -2,6 +2,7 @@ import Phaser from 'phaser';
 
 import { key } from '../constants';
 import { Inventory } from './Player';
+import { EventBus } from '../EventBus';
 
 enum Animation {
   Left = 'player_left',
@@ -31,6 +32,7 @@ export class Agent extends Phaser.Physics.Arcade.Sprite {
   private instruction: string = "";
   private bias: string = "";
   private isBiased: boolean = false;
+  private mssgSprite: Phaser.GameObjects.Image | null = null;
 
   private wasDragged: boolean = false; // if user drag the agent now
 
@@ -40,13 +42,129 @@ export class Agent extends Phaser.Physics.Arcade.Sprite {
 
   public static currentBiasedAgent: Agent | null = null;
 
+
+  private agentInformation:string = "aaaaaaa";
+
+  public addMssgSprite(scene: Phaser.Scene, texture: string, frame?: string | number) {
+  if (this.mssgSprite) {
+    console.log("Updating message sprite for agent:", this.name);
+    this.mssgSprite.setTexture(texture, frame);
+
+    this.mssgSprite.removeAllListeners();
+    this.mssgSprite.disableInteractive();
+
+    if (texture === "agent_mssg") {
+      this.mssgSprite.setInteractive({ useHandCursor: true });
+      this.mssgSprite.on('pointerdown', () => {
+        console.log(`Message sprite of ${this.name} clicked!`);
+        this.changeNameTagColor('#00ff00');
+        EventBus.emit("open-agent-information", {
+          agent: this.name
+        });
+      });
+    }
+    return;
+  }
+
+  console.log("Adding message sprite to agent:", this.name);
+  this.mssgSprite = scene.add.image(this.x, this.y, texture, frame)
+    .setOrigin(0.5, 1)
+    .setDepth(10);
+
+  if (texture === "agent_mssg") {
+    this.mssgSprite.setInteractive({ useHandCursor: true });
+    this.mssgSprite.on('pointerdown', () => {
+      console.log(`Message sprite of ${this.name} clicked!`);
+      this.changeNameTagColor('#00ff00');
+      EventBus.emit("open-agent-information", {
+          agent: this.name
+        });
+    });
+  }
+}
+
+
+
 
   // Add reset method of the calculation of the biased agents
   public static resetBiasedAgentsCount() {
     Agent.biasedAgentsCount = 0;
     Agent.currentBiasedAgent = null;
   }
 
+  public getAgentInformation(){
+    return this.agentInformation;
+  }
+
+  public setAgentInformation(info: string) {
+    this.agentInformation = info;
+    EventBus.emit("agent-information", {
+      agent: this.name,
+      mssg: this.getAgentInformation()
+    });
+  }
+
+public playDialogue(
+  scene: Phaser.Scene,
+  text: string,
+  speed: number = 50,
+  sentencePause: number = 1500
+) {
+  // 1. 按标点切分成句子数组（支持中英文）
+  const sentences = text.match(/[^.!?。！？]+[.!?。！？]/g) || [text];
+
+  // 2. 在 Agent 右上角添加文本
+  let textObj = scene.add.text(this.x + 40, this.y - 40, "", {
+    fontSize: "16px",
+    color: "#ffffff",
+    backgroundColor: "rgba(0,0,0,0.5)",
+    wordWrap: { width: 200 }
+  }).setDepth(20);
+
+  let currentSentenceIndex = 0;
+  let charIndex = 0;
+  let isPaused = false;
+
+  scene.time.addEvent({
+    delay: speed,
+    loop: true,
+    callback: () => {
+      if (isPaused) return;
+
+      const sentence = sentences[currentSentenceIndex];
+
+      if (charIndex < sentence.length) {
+        // 逐字输出
+        textObj.text += sentence[charIndex];
+        charIndex++;
+      } else {
+        // 一句话播完 → 停顿 → 清空 → 下一句
+        isPaused = true;
+        scene.time.delayedCall(sentencePause, () => {
+          currentSentenceIndex++;
+          charIndex = 0;
+
+          if (currentSentenceIndex < sentences.length) {
+            textObj.text = "";   // ✅ 清空上句
+            isPaused = false;    // 开始下一句
+          } else {
+            console.log(`✅ Agent ${this.name} 所有句子播放完毕`);
+            textObj.destroy();   // 最后一条播完移除
+          }
+        });
+      }
+    }
+  });
+
+  // 让气泡位置始终跟随 Agent
+  scene.events.on("update", () => {
+    if (textObj && textObj.active) {
+      textObj.setPosition(this.x + 40, this.y - 40);
+    }
+  });
+}
+
+
 
   public assignToWorkplace: boolean = false;
   private activationFunction: (state: any) => any = (state: any) => {
@@ -139,8 +257,8 @@ export class Agent extends Phaser.Physics.Arcade.Sprite {
 
   }
 
-  update() {
-    // this.nameTag.setPosition(this.x, this.y - 25);
+update() {
+    this.mssgSprite?.setPosition(this.x - 15, this.y);
   }
 
   public getName(){
@@ -234,6 +352,9 @@ export class Agent extends Phaser.Physics.Arcade.Sprite {
       if (gameObject === this) {
         console.log(`Agent ${this.name} clicked!`);
 
+        const agentInfo = this.getAgentInformation();
+        console.log(`Agent Information: ${agentInfo}`);
+
         // If there is already another biased agent, restore it first.        
         if (Agent.currentBiasedAgent && Agent.currentBiasedAgent !== this) {
           Agent.currentBiasedAgent.setToUnbiased();
@@ -284,6 +405,8 @@ export class Agent extends Phaser.Physics.Arcade.Sprite {
     }
 
 
+
+
     private createWorkAnimations(atlasKey: string) {
 
       // console.log("✅ texture keys:", this.scene.textures.getTextureKeys());

src/game/scenes/Boot.ts

@@ -164,6 +164,7 @@ export function addRoomHiringMenuHUD(this: any) {
         const { x: agentX, y: agentY } = generateNonCollidingAgentPosition(this.controllableCharacters, bounds);
 
         const agent = new Agent(this, agentX, agentY, 'player', 'misa-front', 'Agent '+this.controllableCharacters.length);
+        agent.addMssgSprite(this, "agent_mssg");
         this.agentGroup.add(agent);
         this.controllableCharacters.push(agent);
         this.agentList.set(agent.getName(), agent);
@@ -179,6 +180,8 @@ export function addRoomHiringMenuHUD(this: any) {
         const { x: agentX, y: agentY } = generateNonCollidingAgentPosition(this.controllableCharacters, bounds);
 
         const agent = new Agent(this, agentX, agentY, 'player', 'misa-front', 'Agent '+this.controllableCharacters.length);
+
+        agent.addMssgSprite(this, "agent_mssg");
         this.agentGroup.add(agent);
         this.controllableCharacters.push(agent);
         this.agentList.set(agent.getName(), agent);

src/game/sprites/Agent.ts

@@ -136,6 +136,10 @@ export function addAgentsBasedOnSpawningPoints(
       bias
     );
 
+    // agent.playDialogue(scene, "hello. nice. nihao.")
+
+    agent.addMssgSprite(scene, "agent_idle");
+
     if(spawningPoint.name.includes("analysis_")){
       //agent.setToBiased();
     } 

src/game/utils/hudUtils.ts

@@ -167,6 +167,9 @@ export function createJournalist(
         const originalAgent1Y = agent.y;
 
         // await updateStateIcons(zones, "mail", 0);
+        //await agent.playDialogue(scene, msg.content);
+        await agent.setAgentInformation(msg.content);
+        await agent.addMssgSprite(scene, "agent_mssg");
         console.log("debug agent pos", destination.x, destination.y);
         await autoControlAgent(scene, agent, tilemap, (destination.x as number), (destination.y as number), "Send Message");
         await autoControlAgent(scene, agent, tilemap, originalAgent1X, originalAgent1Y, "Return to Office");
@@ -299,6 +302,9 @@ export function createManager(
         console.log("graph:3rd agent msg:", msg.content);
         // await updateStateIcons(zones, "idle", 0);
         await agent.setAgentState("idle");
+        //await agent.playDialogue(scene, msg.content);
+        await agent.setAgentInformation(msg.content);
+        await agent.addMssgSprite(scene, "agent_mssg");
 
         await createReport(scene, "chaining", index, destination.x, destination.y);
         const report = await createReport(scene, "chaining", index, destination.x, destination.y);
@@ -431,7 +437,10 @@ export function createWriter(
         const originalAgent2Y = agent.y;
 
         // await updateStateIcons(zones, "mail", 1);
-        // await updateStateIcons(scene.chainingZones, "mail");     
+        // await updateStateIcons(scene.chainingZones, "mail");    
+        //await agent.playDialogue(scene, msg.content);
+        await agent.setAgentInformation(msg.content); 
+        await agent.addMssgSprite(scene, "agent_mssg");
 
         await autoControlAgent(scene, agent, tilemap, destination.x, destination.y, "Send Report to Final Location");