button stuff

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

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(){

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)
+  }
 }
 

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

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)
+    }
+  }
+}

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