// OT-MMO: tiendas de mercader (opcode 141, server/scripts/tiendas/tiendas.lua). Marco VALDREN fino; oro #C7A86B.
// Cuatro piezas: la tienda de otro (ver, comprar, venderle), el editor para montar la propia, el panel de la tienda
// abierta y el aviso de puesto libre. Sin arte nuevo: los objetos se ven con su sprite. Todo son estilos: game_tiendas
// crea cada pieza con g_ui.createWidget.

TiendaEtiqueta < Label
  ttf-font: geist
  ttf-font-size: 11
  color: #9AA7AE
  text-auto-resize: true
  phantom: true

TiendaCampo < TextEdit
  height: 26
  ttf-font: geist
  ttf-font-size: 13
  padding-left: 8
  text-offset: 0 5

TiendaNumero < TextEdit
  size: 64 26
  ttf-font: geistmono
  ttf-font-size: 12
  padding-left: 6
  text-offset: 0 5

TiendaBotonSec < UIButton
  height: 26
  ttf-font: geistsemibold
  ttf-font-size: 12
  color: #E8D3A2
  background-color: alpha
  border-width: 1
  border-color: #C7A86B80
  padding-left: 10
  padding-right: 10
  text-auto-resize: true
  click-sound: 2774

  $hover !disabled:
    background-color: #C7A86B1F
    border-color: #C7A86B

  $pressed !disabled:
    text-offset: 0 1

  $disabled:
    color: #9AA7AE80
    border-color: #39444C

TiendaPestana < UIButton
  height: 28
  ttf-font: geistsemibold
  ttf-font-size: 13
  color: #9AA7AE
  background-color: alpha
  text-auto-resize: true
  padding-left: 2
  padding-right: 2

  $hover !on:
    color: #E2E5E6

  $on:
    color: #E8D3A2

  UIWidget
    id: raya
    anchors.left: parent.left
    anchors.right: parent.right
    anchors.bottom: parent.bottom
    height: 2
    background-color: #C7A86B
    phantom: true
    visible: false

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

  $hover:
    color: #DC6B6B

// El objeto a 32 en una casilla de 40.
TiendaObjeto < UIItem
  size: 40 40
  virtual: true
  padding: 4
  background-color: #10161C
  border-width: 1
  border-color: #39444C
  phantom: true

// Fila de una tienda ajena: objeto, nombre, lo que queda y el precio; cuántos y el botón.
TiendaFila < UIWidget
  height: 52
  background-color: alpha
  border-width: 1
  border-color: alpha

  $hover:
    background-color: #E2E5E60D

  TiendaObjeto
    id: objeto
    anchors.left: parent.left
    anchors.verticalCenter: parent.verticalCenter
    margin-left: 4

  Label
    id: nombre
    anchors.top: parent.top
    anchors.left: objeto.right
    anchors.right: cuantos.left
    margin-top: 8
    margin-left: 10
    margin-right: 8
    height: 17
    ttf-font: geistsemibold
    ttf-font-size: 13
    color: #E2E5E6
    phantom: true

  Label
    id: detalle
    anchors.top: nombre.bottom
    anchors.left: nombre.left
    anchors.right: nombre.right
    margin-top: 2
    height: 15
    ttf-font: geistmono
    ttf-font-size: 11
    color: #C7A86B
    phantom: true

  TiendaNumero
    id: cuantos
    anchors.right: boton.left
    anchors.verticalCenter: parent.verticalCenter
    margin-right: 6
    width: 52

  TiendaBotonSec
    id: boton
    anchors.right: parent.right
    anchors.verticalCenter: parent.verticalCenter
    margin-right: 4

// Fila de la mochila o del catálogo en el editor (clic para ponerla en la tienda).
TiendaOrigen < UIWidget
  height: 46
  change-cursor-image: true
  cursor: pointer
  background-color: alpha
  border-width: 1
  border-color: alpha

  $hover !disabled:
    background-color: #C7A86B14
    border-color: #C7A86B80

  $disabled:
    opacity: 0.4

  TiendaObjeto
    id: objeto
    anchors.left: parent.left
    anchors.verticalCenter: parent.verticalCenter
    margin-left: 3

  Label
    id: nombre
    anchors.left: objeto.right
    anchors.right: parent.right
    anchors.verticalCenter: parent.verticalCenter
    margin-left: 8
    margin-right: 6
    height: 17
    ttf-font: geist
    ttf-font-size: 12
    color: #E2E5E6
    phantom: true

