// OT-MMO: viaje rápido (opcode 132, server/scripts/viaje.lua). Carta náutica de Valdren en pixel art (PixelLab) dentro
// de un marco de hierro y oro: los destinos son faros; los descubiertos están encendidos y los que no, en sombra. Al
// elegir uno se traza la ruta en oro y la placa de la derecha dice adónde, cuánto y por dónde. Todo el arte sale de
// images/ (origen en CREDITOS.md). El oro #C7A86B es el de game_dungeon, game_pvp, la web y el launcher.

ViajeBoton < UIButton
  height: 34
  ttf-font: geistsemibold
  ttf-font-size: 14
  color: #1B1408
  background-color: #C7A86B
  border-width: 1
  border-color: #E8D3A2
  click-sound: 2774

  $hover !disabled:
    background-color: #D6BA80

  $pressed !disabled:
    background-color: #A88B55
    text-offset: 0 1

  $disabled:
    color: #9AA7AE
    background-color: #232C32
    border-color: #39444C

ViajeCerrar < UIButton
  size: 22 22
  ttf-font: geistsemibold
  ttf-font-size: 14
  color: #9AA7AE
  text: X
  background-color: alpha

  $hover:
    color: #C7A86B

ViajeMarca < UIWidget
  size: 32 32
  image-source: images/marca
  image-smooth: false
  focusable: false
  change-cursor-image: true
  cursor: pointer

  $disabled:
    change-cursor-image: false

ViajeAnillo < UIWidget
  size: 44 44
  image-source: images/anillo
  image-smooth: false
  phantom: true
  focusable: false

ViajePunto < UIWidget
  size: 6 6
  background-color: #F0D89A
  border-width: 1
  border-color: #1B1408
  phantom: true
  focusable: false

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

ViajeDestino < UIWidget
  height: 17
  focusable: false
  change-cursor-image: true
  cursor: pointer

  $disabled:
    change-cursor-image: false

  UIWidget
    id: punto
    anchors.verticalCenter: parent.verticalCenter
    anchors.left: parent.left
    margin-left: 4
    size: 5 5
    background-color: #C7A86B
    phantom: true

  Label
    id: nombre
    anchors.verticalCenter: parent.verticalCenter
    anchors.left: parent.left
    margin-left: 16
    ttf-font: geist
    ttf-font-size: 12
    color: #E2E5E6
    text-auto-resize: true
    phantom: true

  Label
    id: coste
    anchors.verticalCenter: parent.verticalCenter
    anchors.right: parent.right
    margin-right: 4
    ttf-font: geistmono
    ttf-font-size: 12
    color: #E2E5E6
    text-auto-resize: true
    phantom: true

UIWindow
  id: ventanaViaje
  size: 900 668
  image-source: images/marco
  image-border: 96
  image-smooth: false
  anchors.centerIn: parent
  @onEscape: modules.game_viaje.cerrar()

  UIWidget
    id: carta
    anchors.top: parent.top
    anchors.left: parent.left
    margin-top: 62
    margin-left: 62
    size: 480 544
    image-source: images/carta
    image-smooth: false
    border-width: 1
    border-color: #6E5B37
    clipping: true

  ViajeCerrar
    id: cerrar
    anchors.top: parent.top
    anchors.right: parent.right
    margin-top: 52
    margin-right: 54
    @onClick: modules.game_viaje.cerrar()

  Label
    id: liga
    anchors.top: carta.top
    anchors.left: carta.right
    margin-left: 28
    margin-top: 2
    ttf-font: geist
    ttf-font-size: 12
    color: #C7A86B
    text-auto-resize: true

  Label
    id: desde
    anchors.top: liga.bottom
    anchors.left: liga.left
    margin-top: 2
    ttf-font: geistsemibold
    ttf-font-size: 18
    color: #E2E5E6
    text-auto-resize: true

  UIWidget
    id: filete
    anchors.top: desde.bottom
    anchors.left: liga.left
    anchors.right: parent.right
    margin-top: 14
    margin-right: 62
    height: 1
    background-color: #C7A86B80
    phantom: true

  Label
    id: nombre
    anchors.top: filete.bottom
    anchors.left: liga.left
    anchors.right: parent.right
    margin-top: 16
    margin-right: 62
    height: 28
    ttf-font: geistsemibold
    ttf-font-size: 22
    color: #E8D3A2

  Label
    id: region
    anchors.top: nombre.bottom
    anchors.left: liga.left
    anchors.right: parent.right
    margin-top: 2
    margin-right: 62
    height: 17
    ttf-font: geist
    ttf-font-size: 13
    color: #E2E5E6

  Label
    id: meta
    anchors.top: region.bottom
    anchors.left: liga.left
    anchors.right: parent.right
    margin-top: 3
    margin-right: 62
    height: 30
    text-wrap: true
    ttf-font: geist
    ttf-font-size: 12
    color: #9AA7AE

  Label
    id: coste
    anchors.top: meta.bottom
    anchors.left: liga.left
    margin-top: 2
    ttf-font: geistmono
    ttf-font-size: 28
    color: #E2E5E6
    text-auto-resize: true

  Label
    id: monedas
    anchors.bottom: coste.bottom
    anchors.left: coste.right
    margin-left: 8
    margin-bottom: 5
    ttf-font: geist
    ttf-font-size: 12
    color: #9AA7AE
    text-auto-resize: true

  Label
    id: llevas
    anchors.top: coste.bottom
    anchors.left: liga.left
    anchors.right: parent.right
    margin-top: 2
    margin-right: 62
    height: 15
    ttf-font: geist
    ttf-font-size: 11
    color: #9AA7AE

  ViajeBoton
    id: viajar
    anchors.top: llevas.bottom
    anchors.left: liga.left
    anchors.right: parent.right
    margin-top: 14
    margin-right: 62
    text: Viajar
    @onClick: modules.game_viaje.viajar()

  Label
    id: aviso
    anchors.top: viajar.bottom
    anchors.left: liga.left
    anchors.right: parent.right
    margin-top: 8
    margin-right: 62
    height: 28
    text-wrap: true
    ttf-font: geist
    ttf-font-size: 11
    color: #DC6B6B

  Label
    id: tDestinos
    anchors.top: aviso.bottom
    anchors.left: liga.left
    margin-top: 6
    ttf-font: geist
    ttf-font-size: 11
    color: #9AA7AE
    text: Destinos de la Liga
    text-auto-resize: true

  Label
    id: cuenta
    anchors.top: tDestinos.top
    anchors.right: parent.right
    margin-right: 66
    ttf-font: geistmono
    ttf-font-size: 11
    color: #C7A86B
    text-auto-resize: true

  Panel
    id: lista
    anchors.top: tDestinos.bottom
    anchors.left: liga.left
    anchors.right: parent.right
    margin-top: 6
    margin-right: 62
    height: 187
    layout:
      type: verticalBox

