settings panel moved to xml (WIP)

res/layouts/pages/404.xml

@@ -1,4 +1,4 @@
 <panel size='400' padding='8' interval='8' color='0'>
     <label context='menu'>@Page does not exists</label>
-    <button padding='10' onclick='menu:back()'>@Back</button>
+    <button onclick='menu:back()'>@Back</button>
 </panel>

res/layouts/pages/add_packs.xml

@@ -2,5 +2,5 @@
     <panel id='packs_panel' size='540,10' color='0,0,0,50' max-length='400'>
         <!-- content is generated in script -->
     </panel>
-    <button onclick='menu:back()' padding='10'>@Back</button>
+    <button onclick='menu:back()'>@Back</button>
 </panel>

res/layouts/pages/content.xml

@@ -2,6 +2,6 @@
     <panel id='packs_panel' size='540,10' color='0,0,0,50' max-length='400'>
         <!-- content is generated in script -->
     </panel>
-    <button onclick='menu.page = "add_packs"' padding='10'>@Add</button>
-    <button onclick='menu:back()' padding='10'>@Back</button>
+    <button onclick='menu.page = "add_packs"'>@Add</button>
+    <button onclick='menu:back()'>@Back</button>
 </panel>

res/layouts/pages/controls.xml

@@ -7,5 +7,5 @@
     <panel id='bindings_panel' size='380,200' padding='2' interval='1' max-length='400' color='#0000004C'>
         <!-- content is generated in script -->
     </panel>
-    <button padding='10' onclick='menu:back()'>@Back</button>
+    <button onclick='menu:back()'>@Back</button>
 </panel>

res/layouts/pages/main.xml

@@ -1,7 +1,7 @@
 <panel size='400' color='0' interval='1' context='menu'>
-    <button onclick='menu.page="new_world"' padding='10'>@New World</button>
+    <button onclick='menu.page="new_world"'>@New World</button>
     <panel id='worlds' size='390,1' padding='5' color='#FFFFFF11' max-length='400'>
     </panel>
-    <button onclick='menu.page="settings"' padding='10'>@Settings</button>
-    <button onclick='core.quit()' padding='10'>@Quit</button>
+    <button onclick='menu.page="settings"'>@Settings</button>
+    <button onclick='core.quit()'>@Quit</button>
 </panel>

res/layouts/pages/main.xml.lua

@@ -1,21 +1,6 @@
 function on_open()
     local worlds = core.get_worlds_list()
     for _, name in ipairs(worlds) do
-        document.worlds:add(
-            "<container ".. 
-                "size='380,46' "..
-                "color='#0F1E2DB2' "..
-                "hover-color='#162B3399' "..
-                "onclick='core.open_world(\""..name.."\")'"..
-            ">"..
-                "<label pos='8,8'>"..name.."</label>"..
-                "<button pos='350,5' "..
-                        "color='#00000000' "..
-                        "hover-color='#FFFFFF2B' "..
-                        "onclick='core.delete_world(\""..name.."\")'>"..
-                    "<image src='gui/delete_icon' size='32,32' color='#FFFFFF80'/>"..
-                "</button>"..
-            "</container>"
-        )
+        document.worlds:add(gui.template("world", {name=name}))
     end
 end

res/layouts/pages/new_world.xml

@@ -7,11 +7,11 @@
     </textbox>
     <label>@Seed</label>
     <textbox id='seed_box' placeholder='-' padding='4'></textbox>
-    <button onclick='menu.page="generators"' id='generator_btn' padding='10'>
+    <button onclick='menu.page="generators"' id='generator_btn'>
         @World generator
     </button>
-    <button onclick='create_world()' padding='10' margin='1,20,1,1'>
+    <button onclick='create_world()' margin='1,20,1,1'>
         @Create World
     </button>
-    <button onclick='menu:back()' padding='10'>@Back</button>
+    <button onclick='menu:back()'>@Back</button>
 </panel>

res/layouts/pages/pause.xml

@@ -1,8 +1,8 @@
 <panel size='400' color='0' interval='1' context='menu'>