// Fila de lo que pones en tu tienda: objeto, nombre, cantidad, precio y quitar.
TiendaLinea < UIWidget
  height: 52
  background-color: #10161C66
  border-width: 1
  border-color: #39444C

  TiendaObjeto
    id: objeto
    anchors.left: parent.left
    anchors.verticalCenter: parent.verticalCenter
    margin-left: 5

  Label
    id: nombre
    anchors.top: parent.top
    anchors.left: objeto.right
    anchors.right: quitar.left
    margin-top: 5
    margin-left: 10
    height: 16
    ttf-font: geistsemibold
    ttf-font-size: 12
    color: #E2E5E6
    phantom: true

  TiendaEtiqueta
    id: tCant
    anchors.top: nombre.bottom
    anchors.left: nombre.left
    margin-top: 9
    text: Cantidad

  TiendaNumero
    id: cantidad
    anchors.verticalCenter: tCant.verticalCenter
    anchors.left: tCant.right
    margin-left: 6
    width: 56

  TiendaEtiqueta
    id: tPrecio
    anchors.verticalCenter: tCant.verticalCenter
    anchors.left: cantidad.right
    margin-left: 12
    text: Precio

  TiendaNumero
    id: precio
    anchors.verticalCenter: tCant.verticalCenter
    anchors.left: tPrecio.right
    margin-left: 6
    width: 84

  TiendaQuitar
    id: quitar
    anchors.top: parent.top
    anchors.right: parent.right
    margin-top: 4
    margin-right: 4

// -- La tienda de otro ---------------------------------------------------------------------------------------------
TiendaVer < ValdrenVentana
  id: ventanaTienda
  size: 520 540
  text: Tienda
  @onEscape: modules.game_tiendas.cerrarTienda()

  Label
    id: titulo
    anchors.top: parent.top
    anchors.left: parent.left
    anchors.right: parent.right
    height: 26
    ttf-font: geistsemibold
    ttf-font-size: 20
    color: #E8D3A2

  Label
    id: sub
    anchors.top: titulo.bottom
    anchors.left: parent.left
    anchors.right: parent.right
    margin-top: 2
    height: 16
    ttf-font: geist
    ttf-font-size: 12
    color: #9AA7AE

  UIWidget
    id: filete
    anchors.top: sub.bottom
    anchors.left: parent.left
    anchors.right: parent.right
    margin-top: 10
    height: 1
    background-color: #39444C
    phantom: true

  ScrollablePanel
    id: lista
    anchors.top: filete.bottom
    anchors.left: parent.left
    anchors.right: parent.right
    anchors.bottom: mensaje.top
    margin-top: 6
    margin-right: 12
    margin-bottom: 8
    vertical-scrollbar: barra
    layout:
      type: verticalBox
      spacing: 3

  VerticalScrollBar
    id: barra
    anchors.top: lista.top
    anchors.bottom: lista.bottom
    anchors.left: lista.right
    margin-left: 2
    width: 8
    step: 52
    pixels-scroll: true

  Label
    id: vacia
    anchors.top: filete.bottom
    anchors.horizontalCenter: parent.horizontalCenter
    margin-top: 80
    ttf-font: geist
    ttf-font-size: 13
    color: #9AA7AE
    text-auto-resize: true
    phantom: true

  Label
    id: mensaje
    anchors.left: parent.left
    anchors.right: parent.right
    anchors.bottom: pie.top
    margin-bottom: 8
    height: 16
    ttf-font: geist
    ttf-font-size: 12
    color: #52A674

  UIWidget
    id: pie
    anchors.left: parent.left
    anchors.right: parent.right
    anchors.bottom: parent.bottom
    height: 30
    phantom: true

  Label
    id: oro
    anchors.left: pie.left
    anchors.verticalCenter: pie.verticalCenter
    ttf-font: geistmono
    ttf-font-size: 12
    color: #C7A86B
    text-auto-resize: true
    phantom: true

  TiendaBotonSec
    id: cerrar
    anchors.right: pie.right
    anchors.verticalCenter: pie.verticalCenter
    text: Cerrar
    @onClick: modules.game_tiendas.cerrarTienda()

