UART_clay/include/shared_layout.c

#ifndef UART_CLAY_COMMON_LAYOUT_H
#define UART_CLAY_COMMON_LAYOUT_H

#include "uart_func.c"

typedef enum { MAIN_FONT, SMALL_FONT } FONT_ID;

const Clay_Color COLOR_RED = {255, 45, 0, 255};
const Clay_Color COLOR_GREEN = {25, 255, 25, 255};
const Clay_Color COLOR_BLUE = {0, 120, 255, 255};
const Clay_Color COLOR_ORANGE = {225, 127, 0, 255};
const Clay_Color COLOR_LIGHT = {224, 215, 210, 255};
const Clay_Color COLOR_BLACK = {0, 0, 0, 255};

const Clay_Sizing EXPAND = { CLAY_SIZING_GROW(0), CLAY_SIZING_GROW(0) };
const Clay_ChildAlignment CENTER_X_Y = { .x = CLAY_ALIGN_X_CENTER, .y = CLAY_ALIGN_Y_CENTER };

const Clay_LayoutConfig BUTTON_CONFIG = {
    .sizing = EXPAND,
    .childAlignment = CENTER_X_Y
};

const Clay_TextElementConfig LARGE_TEXT = { .textColor = COLOR_BLACK, .fontId = MAIN_FONT, .fontSize = 30 };

Clay_String modal_message;

Clay_Color darken(const Clay_Color color, const int scale) {
    return (Clay_Color){
        color.r * (100 - scale) / 100,
        color.g * (100 - scale) / 100,
        color.b * (100 - scale) / 100,
        color.a
    };
}

void toggle_red(Clay_ElementId elementId, Clay_PointerData pointerInfo, intptr_t userData) {
    const uart_data *data = (uart_data *)userData;

    if (pointerInfo.state == CLAY_POINTER_DATA_PRESSED_THIS_FRAME) {
        constexpr size_t response_length = 15;
        handle_uart(data, 'r', response_length);
        modal_message.length = response_length - 2;
        UART_modal_show = true;
    }
}

void toggle_green(Clay_ElementId elementId, Clay_PointerData pointerInfo, intptr_t userData) {
    const uart_data *data = (uart_data *)userData;

    if (pointerInfo.state == CLAY_POINTER_DATA_PRESSED_THIS_FRAME) {
        constexpr size_t response_length = 17;
        handle_uart(data, 'g', response_length);
        modal_message.length = response_length - 2;

        UART_modal_show = true;
    }
}

void toggle_blue(Clay_ElementId elementId, Clay_PointerData pointerInfo, intptr_t userData) {
    const uart_data *data = (uart_data *)userData;

    if (pointerInfo.state == CLAY_POINTER_DATA_PRESSED_THIS_FRAME) {
        constexpr size_t response_length = 16;
        handle_uart(data, 'b', response_length);
        modal_message.length = response_length - 2;
        UART_modal_show = true;
    }
}

void toggle_orange(Clay_ElementId elementId, Clay_PointerData pointerInfo, intptr_t userData) {
    const uart_data *data = (uart_data *)userData;

    if (pointerInfo.state == CLAY_POINTER_DATA_PRESSED_THIS_FRAME) {
        constexpr size_t response_length = 18;
        handle_uart(data, 'o', response_length);
        modal_message.length = response_length - 2;
        UART_modal_show = true;
    }
}

void hide_modal(Clay_ElementId elementId, Clay_PointerData pointerInfo, intptr_t userData) {
    if (pointerInfo.state == CLAY_POINTER_DATA_PRESSED_THIS_FRAME) {
        UART_modal_show = false;
    }
}

void Button(const Clay_String label, const Clay_Color color, void (*onHoverFunction)(Clay_ElementId elementId, Clay_PointerData pointerInfo, intptr_t userData), const intptr_t data) {
    CLAY_AUTO_ID({
        .layout = BUTTON_CONFIG, .backgroundColor = color, .cornerRadius = CLAY_CORNER_RADIUS(16)
    }) {
        Clay_OnHover(onHoverFunction, data);
        CLAY_TEXT(label, (void *)&LARGE_TEXT);
    }
}

void Modal() {
    CLAY_AUTO_ID({
        .layout = {
            .layoutDirection = CLAY_TOP_TO_BOTTOM,
            .sizing = { .height = CLAY_SIZING_PERCENT(0.25f), .width = CLAY_SIZING_PERCENT(0.55f) },
            .childAlignment = CENTER_X_Y,
            .padding = CLAY_PADDING_ALL(16),
            .childGap = 8,
        },
        .cornerRadius = CLAY_CORNER_RADIUS(16),
        .floating = {
            .attachTo = CLAY_ATTACH_TO_PARENT,
            .attachPoints = { .element = CLAY_ATTACH_POINT_CENTER_CENTER, .parent = CLAY_ATTACH_POINT_CENTER_CENTER }
        },
        .backgroundColor = darken(COLOR_LIGHT, 10)
    }) {
        CLAY_TEXT(modal_message, (void *)&LARGE_TEXT);
        CLAY_AUTO_ID({ .layout = { .sizing = EXPAND } });
        CLAY_AUTO_ID({
            .layout = {
                .sizing = { .height = CLAY_SIZING_FIT(), .width = CLAY_SIZING_GROW() },
                .childAlignment = CENTER_X_Y
            }, .backgroundColor = COLOR_RED, .cornerRadius = CLAY_CORNER_RADIUS(16)
        }) {
            Clay_OnHover(hide_modal, 0);
            CLAY_TEXT(CLAY_STRING("X"), (void *)&LARGE_TEXT);
        }
    }
}

Clay_RenderCommandArray Clay_CreateLayout(uart_data *data) {
    Clay_BeginLayout();
    Clay__debugViewWidth = 700;

    CLAY(CLAY_ID("Outer"),{
        .layout = {
            .layoutDirection = CLAY_TOP_TO_BOTTOM,
            .sizing = EXPAND,
            .padding = CLAY_PADDING_ALL(16),
            .childGap = 16
        },
        .backgroundColor = COLOR_LIGHT,
    }) {
        if (UART_modal_show) {
            Modal();
        }

        Button(CLAY_STRING("Red"), COLOR_RED, UART_modal_show ? nullptr : toggle_red, (intptr_t)data);
        Button(CLAY_STRING("Green"), COLOR_GREEN, UART_modal_show ? nullptr : toggle_green, (intptr_t)data);
        Button(CLAY_STRING("Blue"), COLOR_BLUE, UART_modal_show ? nullptr : toggle_blue, (intptr_t)data);
        Button(CLAY_STRING("Orange"), COLOR_ORANGE, UART_modal_show ? nullptr : toggle_orange, (intptr_t)data);
    }
    return Clay_EndLayout();
}

#endif //UART_CLAY_COMMON_LAYOUT_H