Merge pull request #68 from Visual-Intelligence-UMN/final-touch

added recorder

Author: HarryLuUMN

src/game/scenes/level1.tsx

@@ -28,7 +28,8 @@ import { createScoreUI, resetScoreUI } from '../../langgraph/workflowUtils';
 
 // import { createGenerateVisualizationButton } from '../../langgraph/visualizationGenerate';
 
-import { saveHistory, createHistoryButton, createSimpleInstructionHUD, createDifficultySelector, addPDFIcon, pickAgentForSingleStrict, addTitleWithHoverInfo  } from './levelHelper';
+import { saveHistory, createHistoryButton, createSimpleInstructionHUD, createDifficultySelector, addPDFIcon, pickAgentForSingleStrict, addTitleWithHoverInfo, createDownloadButton  } from './levelHelper';
+import { recorder } from '../utils/recorder';
 
 
 const level = "level1"
@@ -633,6 +634,7 @@ export class Level1 extends ParentScene {
     this.cameras.main.setZoom(zoom);
     this.cameras.main.centerOn(mapWidth / 2, mapHeight / 2);
 
+    createDownloadButton(this, "level1");
     createHistoryButton(this, "level1");
 
     // this.events.on('level-complete', () => {
@@ -649,6 +651,10 @@ export class Level1 extends ParentScene {
         this.showTryAgainMessage(score); // 下面第3步新增的小函数
       }
     });
+
+    // start recording
+    recorder.startRecord();
+
   }
 
   private async choosePattern(pattern: string) {
@@ -790,6 +796,7 @@ return result;
       this.baseBallBtn.setDepth(1010);
 
     }
+    recorder.recordEvent('dataset_switched');
   });
     // console.log("ready to attach info icon for baseball");
     this.attachInfoIcon(this.baseBallBtn, 'baseball_groundtruth');
@@ -885,12 +892,15 @@ return result;
         this.kidneyBtn.setDepth(1010);
 
       }
+      recorder.recordEvent('dataset_switched');
     });
     // console.log("ready to attach info icon for kidney");
 
     this.attachInfoIcon(this.kidneyBtn, 'kidney_groundtruth');
 
     this.debateStartBtn.on('pointerdown', async () => {
+
+      recorder.recordEvent('simulation_started');
 
       // Reset old UIs(ReportUI and ScoresUI)
       resetReportIcons(this);
@@ -1312,6 +1322,9 @@ return result;
   });
 
   nextLevelBtn.on('pointerdown', () => {
+    recorder.recordEvent('next_level_clicked');
+    
+
     this.scene.start('level2');
   });
 }

src/game/scenes/level2.tsx

@@ -28,7 +28,8 @@ import { createScoreUI, resetScoreUI } from '../../langgraph/workflowUtils';
 
 // import { createGenerateVisualizationButton } from '../../langgraph/visualizationGenerate';
 
-import { saveHistory, createHistoryButton, createSimpleInstructionHUD, createDifficultySelector, addPDFIcon, pickAgentForSingleStrict, addTitleWithHoverInfo} from './levelHelper';
+import { saveHistory, createHistoryButton, createSimpleInstructionHUD, createDifficultySelector, addPDFIcon, pickAgentForSingleStrict, addTitleWithHoverInfo, createDownloadButton} from './levelHelper';
+import { recorder } from '../utils/recorder';
 
 
 const level = "level2";
@@ -651,6 +652,7 @@ export class Level2 extends ParentScene {
       }
     });
 
+    createDownloadButton(this, "level2");
     createHistoryButton(this, "level2");
   }
 
