Adding hot reload + attempting to style stuff

assets/fonts/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2016 The Hubballi Project Authors (https://github.com/erinmclaughlin/Hubballi)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

assets/main.rml

@@ -9,16 +9,18 @@
   </head>
 
   <body data-model="app_data">
-    <h1>{{page_title}}</h1>
+    <div id="header">
+      <h1>Critterfolio</h1>
+      <button id="new-critter-btn" data-event-click="is_dialog_open = true"><div>+</div></button>
+    </div>
     
-    <button data-event-click="is_dialog_open = true">Add New Critter</button>
 
     <!-- Critter Cards -->
     <div class="critter-list">
       <button data-for="entry : critters" class="critter-card">
         <div class="critter-card-header">
           <span class="critter-id">ID: #{{entry.key}}</span>
-          <button class="btn-delete">X</button>
+          <button class="btn-delete" data-event-click="delete_critter(entry.key)">X</button>
         </div>
 
         <div class="critter-card-body">
@@ -32,9 +34,13 @@
           </div>
         </div>
       </button>
+
+      
     </div>
 
-    <!-- Modal Dialog Overlay -->
+    
+
+    <!-- Add Critter Modal Dialog Overlay -->
     <div class="modal-overlay" data-visible="is_dialog_open">
       <div class="modal-content">
         <h2>Add New Critter</h2>
@@ -57,7 +63,7 @@
         <input type="text" data-value="form.father_id" />
 
         <label>Notes:</label>
-        <input type="text" data-value="form.notes" />
+        <textarea data-value="form.notes"></textarea>
 
         <div class="modal-buttons">
           <button data-event-click="submit_add_critter">Save</button>

assets/styles/main.rcss

@@ -2,23 +2,27 @@
    RCSS User Agent Defaults (Plain HTML Style)
    ========================================================================== */
 
-/* Core Application Window Foundation */
+* {
+    box-sizing: border-box;
+    font-family: "Hubballi";
+
+    --background-color: #f5e8df;
+    --foreground-color: #0a1347;
+}
+
 body {
     display: block;
     width: 100vw;
     height: 100vh;
-    font-family: "rmlui-debugger-font";
+    /* font-family: "rmlui-debugger-font"; */
-    font-size: 16px;
+    font-size: 15pt;
-    background-color: #ffffff;
+    background-color: var(--background-color);
-    color: #000000;
+    color: var(--foreground-color);
     margin: 0px;
-    padding: 0px;
+    padding: 20px;
 }
 
 /* Generic Structural Layout Defaults */
-* {
-    box-sizing: border-box;
-}
 
 div, section, article, header, footer, main, nav, aside {
     display: block;
@@ -143,41 +147,41 @@ button, input, select, textarea {
     vertical-align: middle;
 }
 
-/* Traditional gray bevel button style */
 button, input[type="submit"], input[type="button"] {
     padding: 4px 12px;
     min-width: 40px;
-    background-color: #e1e1e1;
+    background-color: transparent;
-    color: #000000;
+    color: var(--foreground-color);
-    border: 1px #767676;
+    border: 1px var(--foreground-color);
     text-align: center;
 }
 
 button:hover, input[type="submit"]:hover, input[type="button"]:hover {
-    background-color: #d0d0d0;
+    background-color: transparent;
-    border: 1px #4f4f4f;
+    border: 2px var(--foreground-color);
 }
 
 button:active, input[type="submit"]:active, input[type="button"]:active {
     background-color: #b5b5b5;
-    border: 1px #000000;
+    border: 2px var(--foreground-color);
 }
 
 /* Standard text field styling */
 input[type="text"], input[type="password"], textarea {
     padding: 4px;
-    background-color: #ffffff;
+    background-color: transparent;
-    color: #000000;
+    color: var(--foreground-color);
-    border: 1px #767676;
+    border: 1px var(--foreground-color);
 }
 
 input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
-    border: 1px #005aff;
+    /* border: 1px #005aff; */
+    border-width: 2px;
 }
 
 textarea {
     display: block;
-    white-space: pre-wrap;
+    /* white-space: pre-wrap; */
     width: 300px;
     height: 100px;
 }
@@ -271,10 +275,36 @@ progress-value {
 /*  ===================================
     Specific app stuff 
     =================================== */
+#header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 50px;
+}
+
+#new-critter-btn {
+    height: 50px;
+    width: 50px;
+    /* border-radius: 50px; */
+    font-size: 30pt;
+    display: flex;
+    text-align: center;
+    align-items: center;
+    border-width: 2px;
+    border-color: var(--foreground-color);
+    background-color: transparent;
+    color: var(--foreground-color);
+    transition: border-width 0.2s linear-in-out;
+    
+}
+#new-critter-btn:hover {
+    border-width: 4px;
+}
 
 /* Critter Cards Container */
 .critter-list {
     display: flex;
+    flex-direction: column;
     flex-wrap: wrap;
     padding: 10px;
 }
