// OT-MMO: el Bardo (server/scripts/clases/bardo.lua, opcode 137). Pixel art de arte/bardo/hud.py.
// HUD «partitura»: aparece al marcar la primera flecha con Ctrl pulsado, abajo al centro, sobre la barra de acción.
// Cinco casillas para las flechas; debajo, el pulso (un rombo de oro que late bajo la casilla que toca); a la
// derecha, la canción que estás formando. Al soltar Ctrl: el nombre que sonó, «Afinada» en oro con destello, o el
// motivo en rojo. Piel pizarra de la guía (DESIGN.md) y el oro #C7A86B solo donde algo importa.
BardoCasilla < UIWidget
  size: 34 34
  image-source: /modules/game_bardo/images/casilla
  image-clip: 0 0 34 34
  phantom: true

  UIWidget
    id: flecha
    size: 28 28
    anchors.centerIn: parent
    phantom: true

BardoMarca < UIWidget
  size: 34 6
  image-source: /modules/game_bardo/images/barra
  image-clip: 0 0 34 6
  phantom: true

BardoHud < UIWidget
  size: 470 76
  image-source: /modules/game_bardo/images/placa
  image-clip: 0 0 32 32
  image-border: 6
  phantom: true
  focusable: false

  UIWidget
    id: pentagrama
    anchors.top: casillas.top
    anchors.left: casillas.left
    size: 200 34
    image-source: /modules/game_bardo/images/pentagrama
    phantom: true

  UIWidget
    id: casillas
    anchors.top: parent.top
    anchors.left: parent.left
    margin-top: 10
    margin-left: 12
    size: 194 34
    phantom: true
    layout:
      type: horizontalBox
      spacing: 6

  UIWidget
    id: pulsos
    anchors.top: casillas.bottom
    anchors.left: casillas.left
    margin-top: 8
    size: 194 6
    phantom: true
    layout:
      type: horizontalBox
      spacing: 6

  UIWidget
    id: nota
    size: 13 16
    anchors.top: parent.top
    anchors.left: casillas.right
    margin-top: 11
    margin-left: 16
    image-source: /modules/game_bardo/images/nota
    phantom: true

  Label
    id: titulo
    anchors.verticalCenter: nota.verticalCenter
    anchors.left: nota.right
    anchors.right: parent.right
    margin-left: 7
    margin-right: 10
    ttf-font: $otmmo-font-strong
    ttf-font-size: $otmmo-size-md
    color: $otmmo-text
    text-auto-resize: false
    phantom: true

  Label
    id: detalle
    anchors.top: titulo.bottom
    anchors.left: nota.left
    anchors.right: parent.right
    margin-top: 6
    margin-right: 10
    ttf-font: $otmmo-font
    ttf-font-size: $otmmo-size-xs
    color: $otmmo-text-2
    text-wrap: true
    text-auto-resize: false
    height: 30
    phantom: true

  UIWidget
    id: destello
    size: 64 64
    anchors.verticalCenter: parent.verticalCenter
    anchors.horizontalCenter: casillas.horizontalCenter
    image-source: /modules/game_bardo/images/destello
    image-clip: 0 0 64 64
    phantom: true
    visible: false

// Libro de canciones (J). Lista por grupos a la izquierda; a la derecha, la canción elegida con su secuencia grande.
BardoGrupo < Label
  height: 28
  ttf-font: $otmmo-font-strong
  ttf-font-size: $otmmo-size-sm
  color: $otmmo-text-2
  text-auto-resize: false
  padding-left: 8
  padding-top: 8

BardoFila < GameRow
  height: 38
  padding: 0

  Label
    id: nombre
    anchors.top: parent.top
    anchors.left: parent.left
    anchors.right: nivel.left
    margin-top: 4
    margin-left: 10
    ttf-font: $otmmo-font-strong
    ttf-font-size: $otmmo-size-sm
    color: $otmmo-text
    text-auto-resize: false
    phantom: true

  UIWidget
    id: seq
    anchors.bottom: parent.bottom
    anchors.left: nombre.left
    margin-bottom: 4
    size: 92 14
    phantom: true
    layout:
      type: horizontalBox
      spacing: 4

  Label
    id: nivel
    anchors.verticalCenter: parent.verticalCenter
    anchors.right: parent.right
    margin-right: 10
    width: 96
    text-align: right
    ttf-font: $otmmo-font-num
    ttf-font-size: $otmmo-size-xs
    color: $otmmo-text-2
    text-auto-resize: false
    phantom: true

