create in game interface panels and renable about and options windows

modules/about/about.lua

@@ -0,0 +1,19 @@
+About = {}
+
+-- private variables
+local about
+
+-- public functions
+function About.create()
+  about = UI.loadAndDisplay("/about/about.otui")
+  UI.root:lockChild(about)
+end
+
+function About.destroy()
+  about:destroy()
+  about = nil
+end
+
+function About.openWebpage()
+  displayErrorBox("Error", "Not implemented yet")
+end

modules/about/about.otmod

@@ -0,0 +1,13 @@
+Module
+  name: about
+  description: Create the about window
+  author: OTClient team
+  website: https://github.com/edubart/otclient
+  autoLoad: true
+  dependencies:
+    - core
+
+  onLoad: |
+    require 'about'
+    return true
+

modules/about/about.otui

@@ -0,0 +1,61 @@
+MainWindow
+  id: about
+  title: Info
+  size: 244 221
+
+  FlatPanel
+    size: 208 129
+    anchors.left: parent.left
+    anchors.top: parent.top
+    margin.top: 32
+    margin.left: 18
+
+    Label
+      align: center
+      text: |-
+        OTClient
+        Version 0.2.0
+        Created by edubart
+      anchors.horizontalCenter: parent.horizontalCenter
+      anchors.top: parent.top
+      margin.top: 20
+
+    HorizontalSeparator
+      size: 190 2
+      anchors.left: parent.left
+      anchors.top: parent.top
+      margin.top: 83
+      margin.left: 9
+
+    Label
+      text: Official Website
+      anchors.left: parent.left
+      anchors.bottom: parent.bottom
+      margin.bottom: 14
+      margin.left: 9
+
+    Button
+      text: Github Page
+      size: 88 24
+      anchors.right: parent.right
+      anchors.bottom: parent.bottom
+      margin.bottom: 9
+      margin.right: 9
+      onClick: About.openWebpage()
+
+  HorizontalSeparator
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.bottom: parent.bottom
+    margin.bottom: 40
+    margin.left: 13
+    margin.right: 13
+
+  Button
+    text: Ok
+    size: 46 24
+    anchors.left: parent.left
+    anchors.top: parent.top
+    margin.top: 191
+    margin.left: 188
+    onClick: About.destroy()

modules/core_styles/styles/panels.otui

@@ -1,23 +1,28 @@
 Panel < UIWidget
   phantom: true
 
+RectPanel < UIWidget
+  image: /core_styles/images/empty_rect.png
+
 FlatPanel < Panel
   border-image:
     source: /core_styles/images/panel_flat.png
     border: 4
 
 TopPanel < Panel
-  height: 34
+  height: 36
   image:
     source: /core_styles/images/top_panel.png
     repeated: true
 
-RoundedPanel < Panel
-  background-color: #ffffffdd
+InterfacePanel < Panel
+  focusable: false
   border-image:
-    source: /core_styles/images/panel_rounded.png
+    source: /core_styles/images/interface_panel.png
     border: 4
 
-
-RectPanel < UIWidget
-  image: /core_styles/images/empty_rect.png
+MapPanel < UIMap
+  map margin: 4
+  border-image:
+    source: /core_styles/images/map_panel.png
+    border: 4

modules/entergame/characterlist.lua

@@ -91,12 +91,15 @@ end
 
 function CharacterList.destroy()
   CharacterList.hide()
-  EnterGame.show()
+  if not Game.isOnline then
+    EnterGame.show()
+  end
 end
 
 function CharacterList.show()
   if not loadBox then
     charactersWindow:show()
+    charactersWindow:focus()
   end
 end
 

modules/entergame/entergame.lua

@@ -43,6 +43,7 @@ end
 
 function EnterGame.show()
   enterGame:show()
+  enterGame:focus()
 end
 
 function EnterGame.hide()

modules/game/game.lua

@@ -1,6 +1,4 @@
 require 'textmessage'