// Pantalla de viaje: el mapa a oscuras y, en medio, la escena dentro del mismo marco. Capas (de atrás adelante): fondo
// que se desliza despacio, nubes, el barco o el carro animado por fotogramas y el mar o el camino de delante, rápido.
// Todo se mueve con image-clip sobre tiras dobles (sin tocar el layout). Phantom: no roba clics.
ViajeFundido < UIWidget
  background-color: #0B0F1366
  phantom: true
  focusable: false
  visible: false

  UIWidget
    id: cuadro
    anchors.centerIn: parent
    margin-top: 10
    size: 664 404
    image-source: images/marco
    image-border: 64
    image-smooth: false
    phantom: true

    UIWidget
      id: vista
      anchors.centerIn: parent
      size: 600 340
      clipping: true
      background-color: #1B2026
      phantom: true

      UIWidget
        id: fondo
        anchors.fill: parent
        image-smooth: false
        phantom: true

      UIWidget
        id: nubes
        anchors.top: parent.top
        anchors.left: parent.left
        margin-top: 6
        size: 600 128
        image-source: images/nubes
        image-smooth: false
        opacity: 0.9
        phantom: true

      UIWidget
        id: sprite
        anchors.top: parent.top
        anchors.left: parent.left
        size: 256 192
        image-smooth: false
        phantom: true

      UIWidget
        id: frente
        anchors.bottom: parent.bottom
        anchors.left: parent.left
        size: 600 128
        image-smooth: false
        phantom: true

  Label
    id: titulo
    anchors.bottom: cuadro.top
    anchors.horizontalCenter: parent.horizontalCenter
    margin-bottom: 10
    ttf-font: geistsemibold
    ttf-font-size: 24
    ttf-stroke: 2 #0B0F13
    color: #E8D3A2
    text-auto-resize: true
    phantom: true

  Label
    id: sub
    anchors.top: cuadro.bottom
    anchors.horizontalCenter: parent.horizontalCenter
    margin-top: 10
    ttf-font: geistsemibold
    ttf-font-size: 14
    ttf-stroke: 2 #0B0F13
    color: #E8D3A2
    text-auto-resize: true
    phantom: true

// Aviso «Destino descubierto»: el mismo lenguaje que el cartel de zona (game_zonas), con el faro encendido.
CartelDestino < UIWidget
  size: 520 120
  phantom: true
  focusable: false
  visible: false

  UIWidget
    id: faro
    anchors.top: parent.top
    anchors.horizontalCenter: parent.horizontalCenter
    size: 32 32
    image-source: images/marca
    image-smooth: false
    phantom: true

  Label
    id: etiqueta
    anchors.top: faro.bottom
    anchors.horizontalCenter: parent.horizontalCenter
    margin-top: 2
    ttf-font: geist
    ttf-font-size: 13
    ttf-stroke: 1 #10161C
    color: #C7A86B
    text: Destino descubierto
    text-auto-resize: true
    phantom: true

  Label
    id: nombre
    anchors.top: etiqueta.bottom
    anchors.horizontalCenter: parent.horizontalCenter
    margin-top: 2
    ttf-font: $otmmo-font-strong
    ttf-font-size: 26
    ttf-stroke: 2 #10161C
    color: $otmmo-text
    text-auto-resize: true
    phantom: true

  Label
    id: sub
    anchors.top: nombre.bottom
    anchors.horizontalCenter: parent.horizontalCenter
    margin-top: 4
    ttf-font: $otmmo-font
    ttf-font-size: 13
    ttf-stroke: 1 #10161C
    color: $otmmo-text-2
    text-auto-resize: true
    phantom: true