change interface style, add top menu

modules/core_ui/styles/buttons.otui

@@ -22,3 +22,30 @@ Button < UIButton
   state.disabled:
     color: #999999
     background-color: #ffffff88
+
+TopButton < UIButton
+  background-color: white
+  size: 26 25
+  text-translate: 0 0
+  border-image:
+    source: /core_ui/images/top_button.png
+    size: 26 25
+    border: 3
+
+  state.hover:
+    border-image:
+      source: /core_ui/images/top_button.png
+      size: 26 25
+      offset: 26 0
+      border: 3
+
+  state.pressed:
+    text-translate: 1 1
+    border-image:
+      source: /core_ui/images/top_button.png
+      size: 26 25
+      offset: 52 0
+      border: 3
+
+  state.disabled:
+    background-color: #ffffff66

modules/core_ui/styles/panels.otui

@@ -1,10 +1,16 @@
 Panel < UIWidget
+  phantom: true
 
 FlatPanel < Panel
   border-image:
     source: /core_ui/images/panel_flat.png
     border: 4
 
+TopPanel < Panel
+  height: 34
+  border-image:
+    source: /core_ui/images/top_panel.png
+    border-bottom: 3
 
 RoundedPanel < Panel
   background-color: #ffffffdd

modules/core_ui/styles/separators.otui

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

modules/mainmenu/characterlist.lua

@@ -56,7 +56,7 @@ function CharacterList.create(characters, premDays)
     charactersWindow:destroy()
   end
 
-  charactersWindow = UI.loadAndDisplayLocked('/mainmenu/ui/charlist.otui')
+  charactersWindow = UI.loadAndDisplay('/mainmenu/ui/charlist.otui')
   characterList = charactersWindow:getChildById('characterList')
   local accountStatusLabel = charactersWindow:getChildById('accountStatusLabel')
   charactersWindow.onKeyPress = onCharactersWindowKeyPress

modules/mainmenu/entergame.lua

@@ -38,7 +38,7 @@ end
 
 -- public functions
 function EnterGame.create()
-  enterGameWindow = UI.loadAndDisplayLocked('/mainmenu/ui/entergamewindow.otui')
+  enterGameWindow = UI.loadAndDisplay('/mainmenu/ui/entergamewindow.otui')
 end
 
 function EnterGame.destroy()

modules/mainmenu/mainmenu.otmod

@@ -1,12 +1,13 @@
 Module
   name: mainmenu
-  description: Create the game mainmenu, where everything starts
+  description: Create the game main menu
   author: OTClient team
   website: https://github.com/edubart/otclient
   version: 0.2
   autoLoad: true
   dependencies:
     - core
+    - topmenu
 
   onLoad: |
     require 'mainmenu'
@@ -15,6 +16,7 @@ Module
 
     if not initialized then
       MainMenu.create()
+      EnterGame.create()
       initialized = true
     end
     return true

modules/mainmenu/ui/charlist.otui

@@ -69,4 +69,5 @@ MainWindow
       function(self)
         self:getParent():unlock()
         self:getParent():hide()
+        EnterGame.create()
       end

modules/mainmenu/ui/loginpanel.otui

@@ -0,0 +1,47 @@
+RoundedRectPanel
+  id: loginPanel
+  background-color: #000000e5
+  size: 192 164
+  anchors.centerIn: parent
+  margin.top: 64
+  opacity: 0
+
+  LargerLabel
+    text: Account name
+    anchors.left: parent.left
+    anchors.top: parent.top
+    margin.left: 16
+    margin.top: 12
+
+  LineEdit
+    id: accountNameLineEdit
+    text: otclient0
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.top: prev.bottom
+    margin.left: 14
+    margin.right: 14
+
+  LargerLabel
+    text: Password
+    anchors.left: parent.left
+    anchors.top: prev.bottom
+    margin.left: 16
+    margin.top: 8
+
+  PasswordLineEdit
+    id: accountPasswordLineEdit
+    text: 123456
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.top: prev.bottom
+    margin.left: 14
+    margin.right: 14
+
+  Button
+    id: loginButton
+    text: Login
+    anchors.bottom: parent.bottom
+    anchors.horizontalCenter: parent.horizontalCenter
+    margin.bottom: 20
+    onClick: EnterGame.doLogin()