// -- Montar la tienda propia ---------------------------------------------------------------------------------------
TiendaEditor < ValdrenVentana
  id: editorTienda
  size: 780 580
  text: Montar una tienda
  @onEscape: modules.game_tiendas.cerrarEditor()

  TiendaPestana
    id: tabVenta
    anchors.top: parent.top
    anchors.left: parent.left
    text: Vender
    @onClick: modules.game_tiendas.elegirTipo('V')

  TiendaPestana
    id: tabCompra
    anchors.top: tabVenta.top
    anchors.left: tabVenta.right
    margin-left: 22
    text: Comprar
    @onClick: modules.game_tiendas.elegirTipo('C')

  Label
    id: explica
    anchors.verticalCenter: tabVenta.verticalCenter
    anchors.left: tabCompra.right
    anchors.right: parent.right
    margin-left: 22
    height: 16
    ttf-font: geist
    ttf-font-size: 11
    color: #9AA7AE

  UIWidget
    id: fileteTabs
    anchors.top: tabVenta.bottom
    anchors.left: parent.left
    anchors.right: parent.right
    height: 1
    background-color: #39444C
    phantom: true

  TiendaEtiqueta
    id: tTitulo
    anchors.top: fileteTabs.bottom
    anchors.left: parent.left
    margin-top: 12
    color: #C7A86B
    text: Nombre de la tienda (lo ven todos sobre tu cabeza)

  TiendaCampo
    id: nombreTienda
    anchors.top: tTitulo.bottom
    anchors.left: parent.left
    width: 360
    margin-top: 4
    max-length: 30

  TiendaEtiqueta
    id: tOrigen
    anchors.top: nombreTienda.bottom
    anchors.left: parent.left
    margin-top: 14
    color: #C7A86B

  ScrollablePanel
    id: origen
    anchors.top: tOrigen.bottom
    anchors.left: parent.left
    anchors.bottom: pie.top
    width: 270
    margin-top: 6
    margin-bottom: 12
    vertical-scrollbar: barraOrigen
    layout:
      type: verticalBox
      spacing: 2

  VerticalScrollBar
    id: barraOrigen
    anchors.top: origen.top
    anchors.bottom: origen.bottom
    anchors.left: origen.right
    margin-left: 2
    width: 8
    step: 46
    pixels-scroll: true

  TiendaEtiqueta
    id: tLineas
    anchors.top: tOrigen.top
    anchors.left: barraOrigen.right
    margin-left: 18
    color: #C7A86B

  ScrollablePanel
    id: lineas
    anchors.top: tLineas.bottom
    anchors.left: tLineas.left
    anchors.right: parent.right
    anchors.bottom: pie.top
    margin-top: 6
    margin-right: 12
    margin-bottom: 12
    vertical-scrollbar: barraLineas
    layout:
      type: verticalBox
      spacing: 4

  VerticalScrollBar
    id: barraLineas
    anchors.top: lineas.top
    anchors.bottom: lineas.bottom
    anchors.left: lineas.right
    margin-left: 2
    width: 8
    step: 52
    pixels-scroll: true

  Label
    id: lineasVacia
    anchors.top: lineas.top
    anchors.left: lineas.left
    anchors.right: lineas.right
    margin-top: 40
    ttf-font: geist
    ttf-font-size: 12
    color: #9AA7AE
    text-align: center
    text-wrap: true
    height: 40
    phantom: true

  UIWidget
    id: pie
    anchors.left: parent.left
    anchors.right: parent.right
    anchors.bottom: parent.bottom
    height: 52
    phantom: true

  Label
    id: resumen
    anchors.top: pie.top
    anchors.left: pie.left
    anchors.right: abrir.left
    margin-right: 12
    height: 16
    ttf-font: geistmono
    ttf-font-size: 12
    color: #C7A86B

  Label
    id: aviso
    anchors.top: resumen.bottom
    anchors.left: pie.left
    anchors.right: abrir.left
    margin-top: 6
    margin-right: 12
    height: 16
    ttf-font: geist
    ttf-font-size: 12
    color: #DC6B6B

  TiendaBotonSec
    id: cancelar
    anchors.right: abrir.left
    anchors.bottom: pie.bottom
    margin-right: 10
    height: 30
    text: Cancelar
    @onClick: modules.game_tiendas.cerrarEditor()

  ValdrenBoton
    id: abrir
    anchors.right: pie.right
    anchors.bottom: pie.bottom
    width: 150
    text: Abrir la tienda
    @onClick: modules.game_tiendas.abrirTienda()

