Adding Opacity ui primitive

src/types.ts

@@ -53,6 +53,7 @@ export type UIValue =
     | { kind: 'column', children: UIValue[], gap: number }
     | { kind: 'clickable', child: UIValue, event: Value }
     | { kind: 'padding', child: UIValue, amount: number }
+    | { kind: 'opacity', child: UIValue, opacity: number }
     | { kind: 'stack', children: UIValue[] }
     | { kind: 'text-input', value: string, placeholder: string, x: number, y: number, w: number, h: number, focused: boolean, onInput: Value, onSubmit: Value }
 

src/ui.ts

@@ -98,6 +98,14 @@ function renderUI(ui: UIValue, ctx: CanvasRenderingContext2D, x: number, y: numb
             renderUI(ui.child, ctx, x + ui.amount, y + ui.amount);
             break;
 
+        case 'opacity': {
+            const previousAlpha = ctx.globalAlpha;
+            ctx.globalAlpha = previousAlpha * ui.opacity;
+            renderUI(ui.child, ctx, x, y);
+            ctx.globalAlpha = previousAlpha;
+            break;
+        }
+
         case 'stack': {
             for (const child of ui.children) {
                 renderUI(child, ctx, x, y);

src/valueToUI.ts

@@ -77,6 +77,15 @@ export function valueToUI(value: Value): UIValue {
             return { kind: 'padding', amount: amount.value, child: valueToUI(child) };
         }
 
+        case 'Opacity': {
+            const { child, opacity } = fields;
+
+            if (opacity.kind !== 'int')
+                throw new Error('Invalid Opacity fields');
+
+            return { kind: 'opacity', opacity: opacity.value, child: valueToUI(child) };
+        }
+
         case 'Stack': {
             const children = fields.children;