modules/mainmenu/ui/mainmenu.otui

@@ -10,31 +10,8 @@ Panel
     source: /mainmenu/ui/background.png
     smooth: true
     fixed ratio: true
-  anchors.fill: parent
+  anchors.top: topMenu.bottom
+  anchors.left: parent.left
+  anchors.right: parent.right
+  anchors.bottom: parent.bottom
   focusable: false
-
-  RoundedPanel
-    id: mainMenu
-    size: 144 162
-    anchors.left: parent.left
-    anchors.bottom: parent.bottom
-    margin.left: 60
-    margin.bottom: 70
-    layout: verticalBox
-
-    MenuButton
-      text: Enter Game
-      margin.top: 18
-      onClick: EnterGame.create()
-
-    MenuButton
-      text: Options
-      onClick: UI.loadAndDisplayLocked("/mainmenu/ui/optionswindow.otui")
-
-    MenuButton
-      text: Info
-      onClick: UI.loadAndDisplayLocked("/mainmenu/ui/infowindow.otui")
-
-    MenuButton
-      text: Exit
-      onClick: exit()

modules/topmenu/topmenu.lua

@@ -0,0 +1,14 @@
+TopMenu = {}
+
+-- private variables
+local topMenu
+
+-- public functions
+function TopMenu.create()
+  topMenu = UI.loadAndDisplay("/topmenu/topmenu.otui")
+end
+
+function TopMenu.destroy()
+  topMenu:destroy()
+  topMenu = nil
+end

modules/topmenu/topmenu.otmod

@@ -0,0 +1,18 @@
+Module
+  name: topmenu
+  description: Create the top menu
+  author: OTClient team
+  website: https://github.com/edubart/otclient
+  version: 0.2
+  autoLoad: true
+  dependencies:
+    - core
+
+  onLoad: |
+    require 'topmenu'
+    TopMenu.create()
+    return true
+
+  onUnload: |
+    TopMenu.destroy()
+

modules/topmenu/topmenu.otui

@@ -0,0 +1,52 @@
+TopPanel
+  id: topMenu
+  anchors.top: parent.top
+  anchors.left: parent.left
+  anchors.right: parent.right
+  focusable: false
+
+  TopButton
+    anchors.top: parent.top
+    anchors.left: parent.left
+    margin.top: 3
+    margin.left: 6
+
+    UIWidget
+      size: 16 16
+      image: /core_ui/icons/settings.png
+      anchors.centerIn: parent
+      phantom: true
+
+  TopButton
+    anchors.top: prev.top
+    anchors.left: prev.right
+    margin.left: 6
+
+    UIWidget
+      size: 16 16
+      image: /core_ui/icons/login.png
+      anchors.centerIn: parent
+      phantom: true
+
+  TopButton
+    anchors.top: parent.top
+    anchors.right: parent.right
+    margin.top: 3
+    margin.right: 6
+
+    UIWidget
+      size: 16 16
+      image: /core_ui/icons/exit.png
+      anchors.centerIn: parent
+      phantom: true
+
+  TopButton
+    anchors.top: prev.top
+    anchors.right: prev.left
+    margin.right: 6
+
+    UIWidget
+      size: 16 16
+      image: /core_ui/icons/logout.png
+      anchors.centerIn: parent
+      phantom: true

src/framework/ui/uilabel.cpp

@@ -28,6 +28,7 @@ void UILabel::setup()
 {
     UIWidget::setup();
     setFocusable(false);
+    setPhantom(true);
     setAlign(Fw::AlignLeft);
 }
 

src/framework/ui/uiwidget.cpp

@@ -59,6 +59,7 @@ void UIWidget::setup()
     setVisible(true);
     setEnabled(true);
     setFocusable(true);
+    setPhantom(false);
     setPressed(false);
     setSizeFixed(false);
     setFont(g_fonts.getDefaultFont());