-require 'skill'
-require 'vip'
 
 -- private functions
 local function onGameKeyPress(self, keyCode, keyChar, keyboardModifiers)
@@ -16,28 +14,37 @@ local function onGameKeyPress(self, keyCode, keyChar, keyboardModifiers)
   return false
 end
 
-local function createMainInterface()
+-- public functions
+function Game.create()
   Game.gameUi = loadUI('/game/ui/gameinterface.otui', UI.root)
   Game.gameMapUi = Game.gameUi:getChildById('gameMap')
   Game.gameUi.onKeyPress = onGameKeyPress
 
-  createTextInterface()
-  createVipWindow()
+  TextMessage.create()
 end
 
-
-local function destroyMainInterface()
+function Game.destroy()
   if Game.gameUi then
     Game.gameUi:destroy()
     Game.gameUi = nil
   end
 end
 
--- public functions
+function Game.show()
+  Game.gameUi:show()
+  Game.gameUi:focus()
+  Game.gameMapUi:focus()
+end
+
+function Game.hide()
+  Game.gameUi:hide()
+end
+
+-- hooked events
 function Game.onLogin()
   Background.hide()
   CharacterList.destroyLoadBox()
-  createMainInterface()
+  Game.show()
 end
 
 function Game.onLoginError(message)
@@ -53,7 +60,7 @@ function Game.onConnectionError(message)
 end
 
 function Game.onLogout()
+  Game.hide()
   Background.show()
   CharacterList.show()
-  destroyMainInterface()
 end

modules/game/game.otmod

@@ -3,7 +3,6 @@ Module
   description: Create the game interface, where the ingame stuff starts
   author: OTClient team
   website: https://github.com/edubart/otclient
-  version: 0.2
   autoLoad: true
   dependencies:
     - core
@@ -14,4 +13,7 @@ Module
 
   onLoad: |
     require 'game'
+    require 'textmessage'
+    Game.create()
+    Game.hide()
     return true

modules/game/textmessage.lua

@@ -1,37 +1,41 @@
-importStyles('/game/ui/textmessage.otui')
+TextMessage = {}
 
-local bottomLabelWidget, centerLabelWidget
+-- require styles
+importStyles '/game/ui/textmessage.otui'
 
+-- private variables
+local bottomLabelWidget, centerLabelWidget
 local messageTypes = {
-first = 12,
-{ type = 'MessageOrange', color = '#C87832', showOnConsole = true, showOnWindow = false },
-{ type = 'MessageOrange', color = '#C87832', showOnConsole = true, showOnWindow = false },
-{ type = 'MessageRed', color = '#C83200', showOnConsole = true, showOnWindow = true, windowLocation = 'CenterLabel' },
-{ type = 'MessageWhite', color = '#FFFFFF', showOnConsole = true, showOnWindow = true, windowLocation = 'CenterLabel' },
-{ type = 'MessageWhite', color = '#FFFFFF', showOnConsole = true, showOnWindow = true, windowLocation = 'BottomLabel' },
-{ type = 'MessageWhite', color = '#FFFFFF', showOnConsole = true, showOnWindow = true, windowLocation = 'BottomLabel' },
-{ type = 'MessageGreen', color = '#3FBE32', showOnConsole = true, showOnWindow = true, windowLocation = 'CenterLabel' },
-{ type = 'MessageWhite', color = '#FFFFFF', showOnConsole = false, showOnWindow = true, windowLocation = 'BottomLabel' },
-{ type = 'MessageBlue', color = '#3264C8', showOnConsole = true, showOnWindow = false },
-{ type = 'MessageRed', color = '#C83200', showOnConsole = true, showOnWindow = false }
+  first = 12,
+  { type = 'MessageOrange', color = '#C87832', showOnConsole = true, showOnWindow = false },
+  { type = 'MessageOrange', color = '#C87832', showOnConsole = true, showOnWindow = false },
+  { type = 'MessageRed', color = '#C83200', showOnConsole = true, showOnWindow = true, windowLocation = 'CenterLabel' },
+  { type = 'MessageWhite', color = '#FFFFFF', showOnConsole = true, showOnWindow = true, windowLocation = 'CenterLabel' },
+  { type = 'MessageWhite', color = '#FFFFFF', showOnConsole = true, showOnWindow = true, windowLocation = 'BottomLabel' },
+  { type = 'MessageWhite', color = '#FFFFFF', showOnConsole = true, showOnWindow = true, windowLocation = 'BottomLabel' },
+  { type = 'MessageGreen', color = '#3FBE32', showOnConsole = true, showOnWindow = true, windowLocation = 'CenterLabel' },
+  { type = 'MessageWhite', color = '#FFFFFF', showOnConsole = false, showOnWindow = true, windowLocation = 'BottomLabel' },
+  { type = 'MessageBlue', color = '#3264C8', showOnConsole = true, showOnWindow = false },
+  { type = 'MessageRed', color = '#C83200', showOnConsole = true, showOnWindow = false }
 }
 
