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