Started working on CG UI primitives. rendering to a canvas

src/main.ts

@@ -1,47 +1,30 @@
-import { evaluate } from './interpreter'
-import type { Env } from './env'
-import { tokenize } from './lexer'
-import { Parser } from './parser'
-import { prettyPrint } from './ast';
+import type { UIValue } from './types';
+import { render } from './ui';
 
-function e(str: string) {
-    console.log(str);
-    const tokens = tokenize(str);
-    console.log(tokens);
-    const p = new Parser(tokens);
-    const ast = p.parse();
-    console.log(ast);
-    console.log(prettyPrint(ast));
-    const env: Env = new Map();
-    console.log(evaluate(ast, env));
-}
+const canvas = document.createElement('canvas');
+canvas.width = 800;
+canvas.height = 600;
+document.body.appendChild(canvas);
 
-e('add1 = (x \\ x + 1); add1 3');
-e('sum = x y \\ x + y; sum 5 3');
-e('[1, 2, 3]');
-e('c = 5; { a = 3, b = c }');
-e('rec = { a = 3, b = 5 }; rec.a');
-e('rec = { a = 3, b = 5 }; rec{ a = 10 }');
-e('add1 = (x \\ x + 1); 3 > add1');
-e('[1, 2] & [3, 4]');
-e('"abc" & "def"');
-// e('n | 0 \\ 1 | _ \\ 99');
-// e('m | Some x \\ 1 | None \\ 0');
-// e('head = list \\ list | [x, _] \\ Some x | [] \\ None; head');
-e('n = 5; n | 5 \\ "five" | _ \\ "other"');
-e('list = [1, 2, 3]; list | [x, y, z] \\ x + y + z');
-e('point = {x = 5, y = 10}; point | {x = px, y = py} \\ px + py');
+const ui: UIValue = {
+    kind: 'column',
+    gap: 10,
+    children: [
+        { kind: 'text', content: "Hello CG World", x: 0, y: 20 },
+        { kind: 'rect', w: 200, h: 50, color: 'blue' },
+        { kind: 'text', content: "YESS", x: 0, y: 20 },
+        { kind: 'row', gap: 13, children:
+            [
+                { kind: 'text', content: "In a row", x: 0, y: 10 },
+                { kind: 'clickable', event: "test", child: {
+                    kind: 'padding', amount: 10, child: {
+                        kind: 'rect', w: 80, h: 30, color: '#4a90e2'
+                        }
+                    }
+                }
+            ]
+        }
+    ]
+};
 
-e(`factorial = n \\ n
-  | 0 \\ 1
-  | n \\ n * factorial (n - 1);
-
-  factorial 5`)
-
-e(`factorial = n \\ n
-  | 0 \\ 1
-  | n \\ n * factorial (n - 1);
-
-  factorial 5`)
-
-e('some5 = Some 5; some5');
+render(ui, canvas);