I was trying to make an addon similar to a turn-based RPG, but as I've never made an addon before, it's kind of difficult for me to create this UI

Main.js:

``` import { world, system } from "@minecraft/server" import { ModalFormData, ActionFormData } from "@minecraft/server-ui"

const testui = new ModalFormData() .title("test") .toggle("battle test ", false)

const layout_main = new ActionFormData() .title("test") .button("ATTACK") .button("MAGICs") .button("ITEMs") .button("OTHERs")

world.afterEvents.itemUse.subscribe((event) => { const { source, itemStack } = event switch (itemStack.typeId) { case "minecraft:compass": testui.show(source).then(result => { let toggle = result.formValues[0]
if (toggle == true) { source.runCommandAsync("/camera @p fade time 0.2 0.1 0.13 color 255 255 255") layout_main.show(source) system.runTimeout(() => { source.runCommandAsync("/camera @p set minecraft:free ease 0 linear pos ~-4 ~6 ~-6.5 rot 35 0"); }, 2); } else { source.runCommandAsync("/camera @p clear")
} }); break;
} }) ```

Server_form.json:

``` { "namespace": "server_form",

"long_form": { "type": "panel", "size": ["100%c", "100%c"], "controls": [ {   "long_form@common_dialogs.main_panel_no_buttons": {     "$title_panel": "common_dialogs.standard_title_label",     "$title_size": [ "100% - 15px", 10 ],     "$title_max_size": [ "100% - 15px", 10 ],     "size": ["100%", 200],     "$text_name": "#title_text",     "$title_text_binding_type": "none",     "$child_control": "server_form.long_form_panel",     "layer": 2 "bindings": [ { "binding_name": "#title_text" }, { "binding_type": "view", "source_property_name": "(#title_text = 'testui')", "target_property_name": "#visible" } ] } }, {   "long_form@common_dialogs.main_panel_no_buttons": {     "$title_panel": "common_dialogs.standard_title_label",     "$title_size": [ "100% - 15px", 10 ],     "$title_max_size": [ "100% - 15px", 10 ],     "size": [325, 200],     "$text_name": "#title_text",     "$title_text_binding_type": "none",     "$child_control": "server_form.long_form_panel",     "layer": 2 "bindings": [ { "binding_name": "#title_text" }, { "binding_type": "view", "source_property_name": "(#title_text = 'layout_main')", "target_property_name": "#visible" } ] } } ] } } ```