From 531ad69bcc66ecdf251e46cd2a53e423c56c2835 Mon Sep 17 00:00:00 2001 From: chris bell Date: Sun, 30 Aug 2026 18:24:15 -0500 Subject: [PATCH] simple main loop for testing --- .gitignore | 1 + CMakeLists.txt | 12 +-- assets/main.rcss | 267 +++++++++++++++++++++++++++++++++++++++++++++++ assets/main.rml | 9 ++ src/main.cpp | 55 ++++++++++ 5 files changed, 337 insertions(+), 7 deletions(-) create mode 100644 assets/main.rcss create mode 100644 assets/main.rml diff --git a/.gitignore b/.gitignore index f88dc4a..902f668 100644 --- a/.gitignore +++ b/.gitignore @@ -3,6 +3,7 @@ .vscode/ result +compile_commands.json build/ build-wasm/ diff --git a/CMakeLists.txt b/CMakeLists.txt index b28d5ef..5ed9eee 100644 --- a/CMakeLists.txt +++ b/CMakeLists.txt @@ -32,11 +32,9 @@ target_include_directories(${PROJECT_NAME} PRIVATE ${CMAKE_SOURCE_DIR}/src) set(ASSET_DIR ${CMAKE_SOURCE_DIR}/assets) -add_custom_command(TARGET ${PROJECT_NAME} POST_BUILD - COMMAND ${CMAKE_COMMAND} -E copy_directory - ${ASSET_DIR} $/assets - COMMENT "Copying assets to build output" -) - -install(TARGETS ${PROJECT_NAME} RUNTIME DESTINATION bin) +install(TARGETS ${PROJECT_NAME} DESTINATION bin) install(DIRECTORY ${ASSET_DIR} DESTINATION bin) + +target_compile_definitions(${PROJECT_NAME} PRIVATE + ASSETS_DIR="${CMAKE_SOURCE_DIR}/bin/assets" +) diff --git a/assets/main.rcss b/assets/main.rcss new file mode 100644 index 0000000..2c98cea --- /dev/null +++ b/assets/main.rcss @@ -0,0 +1,267 @@ +/* ========================================================================== + RCSS User Agent Defaults (Plain HTML Style) + ========================================================================== */ + +/* Core Application Window Foundation */ +body { + display: block; + width: 100vw; + height: 100vh; + font-family: "rmlui-debugger-font"; + font-size: 16px; + background-color: #ffffff00; + color: #ffffff; + margin: 0px; + padding: 0px; +} + +/* Generic Structural Layout Defaults */ +* { + box-sizing: border-box; +} + +div, section, article, header, footer, main, nav, aside { + display: block; +} + +span, em, strong, a { + display: inline; +} + +/* Typographic Defaults */ +p { + display: block; + margin: 1em 0px; +} + +h1, h2, h3, h4, h5, h6 { + display: block; + font-weight: bold; + margin: 0.83em 0px; +} + +h1 { font-size: 2em; } +h2 { font-size: 1.5em; } +h3 { font-size: 1.17em; } +h4 { font-size: 1em; } +h5 { font-size: 0.83em; } +h6 { font-size: 0.67em; } + +em { + font-style: italic; +} + +strong { + font-weight: bold; +} + +a { + color: #0000ee; + text-decoration: underline; +} + +a:hover { + color: #551a8b; +} + +blockquote { + display: block; + margin: 1em 40px; + padding-left: 10px; + border-left: 2px #cccccc; + color: #555555; +} + +code, pre { + font-family: "rmlui-debugger-font"; + background-color: #606060; + color: #000000; + padding: 3px; + font-style: italic; +} + +pre { + display: block; + white-space: pre; + margin: 1em 0px; + padding: 8px; +} + +/* Lists */ +ul, ol { + display: block; + margin: 1em 0px; + padding-left: 40px; +} + +li { + display: block; +} + +/* ========================================================================== + Tables + ========================================================================== */ +table { + display: table; +} + +tr { + display: table-row; +} + +td, th { + display: table-cell; + padding: 4px 8px; + text-align: left; +} + +th { + font-weight: bold; + background-color: #eaeaea; +} + +col { + display: table-column; +} + +colgroup { + display: table-column-group; +} + +thead, tbody, tfoot { + display: table-row-group; +} + +/* ========================================================================== + Form Inputs & Interactive UI Components + ========================================================================== */ +button, input, select, textarea { + display: inline-block; + font-family: "rmlui-debugger-font"; + font-size: 14px; + margin: 2px; + vertical-align: middle; +} + +/* Traditional gray bevel button style */ +button, input[type="submit"], input[type="button"] { + padding: 4px 12px; + min-width: 40px; + background-color: #e1e1e1; + color: #000000; + border: 1px #767676; + text-align: center; +} + +button:hover, input[type="submit"]:hover, input[type="button"]:hover { + background-color: #d0d0d0; + border: 1px #4f4f4f; +} + +button:active, input[type="submit"]:active, input[type="button"]:active { + background-color: #b5b5b5; + border: 1px #000000; +} + +/* Standard text field styling */ +input[type="text"], input[type="password"], textarea { + padding: 4px; + background-color: #ffffff; + color: #000000; + border: 1px #767676; +} + +input[type="text"]:focus, input[type="password"]:focus, textarea:focus { + border: 1px #005aff; +} + +textarea { + display: block; + white-space: pre-wrap; + width: 300px; + height: 100px; +} + +/* Select Box & Dropdowns */ +select { + padding: 4px; + background-color: #ffffff; + color: #000000; + border: 1px #767676; + text-align: left; +} + +/* ========================================================================== + RmlUi Specific Elements (Tabsets, Progress Bars, etc.) + ========================================================================== */ +tabset { + display: block; +} + +tabset tabs { + display: block; + border-bottom: 1px #cccccc; +} + +/* Simple default layout style for built-in tabs */ +tab { + display: inline-block; + padding: 6px 12px; + background-color: #f0f0f0; + border: 1px #cccccc; + margin-right: 2px; +} + +tab:selected { + background-color: #ffffff; + border-bottom: 1px #ffffff; /* Overlap the bottom border line */ + font-weight: bold; +} + +panel { + display: block; + padding: 10px; + background-color: #ffffff; +} + +/* Standard HTML5 / RmlUi Progress Bar Fallback */ +progress { + display: inline-block; + width: 160px; + height: 20px; + background-color: #e6e6e6; + border: 1px #b0b0b0; +} + +progress-value { + display: block; + height: 100%; + background-color: #0078d7; /* Classic Windows Blue fill */ +} + +/* ========================================================================== + Utility & Modern Layout Helpers + ========================================================================== */ +.flex { + display: flex; +} + +.flex-row { + flex-direction: row; +} + +.flex-col { + flex-direction: column; +} + +.justify-center { + justify-content: center; +} + +.align-center { + align-items: center; +} + +.hidden { + display: none; +} diff --git a/assets/main.rml b/assets/main.rml new file mode 100644 index 0000000..94a43ac --- /dev/null +++ b/assets/main.rml @@ -0,0 +1,9 @@ + + + RmlUi Raylib + + + +

Hello from RmlUi

+ + diff --git a/src/main.cpp b/src/main.cpp index e69de29..cef6dfc 100644 --- a/src/main.cpp +++ b/src/main.cpp @@ -0,0 +1,55 @@ +#include +#include +#include +#include +#include +#include +#include + +#include "backend/RaylibRenderInterface.h" +#include "backend/RaylibSystemInterface.h" +#include "backend/RaylibInput.h" + +static RaylibSystemInterface system_interface; +static RaylibRenderInterface render_interface; +static Rml::Context *ctx; + + +int main() { + + SetConfigFlags(FLAG_VSYNC_HINT | FLAG_WINDOW_RESIZABLE); + InitWindow(600, 800, "Raylib + RmlUi"); + SetTargetFPS(60); + + Rml::SetSystemInterface(&system_interface); + Rml::SetRenderInterface(&render_interface); + Rml::Initialise(); + + ctx = Rml::CreateContext("main", Rml::Vector2i(600, 800)); + Rml::Debugger::Initialise(ctx); + + auto doc = ctx->LoadDocument("assets/main.rml"); + doc->Show(); + + while (!WindowShouldClose()) { + + if (IsWindowResized()) { + ctx->SetDimensions(Rml::Vector2i(GetScreenWidth(), GetScreenHeight())); + } + + ForwardInputToRml(ctx); + ctx->Update(); + + + BeginDrawing(); + ClearBackground(BLACK); + DrawFPS(10, 10); + DrawText("Hello!", GetScreenWidth()/2, GetScreenHeight()/2, 10, RAYWHITE); + ctx->Render(); + EndDrawing(); + } + + CloseWindow(); + + return 0; +}