@@ -282,19 +312,17 @@ progress-value {
 /* Interactive Card Base */
 .critter-card {
     display: block;
-    width: 220px;
+    width: 50%;
     margin: 10px;
     padding: 10px;
-    background-color: #2b2b2b;
+    background-color: transparent;
-    color: #ffffff;
+    color: var(--foreground-color);
-    border: 1px #444444;
+    border: 2px var(--foreground-color);
-    border-radius: 6px;
     text-align: left;
 }
 
 .critter-card:hover {
-    background-color: #383838;
+    border: 3px var(--foreground-color);
-    border: 1px #005aff;
 }
 
 .critter-card:active {
@@ -306,14 +334,14 @@ progress-value {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    border-bottom: 1px #444444;
+    border-bottom: 1px var(--foreground-color);
     padding-bottom: 4px;
     margin-bottom: 8px;
 }
 
 .critter-id {
-    font-size: 11px;
+    font-size: 12pt;
-    color: #aaaaaa;
+    color: var(--foreground-color);
 }
 
 .btn-delete {
@@ -336,11 +364,11 @@ progress-value {
 }
 
 .critter-thumb {
-    width: 48px;
+    width: 100px;
-    height: 48px;
+    height: 100px;
     margin-right: 10px;
-    background-color: #1a1a1a;
+    background-color: transparent;
-    border: 1px #555555;
+    border: 1px var(--foreground-color);
 }
 
 .critter-info {
@@ -349,14 +377,14 @@ progress-value {
 
 .critter-name {
     margin: 0px 0px 4px 0px;
-    font-size: 16px;
+    font-size: 20pt;
-    color: #ffffff;
+    color: var(--foreground-color);
 }
 
 .critter-info p {
     margin: 2px 0px;
-    font-size: 12px;
+    font-size: 18pt;
-    color: #dddddd;
+    color: var(--foreground-color);
 }
 
 /* Modals */
@@ -366,28 +394,47 @@ progress-value {
     left: 0px;
     width: 100%;
     height: 100%;
-    background-color: rgba(0, 0, 0, 0.6);
+    background-color: var(--background-color);
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
 .modal-content {
-    background-color: #2b2b2b;
+    background-color: transparent;
-    color: #ffffff;
+    color: var(--foreground-color);
+    border-color: var(--foreground-color);
+    border-width: 2px;
     padding: 20px;
-    border-radius: 8px;
+    border-radius: 0px;
-    width: 350px;
+    width: 80%;
+    height: 80%;
+}
+
+.modal-content h2 {
+    position: relative;
+    top: -65px;
+    background-color: var(--background-color);
+    text-align: center;
+    padding: 0px;
+    max-width: 300px;
 }
 
 .modal-content label {
     display: block;
     margin-top: 8px;
+    font-size: 20pt;
 }
 
 .modal-content input {
     width: 100%;
     margin-bottom: 8px;
+    background-color: transparent;
+    font-size: 15pt;
+}
+
+.modal-content textarea {
+    width: 100%;
 }
 
 .error {
@@ -399,4 +446,5 @@ progress-value {
     margin-top: 15px;
     display: flex;
     justify-content: space-between;
+    font-size: 18pt;
 }

src/main.cpp

@@ -4,7 +4,9 @@
 #include "../vendor/stb/stb_image.h"
 #include "../vendor/stb/stb_image_write.h"
 
+#include <GLFW/glfw3.h>
 #include <RmlUi/Core.h>
+#include <RmlUi/Core/Core.h>
 #include <RmlUi/Debugger/Debugger.h>
 #include <RmlUi/Lua/Lua.h>
 #include <RmlUi_Backend.h>
@@ -18,6 +20,7 @@ static bool is_running = false;
 static Rml::Context *ctx = nullptr;
 static std::map<int, Critter> critters;
 static std::vector<CritterEntry> critter_list;
+static Rml::ElementDocument *doc;
 static AppData app_data;
 
 void shutdown() {
@@ -53,11 +56,67 @@ bool initialize() {
     }
     std::cout << "[INFO] Main context initialized.\n";
 
+    Rml::LoadFontFace("./assets/fonts/Hubballi-Regular.ttf");
+
     Rml::Debugger::Initialise(ctx);
     return true;
 }
 
 
+bool load_document() {
+    doc = ctx->LoadDocument("./assets/main.rml");
+    if (!doc) {
+        std::cout << "[ERROR] Could not load assets/main.rml document, shutting down.\n";
+        shutdown();
+        return false;
+    }
+    std::cout << "[INFO] Document loaded\n";
+    doc->Show();
+    return true;
+}
+
+bool reload_doc() {
+    if (doc) {
+        Rml::Factory::ClearStyleSheetCache();
+        Rml::Factory::ClearTemplateCache();
+        doc->Close();
+        doc = nullptr;
+    }
+
+    if (!load_document()) {
+        return false;
+    }
+
+    return true;
+}
+
+
+bool f5_was_pressed = false;
+bool f8_was_pressed = false;
+
+void handle_input() {
+    GLFWwindow *window = glfwGetCurrentContext();
+    if(window) {
+        // Reload ui
+        bool f5_state = glfwGetKey(window, GLFW_KEY_F5);
+        if (f5_state == GLFW_PRESS && !f5_was_pressed) {
+            f5_was_pressed = true;
+            reload_doc();
+        } else if (f5_state == GLFW_RELEASE) {
+            f5_was_pressed = false;
+        }
+
+        // Toggle debugger window
+        bool f8_state = glfwGetKey(window, GLFW_KEY_F8);
+        if (f8_state == GLFW_PRESS && !f8_was_pressed) {
+            f8_was_pressed = true;
+            bool is_visible = Rml::Debugger::IsVisible();
+            Rml::Debugger::SetVisible(!is_visible);
+        } else if (f8_state == GLFW_RELEASE) {
+            f8_was_pressed = false;
+        }
+    }
+}
 
 int main() {
     std::cout << "[INFO] Starting CritterFolio...\n";
@@ -77,18 +136,19 @@ int main() {
         return 1;
     }
 
-    Rml::ElementDocument *doc = ctx->LoadDocument("./assets/main.rml");
+    if (!load_document()) {
-    if (!doc) {
-        std::cout << "[ERROR] Could not load assets/main.rml document, shutting down.\n";
         shutdown();
         return 1;
     }
     std::cout << "[INFO] Main page loaded.\n";
 
-    doc->Show();
+    
 
     while (is_running) {
         is_running = Backend::ProcessEvents(ctx);
+
+        handle_input();
+
         ctx->Update();
         Backend::BeginFrame();
         ctx->Render();

src/ui.cpp

@@ -83,6 +83,19 @@ bool setup_data_binding(Rml::Context *context, Rml::DataModelHandle &model_handl
         }
     });
 
+    dmc.BindEventCallback("delete_critter", [&app_data, &critters, &critter_list](Rml::DataModelHandle handle, Rml::Event &, const Rml::VariantList &args) {
+        if (args.empty()) return;
+
+        int target_id = args[0].Get<int>();
+
+        if (db_delete_critter(target_id)) {
+            critters.erase(target_id);
+            sync_map_to_list(critters, critter_list);
+            handle.DirtyVariable("critters");
+            std::cout << "[INFO] Deleted critter with ID #" << target_id << std::endl;
+        }
+    }); 
+
     model_handle = dmc.GetModelHandle();
     return true;
 }