MainWindow
  id: libroCanciones
  size: 640 470
  text: Libro de canciones
  @onEscape: modules.game_bardo.cerrarLibro()

  GamePanel
    id: marcoLista
    anchors.top: parent.top
    anchors.left: parent.left
    anchors.bottom: parent.bottom
    width: 300

  ScrollablePanel
    id: lista
    anchors.top: marcoLista.top
    anchors.left: marcoLista.left
    anchors.bottom: marcoLista.bottom
    anchors.right: scroll.left
    margin: 1
    vertical-scrollbar: scroll
    layout:
      type: verticalBox

  VerticalScrollBar
    id: scroll
    anchors.top: marcoLista.top
    anchors.right: marcoLista.right
    anchors.bottom: marcoLista.bottom
    margin: 1
    step: 38
    pixels-scroll: true

  Panel
    id: ficha
    anchors.top: parent.top
    anchors.left: marcoLista.right
    anchors.right: parent.right
    anchors.bottom: parent.bottom
    margin-left: 18

    GameCell
      id: marco
      anchors.top: parent.top
      anchors.left: parent.left
      margin-top: 2
      phantom: true

      UIWidget
        id: icono
        size: 32 32
        anchors.centerIn: parent
        phantom: true

    GameTitle
      id: nombre
      anchors.top: marco.top
      anchors.left: marco.right
      anchors.right: parent.right
      margin-left: 10
      margin-top: 2
      height: 20
      text-auto-resize: false

    GameTextMuted
      id: rama
      anchors.top: nombre.bottom
      anchors.left: nombre.left
      anchors.right: parent.right
      margin-top: 3
      text-auto-resize: false

    UIWidget
      id: pentagrama
      anchors.top: seq.top
      anchors.left: seq.left
      size: 200 34
      image-source: /modules/game_bardo/images/pentagrama
      phantom: true

    UIWidget
      id: seq
      anchors.top: marco.bottom
      anchors.left: parent.left
      margin-top: 16
      size: 194 34
      phantom: true
      layout:
        type: horizontalBox
        spacing: 6

    UIWidget
      id: tempo
      anchors.top: seq.bottom
      anchors.left: seq.left
      margin-top: 8
      size: 194 6
      phantom: true
      layout:
        type: horizontalBox
        spacing: 6

    GameTextSmall
      id: tempoTexto
      anchors.top: tempo.bottom
      anchors.left: seq.left
      margin-top: 5
      text: Un latido cada medio segundo.

    GameDivider
      id: sep
      anchors.top: tempoTexto.bottom
      anchors.left: parent.left
      anchors.right: parent.right
      margin-top: 14

    GameTextMuted
      id: cMana
      anchors.top: sep.bottom
      anchors.left: parent.left
      margin-top: 10
      width: 70
      text: Maná
      text-auto-resize: false
    GameNumber
      id: mana
      anchors.verticalCenter: cMana.verticalCenter
      anchors.left: cMana.right
    GameTextMuted
      id: cEspera
      anchors.top: cMana.bottom
      anchors.left: parent.left
      margin-top: 6
      width: 70
      text: Espera
      text-auto-resize: false
    GameNumber
      id: espera
      anchors.verticalCenter: cEspera.verticalCenter
      anchors.left: cEspera.right
    GameTextMuted
      id: cNivel
      anchors.top: cEspera.bottom
      anchors.left: parent.left
      margin-top: 6
      width: 70
      text: Nivel
      text-auto-resize: false
    GameNumber
      id: nivel
      anchors.verticalCenter: cNivel.verticalCenter
      anchors.left: cNivel.right

    GameParagraph
      id: texto
      anchors.top: cNivel.bottom
      anchors.left: parent.left
      anchors.right: parent.right
      margin-top: 14
      height: 64
      text-auto-resize: false

    GameDivider
      id: sep2
      anchors.bottom: ayuda.top
      anchors.left: parent.left
      anchors.right: parent.right
      margin-bottom: 10

    GameTextSmall
      id: ayuda
      anchors.bottom: parent.bottom
      anchors.left: parent.left
      anchors.right: parent.right
      height: 46
      text-wrap: true
      text-auto-resize: false
      text: Mantén Ctrl y marca una flecha por pulso (cada medio segundo). Suelta Ctrl para tocar. Si todas caen a tiempo, sale Afinada: un 15 % más de efecto.