button element for html-defined menus

assets/Data/menu/npcintro.html

@@ -4,4 +4,5 @@ testClass {
     margin-left: "50px";
 }
 </style>
-<p class="testClass">Hello!</p>
+<p class="testClass">Hello!</p>
+<button onclick="testButton()">Test button!</button>

assets/Scripts/client/clienthooks.ts

@@ -1,3 +1,4 @@
+import { clientUIButtonHook } from "/Scripts/client/uihooks";
 import { Engine } from "/Scripts/types/engine";
 import { Hook } from "/Scripts/types/hook";
 
@@ -64,5 +65,6 @@ export const clientHooks: Hook[] = [
         callback: (engine: Engine) => {
             engine.classes.areaUtils.static.selectAreaRectangular()
         }
-    }
+    },
+    clientUIButtonHook,
 ]

assets/Scripts/client/uihooks.ts

@@ -0,0 +1,13 @@
+import { Engine } from "/Scripts/types/engine";
+import { Hook } from "/Scripts/types/hook";
+
+/**
+ * The hook that fires every time a dynamic button in the ui is clicked
+ */
+export const clientUIButtonHook: Hook =
+{
+    signal: "uiButton",
+    callback: (engine: Engine, data: string) => {
+        console.log("button clicked " + data)
+    }
+}

docs/src/progress/renderertodo.md

@@ -1683,6 +1683,7 @@ Scaffolding for structure scanning service
 Add JSoup dependency
 Proof of concept of loading html to define ui
 Styling support for html-defined menus
+Dynamic html-defined menus support button elements that call a client hook when clicked
 
 
 

src/main/java/electrosphere/client/ui/parsing/HtmlParser.java

@@ -7,6 +7,9 @@ import java.util.stream.Collectors;
 
 import org.jsoup.nodes.Node;
 
+import electrosphere.client.script.ClientScriptUtils;
+import electrosphere.logger.LoggerInterface;
+import electrosphere.renderer.ui.elements.Button;
 import electrosphere.renderer.ui.elements.Div;
 import electrosphere.renderer.ui.elements.Label;
 import electrosphere.renderer.ui.elementtypes.ContainerElement;
@@ -69,6 +72,25 @@ public class HtmlParser {
                     }
                 }
             } break;
+            case "button": {
+                String onClick = jsoupNode.attr("onclick");
+                Runnable callback = null;
+                if(onClick == null){
+                    LoggerInterface.loggerUI.WARNING("Button with undefined onclick " + jsoupNode);
+                    callback = () -> {};
+                } else {
+                    callback = () -> {
+                        ClientScriptUtils.fireSignal("uiButton", onClick);
+                    };
+                }
+                rVal = Button.createEmptyButton(callback);
+                for(Node child : jsoupNode.childNodes()){
+                    Element childEl = HtmlParser.recursivelyParseChildren(child, styleAccumulator);
+                    if(childEl != null){
+                        ((Button)rVal).addChild(childEl);
+                    }
+                }
+            } break;
             case "style":
             //silently ignore
             break;

src/main/java/electrosphere/renderer/ui/elements/Button.java

@@ -200,6 +200,28 @@ public class Button extends StandardContainerElement implements DrawableElement,
         return rVal;
     }
 
+    /**
+     * Creates a button with no label inside
+     * @param callback The callback to fire when the button is clicked
+     * @return The button
+     */
+    public static Button createEmptyButton(Runnable callback){
+        Button rVal = new Button();
+        rVal.setPaddingTop(DEFAULT_PADDING);
+        rVal.setPaddingRight(DEFAULT_PADDING);
+        rVal.setPaddingLeft(DEFAULT_PADDING);
+        rVal.setPaddingBottom(DEFAULT_PADDING);
+        rVal.setOnClick(new ClickableElement.ClickEventCallback(){public boolean execute(ClickEvent event){
+            callback.run();
+            if(Globals.virtualAudioSourceManager != null && rVal.audioPathOnClick != null){
+                Globals.virtualAudioSourceManager.createUI(rVal.audioPathOnClick);
+            }
+            return false;
+        }});
+        rVal.setAlignSelf(YogaAlignment.Start);
+        return rVal;
+    }
+
     public boolean getVisible() {
         return visible;
     }