chore: merge the rest of the nodes back into this structure, and make sure that start and end nodes are not deletable.

src/pages/VisProgPage/visualProgrammingUI/nodes/EndNode.tsx

@@ -18,7 +18,7 @@ export type EndNode = Node<EndNodeData>
 export default function EndNode(props: NodeProps<Node>) {
   return (
     <>
-      <Toolbar nodeId={props.id} allowDelete={true}/>
+      <Toolbar nodeId={props.id} allowDelete={false}/>
       <div className={`${styles.defaultNode} ${styles.nodeEnd}`}>
         <div className={"flex-row gap-sm"}>
         End

src/pages/VisProgPage/visualProgrammingUI/nodes/GoalNode.default.ts

@@ -6,6 +6,7 @@ import type { GoalNodeData } from "./GoalNode";
 export const GoalNodeDefaults: GoalNodeData = {
   label: "Goal Node",
   droppable: true,
-  GoalList: [],
+  description: "The robot will strive towards this goal",
+  achieved: false,
   hasReduce: true,
 };

src/pages/VisProgPage/visualProgrammingUI/nodes/GoalNode.tsx

@@ -8,6 +8,8 @@ import {
 } from '@xyflow/react';
 import { Toolbar } from '../components/NodeComponents';
 import styles from '../../VisProg.module.css';
+import { TextField } from '../../../../components/TextField';
+import useFlowStore from '../VisProgStores';
 
 /**
  * The default data dot a Goal node
@@ -17,8 +19,9 @@ import styles from '../../VisProg.module.css';
  */
 export type GoalNodeData = {
   label: string;
+  description: string;
   droppable: boolean;
-  GoalList: string[];
+  achieved: boolean;
   hasReduce: boolean;
 };
 
@@ -37,23 +40,47 @@ export function GoalNodeCanConnect(connection: Connection | Edge): boolean {
  * @returns React.JSX.Element
  */
 export default function GoalNode(props: NodeProps<Node>) {
-  const label_input_id = `Goal_${props.id}_label_input`;
   const data = props.data as GoalNodeData;
-  return (
-    <>
-      <Toolbar nodeId={props.id} allowDelete={true}/>
-      <div className={`${styles.defaultNode} ${styles.nodeGoal}`}>
-        <div className={"flex-row gap-sm"}>
-          <label htmlFor={label_input_id}></label>
-          {props.data.label as string}
-        </div>
-        {data.GoalList.map((Goal) => (<div>{Goal}</div>))}
-        <Handle type="target" position={Position.Right} id="phase"/>
+  const {updateNodeData} = useFlowStore();
+
+  const text_input_id = `goal_${props.id}_text_input`;
+  const checkbox_id = `goal_${props.id}_checkbox`;
+
+  const setDescription = (value: string) => {
+    updateNodeData(props.id, {...data, description: value});
+  }
+
+  const setAchieved = (value: boolean) => {
+    updateNodeData(props.id, {...data, achieved: value});
+  }
+
+  return <>
+    <Toolbar nodeId={props.id} allowDelete={true}/>
+    <div className={`${styles.defaultNode} ${styles.nodeGoal} flex-col gap-sm`}>
+      <div className={"flex-row gap-md"}>
+        <label htmlFor={text_input_id}>Goal:</label>
+        <TextField
+          id={text_input_id}
+          value={data.description}
+          setValue={(val) => setDescription(val)}
+          placeholder={"To ..."}
+        />
       </div>
-    </>
-  );
+      <div className={"flex-row gap-md align-center"}>
+        <label htmlFor={checkbox_id}>Achieved:</label>
+        <input
+          id={checkbox_id}
+          type={"checkbox"}
+          value={data.achieved ? "checked" : ""}
+          onChange={(e) => setAchieved(e.target.checked)}
+        />
+      </div>
+      <Handle type="source" position={Position.Right} id="GoalSource"/>
+    </div>
+  </>;
 }
 
+
 /**
  * Reduces each Goal, including its children down into its relevant data.
  * @param props: The Node Properties of this node.
@@ -66,7 +93,7 @@ export function GoalReduce(node: Node, nodes: Node[]) {
   const data = node.data as GoalNodeData;
     return {
       label: data.label,
-      list: data.GoalList,
+      achieved: data.achieved,
     }
 }
 

src/pages/VisProgPage/visualProgrammingUI/nodes/StartNode.tsx

@@ -20,7 +20,7 @@ export type StartNode = Node<StartNodeData>
 export default function StartNode(props: NodeProps<Node>) {
   return (
     <>
-      <Toolbar nodeId={props.id} allowDelete={true}/>
+      <Toolbar nodeId={props.id} allowDelete={false}/>
       <div className={`${styles.defaultNode} ${styles.nodeStart}`}>
         <div className={"flex-row gap-sm"}>
           Start

src/pages/VisProgPage/visualProgrammingUI/nodes/TriggerNode.default.ts

@@ -6,6 +6,7 @@ import type { TriggerNodeData } from "./TriggerNode";
 export const TriggerNodeDefaults: TriggerNodeData = {
   label: "Trigger Node",
   droppable: true,
-  TriggerList: [],
+  triggers: [{id: "help-trigger", keyword:"help"}],
+  triggerType: "keywords",
   hasReduce: true,
 };

src/pages/VisProgPage/visualProgrammingUI/nodes/TriggerNode.tsx

@@ -8,6 +8,10 @@ import {
 } from '@xyflow/react';
 import { Toolbar } from '../components/NodeComponents';
 import styles from '../../VisProg.module.css';
+import useFlowStore from '../VisProgStores';
+import { useState } from 'react';
+import { RealtimeTextField, TextField } from '../../../../components/TextField';
+import duplicateIndices from '../../../../utils/duplicateIndices';
 
 /**
  * The default data dot a Trigger node
@@ -18,12 +22,12 @@ import styles from '../../VisProg.module.css';
 export type TriggerNodeData = {
   label: string;
   droppable: boolean;
-  TriggerList: string[];
+  triggerType: unknown;
+  triggers: [unknown];
   hasReduce: boolean;
 };
 
 
-
 export type TriggerNode = Node<TriggerNodeData>
 
 
@@ -37,21 +41,28 @@ export function TriggerNodeCanConnect(connection: Connection | Edge): boolean {
  * @returns React.JSX.Element
  */
 export default function TriggerNode(props: NodeProps<Node>) {
-  const label_input_id = `Trigger_${props.id}_label_input`;
-  const data = props.data as TriggerNodeData;
-  return (
-    <>
-      <Toolbar nodeId={props.id} allowDelete={true}/>
-      <div className={`${styles.defaultNode} ${styles.nodeTrigger}`}>
-        <div className={"flex-row gap-sm"}>
-          <label htmlFor={label_input_id}></label>
-          {props.data.label as string}
-        </div>
-        {data.TriggerList.map((Trigger) => (<div>{Trigger}</div>))}
-        <Handle type="target" position={Position.Right} id="phase"/>
-      </div>
-    </>
-  );
+  const data = props.data as TriggerNodeData
+  const {updateNodeData} = useFlowStore();
+
+  const setKeywords = (keywords: Keyword[]) => {
+    updateNodeData(props.id, {...data, triggers: keywords});
+  }
+
+  return <>
+    <Toolbar nodeId={props.id} allowDelete={true}/>
+    <div className={`${styles.defaultNode} ${styles.nodeTrigger} flex-col gap-sm`}>
+      {data.triggerType === "emotion" && (
+        <div className={"flex-row gap-md"}>Emotion?</div>
+      )}
+      {data.triggerType === "keywords" && (
+        <Keywords
+          keywords={[{id: "test", keyword: " test"}]}
+          setKeywords={setKeywords}
+        />
+      )}
+      <Handle type="source" position={Position.Right} id="TriggerSource"/>
+    </div>
+  </>;
 }
 
 /**
@@ -66,7 +77,7 @@ export function TriggerReduce(node: Node, nodes: Node[]) {
   const data = node.data as TriggerNodeData;
     return {
       label: data.label,
-      list: data.TriggerList,
+      list: data.triggers,
     }
 }
 
@@ -75,4 +86,91 @@ export function TriggerConnects(thisNode: Node, otherNode: Node, isThisSource: b
   if (thisNode == undefined && otherNode == undefined && isThisSource == false) { 
     console.warn("Impossible node connection called in EndConnects")
   }
+}
+
+
+export type EmotionTriggerNodeProps = {
+  type: "emotion";
+  value: string;
+}
+
+type Keyword = { id: string, keyword: string };
+
+export type KeywordTriggerNodeProps = {
+  type: "keywords";
+  value: Keyword[];
+}
+
+export type TriggerNodeProps = EmotionTriggerNodeProps | KeywordTriggerNodeProps;
+
+function KeywordAdder({ addKeyword }: { addKeyword: (keyword: string) => void }) {
+  const [input, setInput] = useState("");
+
+  const text_input_id = "keyword_adder_input";
+
+  return <div className={"flex-row gap-md"}>
+    <label htmlFor={text_input_id}>New Keyword:</label>
+    <RealtimeTextField
+      id={text_input_id}
+      value={input}
+      setValue={setInput}
+      onCommit={() => {
+        if (!input) return;
+        addKeyword(input);
+        setInput("");
+      }}
+      placeholder={"..."}
+      className={"flex-1"}
+    />
+  </div>;
+}
+
+function Keywords({
+  keywords,
+  setKeywords,
+}: {
+  keywords: Keyword[];
+  setKeywords: (keywords: Keyword[]) => void;
+}) {
+  type Interpolatable = string | number | boolean | bigint | null | undefined;
+
+  const inputElementId = (id: Interpolatable) => `keyword_${id}_input`;
+
+  /** Indices of duplicates in the keyword array. */
+  const [duplicates, setDuplicates] = useState<number[]>([]);
+
+  function replace(id: string, value: string) {
+    value = value.trim();
+    const newKeywords = value === ""
+      ? keywords.filter((kw) => kw.id != id)
+      : keywords.map((kw) => kw.id === id ? {...kw, keyword: value} : kw);
+    setKeywords(newKeywords);
+    setDuplicates(duplicateIndices(newKeywords.map((kw) => kw.keyword)));
+  }
+
+  function add(value: string) {
+    value = value.trim();
+    if (value === "") return;
+    const newKeywords = [...keywords, {id: crypto.randomUUID(), keyword: value}];
+    setKeywords(newKeywords);
+    setDuplicates(duplicateIndices(newKeywords.map((kw) => kw.keyword)));
+  }
+
+  return <>
+    <span>Triggers when {keywords.length <= 1 ? "the keyword is" : "all keywords are"} spoken.</span>
+    {[...keywords].map(({id, keyword}, index) => {
+      return <div key={id} className={"flex-row gap-md"}>
+        <label htmlFor={inputElementId(id)}>Keyword:</label>
+        <TextField
+          id={inputElementId(id)}
+          value={keyword}
+          setValue={(val) => replace(id, val)}
+          placeholder={"..."}
+          className={"flex-1"}
+          invalid={duplicates.includes(index)}
+        />
+      </div>;
+    })}
+    <KeywordAdder addKeyword={add} />
+  </>;
 }