// -- Tu tienda abierta (arriba, en el centro) -------------------------------------------------------------------------
TiendaMia < ValdrenMarco
  id: panelMia
  size: 340 132
  padding-top: 16
  padding-bottom: 16

  TiendaEtiqueta
    id: tMia
    anchors.top: parent.top
    anchors.left: parent.left
    color: #C7A86B
    text: Tu tienda

  Label
    id: horas
    anchors.top: parent.top
    anchors.right: parent.right
    ttf-font: geistmono
    ttf-font-size: 11
    color: #9AA7AE
    text-auto-resize: true
    phantom: true

  Label
    id: titulo
    anchors.top: tMia.bottom
    anchors.left: parent.left
    anchors.right: parent.right
    margin-top: 2
    height: 20
    ttf-font: geistsemibold
    ttf-font-size: 15
    color: #E8D3A2
    phantom: true

  Label
    id: cuenta
    anchors.top: titulo.bottom
    anchors.left: parent.left
    anchors.right: parent.right
    margin-top: 2
    height: 15
    ttf-font: geistmono
    ttf-font-size: 11
    color: #C7A86B
    phantom: true

  TiendaBotonSec
    id: cerrarMia
    anchors.left: parent.left
    anchors.bottom: parent.bottom
    text: Cerrar la tienda
    @onClick: modules.game_tiendas.cerrarMia()

  TiendaBotonSec
    id: dejar
    anchors.right: parent.right
    anchors.bottom: parent.bottom
    text: Salir y dejar la tienda
    @onClick: modules.game_tiendas.salirYDejar()

// -- Estás en un puesto libre ------------------------------------------------------------------------------------------
TiendaCartel < ValdrenMarco
  id: cartelPuesto
  size: 380 96
  padding-top: 16
  padding-bottom: 16

  Label
    id: texto
    anchors.top: parent.top
    anchors.left: parent.left
    anchors.right: parent.right
    height: 18
    ttf-font: geistsemibold
    ttf-font-size: 13
    color: #E8D3A2
    text: Estás en un puesto de mercader libre.
    phantom: true

  TiendaEtiqueta
    id: sub
    anchors.top: texto.bottom
    anchors.left: parent.left
    margin-top: 2
    text: Con un puesto de mercader puedes vender o comprar aquí.

  ValdrenBoton
    id: montar
    anchors.right: parent.right
    anchors.bottom: parent.bottom
    width: 150
    height: 26
    text: Montar una tienda
    @onClick: modules.game_tiendas.montar()

// Cartel de una tienda abierta encima del vendedor (o del NPC que lo sustituye), como el «vending» de Ragnarok Online:
// icono del tipo (bolsa = vende, monedas = compra; images/venta y images/compra) y el título. Lo coloca game_tiendas.lua sobre la casilla cada fotograma.
// Clic: abre la tienda.
TiendaRotulo < UIWidget
  height: 20
  padding-left: 3
  padding-right: 6
  background-color: #10161CD9
  border-width: 1
  border-color: #C7A86BB3
  focusable: false

  $hover:
    background-color: #192127F0
    border-color: #E8D3A2

  UIWidget
    id: icono
    anchors.left: parent.left
    anchors.verticalCenter: parent.verticalCenter
    margin-left: 2
    size: 14 14
    image-smooth: false
    phantom: true

  Label
    id: titulo
    anchors.left: icono.right
    anchors.verticalCenter: parent.verticalCenter
    margin-left: 4
    ttf-font: geistsemibold
    ttf-font-size: 12
    color: #E8D3A2
    text-auto-resize: true
    phantom: true