// OT-MMO: mapa del juego (M). Lo pinta game_mapa.lua con el minimapa completo (data/mapa-mundo.otmm) y los lugares que
// manda el servidor (server/scripts/mapa.lua, opcode 113).
// MapaRotulo no es una sección: es el nombre de zona dibujado SOBRE el mapa (text al 70 % para no tapar el terreno).
MapaFila < UIWidget
  height: 20
  focusable: false
  $hover:
    background-color: $otmmo-surface-hover
  $on:
    background-color: $otmmo-surface

  UIWidget
    id: icono
    size: 13 13
    anchors.left: parent.left
    anchors.verticalCenter: parent.verticalCenter
    margin-left: 4
    phantom: true

  Label
    id: nombre
    anchors.left: icono.right
    anchors.right: parent.right
    anchors.verticalCenter: parent.verticalCenter
    margin-left: 8
    ttf-font: geist
    ttf-font-size: 12
    color: $otmmo-text
    phantom: true

// Rótulo de zona en la lista: la sección común con el alto que pide el verticalBox.
MapaZona < GameSection
  text-auto-resize: false
  height: 20
  margin-top: 12

MapaRotulo < Label
  ttf-font: geistsemibold
  ttf-font-size: 12
  ttf-stroke: 1 #10161C
  color: #E2E5E6B0
  text-auto-resize: true
  phantom: true

MapaMarca < UIWidget
  size: 13 13
  focusable: false

MainWindow
  id: ventanaMapa
  size: 840 560
  text: Mapa
  @onEscape: modules.game_mapa.toggle()

  Minimap
    id: mapa
    anchors.top: parent.top
    anchors.left: parent.left
    anchors.bottom: parent.bottom
    width: 580
    clipping: true
    border-width: 1
    border-color: $otmmo-border

  // zoom: abajo a la izquierda, dentro del mapa (game_mapa.lua los apaga en el límite)
  GameIconButton
    id: zoomMas
    anchors.left: mapa.left
    anchors.bottom: zoomMenos.top
    margin-left: 8
    margin-bottom: 4
    icon-source: /images/game/hud/iconos/zoom-mas
    tooltip: Acercar
    @onClick: modules.game_mapa.zoomMas()

  GameIconButton
    id: zoomMenos
    anchors.left: mapa.left
    anchors.bottom: mapa.bottom
    margin-left: 8
    margin-bottom: 8
    icon-source: /images/game/hud/iconos/zoom-menos
    tooltip: Alejar
    @onClick: modules.game_mapa.zoomMenos()

  Label
    id: zona
    anchors.top: parent.top
    anchors.left: mapa.right
    anchors.right: parent.right
    margin-left: 16
    height: 22
    ttf-font: geistsemibold
    ttf-font-size: 15
    color: $otmmo-text

  Label
    id: piso
    anchors.top: zona.bottom
    anchors.left: zona.left
    anchors.right: parent.right
    height: 16
    ttf-font: geist
    ttf-font-size: 12
    color: $otmmo-text-2

  // con las Tierras Altas ya no caben todos los lugares: la lista se desplaza con la rueda
  VerticalScrollBar
    id: listaBarra
    anchors.top: piso.bottom
    anchors.bottom: ayuda.top
    margin-top: 6
    margin-bottom: 8
    anchors.right: parent.right
    step: 18
    pixels-scroll: true

  ScrollablePanel
    id: lista
    anchors.top: piso.bottom
    anchors.left: zona.left
    anchors.right: listaBarra.left
    anchors.bottom: ayuda.top
    margin-top: 6
    margin-bottom: 8
    margin-right: 4
    vertical-scrollbar: listaBarra
    layout:
      type: verticalBox

  Label
    id: ayuda
    anchors.left: zona.left
    anchors.right: parent.right
    anchors.bottom: centrar.top
    margin-bottom: 10
    text-wrap: true
    text-auto-resize: true
    ttf-font: geist
    ttf-font-size: 11
    color: $otmmo-text-2
    text: Rueda o + y -: acercar o alejar. Arrastra para mover. Clic: caminar hasta ahí. Clic en una misión: marcar la ruta.

  Button
    id: centrar
    anchors.left: zona.left
    anchors.right: parent.right
    anchors.bottom: parent.bottom
    height: 26
    text: Centrar en mí
    @onClick: modules.game_mapa.centrar()