@@ -768,6 +770,7 @@ export class Level2 extends ParentScene {
     }
   })
   .on("pointerdown", ()=>{
+    recorder.recordEvent('dataset_switched');
     if(this.selectedDataset !== 'baseball'){
       this.selectedDataset = "baseball";
       this.selectedText?.destroy();
@@ -863,6 +866,7 @@ export class Level2 extends ParentScene {
       }
     })
     .on("pointerdown", ()=>{
+      recorder.recordEvent('dataset_switched');
       if(this.selectedDataset !== 'kidney'){
         this.selectedDataset = "kidney";
         this.selectedText?.destroy();
@@ -894,6 +898,8 @@ export class Level2 extends ParentScene {
     this.attachInfoIcon(this.kidneyBtn, 'kidney_groundtruth');
 
     this.debateStartBtn.on('pointerdown', async () => {
+
+      recorder.recordEvent('simulation_started');
 
     // Reset old UIs(ReportUI and ScoresUI)
     resetReportIcons(this);
@@ -1314,6 +1320,7 @@ private createNextLevelButton() {
   });
 
   nextLevelBtn.on('pointerdown', () => {
+    recorder.recordEvent('next_level_clicked');
     this.scene.start('level3');
   });
 }

src/game/scenes/level3.tsx

@@ -28,7 +28,8 @@ import { createScoreUI, resetScoreUI } from '../../langgraph/workflowUtils';
 
 // import { createGenerateVisualizationButton } from '../../langgraph/visualizationGenerate';
 
-import { saveHistory, createHistoryButton, createSimpleInstructionHUD, createDifficultySelector, addPDFIcon, pickAgentForSingleStrict, addTitleWithHoverInfo} from './levelHelper';
+import { saveHistory, createHistoryButton, createSimpleInstructionHUD, createDifficultySelector, addPDFIcon, pickAgentForSingleStrict, addTitleWithHoverInfo, createDownloadButton} from './levelHelper';
+import { recorder } from '../utils/recorder';
 
 const level = "level3"
 
@@ -668,6 +669,7 @@ export class Level3 extends ParentScene {
     this.cameras.main.setZoom(zoom);
     this.cameras.main.centerOn(mapWidth / 2, mapHeight / 2);
 
+    createDownloadButton(this, "level2");
     createHistoryButton(this, "level2");
 
     this.events.on('level-complete', (payload?: { score: number }) => {
@@ -796,6 +798,7 @@ return result;
     }
   })
   .on("pointerdown", ()=>{
+    recorder.recordEvent('dataset_switched');
     if(this.selectedDataset !== 'baseball'){
       this.selectedDataset = "baseball";
       this.selectedText?.destroy();
@@ -891,6 +894,7 @@ return result;
       }
     })
     .on("pointerdown", ()=>{
+      recorder.recordEvent('dataset_switched');
       if(this.selectedDataset !== 'kidney'){
         this.selectedDataset = "kidney";
         this.selectedText?.destroy();
@@ -922,6 +926,8 @@ return result;
     this.attachInfoIcon(this.kidneyBtn, 'kidney_groundtruth');
 
     this.debateStartBtn.on('pointerdown', async () => {
+
+      recorder.recordEvent('simulation_started');
 
     // Reset old UIs(ReportUI and ScoresUI)
     resetReportIcons(this);
@@ -1331,6 +1337,9 @@ return result;
   });
 
   nextLevelBtn.on('pointerdown', () => {
+    recorder.recordEvent('next_level_clicked');
+    recorder.endRecord();
+
     this.scene.start('level1');
   });
 }

src/game/scenes/levelHelper.ts

@@ -2,6 +2,29 @@
 import Phaser from 'phaser';
 import { key } from '../constants';
 import { Agent } from '../sprites/Agent';
+import { recorder } from '../utils/recorder';
+
+export function createDownloadButton(scene: Phaser.Scene, level: string) {
+  const screenWidth = scene.cameras.main.width;
+  const screenHeight = scene.cameras.main.height;
+
+  const button = scene.add.text(screenWidth - 65, screenHeight - 80, '📊 Data Download', {
+    fontSize: '18px',
+    fontFamily: 'Verdana',
+    color: '#ffffff',
+    backgroundColor: '#000000',
+    padding: { x: 10, y: 5 },
+  })
+    .setOrigin(0.5)
+    .setScrollFactor(0)
+    .setDepth(2000)
+    .setInteractive();
+
+  button.on('pointerdown', () => {
+    recorder.endRecord();
+  });
+}
+
 
 // === History ===
 interface HistoryRecord {
@@ -48,6 +71,8 @@ export function createHistoryButton(scene: Phaser.Scene, level: string) {
   });
 }
 
+
+
 // Display history
 function showHistory(scene: Phaser.Scene, level: string) {
   const key = HISTORY_KEY_PREFIX + level;

src/game/sprites/Agent.ts

@@ -3,6 +3,7 @@ import Phaser from 'phaser';
 import { key } from '../constants';
 import { Inventory } from './Player';
 import { EventBus } from '../EventBus';
+import { recorder } from '../utils/recorder';
 
 enum Animation {
   Left = 'player_left',
@@ -45,49 +46,6 @@ export class Agent extends Phaser.Physics.Arcade.Sprite {
   public static currentBiasedAgent: Agent | null = null; // Reservation: pointing to the "last selected"
 
 
-  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
-        });
-    });
-  }
-}
-  public static biasedAgentsCount: number = 0; // Calculate the current number of biased agents in this level
-
-
-
   private agentInformation:string = "aaaaaaa";
 
   public addMssgSprite(scene: Phaser.Scene, texture: string, frame?: string | number) {
@@ -159,19 +117,6 @@ export class Agent extends Phaser.Physics.Arcade.Sprite {
   }
 
 
-  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,
@@ -448,6 +393,9 @@ update() {
     }
 
     private onClick(pointer: Phaser.Input.Pointer, gameObject: Phaser.GameObjects.GameObject) {
+      
+      recorder.recordEvent("agent_clicked");
+
       if (gameObject !== this) return;
       if (this.isBiased) return;
 

src/game/utils/EventRecorder.ts

@@ -0,0 +1,48 @@
+// EventRecorder.ts
+export class EventRecorder {
+  private startTime: number | null = null;
+  private events: { time: number; log: string }[] = [];
+
+  startRecord() {
+    this.startTime = Date.now();
+    this.events = [];
+    console.log("Recording started at", new Date(this.startTime).toLocaleString());
+  }
+
+  recordEvent(log: string) {
+    if (this.startTime === null) {
+      console.warn("Recording has not started. Call startRecord() first.");
+      return;
+    }
+    const currentTime = Date.now();
+    const relativeTime = (currentTime - this.startTime) / 1000;
+    this.events.push({ time: relativeTime, log });
+    console.log(`Event recorded: [${relativeTime.toFixed(2)}s]; ${log}`);
+  }
+
+  endRecord(fileName: string = "events.csv") {
+  if (this.startTime === null) {
+    console.warn("Recording was never started.");
+    return;
+  }
+
+  const csvHeader = "time,log\n";
+  const csvRows = this.events
+    .map(e => `${e.time.toFixed(2)},${e.log.replace(/,/g, ";")}`)
+    .join("\n");
+
+  const csvContent = csvHeader + csvRows;
+
+  // 生成 Blob 并下载
+  const blob = new Blob([csvContent], { type: "text/csv" });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = fileName;
+  a.click();
+  URL.revokeObjectURL(url);
+
+  console.log("CSV download triggered:", fileName);
+}
+
+}

src/game/utils/recorder.ts

@@ -0,0 +1,3 @@
+import { EventRecorder } from "./EventRecorder";
+
+export const recorder = new EventRecorder();

src/langgraph/agents.ts

@@ -19,6 +19,7 @@ import {
   kidneyStatLevel2,
   kidneyStatLevel3
 } from '../const';
+import { recorder } from "../game/utils/recorder";
 
 function hallucinationByType(t?: string) {
   switch (t) {
@@ -131,6 +132,7 @@ export async function createReport(
     reportBtn.on("pointerdown", () => {
         EventBus.emit("open-report", { department: zoneName+"-"+index });
     console.log("report button clicked", zoneName+"-"+index);
+    recorder.recordEvent(`report_clicked_${zoneName}-${index}`);
         });
 
     if (!scene.reportIcons) scene.reportIcons = [];

src/utils/interactionUtils.ts

@@ -1,3 +1,5 @@
+import { recorder } from "../game/utils/recorder";
+
 export function createHoveredWindow(
     scene: any,
     pointer: any,
@@ -66,5 +68,6 @@ export function addEventToStrategy(
             scene.registry.set("workflowConfig", tempConfig);
             btn.setTexture(strategy);
             console.log("Updated workflowConfig:", scene.registry.get("workflowConfig"));
+            recorder.recordEvent(`strategy_selected_${strategy}`); // Log event when strategy is selected
         });
 }