-function createTextInterface()
+-- public functions
+function TextMessage.create()
   bottomLabelWidget = UILabel.create()
   Game.gameMapUi:addChild(bottomLabelWidget)
-  
+
   centerLabelWidget = UILabel.create()
   Game.gameMapUi:addChild(centerLabelWidget)
 end
 
+-- hooked events
 function Game.onTextMessage(type, message)
-
   local messageType = messageTypes[type - messageTypes.first]
-  
+
   if messageType.showOnConsole then
     -- TODO
   end
-  
+
   if messageType.showOnWindow then
     local label
     if messageType.windowLocation == 'BottomLabel' then
@@ -39,18 +43,16 @@ function Game.onTextMessage(type, message)
     elseif messageType.windowLocation == 'CenterLabel' then
       label = centerLabelWidget
     end
-    
+
     label:setVisible(true)
     label:setForegroundColor(messageType.color)
     label:setText(message)
-  
+
     label:setStyle(messageType.windowLocation)
-    
+
     time = #message * 75
     scheduleEvent(function()
                     label:setVisible(false)
                   end, time)
   end
-
 end
-

modules/game/ui/gameinterface.otui

@@ -2,9 +2,24 @@ UIWidget
   id: gameRootInterface
   anchors.fill: parent
   anchors.top: topMenu.bottom
-  margin.top: 1
 
-  UIMap
+  InterfacePanel
+    id: rightPanel
+    width: 200
+    anchors.right: parent.right
+    anchors.top: parent.top
+    anchors.bottom: parent.bottom
+
+  InterfacePanel
+    id: bottomPanel
+    height: 140
+    anchors.left: parent.left
+    anchors.right: rightPanel.left
+    anchors.bottom: parent.bottom
+
+  MapPanel
     id: gameMap
-    anchors.fill:parent
-    margin.right: 200
+    anchors.left: parent.left
+    anchors.right: rightPanel.left
+    anchors.top: parent.top
+    anchors.bottom: bottomPanel.top

modules/options/options.lua

@@ -0,0 +1,19 @@
+Options = {}
+
+-- private variables
+local options
+
+-- public functions
+function Options.create()
+  options = UI.loadAndDisplay("/options/options.otui")
+  UI.root:lockChild(options)
+end
+
+function Options.destroy()
+  options:destroy()
+  options = nil
+end
+
+function Options.openWebpage()
+  displayErrorBox("Error", "Not implemented yet")
+end

modules/options/options.otmod

@@ -0,0 +1,13 @@
+Module
+  name: options
+  description: Create the options window
+  author: OTClient team
+  website: https://github.com/edubart/otclient
+  autoLoad: true
+  dependencies:
+    - core
+
+  onLoad: |
+    require 'options'
+    return true
+

modules/options/options.otui

