new layout system, new UI state/styles system

modules/console/console.lua

@@ -34,26 +34,21 @@ function Console.addLine(text, color)
   -- create new label
 
   local label = UILabel.create()
-  label:setStyle('ConsoleLabel')
+  console:insertChild(-2, label)
+  label:setId('consoleLabel' .. numLines)
   label:setText(text)
   label:setForegroundColor(color)
-  console:insertChild(3, label)
-
-  local lastLabel = console:getChildByIndex(4)
-  if lastLabel then
-    lastLabel:addAnchor(AnchorBottom, "prev", AnchorTop)
-  end
+  label:setStyle('ConsoleLabel')
 
   numLines = numLines + 1
   if numLines > maxLines then
-    local firstLabel = console:getChildByIndex(-1)
+    local firstLabel = console:getChildByIndex(1)
     firstLabel:destroy()
   end
 end
 
 function Console.create()
-  console = loadUI("/console/console.otui")
-  rootWidget:addChild(console)
+  console = UI.loadAndDisplay("/console/console.otui")
   console:hide()
 
   Logger.setOnLog(Console.onLog)

modules/console/console.otui

@@ -1,7 +1,7 @@
 ConsoleLabel < UILabel
   font: terminus-14px-bold
   height: 16
-  anchors.bottom: commandBox.top
+  anchors.bottom: next.top
   anchors.left: parent.left
   anchors.right: parent.right
   margin.left: 2
@@ -14,7 +14,8 @@ RectPanel
 
   UILabel
     id: commandSymbolLabel
-    size: 18 20
+    size: 20 16
+    size fixed: true
     anchors.bottom: parent.bottom
     anchors.left: parent.left
     margin.left: 2
@@ -23,11 +24,10 @@ RectPanel
 
   UILineEdit
     id: commandBox
-    height: 20
+    height: 16
     anchors.bottom: parent.bottom
-    anchors.left: prev.right
+    anchors.left: commandSymbolLabel.right
     anchors.right: parent.right
-    margin.left: 4
     font: terminus-14px-bold
     onAction: |
       function(self)

modules/core/core.otmod

@@ -13,10 +13,10 @@ Module
     require 'constants'
     require 'util'
     require 'widget'
-    require 'messagebox'
+    require 'ui'
+    require 'messagebox/messagebox'
     require 'dispatcher'
 
-    rootWidget = getRootWidget()
     return true
 
   onUnload: |

modules/core/messagebox/messagebox.lua

@@ -10,50 +10,33 @@ function MessageBox.create(title, text, flags)
   setmetatable(box, MessageBox)
 
   -- create messagebox window
-  local window = UIWindow.create()
-  window:setStyle('Window')
-  window:setId("messageBoxWindow")
+  local window = UI.loadAndDisplayLocked('/core/messagebox/messagebox.otui')
   window:setTitle(title)
-  window:centerIn("parent")
-  rootWidget:addChild(window)
-  rootWidget:lockChild(window)
 
-  -- create messagebox label
-  local label = UILabel.create()
+  local label = window:getChildById('messageBoxLabel')
   label:setStyle('Label')
-  label:setId("messageBoxLabel")
   label:setText(text)
-  label:addAnchor(AnchorHorizontalCenter, window:getId(), AnchorHorizontalCenter)
-  label:addAnchor(AnchorTop, window:getId(), AnchorTop)
-  label:setMargin(27, 0)
   label:resizeToText()
-  window:addChild(label)
 
   -- set window size based on label size
   window:setWidth(label:getWidth() + 60)
   window:setHeight(label:getHeight() + 64)
+  window:updateParentLayout()
 
   -- setup messagebox first button
-  local button1 = UIButton.create()
-  button1:setStyle('Button')
-  button1:setId("messageBoxButton1")
-  button1:addAnchor(AnchorBottom, window:getId(), AnchorBottom)
-  button1:addAnchor(AnchorRight, window:getId(), AnchorRight)
-  button1:setMargin(10)
-  button1:setWidth(64)
-  window:addChild(button1)
+  local buttonRight = window:getChildById('messageBoxRightButton')
 
   if flags == MessageBoxOk then
-    button1:setText("Ok")
+    buttonRight:setText("Ok")
     box.onOk = EmptyFunction