-    <button onclick='menu:reset()' padding='10'>@Continue</button>
-    <button onclick='menu.page="content"' padding='10'>@Content</button>
-    <button onclick='menu.page="settings"' padding='10'>@Settings</button>
-    <button onclick='core.close_world(true)' padding='10'>
+    <button onclick='menu:reset()'>@Continue</button>
+    <button onclick='menu.page="content"'>@Content</button>
+    <button onclick='menu.page="settings"'>@Settings</button>
+    <button onclick='core.close_world(true)'>
         @Save and Quit to Menu
     </button>
 </panel>

res/layouts/pages/settings.xml

@@ -0,0 +1,7 @@
+<panel size='400' color='0' interval='1' context='menu'>
+    <panel id='settings_panel' color='0'>
+    </panel>
+    <button onclick='menu.page="settings_audio"'>@Audio</button>
+    <button onclick='menu.page="controls"'>@Controls</button>
+    <button onclick='menu:back()'>@Back</button>
+</panel>

res/layouts/pages/settings.xml.lua

@@ -0,0 +1,31 @@
+function create_setting(id, name, step, track_width, postfix)
+    local info = core.get_setting_info(id)
+    if postfix == nil then
+        postfix = ""
+    end
+    document.settings_panel:add(gui.template("track_setting", {
+        id=id,
+        name=gui.str(name, "settings"),
+        value=core.get_setting(id),
+        min=info.min,
+        max=info.max,
+        step=step,
+        track_width=track_width,
+        postfix=postfix
+    }))
+end
+
+function update_setting(x, id, name, postfix)
+    core.set_setting(id, x)
+    -- updating label
+    document[id..".L"].text = string.format(
+        "%s: %s%s", name, core.str_setting(id), postfix
+    )
+end
+
+function on_open()
+    create_setting("chunks.load-distance", "Load Distance", 1, 3)
+    create_setting("chunks.load-speed", "Load Speed", 1, 1)
+    create_setting("graphics.fog-curve", "Fog Curve", 0.1, 2)
+    create_setting("camera.fov", "FOV", 1, 4, "°")
+end

res/layouts/pages/settings_audio.xml

@@ -2,5 +2,5 @@
     <panel id='tracks_panel' size='400' color='0' interval='1'>
         <!-- content is generated in script -->
     </panel>
-    <button padding='10' onclick='menu:back()'>@Back</button>
+    <button onclick='menu:back()'>@Back</button>
 </panel>

res/layouts/templates/pack.xml

@@ -11,7 +11,7 @@
         %{description}
     </label>
     <button if='%{remover}' onclick='%{remover}' color='0' hover-color='#FFFFFF2B' 
-            gravity='center-right' margin='10'>
+            gravity='center-right' margin='10' padding='0'>
         <image src='gui/cross' size='32,32' color='#FFFFFF80'/>
     </button>
     <image pos='8,8' src='%{icon}' size='64'></image>

res/layouts/templates/track_setting.xml

@@ -0,0 +1,7 @@
+<panel color='0' context='settings'>
+    <label id='%{id}.L'>%{name}: %{value}%{postfix}</label>
+    <trackbar 
+        value='%{value}' min='%{min}' max='%{max}' 
+        step='%{step}' track-width="%{track_width}"
+        consumer='function(x) update_setting(x, "%{id}", "%{name}", "%{postfix}") end'/>
+</panel>

res/layouts/templates/world.xml

@@ -0,0 +1,15 @@
+<container 
+    size='380,46'
+    color='#0F1E2DB2'
+    hover-color='#162B3399'
+    onclick='core.open_world("%{name}")'
+>
+    <label pos='8,8'>%{name}</label>
+    <button pos='350,5'
+            color='#00000000'
+            hover-color='#FFFFFF2B'
+            padding='0'
+            onclick='core.delete_world("{%{name}}")'>
+        <image src='gui/delete_icon' size='32,32' color='#FFFFFF80'/>
+    </button>
+</container>