@@ -0,0 +1,116 @@
+MainWindow
+  id: optionsWindow
+  title: Options
+  size: 286 262
+
+  // general
+  Button
+    text: General
+    anchors.left: parent.left
+    anchors.top: parent.top
+    margin.left: 18
+    margin.top: 32
+    onClick: displayErrorBox("Error", "Not implemented yet")
+
+  Label
+    text: |-
+      Change general
+      game options
+    anchors.left: prev.right
+    anchors.top: prev.top
+    margin.left: 10
+    margin.top: -2
+
+  // graphics
+  Button
+    text: Graphics
+    anchors.left: parent.left
+    anchors.top: parent.top
+    margin.left: 18
+    margin.top: 65
+    onClick: displayErrorBox("Error", "Not implemented yet")
+
+  Label
+    text: |-
+      Change graphics and
+      performance settings
+    anchors.left: prev.right
+    anchors.top: prev.top
+    margin.left: 10
+    margin.top: -2
+
+  // console
+  Button
+    text: Console
+    anchors.left: parent.left
+    anchors.top: parent.top
+    margin.left: 18
+    margin.top: 98
+    onClick: displayErrorBox("Error", "Not implemented yet")
+
+  Label
+    text: Customise the console
+    anchors.left: prev.right
+    anchors.top: prev.top
+    margin.left: 10
+    margin.top: -2
+
+  // hotkeys
+  Button
+    text: Hotkeys
+    anchors.left: parent.left
+    anchors.top: parent.top
+    margin.left: 18
+    margin.top: 131
+    onClick: displayErrorBox("Error", "Not implemented yet")
+
+  Label
+    text: Edit your hotkey texts
+    anchors.left: prev.right
+    anchors.top: prev.top
+    margin.left: 10
+    margin.top: -2
+
+  HorizontalSeparator
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.bottom: parent.bottom
+    margin.bottom: 97
+    margin.left: 18
+    margin.right: 18
+
+  // motd
+  Button
+    text: Motd
+    anchors.left: parent.left
+    anchors.bottom: parent.bottom
+    margin.left: 18
+    margin.bottom: 60
+    onClick: displayErrorBox("Error", "Not implemented yet")
+
+  Label
+    text: |-
+      Show the most recent
+      Message of the Day
+    anchors.left: prev.right
+    anchors.top: prev.top
+    margin.left: 10
+    margin.top: -2
+
+  HorizontalSeparator
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.bottom: parent.bottom
+    margin.bottom: 40
+    margin.left: 13
+    margin.right: 13
+
+  // ok button
+  Button
+    text: Ok
+    width: 64
+    anchors.right: parent.right
+    anchors.bottom: parent.bottom
+    margin.right: 10
+    margin.bottom: 10
+    onClick: Options.destroy()

modules/skills/skills.lua

@@ -1,32 +1,30 @@
 skillWindow = nil
 
-local skills = {"Fist Fighting", "Club Fighting", "Sword Fighting", "Axe Fighting", "Distance Fighting", "Shielding", "Fishing"} 
+local skills = {"Fist Fighting", "Club Fighting", "Sword Fighting", "Axe Fighting", "Distance Fighting", "Shielding", "Fishing"}
 
 function csw()
   skillWindow = loadUI("/game/ui/skillwindow.otui", UI.root)
-  
+
   local skillPanel = skillWindow:getChildById('skillPanel')
-  
+
   -- create first widget cause of layout
   local widget = UIWidget.create()
   skillPanel:addChild(widget)
   widget:setStyle('SkillFirstWidget')
-  
+
   -- create skills
   for i=1,#skills,1 do
     local nameLabel = UILabel.create()
     skillPanel:addChild(nameLabel)
     nameLabel:setStyle('SkillNameLabel')
     nameLabel:setText(skills[i])
-    
 
     local levelLabel = UILabel.create()
     skillPanel:addChild(levelLabel)
     levelLabel:setStyle('SkillLevelLabel')
     levelLabel:setId('skillLevelId' .. i)
     levelLabel:setText('10')
-    
-    
+
     local percentPanel = UIWidget.create()
     skillPanel:addChild(percentPanel)
     percentPanel:setStyle('SkillPercentPanel')