-    button1.onClick = function()
+    buttonRight.onClick = function()
       box.onOk()
       box:destroy()
     end
   elseif flags == MessageBoxCancel then
-    button1:setText("Cancel")
+    buttonRight:setText("Cancel")
     box.onCancel = EmptyFunction
-    button1.onClick = function()
+    buttonRight.onClick = function()
       box.onCancel()
       box:destroy()
     end

modules/core/messagebox/messagebox.otui

@@ -0,0 +1,21 @@
+Window
+  id: messageBoxWindow
+  anchors.centerIn: parent
+  height: 80
+  width: 120
+
+  Label
+    id: messageBoxLabel
+    anchors.horizontalCenter: parent.horizontalCenter
+    anchors.top: parent.top
+    margin.top: 27
+    margin.bottom : 27
+
+  Button
+    id: messageBoxRightButton
+    anchors.bottom: parent.bottom
+    anchors.right: parent.right
+    margin.right: 10
+    margin.bottom: 10
+    width: 64
+    visible: true

modules/core_ui/core_ui.otmod

@@ -8,12 +8,6 @@ Module
   dependencies:
     - core_fonts
   onLoad: |
-    importStyles('buttons.otui')
-    importStyles('labels.otui')
-    importStyles('panels.otui')
-    importStyles('separators.otui')
-    importStyles('lineedits.otui')
-    importStyles('windows.otui')
-    importStyles('listboxes.otui')
+    require 'ui'
     return true
 

modules/core_ui/styles/buttons.otui

@@ -11,7 +11,7 @@ Button < UIButton
       source: /core_ui/images/button_hover.png
       border: 5
 
-  state.down:
+  state.pressed:
     text-translate: 1 1
     border-image:
       source: /core_ui/images/button_down.png

modules/core_ui/styles/listboxes.otui

@@ -0,0 +1,5 @@
+TextList < UIWidget
+  size: 200 200
+  border-image:
+    source: /core_ui/images/panel_flat.png
+    border: 4

modules/core_ui/styles/separators.otui

@@ -2,3 +2,4 @@ HorizontalSeparator < UIWidget
   border-image:
     source: /core_ui/images/horizontal_separator.png
     border.top: 2
+  height: 2

modules/core_ui/styles/windows.otui

@@ -1,6 +1,8 @@
 Window < UIWindow
   font: helvetica-12px-bold
   size: 200 200
+  opacity: 255
+  background-color: #ffffff
   head:
     height: 20
     border-image:
@@ -17,5 +19,8 @@ Window < UIWindow
       border: 4
       border.top: 0
 
+  state.pressed:
+    opacity: 192
+
 MainWindow < Window
   anchors.centerIn: parent

modules/core_ui/ui.lua

@@ -0,0 +1,30 @@
+UI = { }
+UI.root = getRootWidget()
+
+function UI.loadAndDisplayLocked(otuiFile)
+  local widget = loadUI(otuiFile, UI.root)
+  UI.root:lockChild(widget)
+  return widget
+end
+
+function UI.loadAndDisplay(otuiFile)
+  local widget = loadUI(otuiFile, UI.root)
+  return widget
+end
+
+function UI.display(widget)
+  UI.root:addChild(widget)
+end
+
+function UI.displayLocked(widget)
+  UI.root:addChild(widget)
+  UI.root:lockChild(widget)
+end
+
+importStyles('styles/buttons.otui')
+importStyles('styles/labels.otui')
+importStyles('styles/panels.otui')
+importStyles('styles/separators.otui')
+importStyles('styles/lineedits.otui')
+importStyles('styles/windows.otui')
+importStyles('styles/listboxes.otui')

modules/mainmenu/entergame.lua

@@ -2,7 +2,7 @@ function EnterGame_connectToLoginServer()
   local protocolLogin = ProtocolLogin.create()
 
   local recreateEnterGame = function()
-    rootWidget:addChild(loadUI("/mainmenu/ui/entergamewindow.otui"))
+    UI.loadAndDisplayLocked("/mainmenu/ui/entergamewindow.otui")
   end
 
   local loadBox = displayCancelBox("Please wait", "Connecting..")
