Merge pull request #25 from chiefeu/show-agent-info

show agent info
jtoy · Apr 2, 2024 · 5a2185c · 5a2185c
2 parents ef20908 + f410c5a
commit 5a2185c
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 27 deletions.
diff --git a/web/src/classes/Agent.tsx b/web/src/classes/Agent.tsx
@@ -16,14 +16,18 @@ export class Agent {
     isTalking: boolean;
     isThinking: boolean;
     status: string
+    description: string;
+    goal: string;
 
-    constructor(position: GridPosition, agentName: string, agentId: string, status: string) {
+    constructor(position: GridPosition, agentName: string, agentId: string, status: string, description: string, goal: string) {
         this.position = position;
         this.agentName = agentName;
         this.agentId = agentId;
         this.isTalking = false;
         this.isThinking = false;
         this.status = status;
+        this.description = description;
+        this.goal = goal;
         this.steps = [];
     }
 

diff --git a/web/src/components/Sidebar.module.css b/web/src/components/Sidebar.module.css
@@ -5,7 +5,7 @@
     top: 0;
     z-index: 3;
     max-height: 100vh;
-    width: 300px;
+    width: 350px;
     overflow: scroll;
 }
 
@@ -20,7 +20,7 @@
 }
 
 .gameControls:hover {
-    background-color: rgba(255, 255, 255, 1); 
+    background-color: rgba(255, 255, 255, 1);
 }
 
 
@@ -30,8 +30,7 @@
     margin: 5px;
 }
 
-.agentModule {
-    display: flex;
+.agentInfoContainer {
     border: 3px dashed #00bcd4;
     background-color: sandybrown;
     margin-top: 15px;
@@ -42,16 +41,40 @@
     overflow: hidden;
 }
 
+.agentModule {
+    display: flex;
+    align-items: center;
+    position: relative;
+}
+
 .agentName {
     font-size: x-large;
-    padding-left: 10px;
+    padding-left: 8px;
 }
 
 .thoughtSelector {
-    margin-left: auto; 
-    display: flex; 
-    align-items: center; 
+    padding-left: 10px;
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.closeButton {
+    margin-left: auto;
+    display: flex;
     justify-content: flex-end;
+    color: black;
+    font-size: medium;
+    font-weight: bold;
+    border: 2px solid black;
+    border-radius: 8px;
+    padding: 4px 8px;
+    text-align: center;
+}
+
+.agentInfo {
+    text-align: justify;
 }
 
 .stepAndAudio {

diff --git a/web/src/components/Sidebar.tsx b/web/src/components/Sidebar.tsx
@@ -241,19 +241,27 @@ const Sidebar: React.FC<SidebarProps> = (
         // JSX for the Sidebar component goes here
         <div className={styles.sidebar}>
             {renderControls()}
-            {agentPlacement && <div className={styles.agentModule}>
-                <AgentSprite agentName={agentPlacement.agentName} isTalking={false} isThinking={false} status={agentPlacement.status} map=""/>
-                <div className={styles.agentName}>{agentPlacement.agentName}</div>
-                <div className={styles.thoughtSelector}>
-                    <label>
-                        <input type="checkbox" checked={showThoughts} onChange={() => setShowThoughts(!showThoughts)} />
-                        Show Thoughts
-                    </label>
+            {agentPlacement && <div className={styles.agentInfoContainer}>
+                <div className={styles.agentModule}>
+                    <AgentSprite agentName={agentPlacement.agentName} isTalking={false} isThinking={false} status={agentPlacement.status} />
+                    <div className={styles.agentName}>{agentPlacement.agentName}</div>
+                    <div className={styles.thoughtSelector}>
+                        <label>
+                            <input type="checkbox" checked={showThoughts} onChange={() => setShowThoughts(!showThoughts)} />
+                            Show Thoughts
+                        </label>
+                    </div>
+                    <button onClick={() => setFollowAgent(undefined)} className={styles.closeButton}>
+                        Close
+                    </button>
+                </div>
+                <hr />
+                <div>
+                    <p className={styles.agentInfo}><strong>Description:</strong> {agentPlacement.description}</p>
+                    <p className={styles.agentInfo}><strong>Goal:</strong> {agentPlacement.goal}</p>
                 </div>
-                <button onClick={() => setFollowAgent(undefined)}>
-                    Close
-                </button>
-            </div>}
+            </div>
+            }
             <>
                 {renderTimeline()}
             </>

diff --git a/web/src/steps/NewAgentStep.ts b/web/src/steps/NewAgentStep.ts
@@ -9,32 +9,36 @@ export interface NewAgentJSON extends StepJSON {
     name: string;
     agent_id: string;
     status: string;
+    description: string;
+    goal: string;
 }
 
 export class NewAgentStep extends Step {
     agentId: string;
     agentName: string;
     position: GridPosition;
     agentStatus: string;
+    agentDescription: string;
+    agentGoal: string;
 
-    constructor(stepId: number, substepId: number, agentId: string, agentName: string, position: GridPosition, agentStatus: string) {
+    constructor(stepId: number, substepId: number, agentId: string, agentName: string, position: GridPosition, agentStatus: string, agentDescription: string, agentGoal: string) {
         super(stepId, substepId);
         this.agentId = agentId;
         this.agentName = agentName;
         this.position = position;
         this.agentStatus = agentStatus;
+        this.agentDescription = agentDescription;
+        this.agentGoal = agentGoal;
     }
 
     applyStep(level: Level) {
-        const placement = new Agent(this.position, this.agentName, this.agentId, this.agentStatus);
+        const placement = new Agent(this.position, this.agentName, this.agentId, this.agentStatus, this.agentDescription, this.agentGoal);
 
         level.agents.push(placement);
     }
 
     static fromJSON(json: NewAgentJSON): NewAgentStep {
         const position: GridPosition = { x: json.y, y: json.x };
-        return new NewAgentStep(json.step, json.substep, json.agent_id, json.name, position, json.status);
+        return new NewAgentStep(json.step, json.substep, json.agent_id, json.name, position, json.status, json.description, json.goal);
     }
-}
-
-
+}