@@ -36,5 +34,4 @@ end
 function Game.setSkill(id, level, percent)
   local skillPanel = skillWindow:getChildById('skillPanel')
   local levelLabel = skillPanel:getChildById('skillLevel' .. id)
-end
-
+end

modules/skills/skills.otui

@@ -44,4 +44,4 @@ Window
     margin.top: 19
     margin.bottom: 3
     margin.left: 3
-    margin.right: 3
+    margin.right: 3

modules/topmenu/topmenu.otui

@@ -11,6 +11,7 @@ TopPanel
     anchors.left: parent.left
     margin.top: 3
     margin.left: 6
+    onClick: Options.create()
 
     UIWidget
       size: 16 16
@@ -22,7 +23,12 @@ TopPanel
     anchors.top: prev.top
     anchors.left: prev.right
     margin.left: 6
-    onClick: EnterGame.show()
+    onClick: |
+      if Game.isOnline() then
+        CharacterList.show()
+      else
+        EnterGame.show()
+      end
 
     UIWidget
       size: 16 16
@@ -46,4 +52,17 @@ TopPanel
       size: 16 16
       image: /core_styles/icons/logout.png
       anchors.centerIn: parent
+      phantom: true
+
+  TopButton
+    anchors.top: parent.top
+    anchors.right: prev.left
+    margin.top: 3
+    margin.right: 6
+    onClick: About.create()
+
+    UIWidget
+      size: 16 16
+      image: /core_styles/icons/about.png
+      anchors.centerIn: parent
       phantom: true

modules/viplist/viplist.lua

@@ -6,31 +6,31 @@ end
 
 function Game.onAddVip(id, name, online)
   local vipList = vipWindow:getChildById('vipList')
-  
+
   local label = UILabel.create()
   vipList:addChild(label)
   label:setId('vip' .. id)
   label:setText(name)
   label:setStyle('VipListLabel')
-  
+
   if online then
     label:setForegroundColor('#00ff00')
   else
     label:setForegroundColor('#ff0000')
   end
-  
+
   label.vipOnline = online
 end
 
 function Game.onVipStateChange(id, online)
   local vipList = vipWindow:getChildById('vipList')
   local label = vipList:getChildById('vip' .. id)
-  
+
   if online then
     label:setForegroundColor('#00ff00')
   else
     label:setForegroundColor('#ff0000')
   end
-  
+
   label.vipOnline = online
 end

src/framework/luascript/luafunctions.cpp

@@ -71,6 +71,7 @@ void LuaInterface::registerFunctions()
     g_lua.bindClassMemberFunction<UIWidget>("show", &UIWidget::show);
     g_lua.bindClassMemberFunction<UIWidget>("lock", &UIWidget::lock);
     g_lua.bindClassMemberFunction<UIWidget>("unlock", &UIWidget::unlock);
+    g_lua.bindClassMemberFunction<UIWidget>("focus", &UIWidget::focus);
     g_lua.bindClassMemberFunction<UIWidget>("getChildren", &UIWidget::getChildren);
     g_lua.bindClassMemberFunction<UIWidget>("getChildById", &UIWidget::getChildById);
     g_lua.bindClassMemberFunction<UIWidget>("getChildByIndex", &UIWidget::getChildByIndex);

src/framework/ui/uiwidget.cpp

@@ -82,13 +82,22 @@ void UIWidget::destroy()
 }
 
 void UIWidget::render()
+{
+    renderSelf();
+    renderChildren();
+}
+
+void UIWidget::renderSelf()
 {
     // draw background
     if(m_image) {
         g_graphics.bindColor(m_backgroundColor);
         m_image->draw(m_rect);
     }
+}
 
