// OT-MMO: consejos del tutorial (game_consejos). Estilo VALDREN (game_viaje/valdren.otui) y tokens de 0-vars.otui.
// Nada de esto toma el foco: el jugador sigue caminando y escribiendo con la ventanita abierta.

// Una tecla dibujada (imagen 9-slice con canto abajo): se ensancha con el texto (Enter, Ctrl, Tab).
ConsejoTecla < UIWidget
  image-source: /game_consejos/images/tecla
  image-border-left: 3
  image-border-right: 3
  image-border-top: 3
  image-border-bottom: 6
  image-smooth: false
  height: 26
  padding-left: 9
  padding-right: 9
  text-align: center
  text-offset: 0 -2
  text-horizontal-auto-resize: true
  ttf-font: $otmmo-font-strong
  ttf-font-size: $otmmo-size-sm
  color: #E8D3A2
  phantom: true
  focusable: false

ConsejoMas < Label
  ttf-font: $otmmo-font-strong
  ttf-font-size: $otmmo-size-sm
  color: $otmmo-text-2
  text-auto-resize: true
  text-offset: 0 3
  phantom: true

ConsejoTeclaPie < GameTextMuted
  text-offset: 0 5
  margin-left: 4
  phantom: true

// Botón secundario sin caja (la acción que casi nadie quiere): texto gris, subrayado al pasar.
ConsejoEnlace < UIButton
  height: 30
  ttf-font: $otmmo-font
  ttf-font-size: $otmmo-size-sm
  color: $otmmo-text-2
  text-auto-resize: true
  background-color: alpha
  focusable: false

  $hover !disabled:
    color: $otmmo-text

  $pressed:
    text-offset: 0 1

// La ventanita: marco fino de hierro, icono a la izquierda, título, 1-3 frases, teclas y dos botones.
ConsejoVentana < ValdrenMarco
  id: consejoVentana
  width: 356
  height: 150
  padding: 18 20 16 18
  focusable: false

  UIWidget
    id: icono
    size: 48 48
    anchors.top: parent.top
    anchors.left: parent.left
    image-smooth: false
    phantom: true

  Label
    id: titulo
    anchors.top: parent.top
    anchors.left: icono.right
    anchors.right: parent.right
    margin-left: 14
    margin-top: 1
    height: 20
    ttf-font: $otmmo-font-strong
    ttf-font-size: $otmmo-size-lg
    color: #E8D3A2
    phantom: true

  Label
    id: texto
    anchors.top: titulo.bottom
    anchors.left: titulo.left
    anchors.right: parent.right
    margin-top: 4
    text-wrap: true
    text-auto-resize: true
    ttf-font: $otmmo-font
    ttf-font-size: $otmmo-size-md
    color: $otmmo-text
    phantom: true

  UIWidget
    id: teclas
    anchors.top: texto.bottom
    anchors.left: titulo.left
    anchors.right: parent.right
    margin-top: 10
    height: 26
    phantom: true
    layout:
      type: horizontalBox
      spacing: 4

  ValdrenBoton
    id: entendido
    anchors.top: teclas.bottom
    anchors.right: parent.right
    margin-top: 14
    width: 104
    height: 28
    text: Entendido
    focusable: false
    @onClick: modules.game_consejos.cerrar()

  ConsejoEnlace
    id: noMas
    anchors.verticalCenter: entendido.verticalCenter
    anchors.left: parent.left
    text: No mostrar más consejos
    @onClick: modules.game_consejos.apagarDesdeVentana()

ConsejoFlecha < UIWidget
  size: 36 44
  image-source: /game_consejos/images/flecha-abajo
  image-smooth: false
  phantom: true
  focusable: false

ConsejoAro < UIWidget
  border-width: 2
  border-color: #C7A86B
  background-color: #C7A86B14
  phantom: true
  focusable: false

// Libro de la Vigía --------------------------------------------------------------------------------------------------
LibroFila < GameRow
  height: 32

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

  GameLabelStrong
    id: nombre
    anchors.left: icono.right
    anchors.verticalCenter: parent.verticalCenter
    margin-left: 8
    phantom: true

LibroGrupo < GameSection
  height: 24
  text-offset: 0 8
  text-auto-resize: false
  phantom: true

LibroFalta < GameTextSmall
  height: 40
  text-wrap: true
  text-auto-resize: false
  text-offset: 4 12
  phantom: true