Custom element registration

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

@@ -1,3 +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

@@ -4,4 +4,10 @@
     <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>