Adding template project

assets/pages/home.rml

@@ -0,0 +1,14 @@
+<div id="page-root" class="page">
+    <h1>Home</h1>
+    <p>This is an RmlUi template project with some nice built in features such as:</p>
+    <ul>
+        <li>- Lua and SVG plugins enabled</li>
+        <li>- A shell + page loading system with scoped stylesheets and lua functionality</li>
+        <li>- Hot reload when pressing F5</li>
+        <li>- Basic application state management</li>
+        <li>- A basic stylesheet for common elements</li>
+        <li>- Easy custom controls system</li>
+        <li>- Optional Raylib context</li>
+        <li>- Nix flake for easy development/building</li>
+    </ul>
+</div>

assets/pages/lua-test.lua

@@ -0,0 +1,17 @@
+LuaTest = {}
+
+local counter = 0
+
+function LuaTest.Test(event)
+    counter = counter + 1
+
+    local document = event.current_element.owner_document
+
+    local target = document:GetElementById("lua-counter")
+    if target then
+        target.inner_rml = "Lua Counter: " .. counter
+    end
+
+    print("Lua counter incremented to: " .. counter)
+
+end

assets/pages/lua-test.rml

@@ -0,0 +1,11 @@
+<div id="page-root">
+    <h1>Lua test page</h1>
+    <p>This button uses <code>NavigateTo('about')</code> lua code instead of being harcoded in a C++ PageBase class:</p>
+    <button onclick="NavigateTo('about')">Go to About Page</button>
+
+    <p>If you have a .lua file with the same name as the page in the pages directory, it will be loaded at runtime so you can add functionality to a page like this:</p>
+
+    <p>This button calls <code>LuaTest.Test()</code> from the scoped `lua-test.lua` file</p>
+    <button onclick="LuaTest.Test(event)">Click me!</button>
+    <p id="lua-counter"></p>
+</div>

assets/pages/test-page.lua

@@ -0,0 +1,28 @@
+TestPage = {}
+
+local maxHp = 100
+local currentHp = 100
+
+function TestPage.Damage(event)
+
+    currentHp = currentHp - 5
+
+    local document = event.current_element.owner_document
+    local target = document:GetElementById("hp-bar")
+
+    if target then
+        target:SetAttribute("current", currentHp)
+    end
+
+end
+
+function TestPage.Heal(event)
+    currentHp = currentHp + 5
+
+    local document = event.current_element.owner_document
+    local target = document:GetElementById("hp-bar")
+
+    if target then
+        target:SetAttribute("current", currentHp)
+    end
+end

assets/pages/test-page.rcss

@@ -0,0 +1,17 @@
+#page-root h1 {
+    color: red;
+}
+
+.healthbar-track {
+    display: block;
+    width: 200px;
+    height: 16px;
+    background-color: #3c3c3c;
+    border: 1px #666666;
+}
+
+.healthbar-fill {
+    display: block;
+    height: 100%;
+    background-color: #ffffff;
+}

assets/pages/test-page.rml

@@ -0,0 +1,13 @@
+<div id="page-root" data-model="test-page" class="page">
+    <h1>Test page</h1>
+    <p>{{greeting}}</p>
+    <button id="test-btn">Button clicked: {{counter}} times</button>
+
+    <p>If you have a .rcss file with the same name as the page in the pages directory, it will be loaded at runtime so you can add custom styling to a page, which is why the header is red on this page only.</p>
+
+    <p>This next section demonstates two things, the custom <code>"healthbar"</code> rml element, and scoped lua with the damage and heal buttons</p>
+
+    <healthbar id="hp-bar" current="100" max="100"></healthbar>
+    <button onclick="TestPage.Damage(event)">Damage</button>
+    <button onclick="TestPage.Heal(event)">Heal</button>
+</div>