import flute from '/src/fingering/flute/index.json'
import fluteFull from '/src/fingering/flute/full.png'

const types: {
  [key: string]: any
} = {
  flute: {
    json: flute,
    bg: fluteFull,
    relationship: {
      70: [15, 18],
    },
  }
}

export default class Fingering {
  el = document.createElement('div')

  type = ''

  activeType: any = {}

  constructor(el: HTMLDivElement, type: string) {
    this.el = el
    this.type = type
    this.activeType = types[type]
  }

  show(fixedKey: number) {
    this.el.style.display = 'block'

  }

  hide() {
    this.el.style.display = 'none'
  }

  destroy() {
    this.el.innerHTML = ''
    this.hide()
  }
}