From 04239a2c6eac2eeba364d167c81c5558051e9f57 Mon Sep 17 00:00:00 2001 From: Nic Barker Date: Fri, 30 Aug 2024 21:25:48 +1200 Subject: [PATCH] Fix syntax errors in readme --- bindings/odin/README.md | 54 ++++++++++++++++++++++++----------- bindings/odin/test.odin | 62 +++++++++++++++++++++++++++++++++++++++++ 2 files changed, 99 insertions(+), 17 deletions(-) create mode 100644 bindings/odin/test.odin diff --git a/bindings/odin/README.md b/bindings/odin/README.md index 68038cf..15ea016 100644 --- a/bindings/odin/README.md +++ b/bindings/odin/README.md @@ -14,7 +14,7 @@ CLAY_RECTANGLE(CLAY_ID("SideBar"), CLAY_LAYOUT(.layoutDirection = CLAY_TOP_TO_BO }); ``` -```C +```Odin // Odin form of element macros if clay.Rectangle(clay.ID("SideBar"), clay.Layout({ layoutDirection = .TOP_TO_BOTTOM, sizing = { width = clay.SizingFixed(300), height = clay.SizingGrow({}) }, padding = {16, 16} }), clay.RectangleConfig({ color = COLOR_LIGHT })) { // Child elements here @@ -60,40 +60,60 @@ clay.SetPointerPosition(clay.Vector2{ mousePositionX, mousePositionY }) 5. Call [clay.BeginLayout(screenWidth, screenHeight)](https://github.com/nicbarker/clay/blob/main/README.md#clay_beginlayout) and declare your layout using the provided macros. ```Odin -COLOR_LIGHT :: clay.Color {224, 215, 210, 255} -COLOR_RED :: clay.Color {168, 66, 28, 255} -COLOR_ORANGE :: clay.Color {225, 138, 50, 255} +COLOR_LIGHT :: clay.Color{224, 215, 210, 255} +COLOR_RED :: clay.Color{168, 66, 28, 255} +COLOR_ORANGE :: clay.Color{225, 138, 50, 255} // Layout config is just a struct that can be declared statically, or inline -sidebarItemLayout :: clay.LayoutConfig { - sizing = { width = clay.SizingGrow({}), height = clay.SizingFixed(50) }, +sidebarItemLayout := clay.LayoutConfig { + sizing = {width = clay.SizingGrow({}), height = clay.SizingFixed(50)}, } // Re-useable components are just normal functions SidebarItemComponent :: proc(index: u32) { - clay.Rectangle(clay.IDI("SidebarBlob", index), sidebarItemLayout, clay.RectangleConfig({ color = COLOR_ORANGE })) {} + if clay.Rectangle(clay.IDI("SidebarBlob", index), &sidebarItemLayout, clay.RectangleConfig({color = COLOR_ORANGE})) {} } // An example function to begin the "root" of your layout tree -Clay_RenderCommandArray CreateLayout() { - Clay_BeginLayout(windowWidth, windowHeight) +CreateLayout :: proc() -> clay.ClayArray(clay.RenderCommand) { + clay.BeginLayout(windowWidth, windowHeight) // An example of laying out a UI with a fixed width sidebar and flexible width main content - // NOTE: To create a scope for child components, the Odin api uses `if` with components that have children - if clay.Rectangle(clay.ID("OuterContainer"), clay.Layout({ sizing = {clay.SizingGrow({}), clay.SizingGrow({})}, padding = {16, 16}, childGap = 16 }), clay.RectangleConfig({ color = {250,250,255,255} })) { - if clay.Rectangle(clay.ID("SideBar"), clay.Layout({ layoutDirection = .TOP_TO_BOTTOM, sizing = { width = clay.SizingFixed(300), height = clay.SizingGrow({}) }, padding = {16, 16}, childGap = 16 }), clay.RectangleConfig({ color = COLOR_LIGHT })) { - if clay.Rectangle(clay.ID("ProfilePictureOuter"), clay.Layout({ sizing = { width = clay.SizingGrow({}) }, padding = {16, 16}, childGap = 16, .childAlignment = { .y = CLAY_ALIGN_Y_CENTER } }), clay.RectangleConfig({ color = COLOR_RED })) { - if clay.Image(clay.ID("ProfilePicture"), clay.Layout({ sizing = { width = clay.SizingFixed(60), height = clay.SizingFixed(60) }}), clay.ImageConfig({ imageData = &profilePicture, height = 60, width = 60 })) {} - clay.Text(clay.ID("ProfileTitle"), clay.MakeString("Clay - UI Library"), clay.TextConfig(.fontSize = 24, .textColor = {255, 255, 255, 255})) + // NOTE: To create a scope for child components, the Odin api uses `if` with components that have children + if clay.Rectangle( + clay.ID("OuterContainer"), + clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingGrow({})}, padding = {16, 16}, childGap = 16}), + clay.RectangleConfig({color = {250, 250, 255, 255}}), + ) { + if clay.Rectangle( + clay.ID("SideBar"), + clay.Layout({layoutDirection = .TOP_TO_BOTTOM, sizing = {width = clay.SizingFixed(300), height = clay.SizingGrow({})}, padding = {16, 16}, childGap = 16}), + clay.RectangleConfig({color = COLOR_LIGHT}), + ) { + if clay.Rectangle( + clay.ID("ProfilePictureOuter"), + clay.Layout({sizing = {width = clay.SizingGrow({})}, padding = {16, 16}, childGap = 16, childAlignment = {y = .CENTER}}), + clay.RectangleConfig({color = COLOR_RED}), + ) { + if clay.Image( + clay.ID("ProfilePicture"), + clay.Layout({sizing = {width = clay.SizingFixed(60), height = clay.SizingFixed(60)}}), + clay.ImageConfig({imageData = &profilePicture, sourceDimensions = {height = 60, width = 60}}), + ) {} + clay.Text(clay.ID("ProfileTitle"), clay.MakeString("Clay - UI Library"), clay.TextConfig({fontSize = 24, textColor = {255, 255, 255, 255}})) } // Standard Odin code like loops etc work inside components - for i := 0; i < 10; i += 1 { + for i: u32 = 0; i < 10; i += 1 { SidebarItemComponent(i) } } - if clay.Rectangle(clay.ID("MainContent"), clay.Layout({ sizing = { width = clay.SizingGrow({}), height = clay.SizingGrow({}) }}), clay.RectangleConfig({ color = COLOR_LIGHT })) {} + if clay.Rectangle( + clay.ID("MainContent"), + clay.Layout({sizing = {width = clay.SizingGrow({}), height = clay.SizingGrow({})}}), + clay.RectangleConfig({color = COLOR_LIGHT}), + ) {} } // ... } diff --git a/bindings/odin/test.odin b/bindings/odin/test.odin new file mode 100644 index 0000000..24ea187 --- /dev/null +++ b/bindings/odin/test.odin @@ -0,0 +1,62 @@ +package main +import clay "clay-odin" +windowWidth :: 1024 +windowHeight :: 768 + +COLOR_LIGHT :: clay.Color{224, 215, 210, 255} +COLOR_RED :: clay.Color{168, 66, 28, 255} +COLOR_ORANGE :: clay.Color{225, 138, 50, 255} + +// Layout config is just a struct that can be declared statically, or inline +sidebarItemLayout := clay.LayoutConfig { + sizing = {width = clay.SizingGrow({}), height = clay.SizingFixed(50)}, +} + +// Re-useable components are just normal functions +SidebarItemComponent :: proc(index: u32) { + if clay.Rectangle(clay.IDI("SidebarBlob", index), &sidebarItemLayout, clay.RectangleConfig({color = COLOR_ORANGE})) {} +} + +// An example function to begin the "root" of your layout tree +CreateLayout :: proc() -> clay.ClayArray(clay.RenderCommand) { + clay.BeginLayout(windowWidth, windowHeight) + + // An example of laying out a UI with a fixed width sidebar and flexible width main content + // NOTE: To create a scope for child components, the Odin api uses `if` with components that have children + if clay.Rectangle( + clay.ID("OuterContainer"), + clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingGrow({})}, padding = {16, 16}, childGap = 16}), + clay.RectangleConfig({color = {250, 250, 255, 255}}), + ) { + if clay.Rectangle( + clay.ID("SideBar"), + clay.Layout({layoutDirection = .TOP_TO_BOTTOM, sizing = {width = clay.SizingFixed(300), height = clay.SizingGrow({})}, padding = {16, 16}, childGap = 16}), + clay.RectangleConfig({color = COLOR_LIGHT}), + ) { + if clay.Rectangle( + clay.ID("ProfilePictureOuter"), + clay.Layout({sizing = {width = clay.SizingGrow({})}, padding = {16, 16}, childGap = 16, childAlignment = {y = .CENTER}}), + clay.RectangleConfig({color = COLOR_RED}), + ) { + if clay.Image( + clay.ID("ProfilePicture"), + clay.Layout({sizing = {width = clay.SizingFixed(60), height = clay.SizingFixed(60)}}), + clay.ImageConfig({imageData = &profilePicture, sourceDimensions = {height = 60, width = 60}}), + ) {} + clay.Text(clay.ID("ProfileTitle"), clay.MakeString("Clay - UI Library"), clay.TextConfig({fontSize = 24, textColor = {255, 255, 255, 255}})) + } + + // Standard Odin code like loops etc work inside components + for i: u32 = 0; i < 10; i += 1 { + SidebarItemComponent(i) + } + } + + if clay.Rectangle( + clay.ID("MainContent"), + clay.Layout({sizing = {width = clay.SizingGrow({}), height = clay.SizingGrow({})}}), + clay.RectangleConfig({color = COLOR_LIGHT}), + ) {} + } + // ... +}