From 4ca68060103881c52b485c06dcf497c4a0f466b9 Mon Sep 17 00:00:00 2001 From: Ronja Date: Sat, 29 Aug 2020 08:14:01 +0200 Subject: [PATCH] button stuff --- Luxe/blocks/tooltip.wren | 40 ++++++- Luxe/blocks/ui.wren | 172 ++++++++++++++++++++++++++----- Luxe/blocks/ui/image_button.wren | 28 ++++- Luxe/game.wren | 5 +- Luxe/math/observable.wren | 47 +++++++++ Luxe/outline/renderer.wren | 2 +- 6 files changed, 259 insertions(+), 35 deletions(-) create mode 100644 Luxe/math/observable.wren diff --git a/Luxe/blocks/tooltip.wren b/Luxe/blocks/tooltip.wren index 9a7351d..f805a69 100644 --- a/Luxe/blocks/tooltip.wren +++ b/Luxe/blocks/tooltip.wren @@ -5,32 +5,62 @@ import "globals" for Globals import "math/vector" for Vector class Tooltip{ + depth{100} + construct new(app){ _ent = Entity.create(app.ui) _mat_font = Assets.material("luxe: material/font") - Text.create(_ent, _mat_font, 8, "assets/fonts/BabyBlocks", [1, 1, 1, 1]) + Text.create(_ent, _mat_font, 8, "assets/fonts/BabyBlocks", [0.2, 0.01, 0.05, 1]) Transform.create(_ent) - Transform.set_pos(_ent, 64, 128, 12) + Transform.set_pos(_ent, 64, 128, depth) Transform.set_snap(_ent, 1, 1, 0) - _size = 8 + Globals["Tooltip"] = this } tick(){ var pos = Vector.new(Globals["UiMouse"]) if(_active && pos){ - Transform.set_pos(_ent, pos.x, pos.y, 12) + if(_x){ + pos.x = _x + } + if(_y){ + pos.y = _y + } + Transform.set_pos(_ent, pos.x, pos.y, depth) } } - set(text){ + set(text) { + set(text, null) + } + + fix_y(value){ + _y = value + } + + fix_x(value){ + _x = value + } + + set(text, source){ Text.set_text_buffer(_ent, text) Text.commit(_ent) _active = true + _source = source + _x = null + _y = null } clear(){ + clear(_source) + } + + clear(source){ + if(_source != source) { + return + } Text.set_text_buffer(_ent, "") Text.commit(_ent) _active = false diff --git a/Luxe/blocks/ui.wren b/Luxe/blocks/ui.wren index 8c1684d..a759ea7 100644 --- a/Luxe/blocks/ui.wren +++ b/Luxe/blocks/ui.wren @@ -9,50 +9,172 @@ import "luxe: assets" for Assets import "globals" for Globals import "blocks/ui/image_button" for ImageButton +import "math/observable" for Observable class Ui{ - construct new(app){ - _ui = Entity.create(app.ui, "UI Root") + static Planning{"planning"} + static Info {"info"} + ui_mode{_ui_mode.value} + ui_mode=(v){_ui_mode.value = v} + + construct new(app){ var ui_rect = Globals["UiRect"] + + _ui_mode = Observable.new(Ui.Info) + System.print(_ui_mode) + + _ui = Entity.create(app.ui, "UI Root") UI.create(_ui, ui_rect.x, ui_rect.y, ui_rect.width, ui_rect.height, 0, app.ui_camera) UI.set_render_mode(_ui, UIRenderMode.world) + _info = setup_info() + _planning = setup_planning() + + _ui_mode.on_change(true) {|val| + Control.set_visible(_planning, val == Ui.Planning) + Control.set_visible(_info, val == Ui.Info) + UI.commit(_ui) + } + + UI.commit(_ui) + } + + setup_info(){ + var ui_rect = Globals["UiRect"] + var game = Globals["Game"] + + var root = Control.create(_ui) + Control.set_size(root, ui_rect.width, ui_rect.height) + + //list var list = UIList.create(_ui) + Control.child_add(root, list) //todo: make list horizontal? Control.set_pos(list, 0, ui_rect.height-16) Control.set_size(list, ui_rect.width, 16) var adventureButtons = Assets.image("assets/AdventureButtons") - var tiles = 10 + var tiles = [10, 1] + var button - for(i in 0...6){ - var button = UIButton.create(_ui) - Control.set_size(button, 16, 16) - UIButton.set_text(button, "%(i)") - UIButton.set_text_size(button, 10) - Control.set_pos(button, i*16, 0) - - var image = UIImage.create(_ui) - UIImage.set_image(image, adventureButtons) - UIImage.set_uv(image, i/tiles, 0, (i+1)/tiles, 1) - Control.child_add(button, image) - - UIList.add(list, button) - } - //UIList.refresh(list) //uncomment this when list learns not to be vertical - - _test = ImageButton.create(_ui) - UIImage.set_image(_test, adventureButtons) - ImageButton.set_state_change(_test) {|state, element| - if(state["press"]) { - System.print("heck %(element)") + //plan adventure + button = list_button(0) + UIImage.set_image(button, adventureButtons) + ImageButton.set_tooltip(button, "Adventure!") + ImageButton.set_tile_uv(button, tiles, [1, 0]) + ImageButton.set_state_change(button) { |data| + System.print(data) + if(data["press"]){ + ui_mode = Ui.Planning + } } + UIList.add(list, button) + + //info + button = list_button(1) + UIImage.set_image(button, adventureButtons) + ImageButton.set_tooltip(button, "Stats") + ImageButton.set_tile_uv(button, tiles, [2, 0]) + UIList.add(list, button) + + //read diary + button = list_button(2) + UIImage.set_image(button, adventureButtons) + ImageButton.set_tooltip(button, "Diary") + ImageButton.set_tile_uv(button, tiles, [1, 0]) + UIList.add(list, button) + + //UIList.refresh(list) //uncomment this when list learns not to be vertical + return root + } + + setup_planning(){ + var ui_rect = Globals["UiRect"] + var game = Globals["Game"] + + var root = Control.create(_ui) + Control.set_size(root, ui_rect.width, ui_rect.height) + + //list + var list = UIList.create(_ui) + Control.child_add(root, list) + //todo: make list horizontal? + Control.set_pos(list, 0, ui_rect.height-16) + Control.set_size(list, ui_rect.width, 16) + + var adventureButtons = Assets.image("assets/AdventureButtons") + var tiles = [10, 1] + var button + + var list_id = 0 + + //back to info + button = list_button(list_id) + UIImage.set_image(button, adventureButtons) + ImageButton.set_tooltip(button, "Info") + ImageButton.set_tile_uv(button, tiles, [1, 0]) + ImageButton.set_state_change(button) { |data| + System.print(data) + if(data["press"]){ + ui_mode = Ui.Info + } + } + UIList.add(list, button) + list_id = list_id+1 + + //abort + button = list_button(list_id) + UIImage.set_image(button, adventureButtons) + ImageButton.set_tooltip(button, "Abort") + ImageButton.set_tile_uv(button, tiles, [0, 0]) + UIList.add(list, button) + list_id = list_id+1 + + //people + button = list_button(list_id) + UIImage.set_image(button, adventureButtons) + ImageButton.set_tooltip(button, "Adventurers") + ImageButton.set_tile_uv(button, tiles, [2, 0]) + UIList.add(list, button) + list_id = list_id+1 - UI.commit(_ui) + //stuff + button = list_button(list_id) + UIImage.set_image(button, adventureButtons) + ImageButton.set_tooltip(button, "Stuff") + ImageButton.set_tile_uv(button, tiles, [4, 0]) + UIList.add(list, button) + list_id = list_id+1 + //direction + button = list_button(list_id) + UIImage.set_image(button, adventureButtons) + ImageButton.set_tooltip(button, "Direction") + ImageButton.set_tile_uv(button, tiles, [3, 0]) + UIList.add(list, button) + list_id = list_id+1 + + //go + button = list_button(list_id) + UIImage.set_image(button, adventureButtons) + ImageButton.set_tooltip(button, "Depart") + ImageButton.set_tile_uv(button, tiles, [5, 0]) + UIList.add(list, button) + list_id = list_id+1 + + //UIList.refresh(list) //uncomment this when list learns not to be vertical + + return root + } + + list_button(i){ + var button = ImageButton.create(_ui) + Control.set_size(button, 16, 16) + Control.set_pos(button, i*16, 0) //let list handle this in future + return button } test(){ diff --git a/Luxe/blocks/ui/image_button.wren b/Luxe/blocks/ui/image_button.wren index 71db4e1..4e41a25 100644 --- a/Luxe/blocks/ui/image_button.wren +++ b/Luxe/blocks/ui/image_button.wren @@ -1,14 +1,17 @@ import "luxe: ui/image" for UIImage -import "luxe: world" for UIEvent +import "luxe: world" for UIEvent, UI import "luxe: ui/control" for Control +import "globals" for Globals + class ImageButton{ static create(ent){ var button = UIImage.create(ent) var data = { "hover": false, "press": false, - "state_change": null + "state_change": null, + "tooltip": null } Control.set_state_data(button, data) @@ -21,6 +24,7 @@ class ImageButton{ } else if(event.type == UIEvent.exit) { data = Control.get_state_data(button) data["hover"] = false + data["press"] = false } else if(event.type == UIEvent.press) { data = Control.get_state_data(button) data["press"] = true @@ -35,12 +39,28 @@ class ImageButton{ if(func){ func.call(data, button) } + var tooltip = data["tooltip"] + if(tooltip){ + if(data["hover"]) { + Globals["Tooltip"].set(tooltip, button) + //this only works when the UI is at the very bottom + //which it is so whatever :) + Globals["Tooltip"].fix_y(Globals["UiRect"].height-Control.get_pos_y_abs(button)) + } else { + Globals["Tooltip"].clear(button) + } + } } } return button } + static set_tooltip(control, tooltip){ + var data = Control.get_state_data(control) + data["tooltip"] = tooltip + } + static set_state_change(control, fn){ var data = Control.get_state_data(control) data["state_change"] = fn @@ -49,5 +69,9 @@ class ImageButton{ static get_data(control){ //System.print(Control.get_state_data(control)) } + + static set_tile_uv(control, tiles, index){ + UIImage.set_uv(control, index.x/tiles.x, index.y/tiles.y, (index.x+1)/tiles.x, (index.y+1)/tiles.y) + } } diff --git a/Luxe/game.wren b/Luxe/game.wren index a388782..0ce0897 100644 --- a/Luxe/game.wren +++ b/Luxe/game.wren @@ -21,12 +21,11 @@ class game is Game { construct ready() { - System.print("ready!") + Globals["Game"] = this app = App.new() _ui = Ui.new(app) _tooltip = Tooltip.new(app) - _tooltip.set("TEST") setup() DrawDebug.setup(app.world) @@ -79,4 +78,6 @@ class game is Game { app { _app } app=(v) { _app=v } + ui{_ui} + } //Game diff --git a/Luxe/math/observable.wren b/Luxe/math/observable.wren new file mode 100644 index 0000000..39e7c70 --- /dev/null +++ b/Luxe/math/observable.wren @@ -0,0 +1,47 @@ +import "luxe: events" for Events + +class Observable{ + static on_change{"on_change"} + + value{_value} + value=(v){ + _event.emit(Observable.on_change, v) + _value = v + } + value_no_update=(v){_value = v} + + events{_event} + + static new(value){ + var variable = new() + variable.value_no_update = value + return variable + } + + construct new(){ + _event = Events.new() + } + + on_change(fn){ + _event.listen(Observable.on_change, fn) + } + + on_change(initial, fn){ + if(initial){ + fn.call(value) + } + on_change(fn) + } + + not_on_change(fn){ + _event.unlisten(Observable.on_change, fn) + } + + on_not_null(fn){ + if(value){ + fn.call(value) + } else { + _event.once(Observable.on_change, fn) + } + } +} \ No newline at end of file diff --git a/Luxe/outline/renderer.wren b/Luxe/outline/renderer.wren index 4fef171..c6e1251 100644 --- a/Luxe/outline/renderer.wren +++ b/Luxe/outline/renderer.wren @@ -149,7 +149,7 @@ class Renderer { clear(ctx){ var layer = RenderLayerDesc.new() layer.dest.color[0].render_target = target - layer.dest.color[0].clear_color = [0,0,0,1] + layer.dest.color[0].clear_color = [1,1,1,1] layer.dest.color[0].load_action = LoadAction.clear layer.dest.depth.load_action = LoadAction.clear