mirror of
https://github.com/nicbarker/clay.git
synced 2025-04-20 13:18:03 +00:00
Compress some UI functions and remove repetition
This commit is contained in:
Nic Barker
parent
c7d81b9533
commit
fe7579033a
1
bindings/odin/.gitignore
vendored
1
bindings/odin/.gitignore
vendored
@ -1,3 +1,4 @@
|
||||
odin
|
||||
odin.dSYM
|
||||
.vscode
|
||||
examples/clay-official-website/clay-official-website
|
||||
@ -4,3 +4,10 @@ This directory contains bindings for the [Odin](odin-lang.org) programming langu
|
||||
|
||||
If you haven't taken a look at the [full documentation for clay](https://github.com/nicbarker/clay/blob/main/README.md), it's recommended that you take a look there first to familiarise yourself with the general concepts. This README is abbreviated and applies to using clay in Odin specifically.
|
||||
|
||||
### Quick Start
|
||||
|
||||
- Copy the `clay-odin` directory into your project
|
||||
|
||||
- `import clay "clay-odin"`
|
||||
|
||||
-
|
||||
@ -220,22 +220,9 @@ FeatureBlocksMobile :: proc() {
|
||||
}
|
||||
}
|
||||
|
||||
DeclarativeSyntaxPageDesktop :: proc() {
|
||||
if clay.Container(
|
||||
clay.ID("SyntaxPageDesktop"),
|
||||
clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingFit({min = cast(f32)windowHeight - 50})}, childAlignment = {y = .CENTER}, padding = {x = 50}}),
|
||||
) {
|
||||
if clay.Border(
|
||||
clay.ID("SyntaxPage"),
|
||||
clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingGrow({})}, childAlignment = {y = .CENTER}, padding = {32, 32}, childGap = 32}),
|
||||
clay.BorderConfig({left = {2, COLOR_RED}, right = {2, COLOR_RED}}),
|
||||
) {
|
||||
if clay.Container(clay.ID("SyntaxPageLeftText"), clay.Layout({sizing = {width = clay.SizingPercent(0.5)}, layoutDirection = .TOP_TO_BOTTOM, childGap = 8})) {
|
||||
clay.Text(
|
||||
clay.ID("SyntaxPageTextTitle"),
|
||||
clay.MakeString("Declarative Syntax"),
|
||||
clay.TextConfig({fontSize = 52, fontId = FONT_ID_TITLE_52, textColor = COLOR_RED}),
|
||||
)
|
||||
DeclarativeSyntaxPage :: proc(titleTextConfig: clay.TextElementConfig, widthSizing: clay.SizingAxis) {
|
||||
if clay.Container(clay.ID("SyntaxPageLeftText"), clay.Layout({sizing = {width = widthSizing}, layoutDirection = .TOP_TO_BOTTOM, childGap = 8})) {
|
||||
clay.Text(clay.ID("SyntaxPageTextTitle"), clay.MakeString("Declarative Syntax"), clay.TextConfig(titleTextConfig))
|
||||
if clay.Container(clay.ID("SyntaxSpacer"), clay.Layout({sizing = {width = clay.SizingGrow({max = 16})}})) {}
|
||||
clay.Text(
|
||||
clay.ID("SyntaxPageTextSubTitle1"),
|
||||
@ -253,13 +240,26 @@ DeclarativeSyntaxPageDesktop :: proc() {
|
||||
clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_28, textColor = COLOR_RED}),
|
||||
)
|
||||
}
|
||||
if clay.Container(clay.ID("SyntaxPageRightImage"), clay.Layout({sizing = {width = clay.SizingPercent(0.50)}, childAlignment = {x = .CENTER}})) {
|
||||
if clay.Container(clay.ID("SyntaxPageRightImage"), clay.Layout({sizing = {width = widthSizing}, childAlignment = {x = .CENTER}})) {
|
||||
if clay.Image(
|
||||
clay.ID("SyntaxPageRightImage"),
|
||||
clay.Layout({sizing = {width = clay.SizingGrow({max = 568})}}),
|
||||
clay.ImageConfig({imageData = &syntaxImage, sourceDimensions = {1136, 1194}}),
|
||||
) {}
|
||||
}
|
||||
}
|
||||
|
||||
DeclarativeSyntaxPageDesktop :: proc() {
|
||||
if clay.Container(
|
||||
clay.ID("SyntaxPageDesktop"),
|
||||
clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingFit({min = cast(f32)windowHeight - 50})}, childAlignment = {y = .CENTER}, padding = {x = 50}}),
|
||||
) {
|
||||
if clay.Border(
|
||||
clay.ID("SyntaxPage"),
|
||||
clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingGrow({})}, childAlignment = {y = .CENTER}, padding = {32, 32}, childGap = 32}),
|
||||
clay.BorderConfig({left = {2, COLOR_RED}, right = {2, COLOR_RED}}),
|
||||
) {
|
||||
DeclarativeSyntaxPage({fontSize = 48, fontId = FONT_ID_TITLE_48, textColor = COLOR_LIGHT}, clay.SizingGrow({}))
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -277,32 +277,7 @@ DeclarativeSyntaxPageMobile :: proc() {
|
||||
},
|
||||
),
|
||||
) {
|
||||
if clay.Container(clay.ID("SyntaxPageLeftText"), clay.Layout({sizing = {width = clay.SizingGrow({})}, layoutDirection = .TOP_TO_BOTTOM, childGap = 8})) {
|
||||
clay.Text(clay.ID("SyntaxPageTextTitle"), clay.MakeString("Declarative Syntax"), clay.TextConfig({fontSize = 48, fontId = FONT_ID_TITLE_48, textColor = COLOR_RED}))
|
||||
if clay.Container(clay.ID("SyntaxSpacer"), clay.Layout({sizing = {width = clay.SizingGrow({max = 16})}})) {}
|
||||
clay.Text(
|
||||
clay.ID("SyntaxPageTextSubTitle1"),
|
||||
clay.MakeString("Flexible and readable declarative syntax with nested UI element hierarchies."),
|
||||
clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_28, textColor = COLOR_RED}),
|
||||
)
|
||||
clay.Text(
|
||||
clay.ID("SyntaxPageTextSubTitle2"),
|
||||
clay.MakeString("Mix elements with standard C code like loops, conditionals and functions."),
|
||||
clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_28, textColor = COLOR_RED}),
|
||||
)
|
||||
clay.Text(
|
||||
clay.ID("SyntaxPageTextSubTitle3"),
|
||||
clay.MakeString("Create your own library of re-usable components from UI primitives like text, images and rectangles."),
|
||||
clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_28, textColor = COLOR_RED}),
|
||||
)
|
||||
}
|
||||
if clay.Container(clay.ID("SyntaxPageRightImage"), clay.Layout({sizing = {width = clay.SizingGrow({})}, childAlignment = {x = .CENTER}})) {
|
||||
if clay.Image(
|
||||
clay.ID("SyntaxPageRightImage"),
|
||||
clay.Layout({sizing = {width = clay.SizingGrow({max = 568})}}),
|
||||
clay.ImageConfig({imageData = &syntaxImage, sourceDimensions = {1136, 1194}}),
|
||||
) {}
|
||||
}
|
||||
DeclarativeSyntaxPage({fontSize = 52, fontId = FONT_ID_TITLE_52, textColor = COLOR_LIGHT}, clay.SizingGrow({}))
|
||||
}
|
||||
}
|
||||
|
||||
@ -312,74 +287,9 @@ ColorLerp :: proc(a: clay.Color, b: clay.Color, amount: f32) -> clay.Color {
|
||||
|
||||
LOREM_IPSUM_TEXT: clay.String = clay.MakeString("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.")
|
||||
|
||||
HighPerformancePageDesktop :: proc(lerpValue: f32) {
|
||||
if clay.Rectangle(
|
||||
clay.ID("PerformanceDesktop"),
|
||||
clay.Layout(
|
||||
{sizing = {clay.SizingGrow({}), clay.SizingFit({min = cast(f32)windowHeight - 50})}, childAlignment = {y = .CENTER}, padding = {x = 82, y = 32}, childGap = 64},
|
||||
),
|
||||
clay.RectangleConfig({color = COLOR_RED}),
|
||||
) {
|
||||
if clay.Container(clay.ID("PerformanceLeftText"), clay.Layout({sizing = {width = clay.SizingPercent(0.5)}, layoutDirection = .TOP_TO_BOTTOM, childGap = 8})) {
|
||||
clay.Text(clay.ID("PerformanceTextTitle"), clay.MakeString("High Performance"), clay.TextConfig({fontSize = 52, fontId = FONT_ID_TITLE_52, textColor = COLOR_LIGHT}))
|
||||
if clay.Container(clay.ID("SyntaxSpacer"), clay.Layout({sizing = {width = clay.SizingGrow({max = 16})}})) {}
|
||||
clay.Text(
|
||||
clay.IDI("PerformanceTextSubTitle", 1),
|
||||
clay.MakeString("Fast enough to recompute your entire UI every frame."),
|
||||
clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_28, textColor = COLOR_LIGHT}),
|
||||
)
|
||||
clay.Text(
|
||||
clay.IDI("PerformanceTextSubTitle", 2),
|
||||
clay.MakeString("Small memory footprint (3.5mb default) with static allocation & reuse. No malloc / free."),
|
||||
clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_28, textColor = COLOR_LIGHT}),
|
||||
)
|
||||
clay.Text(
|
||||
clay.IDI("PerformanceTextSubTitle", 3),
|
||||
clay.MakeString("Simplify animations and reactive UI design by avoiding the standard performance hacks."),
|
||||
clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_28, textColor = COLOR_LIGHT}),
|
||||
)
|
||||
}
|
||||
if clay.Container(clay.ID("PerformanceRightImageOuter"), clay.Layout({sizing = {width = clay.SizingPercent(0.50)}, childAlignment = {x = .CENTER}})) {
|
||||
if clay.Border(
|
||||
clay.ID("PerformanceBorder"),
|
||||
clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingFixed(400)}}),
|
||||
clay.BorderConfigAll({width = 2, color = COLOR_LIGHT}),
|
||||
) {
|
||||
if clay.Rectangle(
|
||||
clay.ID("AnimationDemoContainerLeft"),
|
||||
clay.Layout({sizing = {clay.SizingPercent(0.3 + 0.4 * lerpValue), clay.SizingGrow({})}, childAlignment = {y = .CENTER}, padding = {32, 32}}),
|
||||
clay.RectangleConfig({color = ColorLerp(COLOR_RED, COLOR_ORANGE, lerpValue)}),
|
||||
) {
|
||||
clay.Text(clay.ID("AnimationDemoTextLeft"), LOREM_IPSUM_TEXT, clay.TextConfig({fontSize = 16, fontId = FONT_ID_BODY_16, textColor = COLOR_LIGHT}))
|
||||
}
|
||||
if clay.Rectangle(
|
||||
clay.ID("AnimationDemoContainerRight"),
|
||||
clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingGrow({})}, childAlignment = {y = .CENTER}, padding = {32, 32}}),
|
||||
clay.RectangleConfig({color = ColorLerp(COLOR_ORANGE, COLOR_RED, lerpValue)}),
|
||||
) {
|
||||
clay.Text(clay.ID("AnimationDemoTextRight"), LOREM_IPSUM_TEXT, clay.TextConfig({fontSize = 16, fontId = FONT_ID_BODY_16, textColor = COLOR_LIGHT}))
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
HighPerformancePageMobile :: proc(lerpValue: f32) {
|
||||
if clay.Rectangle(
|
||||
clay.ID("PerformanceMobile"),
|
||||
clay.Layout(
|
||||
{
|
||||
layoutDirection = .TOP_TO_BOTTOM,
|
||||
sizing = {clay.SizingGrow({}), clay.SizingFit({min = cast(f32)windowHeight - 50})},
|
||||
childAlignment = {x = .CENTER, y = .CENTER},
|
||||
padding = {x = 16, y = 32},
|
||||
childGap = 32,
|
||||
},
|
||||
),
|
||||
clay.RectangleConfig({color = COLOR_RED}),
|
||||
) {
|
||||
if clay.Container(clay.ID("PerformanceLeftText"), clay.Layout({sizing = {width = clay.SizingGrow({})}, layoutDirection = .TOP_TO_BOTTOM, childGap = 8})) {
|
||||
clay.Text(clay.ID("PerformanceTextTitle"), clay.MakeString("High Performance"), clay.TextConfig({fontSize = 48, fontId = FONT_ID_TITLE_48, textColor = COLOR_LIGHT}))
|
||||
HighPerformancePage :: proc(lerpValue: f32, titleTextConfig: clay.TextElementConfig, widthSizing: clay.SizingAxis) {
|
||||
if clay.Container(clay.ID("PerformanceLeftText"), clay.Layout({sizing = {width = widthSizing}, layoutDirection = .TOP_TO_BOTTOM, childGap = 8})) {
|
||||
clay.Text(clay.ID("PerformanceTextTitle"), clay.MakeString("High Performance"), clay.TextConfig(titleTextConfig))
|
||||
if clay.Container(clay.ID("SyntaxSpacer"), clay.Layout({sizing = {width = clay.SizingGrow({max = 16})}})) {}
|
||||
clay.Text(
|
||||
clay.IDI("PerformanceTextSubTitle", 1),
|
||||
@ -397,7 +307,7 @@ HighPerformancePageMobile :: proc(lerpValue: f32) {
|
||||
clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_36, textColor = COLOR_LIGHT}),
|
||||
)
|
||||
}
|
||||
if clay.Container(clay.ID("PerformanceRightImageOuter"), clay.Layout({sizing = {width = clay.SizingGrow({})}, childAlignment = {x = .CENTER}})) {
|
||||
if clay.Container(clay.ID("PerformanceRightImageOuter"), clay.Layout({sizing = {width = widthSizing}, childAlignment = {x = .CENTER}})) {
|
||||
if clay.Border(
|
||||
clay.ID("PerformanceRightBorder"),
|
||||
clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingFixed(400)}}),
|
||||
@ -419,6 +329,35 @@ HighPerformancePageMobile :: proc(lerpValue: f32) {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
HighPerformancePageDesktop :: proc(lerpValue: f32) {
|
||||
if clay.Rectangle(
|
||||
clay.ID("PerformanceDesktop"),
|
||||
clay.Layout(
|
||||
{sizing = {clay.SizingGrow({}), clay.SizingFit({min = cast(f32)windowHeight - 50})}, childAlignment = {y = .CENTER}, padding = {x = 82, y = 32}, childGap = 64},
|
||||
),
|
||||
clay.RectangleConfig({color = COLOR_RED}),
|
||||
) {
|
||||
HighPerformancePage(lerpValue, {fontSize = 52, fontId = FONT_ID_TITLE_52, textColor = COLOR_LIGHT}, clay.SizingPercent(0.5))
|
||||
}
|
||||
}
|
||||
|
||||
HighPerformancePageMobile :: proc(lerpValue: f32) {
|
||||
if clay.Rectangle(
|
||||
clay.ID("PerformanceMobile"),
|
||||
clay.Layout(
|
||||
{
|
||||
layoutDirection = .TOP_TO_BOTTOM,
|
||||
sizing = {clay.SizingGrow({}), clay.SizingFit({min = cast(f32)windowHeight - 50})},
|
||||
childAlignment = {x = .CENTER, y = .CENTER},
|
||||
padding = {x = 16, y = 32},
|
||||
childGap = 32,
|
||||
},
|
||||
),
|
||||
clay.RectangleConfig({color = COLOR_RED}),
|
||||
) {
|
||||
HighPerformancePage(lerpValue, {fontSize = 48, fontId = FONT_ID_TITLE_48, textColor = COLOR_LIGHT}, clay.SizingGrow({}))
|
||||
}
|
||||
}
|
||||
|
||||
@ -444,22 +383,9 @@ RendererButtonInactive :: proc(id: u32, index: u32, text: clay.String) {
|
||||
}
|
||||
}
|
||||
|
||||
RendererPageDesktop :: proc() {
|
||||
if clay.Container(
|
||||
clay.ID("RendererPageDesktop"),
|
||||
clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingFit({min = cast(f32)windowHeight - 50})}, childAlignment = {y = .CENTER}, padding = {x = 50}}),
|
||||
) {
|
||||
if clay.Border(
|
||||
clay.ID("RendererPage"),
|
||||
clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingGrow({})}, childAlignment = {y = .CENTER}, padding = {32, 32}, childGap = 32}),
|
||||
clay.BorderConfig({left = {2, COLOR_RED}, right = {2, COLOR_RED}}),
|
||||
) {
|
||||
if clay.Container(clay.ID("RendererLeftText"), clay.Layout({sizing = {width = clay.SizingPercent(0.5)}, layoutDirection = .TOP_TO_BOTTOM, childGap = 8})) {
|
||||
clay.Text(
|
||||
clay.ID("RendererTextTitle"),
|
||||
clay.MakeString("Renderer & Platform Agnostic"),
|
||||
clay.TextConfig({fontSize = 52, fontId = FONT_ID_TITLE_56, textColor = COLOR_RED}),
|
||||
)
|
||||
RendererPage :: proc(titleTextConfig: clay.TextElementConfig, widthSizing: clay.SizingAxis) {
|
||||
if clay.Container(clay.ID("RendererLeftText"), clay.Layout({sizing = {width = widthSizing}, layoutDirection = .TOP_TO_BOTTOM, childGap = 8})) {
|
||||
clay.Text(clay.ID("RendererTextTitle"), clay.MakeString("Renderer & Platform Agnostic"), clay.TextConfig(titleTextConfig))
|
||||
if clay.Container(clay.ID("Spacer"), clay.Layout({sizing = {width = clay.SizingGrow({max = 16})}})) {}
|
||||
clay.Text(
|
||||
clay.IDI("RendererTextSubTitle", 1),
|
||||
@ -479,7 +405,7 @@ RendererPageDesktop :: proc() {
|
||||
}
|
||||
if clay.Container(
|
||||
clay.ID("RendererRightText"),
|
||||
clay.Layout({sizing = {width = clay.SizingPercent(0.5)}, childAlignment = {x = .CENTER}, layoutDirection = .TOP_TO_BOTTOM, childGap = 16}),
|
||||
clay.Layout({sizing = {width = widthSizing}, childAlignment = {x = .CENTER}, layoutDirection = .TOP_TO_BOTTOM, childGap = 16}),
|
||||
) {
|
||||
clay.Text(
|
||||
clay.ID("RendererTextRightTitle"),
|
||||
@ -489,6 +415,19 @@ RendererPageDesktop :: proc() {
|
||||
if clay.Container(clay.ID("Spacer"), clay.Layout({sizing = {width = clay.SizingGrow({max = 32})}})) {}
|
||||
RendererButtonActive(clay.IDI("RendererSelectButtonActive", 0), 0, clay.MakeString("Raylib Renderer"))
|
||||
}
|
||||
}
|
||||
|
||||
RendererPageDesktop :: proc() {
|
||||
if clay.Container(
|
||||
clay.ID("RendererPageDesktop"),
|
||||
clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingFit({min = cast(f32)windowHeight - 50})}, childAlignment = {y = .CENTER}, padding = {x = 50}}),
|
||||
) {
|
||||
if clay.Border(
|
||||
clay.ID("RendererPage"),
|
||||
clay.Layout({sizing = {clay.SizingGrow({}), clay.SizingGrow({})}, childAlignment = {y = .CENTER}, padding = {32, 32}, childGap = 32}),
|
||||
clay.BorderConfig({left = {2, COLOR_RED}, right = {2, COLOR_RED}}),
|
||||
) {
|
||||
RendererPage({fontSize = 52, fontId = FONT_ID_TITLE_52, textColor = COLOR_RED}, clay.SizingPercent(0.5))
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -507,38 +446,7 @@ RendererPageMobile :: proc() {
|
||||
),
|
||||
clay.RectangleConfig({color = COLOR_LIGHT}),
|
||||
) {
|
||||
if clay.Container(clay.ID("RendererLeftText"), clay.Layout({sizing = {width = clay.SizingGrow({})}, layoutDirection = .TOP_TO_BOTTOM, childGap = 8})) {
|
||||
clay.Text(
|
||||
clay.ID("RendererTextTitle"),
|
||||
clay.MakeString("Renderer & Platform Agnostic"),
|
||||
clay.TextConfig({fontSize = 48, fontId = FONT_ID_TITLE_56, textColor = COLOR_RED}),
|
||||
)
|
||||
if clay.Container(clay.ID("Spacer"), clay.Layout({sizing = {width = clay.SizingGrow({max = 16})}})) {}
|
||||
clay.Text(
|
||||
clay.IDI("RendererTextSubTitle", 1),
|
||||
clay.MakeString("Clay outputs a sorted array of primitive render commands, such as RECTANGLE, TEXT or IMAGE."),
|
||||
clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_28, textColor = COLOR_RED}),
|
||||
)
|
||||
clay.Text(
|
||||
clay.IDI("RendererTextSubTitle", 2),
|
||||
clay.MakeString("Write your own renderer in a few hundred lines of code, or use the provided examples for Raylib, WebGL canvas and more."),
|
||||
clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_28, textColor = COLOR_RED}),
|
||||
)
|
||||
clay.Text(
|
||||
clay.IDI("RendererTextSubTitle", 3),
|
||||
clay.MakeString("There's even an HTML renderer - you're looking at it right now!"),
|
||||
clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_28, textColor = COLOR_RED}),
|
||||
)
|
||||
}
|
||||
if clay.Container(clay.ID("RendererRightText"), clay.Layout({sizing = {width = clay.SizingGrow({})}, layoutDirection = .TOP_TO_BOTTOM, childGap = 16})) {
|
||||
clay.Text(
|
||||
clay.ID("RendererTextRightTitle"),
|
||||
clay.MakeString("Try changing renderer!"),
|
||||
clay.TextConfig({fontSize = 36, fontId = FONT_ID_BODY_36, textColor = COLOR_ORANGE}),
|
||||
)
|
||||
if clay.Container(clay.ID("Spacer"), clay.Layout({sizing = {width = clay.SizingGrow({max = 32})}})) {}
|
||||
RendererButtonActive(clay.IDI("RendererSelectButtonActive", 0), 0, clay.MakeString("Raylib Renderer"))
|
||||
}
|
||||
RendererPage({fontSize = 48, fontId = FONT_ID_TITLE_48, textColor = COLOR_RED}, clay.SizingGrow({}))
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user