+void UIWidget::renderChildren()
+{
     // draw children
     for(const UIWidgetPtr& child : m_children) {
         // render only visible children with a valid rect
@@ -191,6 +200,12 @@ void UIWidget::unlock()
         parent->unlockChild(asUIWidget());
 }
 
+void UIWidget::focus()
+{
+    if(UIWidgetPtr parent = getParent())
+        parent->focusChild(asUIWidget(), Fw::ActiveFocusReason);
+}
+
 bool UIWidget::isVisible()
 {
     if(!m_visible)

src/framework/ui/uiwidget.h

@@ -40,6 +40,8 @@ public:
 
     virtual void setup();
     virtual void render();
+    void renderSelf();
+    void renderChildren();
 
     void setVisible(bool visible);
     void setEnabled(bool enabled) { m_enabled = enabled; updateState(Fw::DisabledState); }
@@ -76,6 +78,7 @@ public:
     void enable() { setEnabled(true); }
     void lock();
     void unlock();
+    void focus();
 
     bool isActive() const { return hasState(Fw::ActiveState); }
     bool isEnabled() const { return !hasState(Fw::DisabledState); }

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, 34));
+            defaultFont->renderText(fpsText, Point(g_graphics.getScreenSize().width() - fpsTextSize.width() - 10, 38));
 
             // render end
             g_graphics.endRender();

src/otclient/ui/uimap.cpp

@@ -23,6 +23,8 @@
 #include "uimap.h"
 #include <otclient/core/map.h>
 #include <otclient/core/game.h>
+#include <framework/otml/otml.h>
+#include <framework/graphics/graphics.h>
 
 void UIMap::setup()
 {
@@ -31,10 +33,15 @@ void UIMap::setup()
 
 void UIMap::render()
 {
-    if(g_game.isOnline())
-        g_map.draw(m_rect);
+    renderSelf();
 
-    UIWidget::render();
+    if(g_game.isOnline()) {
+        g_graphics.bindColor(Fw::black);
+        g_graphics.drawBoundingRect(m_mapRect.expanded(1));
+        g_map.draw(m_mapRect);
+    }
+
+    renderChildren();
 }
 
 bool UIMap::onKeyPress(uchar keyCode, char keyChar, int keyboardModifiers)
@@ -83,6 +90,16 @@ bool UIMap::onKeyPress(uchar keyCode, char keyChar, int keyboardModifiers)
     return UIWidget::onKeyPress(keyCode, keyChar, keyboardModifiers);
 }
 
+void UIMap::onStyleApply(const OTMLNodePtr& styleNode)
+{
+    for(OTMLNodePtr node : styleNode->children()) {
+        if(node->tag() == "map margin")
+            m_mapMargin = node->value<int>();
+    }
+
+    UIWidget::onStyleApply(styleNode);
+}
+
 bool UIMap::onMousePress(const Point& mousePos, Fw::MouseButton button)
 {
     return UIWidget::onMousePress(mousePos, button);
@@ -90,10 +107,9 @@ bool UIMap::onMousePress(const Point& mousePos, Fw::MouseButton button)
 
 void UIMap::onGeometryUpdate(const Rect& oldRect, const Rect& newRect)
 {
-    Rect mapRect = newRect;
+    Rect mapRect = newRect.expanded(-m_mapMargin-1);
     Size mapSize(15*32, 11*32);
     mapSize.scale(mapRect.size(), Fw::KeepAspectRatio);
-    mapRect.setSize(mapSize);
-    if(mapRect != newRect)
-        setRect(mapRect);
+    m_mapRect.setSize(mapSize);
+    m_mapRect.moveCenter(newRect.center());
 }

src/otclient/ui/uimap.h

@@ -33,11 +33,14 @@ public:
     void render();
 
 protected:
+    virtual void onStyleApply(const OTMLNodePtr& styleNode);
     virtual bool onKeyPress(uchar keyCode, char keyChar, int keyboardModifiers);
     virtual bool onMousePress(const Point& mousePos, Fw::MouseButton button);
     virtual void onGeometryUpdate(const Rect& oldRect, const Rect& newRect);
 
 private:
+    int m_mapMargin;
+    Rect m_mapRect;
 };
 
 #endif