Update main for clay 0.13

Signed-off-by: jmug <u.g.a.mariano@gmail.com>

src/main.c

@@ -14,174 +14,184 @@ void HandleButtonInteraction(Clay_ElementId elementId, Clay_PointerData pointerD
 }
 
 void ExpandContainer() {
-    CLAY(
+    CLAY({
-        CLAY_RECTANGLE({ .color = {0, 0, 0, 0} }),
+        .backgroundColor = {0, 0, 0, 0},
-        CLAY_LAYOUT({
+        .layout = {
             .sizing = {
                 .width = CLAY_SIZING_GROW(),
                 .height = CLAY_SIZING_GROW() 
             }
-        })
+        }
-    ) {}
+    }) {}
 }
 
-int main(void)
+Clay_RenderCommandArray CreateLayout() {
-{
+    Clay_BeginLayout();
-    Clay_Raylib_Initialize(GetScreenWidth(), GetScreenHeight(), "PiAlarm", FLAG_FULLSCREEN_MODE);
-    uint64_t clayRequiredMemory = Clay_MinMemorySize();
-    Clay_Arena clayMemory = Clay_CreateArenaWithCapacityAndMemory(clayRequiredMemory, malloc(clayRequiredMemory));
-    Clay_Initialize(clayMemory, (Clay_Dimensions) {
-            .width = GetScreenWidth(),
-            .height = GetScreenHeight()
-    }, (Clay_ErrorHandler) { HandleClayErrors });
-    Clay_SetMeasureTextFunction(Raylib_MeasureText);
-    HideCursor();
-    while (!WindowShouldClose()) {
-        // Must be run once per frame.
-        Clay_SetLayoutDimensions((Clay_Dimensions) {
-                .width = GetScreenWidth(),
-                .height = GetScreenHeight()
-        });
 
-        // Update Mouse and Scroll
+    CLAY({
-        Vector2 mousePosition = GetMousePosition();
+        .backgroundColor = {255, 255, 255, 255},
-        Vector2 scrollDelta = GetMouseWheelMoveV();
+        .layout = {
-        Clay_SetPointerState(
+            .sizing = {
-            (Clay_Vector2) { mousePosition.x, mousePosition.y },
+                .width = CLAY_SIZING_GROW(),
-            IsMouseButtonDown(0)
+                .height = CLAY_SIZING_GROW() 
-        );
+            },
-        Clay_UpdateScrollContainers(
+            .padding = {10, 10, 10, 10},
-            true,
+            .layoutDirection = CLAY_TOP_TO_BOTTOM
-            (Clay_Vector2) { scrollDelta.x, scrollDelta.y },
+        }
-            GetFrameTime()
+    }) {
-        );
+        CLAY({
-
+            .backgroundColor = {200, 200, 200, 255},
-        Clay_BeginLayout();
+            .layout = {
-
+                .sizing = {
-        CLAY(
+                    .width = CLAY_SIZING_GROW(),
-            CLAY_RECTANGLE({ .color = {255, 255, 255, 255} }),
+                    .height = CLAY_SIZING_PERCENT(0.7) 
-            CLAY_LAYOUT({
+                },
+                .padding = {20, 20, 80, 80}
+            }
+        }) {
+            CLAY({
+                .backgroundColor = {200, 200, 0, 255},
+                .layout = {
+                    .sizing = {
+                        .width = CLAY_SIZING_PERCENT(0.23),
+                        .height = CLAY_SIZING_GROW() 
+                    }
+                }
+                
+            }) {
+                Clay_OnHover(HandleButtonInteraction, NULL);
+            }
+            CLAY({
+                .backgroundColor = {200, 200, 0, 255},
+                .layout = {
+                    .sizing = {
+                        .width = CLAY_SIZING_PERCENT(0.23),
+                        .height = CLAY_SIZING_GROW() 
+                    }
+                }
+            }) {
+                Clay_OnHover(HandleButtonInteraction, NULL);
+            }
+            CLAY({
+                .backgroundColor = {200, 200, 0, 0},
+                .layout = {
+                    .sizing = {
+                        .width = CLAY_SIZING_GROW(),
+                        .height = CLAY_SIZING_GROW() 
+                    }
+                }
+            }) {
+                Clay_OnHover(HandleButtonInteraction, NULL);
+            }
+            CLAY({
+                .backgroundColor = {200, 200, 0, 255},
+                .layout = {
+                    .sizing = {
+                        .width = CLAY_SIZING_PERCENT(0.23),
+                        .height = CLAY_SIZING_GROW() 
+                    }
+                },
+                
+            }) {
+                Clay_OnHover(HandleButtonInteraction, NULL);
+            }
+            CLAY({
+                .backgroundColor = {200, 200, 0, 255},
+                .layout = {
+                    .sizing = {
+                        .width = CLAY_SIZING_PERCENT(0.23),
+                        .height = CLAY_SIZING_GROW() 
+                    }
+                }
+            }) {
+                Clay_OnHover(HandleButtonInteraction, NULL);
+            }
+        }
+        CLAY({
+            .backgroundColor = {200, 200, 200, 255},
+            .layout = {
                 .sizing = {
                     .width = CLAY_SIZING_GROW(),
                     .height = CLAY_SIZING_GROW() 
                 },
-                .padding = {10, 10},
+                .padding = { 20, 20 , 20, 20}
-                .layoutDirection = CLAY_TOP_TO_BOTTOM
-            })
-        ) {
-            CLAY(
-                CLAY_RECTANGLE({ .color = {200, 200, 200, 255} }),
-                CLAY_LAYOUT({
-                    .sizing = {
-                        .width = CLAY_SIZING_GROW(),
-                        .height = CLAY_SIZING_PERCENT(0.7) 
-                    },
-                    .padding = {20, 80}
-                })
-            ) {
-                CLAY(
-                    CLAY_RECTANGLE({ .color = {200, 200, 0, 255} }),
-                    CLAY_LAYOUT({
-                        .sizing = {
-                            .width = CLAY_SIZING_PERCENT(0.23),
-                            .height = CLAY_SIZING_GROW() 
-                        }
-                    }),
-                    Clay_OnHover(HandleButtonInteraction, NULL)
-                ) {}
-                CLAY(
-                    CLAY_RECTANGLE({ .color = {200, 200, 0, 255} }),
-                    CLAY_LAYOUT({
-                        .sizing = {
-                            .width = CLAY_SIZING_PERCENT(0.23),
-                            .height = CLAY_SIZING_GROW() 
-                        }
-                    }),
-                    Clay_OnHover(HandleButtonInteraction, NULL)
-                ) {}
-                CLAY(
-                    CLAY_RECTANGLE({ .color = {200, 200, 0, 0} }),
-                    CLAY_LAYOUT({
-                        .sizing = {
-                            .width = CLAY_SIZING_GROW(),
-                            .height = CLAY_SIZING_GROW() 
-                        }
-                    }),
-                    Clay_OnHover(HandleButtonInteraction, NULL)
-                ) {}
-                CLAY(
-                    CLAY_RECTANGLE({ .color = {200, 200, 0, 255} }),
-                    CLAY_LAYOUT({
-                        .sizing = {
-                            .width = CLAY_SIZING_PERCENT(0.23),
-                            .height = CLAY_SIZING_GROW() 
-                        }
-                    }),
-                    Clay_OnHover(HandleButtonInteraction, NULL)
-                ) {}
-                CLAY(
-                    CLAY_RECTANGLE({ .color = {200, 200, 0, 255} }),
-                    CLAY_LAYOUT({
-                        .sizing = {
-                            .width = CLAY_SIZING_PERCENT(0.23),
-                            .height = CLAY_SIZING_GROW() 
-                        }
-                    }),
-                    Clay_OnHover(HandleButtonInteraction, NULL)
-                ) {}
             }
-            CLAY(
+        }) {
-                CLAY_RECTANGLE({ .color = {200, 200, 200, 255} }),
+            CLAY({
-                CLAY_LAYOUT({
+                .backgroundColor = {200, 200, 0, 255},
+                .layout = {
                     .sizing = {
-                        .width = CLAY_SIZING_GROW(),
+                        .width = CLAY_SIZING_PERCENT(0.30),
                         .height = CLAY_SIZING_GROW() 
-                    },
+                    }
-                    .padding = { 20, 20 }
+                },
-                })
+                
-            ) {
+            }) {
-                CLAY(
+                Clay_OnHover(HandleButtonInteraction, NULL);
-                    CLAY_RECTANGLE({ .color = {200, 200, 0, 255} }),
-                    CLAY_LAYOUT({
-                        .sizing = {
-                            .width = CLAY_SIZING_PERCENT(0.30),
-                            .height = CLAY_SIZING_GROW() 
-                        }
-                    }),
-                    Clay_OnHover(HandleButtonInteraction, NULL)
-                ) {}
-                ExpandContainer();
-                CLAY(
-                    CLAY_RECTANGLE({ .color = {200, 200, 0, 255} }),
-                    CLAY_LAYOUT({
-                        .sizing = {
-                            .width = CLAY_SIZING_PERCENT(0.30),
-                            .height = CLAY_SIZING_GROW() 
-                        }
-                    }),
-                    Clay_OnHover(HandleButtonInteraction, NULL)
-                ) {}
-                ExpandContainer();
-                CLAY(
-                    CLAY_RECTANGLE({ .color = {200, 200, 0, 255} }),
-                    CLAY_LAYOUT({
-                        .sizing = {
-                            .width = CLAY_SIZING_PERCENT(0.30),
-                            .height = CLAY_SIZING_GROW() 
-                        }
-                    }),
-                    Clay_OnHover(HandleButtonInteraction, NULL)
-                ) {}
-
             }
+            ExpandContainer();
+            CLAY({
+                .backgroundColor = {200, 200, 0, 255},
+                .layout = {
+                    .sizing = {
+                        .width = CLAY_SIZING_PERCENT(0.30),
+                        .height = CLAY_SIZING_GROW() 
+                    }
+                }
+            }) {
+                Clay_OnHover(HandleButtonInteraction, NULL);
+            }
+            ExpandContainer();
+            CLAY({
+                .backgroundColor = {200, 200, 0, 255},
+                .layout = {
+                    .sizing = {
+                        .width = CLAY_SIZING_PERCENT(0.30),
+                        .height = CLAY_SIZING_GROW() 
+                    }
+                }
+            }) {
+                Clay_OnHover(HandleButtonInteraction, NULL);
+            }
+
         }
+    }
 
-        Clay_RenderCommandArray renderCommands = Clay_EndLayout();
+    return Clay_EndLayout();
+}
 
-        BeginDrawing();
+void UpdateDrawFrame(Font* fonts)
-        ClearBackground(BLACK);
+{
-        Clay_Raylib_Render(renderCommands);
+    Vector2 mouseWheelDelta = GetMouseWheelMoveV();
-        EndDrawing();
+    float mouseWheelX = mouseWheelDelta.x;
+    float mouseWheelY = mouseWheelDelta.y;
+
+    //----------------------------------------------------------------------------------
+    // Handle scroll containers
+    Clay_Vector2 mousePosition = RAYLIB_VECTOR2_TO_CLAY_VECTOR2(GetMousePosition());
+    Clay_SetPointerState(mousePosition, IsMouseButtonDown(0));
+    Clay_SetLayoutDimensions((Clay_Dimensions) { (float)GetScreenWidth(), (float)GetScreenHeight() });
+
+    // Generate the auto layout for rendering
+    Clay_RenderCommandArray renderCommands = CreateLayout();
+    // RENDERING ---------------------------------
+    BeginDrawing();
+    ClearBackground(BLACK);
+    Clay_Raylib_Render(renderCommands, fonts);
+    EndDrawing();
+    //----------------------------------------------------------------------------------
+}
+
+int main(void)
+{
+    uint64_t totalMemorySize = Clay_MinMemorySize();
+    Clay_Arena clayMemory = Clay_CreateArenaWithCapacityAndMemory(totalMemorySize, malloc(totalMemorySize));
+    Clay_Initialize(clayMemory, (Clay_Dimensions) { (float)GetScreenWidth(), (float)GetScreenHeight() }, (Clay_ErrorHandler) { HandleClayErrors, 0 });
+    Clay_Raylib_Initialize(GetScreenWidth(), GetScreenHeight(), "PiAlarm", FLAG_VSYNC_HINT | FLAG_FULLSCREEN_MODE | FLAG_MSAA_4X_HINT);
+    HideCursor();
+
+    while (!WindowShouldClose()) {
+        UpdateDrawFrame(NULL);
     }
     CloseWindow();
     return 0;