Changes reference data and interpreter to support complex args associ…

…ated with the byte builder data.
aaroneiche · Jan 26, 2025 · 5798c5d · 5798c5d
1 parent 791aa67
commit 5798c5d
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 18 deletions.
diff --git a/src/commandBytes.ts b/src/commandBytes.ts
@@ -16,13 +16,20 @@ export type byteArg = {
     val:string
 }
 
+export type complexArgs = {
+    builder: ((byteId: number, bytesData: byte[], 
+        setBytes:React.Dispatch<React.SetStateAction<byte[]>>) => React.ReactElement), // The form element that ends up in the 
+    reference: string|string[] //The React Element that ends up in the Reference page.
+}
+
+
 export type lookupByte = {
     name: string;
     desc: string;
-    args: string[]| ((byteId: number, bytesData: byte[], setBytes:React.Dispatch<React.SetStateAction<byte[]>>) => React.ReactElement);
+    args: string[]| complexArgs; //Outputs the arguments for the reference page.
     type?: byteType;
-    value?:string;
-    out?: ((val: string) => number[]);
+    value?:string;  
+    out?: ((val: string) => number[]); // The function that outputs bytes for the byte builder.
     image?: string;
 }
 
@@ -97,6 +104,7 @@ export const example: byte[] = [
     }, */
 ]
 
+//The complete list of commands bytes.
 export const lookupTable: {[key:number]: lookupByte} = {
         1: {
             name: "Desktop",
@@ -187,15 +195,15 @@ export const lookupTable: {[key:number]: lookupByte} = {
         19: {
             name: "Put Text",
             desc: "Places text characters. ASCII coded bytes - terminated by a 0. Requires X and Y start position",
-            args: textArgEdit,
+            args: {reference: ["x","y","n ASCII bytes", "0"], builder: textArgEdit},
             value: "",
             out: textArgBytes,
             image: "puttext.png"
         },
         20: {
             name: "Type Text",
             desc: "Types text characters out at a rate of 0.1s. ASCII coded bytes - terminated by a 0. Requires X and Y start position",
-            args: textArgEdit,
+            args: {reference: ["x","y","n ASCII bytes", "0"], builder: textArgEdit},
             value: "",
             out: textArgBytes,
             image: "type.gif"
@@ -225,6 +233,7 @@ export const lookupTable: {[key:number]: lookupByte} = {
     };
 
 
+//The list of control bytes 
 export const controlTable: {[key: number]: lookupByte} = {
     1: {
             name: "Write to Display Stack",

diff --git a/src/components/Reference.tsx b/src/components/Reference.tsx
@@ -7,12 +7,20 @@ import "./Reference.css"
 
 function ReferenceBlock(command: number, byteInfo: lookupByte) {
 
-    const theseArgs = (typeof byteInfo.args !== 'function') ? byteInfo.args.map(a=>{return <div>{a}</div>}) : "It's complicated";
-
-
+    const theseArgs = ()=>{
+      if(Array.isArray(byteInfo.args)) {
+        return byteInfo.args.map(a=>{return <div>{a}</div>})
+      }else{
+        //If Args is a complexArgs instead of an array of vals, output args.reference.
+        if(Array.isArray(byteInfo.args.reference)){
+          return byteInfo.args.reference.map(a=>{return <div>{a}</div>})
+        }else{
+          return byteInfo.args.reference;
+        }
+      }
+    }
     // import thisImage from byteInfo.image;
 
-
     return (
       <div
         className="window"
@@ -43,15 +51,10 @@ function ReferenceBlock(command: number, byteInfo: lookupByte) {
                 <td>&nbsp;</td>
               </tr>
               <tr>
-                {byteInfo.args.length > 0 && (
-                  <>
-                    <td className="argsTitle">
-                      {" "}
-                      <b>Args:</b>{" "}
-                    </td>
-                    <td> {theseArgs} </td>
-                  </>
-                )}
+                <td className="argsTitle">
+                  <b>Args: </b>
+                </td>
+                <td> {theseArgs()} </td>
               </tr>
             </tbody>
           </table>