const tabButtons = document.getElementsByClassName('tab-button')
const tabContents = document.getElementsByClassName('tab-content')

for (const tabButton of tabButtons) {
  tabButton.onclick = () => {
    for (const oldTab of document.getElementsByClassName('selected-tab')) {
      oldTab.classList.remove('selected-tab')
    }
    tabButton.classList.add('selected-tab')
    console.log(`Changing to: ${tabButton.id.replace('-button', '')}`)
    changeToTab(tabButton.id.replace('-button', ''))
  }
}

function changeToTab (id) {
  for (const tabContent of tabContents) {
    tabContent.style.display = 'none'
  }

  const toShow = tabContents.namedItem(id)
  if (toShow == null) return
  toShow.style.display = null
}

changeToTab('stats-tab')
