var tspan = document.querySelector('tspan');
var span = document.querySelector('.number');
var factor = 1.003;

var dropdownButton = document.createElement('button');
dropdownButton.textContent = 'Dropdown';
dropdownButton.style.position = 'absolute';
dropdownButton.style.top = '100px';
dropdownButton.style.right = '100px';

var dropdownMenu = document.createElement('div');
dropdownMenu.style.position = 'absolute';
dropdownMenu.style.top = '120px';
dropdownMenu.style.right = '100px';
dropdownMenu.style.display = 'none';
dropdownMenu.style.height = '400px';
dropdownMenu.style.width = '400px';
dropdownMenu.style.backgroundColor = 'white';
dropdownMenu.style.border = '1px solid black';

var incrementButton = document.createElement('button');
incrementButton.textContent = 'Increment';
incrementButton.style.display = 'block';
incrementButton.style.width = '100%';
incrementButton.onclick = function() {
  var tspanValue = parseInt(tspan.textContent);
  tspan.textContent = tspanValue + 1;
  var num = parseInt(span.textContent) + Math.round(210 * factor);
  span.textContent = num;
  factor *= 1.003;
};

var changeXPButton = document.createElement('button');
changeXPButton.textContent = 'Change XP';
changeXPButton.style.display = 'block';
changeXPButton.style.width = '100%';
changeXPButton.onclick = function() {
  var currentXP = parseInt(span.textContent);
  var xpInput = document.createElement('input');
  xpInput.type = 'text';
  xpInput.placeholder = 'Enter new XP';
  xpInput.style.display = 'block';
  xpInput.style.width = '100%';
  dropdownMenu.appendChild(xpInput);

  xpInput.onkeydown = function(event) {
    if (event.key === 'Enter') {
      span.textContent = currentXP + parseInt(xpInput.value);
      dropdownMenu.removeChild(xpInput);
    }
  };

  xpInput.onblur = function() {
    span.textContent = currentXP + parseInt(xpInput.value);
    dropdownMenu.removeChild(xpInput);
  };
};

var changeLevelButton = document.createElement('button');
changeLevelButton.textContent = 'Change Level';
changeLevelButton.style.display = 'block';
changeLevelButton.style.width = '100%';
changeLevelButton.onclick = function() {
  var levelInput = document.createElement('input');
  levelInput.type = 'text';
  levelInput.placeholder = 'Enter new level';
  levelInput.style.display = 'block';
  levelInput.style.width = '100%';
  dropdownMenu.appendChild(levelInput);

  levelInput.onkeydown = function(event) {
    if (event.key === 'Enter') {
      tspan.textContent = levelInput.value;
      dropdownMenu.removeChild(levelInput);
    }
  };

  levelInput.onblur = function() {
    tspan.textContent = levelInput.value;
    dropdownMenu.removeChild(levelInput);
  };
};

dropdownButton.onclick = function() {
  if (dropdownMenu.style.display === 'none') {
    dropdownMenu.style.display = 'block';
  } else {
    dropdownMenu.style.display = 'none';
  }
};

document.body.appendChild(dropdownButton);
document.body.appendChild(dropdownMenu);
dropdownMenu.appendChild(incrementButton);
dropdownMenu.appendChild(changeXPButton);
dropdownMenu.appendChild(changeLevelButton);