@@ -732,10 +733,18 @@ void UIWidget::onStyleApply(const OTMLNodePtr& styleNode)
         else if(node->tag() == "opacity") {
             setOpacity(node->value<int>());
         }
+        // enabled
+        else if(node->tag() == "enabled") {
+            setEnabled(node->value<bool>());
+        }
         // focusable
         else if(node->tag() == "focusable") {
             setFocusable(node->value<bool>());
         }
+        // focusable
+        else if(node->tag() == "phantom") {
+            setPhantom(node->value<bool>());
+        }
         // size
         else if(node->tag() == "size") {
             resize(node->value<Size>());
@@ -910,8 +919,11 @@ bool UIWidget::onMousePress(const Point& mousePos, Fw::MouseButton button)
 
         bool mustEnd = child->onMousePress(mousePos, button);
 
-        if(!child->getChildByPos(mousePos) && !child->isPressed())
+        if(button == Fw::MouseLeftButton && !child->isPressed()) {
-            child->setPressed(true);
+            UIWidgetPtr clickedChild = child->getChildByPos(mousePos);
+            if(!clickedChild || clickedChild->isPhantom())
+                child->setPressed(true);
+        }
 
         if(mustEnd)
             return true;

src/framework/ui/uiwidget.h

@@ -46,6 +46,7 @@ public:
     void setPressed(bool pressed) { m_pressed = pressed; updateState(Fw::PressedState); }
     void setId(const std::string& id) { m_id = id; }
     void setFocusable(bool focusable) { m_focusable = focusable; }
+    void setPhantom(bool phantom) { m_phantom = phantom; }
     void setStyle(const std::string& styleName);
     void setStyleFromNode(const OTMLNodePtr& styleNode);
     void setLayout(const UILayoutPtr& layout) { m_layout = layout; }
@@ -87,6 +88,7 @@ public:
     bool isExplicitlyEnabled() const { return m_enabled; }
     bool isExplicitlyVisible() const { return m_visible; }
     bool isFocusable() const { return m_focusable; }
+    bool isPhantom() const { return m_phantom; }
     bool isSizeFixed() const { return m_fixedSize; }
     bool hasChildren() const { return m_children.size() > 0; }
     bool hasChild(const UIWidgetPtr& child);
@@ -181,6 +183,7 @@ protected:
     bool m_focusable;
     bool m_fixedSize;
     bool m_pressed;
+    bool m_phantom;
     Rect m_rect;
     UILayoutPtr m_layout;
     UIWidgetWeakPtr m_parent;

src/framework/ui/uiwindow.cpp

@@ -112,10 +112,10 @@ void UIWindow::onFocusChange(bool focused, Fw::FocusReason reason)
 
 bool UIWindow::onMousePress(const Point& mousePos, Fw::MouseButton button)
 {
-    if(!getChildByPos(mousePos)) {
+    UIWidgetPtr clickedChild = getChildByPos(mousePos);
+    if(!clickedChild || clickedChild->isPhantom()) {
         m_moving = true;
         m_movingReference = mousePos - getRect().topLeft();
-        return true;
     }
     return UIWidget::onMousePress(mousePos, button);
 }

src/otclient/otclient.cpp

@@ -148,7 +148,7 @@ void OTClient::run()
             render();
 
             // render fps
-            defaultFont->renderText(fpsText, Point(g_graphics.getScreenSize().width() - fpsTextSize.width() - 10, 10));
+            defaultFont->renderText(fpsText, Point(g_graphics.getScreenSize().width() - fpsTextSize.width() - 10, 34));
 
             // render end
             g_graphics.endRender();

tools/gimp-bitmap-generator/generate_bitmap_font.py

@@ -25,7 +25,7 @@ def generate_bitmap_font(timg, tdrawable, font, font_size, first_char, glyph_wid
 	disp = gimp.Display(image)
 
 	for i in range(char_begin, char_end):
-		if i == 129 or (i >= 141 and i <= 144) or i == 157:
+		if i == 127 or i == 129 or (i >= 141 and i <= 144) or i == 157:
 			string = u"\u25A1"
 		else:
 			string = chr(i).decode('cp1252')