@@ -30,7 +30,7 @@ function EnterGame_connectToLoginServer()
     mainMenu:hide()
   end
 
-  local enterGameWindow = rootWidget:getChildById("enterGameWindow")
+  local enterGameWindow =  UI.root:getChildById("enterGameWindow")
   local account = enterGameWindow:getChildById("accountNameLineEdit"):getText()
   local password = enterGameWindow:getChildById("accountPasswordLineEdit"):getText()
   protocolLogin:login(account, password)

modules/mainmenu/mainmenu.otmod

@@ -12,8 +12,7 @@ Module
     require('entergame')
 
     if not initialized then
-      mainMenu = loadUI("/mainmenu/ui/mainmenu.otui")
-      getRootWidget():addChild(mainMenu)
+      mainMenu = UI.loadAndDisplay("/mainmenu/ui/mainmenu.otui")
       initialized = true
     end
 

modules/mainmenu/ui/charlist.otui

@@ -0,0 +1,34 @@
+MainWindow
+  id: charactersWindow
+  title: Charlist
+  size: 200 250
+
+  TextList
+    id: charactersList
+    anchors.fill: parent
+    margin.top: 30
+    margin.bottom: 50
+    margin.left: 16
+    margin.right: 16
+
+  Button
+    id: buttonOk
+    text: Ok
+    width: 64
+    anchors.right: next.left
+    anchors.bottom: parent.bottom
+    margin.bottom: 16
+    margin.right: 16
+
+  Button
+    id: buttonCancel
+    text: Cancel
+    width: 64
+    anchors.right: parent.right
+    anchors.bottom: parent.bottom
+    margin.bottom: 16
+    margin.right: 16
+    onClick: |
+      function(self)
+        self:getParent():destroy()
+      end

modules/mainmenu/ui/mainmenu.otui

@@ -1,7 +1,8 @@
 MenuButton < Button
-  anchors.top: prev.bottom
-  anchors.horizontalCenter: parent.horizontalCenter
-  margin.top: 10
+  margin.bottom: 11
+  margin.left: 20
+  margin.right: 20
+
 
 Panel
   id: mainMenuBackground
@@ -9,6 +10,7 @@ Panel
     source: /mainmenu/ui/background.png
     smooth: true
   anchors.fill: parent
+  focusable: false
 
   RoundedPanel
     id: mainMenu
@@ -17,24 +19,20 @@ Panel
     anchors.bottom: parent.bottom
     margin.left: 60
     margin.bottom: 70
+    layout: verticalBox
 
     MenuButton
       text: Enter Game
-      anchors.top: parent.top
-      anchors.horizontalCenter: parent.horizontalCenter
       margin.top: 18
-      onClick: |
-        local enterGameWindow = loadUI("/mainmenu/ui/entergamewindow.otui")
-        rootWidget:addChild(enterGameWindow)
-        GFX.fadeIn(enterGameWindow)
+      onClick: UI.loadAndDisplayLocked("/mainmenu/ui/entergamewindow.otui")
 
     MenuButton
       text: Options
-      onClick: rootWidget:addChild(loadUI("/mainmenu/ui/optionswindow.otui"))
+      onClick: UI.loadAndDisplayLocked("/mainmenu/ui/optionswindow.otui")
 
     MenuButton
       text: Info
-      onClick: rootWidget:addChild(loadUI("/mainmenu/ui/infowindow.otui"))
+      onClick: UI.loadAndDisplayLocked("/mainmenu/ui/infowindow.otui")
 
     MenuButton
       text: Exit

modules/mainmenu/ui/optionswindow.otui

@@ -89,7 +89,7 @@ MainWindow
     onClick: displayErrorBox("Error", "Not implemented yet")
 
   Label
-    text: |
+    text: |-
       Show the most recent
       Message of the Day
     anchors.left: prev.right

modules/playground/playground.lua

@@ -0,0 +1 @@
+--UI.loadAndDisplayLocked('/mainmenu/ui/charlist.otui')

modules/playground/playground.otmod

@@ -0,0 +1,10 @@
+Module
+  name: playground
+  autoLoad: true
+  dependencies:
+    - core
+
+  onLoad: |
+    require 'playground'
+    return true
+