Skip to content

Commit 0ddbb1f

Browse files
shurui-codeshurui-code
committed
Info icon and report
1 parent e57243f commit 0ddbb1f

File tree

2 files changed

+210
-7
lines changed

2 files changed

+210
-7
lines changed

‎src/game/scenes/level2.tsx‎

Lines changed: 195 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import Phaser from 'phaser';
22
import { render } from 'phaser-jsx';
33

4+
import {baseballGroundTruth, kidneyGroundTruth} from '../../const'
5+
46
import { Typewriter } from '../components';
57
import {
68
key,
@@ -79,6 +81,181 @@ export class Level2 extends ParentScene {
7981
private selectedText?: Phaser.GameObjects.Text;
8082
private selectedDataset: string = "none";
8183

84+
private attachInfoIcon(
85+
target: Phaser.GameObjects.Image,
86+
imageKey: string,
87+
offsetX = 35,
88+
offsetY = -20
89+
) {
90+
const icon = this.add.text(
91+
target.x + offsetX,
92+
target.y + offsetY,
93+
'🛈',
94+
{
95+
fontSize: '25px',
96+
color: '#ffffff',
97+
// backgroundColor: '#0000ff',
98+
fontStyle: 'normal',
99+
padding: { x: 8, y: 6 },
100+
fontFamily: 'Verdana',
101+
}
102+
)
103+
.setScrollFactor(0)
104+
.setDepth(9999)
105+
.setOrigin(0.5)
106+
.setResolution(2)
107+
.setInteractive();
108+
109+
// console.log(
110+
// `🧷 Info icon attached to ${target.texture.key} at (${icon.x}, ${icon.y})`
111+
// );
112+
113+
icon.on('pointerover', (pointer: Phaser.Input.Pointer) => {
114+
const hoverWindowX = pointer.x + 230;
115+
const hoverWindowY = pointer.y - 20;
116+
117+
if (!this.hoverWindow) {
118+
const hoverText = this.getInfoText(imageKey);
119+
120+
// Step 1: Create the text and hide it first
121+
this.hoverWindowText = this.add.text(
122+
hoverWindowX,
123+
hoverWindowY,
124+
hoverText,
125+
{
126+
fontFamily: 'Verdana',
127+
fontSize: '16px',
128+
color: '#ffffff',
129+
wordWrap: { width: 500 },
130+
}
131+
)
132+
.setScrollFactor(0)
133+
.setDepth(1012)
134+
.setAlpha(1)
135+
.setVisible(false)
136+
.setOrigin(0.5, 0.5)
137+
.setResolution(2);
138+
139+
140+
// Step 2: Getting the text size
141+
const bounds = this.hoverWindowText.getBounds();
142+
const padding = 20;
143+
144+
// Step 3: Adding a Background
145+
this.hoverWindow = this.add.rectangle(
146+
hoverWindowX,
147+
hoverWindowY,
148+
bounds.width + padding,
149+
bounds.height + padding,
150+
0x000000
151+
)
152+
.setScrollFactor(0)
153+
.setDepth(1011)
154+
.setAlpha(0.9)
155+
.setStrokeStyle(2, 0xffffff);
156+
157+
// Step 4: Displaying Text
158+
this.hoverWindowText.setVisible(true);
159+
}
160+
});
161+
162+
icon.on('pointerout', () => {
163+
this.hoverWindow?.destroy();
164+
this.hoverWindowText?.destroy();
165+
this.hoverWindow = undefined;
166+
this.hoverWindowText = undefined;
167+
});
168+
}
169+
170+
171+
172+
// helper method: returns the corresponding message text based on the imageKey
173+
private getInfoText(imageKey: string): string {
174+
switch(imageKey) {
175+
case 'baseball_groundtruth':
176+
return baseballGroundTruth;
177+
case 'kidney_groundtruth':
178+
return kidneyGroundTruth;
179+
default:
180+
return 'Dataset Info';
181+
}
182+
}
183+
184+
// private attachInfoIcon(
185+
// target: Phaser.GameObjects.Image,
186+
// imageKey: string,
187+
// offsetX = 35,
188+
// offsetY = -35
189+
// ) {
190+
// const x = target.x + offsetX;
191+
// const y = target.y + offsetY;
192+
193+
// const circle = this.add.circle(0, 0, 16, 0xcccccc)
194+
// .setScrollFactor(0);
195+
196+
// const text = this.add.text(0, 0, 'i', {
197+
// fontSize: '18px',
198+
// color: '#000000',
199+
// fontFamily: 'Verdana',
200+
// })
201+
// .setOrigin(0.5)
202+
// .setScrollFactor(0);
203+
204+
// const icon = this.add.container(x, y, [circle, text])
205+
// .setSize(32, 32)
206+
// .setInteractive(
207+
// new Phaser.Geom.Rectangle(-16, -16, 32, 32),
208+
// Phaser.Geom.Rectangle.Contains
209+
// )
210+
// .setScrollFactor(0)
211+
// .setDepth(10000);
212+
213+
// console.log(`Info icon attached to ${target.texture.key} at (${icon.x}, ${icon.y})`);
214+
// console.log(`Target button depth: ${target.depth}, Icon depth: ${icon.depth}`);
215+
216+
// icon.on('pointerover', (pointer: Phaser.Input.Pointer) => {
217+
// const hoverWindowX = pointer.x + 20;
218+
// const hoverWindowY = pointer.y - 20;
219+
220+
// if (!this.hoverWindow) {
221+
// this.hoverWindow = this.add.rectangle(
222+
// hoverWindowX,
223+
// hoverWindowY,
224+
// 135,
225+
// 50,
226+
// 0x000000
227+
// )
228+
// .setScrollFactor(0)
229+
// .setDepth(10001)
230+
// .setAlpha(0.9)
231+
// .setStrokeStyle(2, 0xffffff);
232+
233+
// this.hoverWindowText = this.add.text(
234+
// hoverWindowX,
235+
// hoverWindowY,
236+
// this.getInfoText(imageKey)
237+
// )
238+
// .setScrollFactor(0)
239+
// .setDepth(10002)
240+
// .setAlpha(1)
241+
// .setOrigin(0.5, 0.5)
242+
// .setStyle({
243+
// fontFamily: 'Verdana',
244+
// fontSize: '12px',
245+
// color: '#ffffff',
246+
// });
247+
// }
248+
// });
249+
250+
// icon.on('pointerout', () => {
251+
// this.hoverWindow?.destroy();
252+
// this.hoverWindowText?.destroy();
253+
// this.hoverWindow = undefined;
254+
// this.hoverWindowText = undefined;
255+
// });
256+
257+
// return icon;
258+
// }
82259

83260

84261
constructor() {
@@ -568,15 +745,19 @@ return result;
568745
.setScale(1.5)
569746
.on("pointerover", (pointer:any)=>{
570747
console.log("pointer over");
748+
749+
const hoverWindowX = pointer.x + 50
750+
const hoverWindowY = pointer.y + 50
751+
571752
if(!this.hoverWindow){
572753
this.hoverWindow = this
573754
.add
574-
.rectangle(pointer.x, pointer.y, 135, 50, 0x000000)
755+
.rectangle(hoverWindowX, hoverWindowY, 135, 50, 0x000000)
575756
.setScrollFactor(0)
576757
.setDepth(1011)
577758
.setAlpha(1)
578759
.setStrokeStyle(2, 0xffffff);
579-
this.hoverWindowText = this.add.text(pointer.x, pointer.y, "Baseball Player\nDataset")
760+
this.hoverWindowText = this.add.text(hoverWindowX, hoverWindowY, "Baseball Player\nDataset")
580761
.setScrollFactor(0)
581762
.setDepth(1012)
582763
.setAlpha(1)
@@ -616,14 +797,16 @@ return result;
616797
this.baseBallBtn.setDepth(998);
617798
this.registry.set('currentDataset', 'baseball');
618799

619-
620800
} else {
621801
this.selectedDataset = "none";
622802
this.selectedText?.destroy();
623803
this.baseBallBtn.setDepth(1010);
624804

625805
}
626806
});
807+
console.log("ready to attach info icon for baseball");
808+
this.attachInfoIcon(this.baseBallBtn, 'baseball_groundtruth');
809+
627810

628811
this.add.text(0, 280, 'Start\nSimulation')
629812
.setScrollFactor(0)
@@ -656,15 +839,18 @@ return result;
656839
.setScale(1.5)
657840
.on("pointerover", (pointer:any)=>{
658841
console.log("pointer over");
842+
const hoverWindowX = pointer.x + 50
843+
const hoverWindowY = pointer.y + 50
844+
659845
if(!this.hoverWindow){
660846
this.hoverWindow = this
661847
.add
662-
.rectangle(pointer.x, pointer.y, 135, 50, 0x000000)
848+
.rectangle(hoverWindowX, hoverWindowY, 135, 50, 0x000000)
663849
.setScrollFactor(0)
664850
.setDepth(1011)
665851
.setAlpha(1)
666852
.setStrokeStyle(2, 0xffffff);
667-
this.hoverWindowText = this.add.text(pointer.x, pointer.y, "Kidney Treatments\nDataset")
853+
this.hoverWindowText = this.add.text(hoverWindowX, hoverWindowY, "Kidney Treatments\nDataset")
668854
.setScrollFactor(0)
669855
.setDepth(1012)
670856
.setAlpha(1)
@@ -705,14 +891,17 @@ return result;
705891
.disableInteractive();
706892
this.kidneyBtn.setDepth(998);
707893
this.registry.set('currentDataset', 'kidney');
708-
894+
709895
} else {
710896
this.selectedDataset = "none";
711897
this.selectedText?.destroy();
712898
this.kidneyBtn.setDepth(1010);
713899

714900
}
715901
});
902+
console.log("ready to attach info icon for kidney");
903+
904+
this.attachInfoIcon(this.kidneyBtn, 'kidney_groundtruth');
716905

717906
this.debateStartBtn.on('pointerdown', async () => {
718907
this.registry.set('isWorkflowRunning', true);

‎src/langgraph/workflowUtils.ts‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,21 @@ export async function startDataFetcher(scene: any, agent: any) {
6666
}
6767

6868
export async function startJudges(d3Code: string, content: string) {
69-
const highlightedText = await createHighlighter(content);
69+
// const highlightedText = await createHighlighter(content);
70+
// const cleanedContent = content.replace(/```html\s*|```/g, '').trim();
71+
72+
const cleanedContent = content.replace(/```html\s*|```/g, '').trim();
73+
const parsedMarkdown = await marked.parse(cleanedContent);
74+
75+
let raw = await createHighlighter(parsedMarkdown);
76+
let highlightedText = typeof raw === 'string'
77+
? raw
78+
: (raw as any).content?.toString?.() ?? '';
79+
80+
highlightedText = highlightedText.replace(/^```html\s*|```$/g, '').trim();
81+
82+
83+
7084

7185
const visRaw = await createVisualizationJudge(d3Code);
7286
const writingRaw = await createWritingJudge(content);

0 commit comments

Comments
 (0)