const copperE1 = document.querySelector('.copperE1');

const STOPPED = Symbol.for("@@gameloop/stopped");
const PAUSED = Symbol.for("@@gameloop/paused");
const RUNNING = Symbol.for("@@gameloop/running");

class GameLoop {
  constructor(options = {}) {
    this.state = STOPPED;
        this.options = {
      step: 1000 / 60,
      maxUpdates: 300,
      ...options
    };

    this.tick = this.tick.bind(this);
  }
  get isStopped() {
    return this.state === STOPPED;
  }
  get isPaused() {
    return this.state === PAUSED;
  }
  get isRunning() {
    return this.state === RUNNING;
  }
  start() {
    if (this.isStopped) {
      this.state = RUNNING;

      const lag = 0;
      const delta = 0;
      const total = 0;
      const last = null;

      this.timing = { last, total, delta, lag };
      this.frame = requestAnimationFrame(this.tick);
    }
  }
  stop() {
    if (this.isRunning || this.isPaused) {
      this.state = STOPPED;
      cancelAnimationFrame(this.frame);
    }
  }
  pause() {
    if (this.isRunning) {
      this.state = PAUSED;
      cancelAnimationFrame(this.frame);
    }
  }
  resume() {
    if (this.isPaused) {
      this.state = RUNNING;
      this.frame = requestAnimationFrame(this.tick);
    }
  }
  tick(time) {
    if (this.timing.last === null) this.timing.last = time;
    this.timing.delta = time - this.timing.last;
    this.timing.total += this.timing.delta;
    this.timing.lag += this.timing.delta;
    this.timing.last = time;

    let numberOfUpdates = 0;

    while (this.timing.lag >= this.options.step) {
      this.timing.lag -= this.options.step;
      this.onUpdate(this.options.step, this.timing.total);
      this.numberOfUpdates++;
      if (this.numberOfUpdates >= this.options.maxUpdates) {
        this.onPanic();
        break;
      }
    }

    this.onRender(this.timing.lag / this.options.step);

    this.frame = requestAnimationFrame(this.tick);
  }
}

const loop = new GameLoop();

let copper = 0;
let copper_per_millisecond = 0.0002;

loop.onUpdate = function(dt, t) {
  copper += copper_per_millisecond * dt;
};

loop.onRender = function(i) {
    copperE1.textContent = copper.toFixed(2);

};

loop.onPanic = function() {
  // discard any accumulated lag time and hope for the best
  this.timing.lag = 50000;
};

loop.start();

function mainSave()
{
    var mainSave = {

        copper: copper,
    }

    localStorage.setItem("mainSave",JSON.stringify(mainSave));
}

function mainLoad()
{
    var mainSaveGame = JSON.parse(localStorage.getItem("mainSave"));
    if (typeof mainSaveGame.copper !== "undefined") copper = mainSaveGame.copper;
    copperE1.textContent = copper.toFixed(2);

}

function mainReset()
{
    localStorage.removeItem("mainSave");
    document.getElementById('copper').innerHTML = copper;
    location.reload();
}


function openTab(tabId) {
    // Hide all tab contents
    var tabContents = document.getElementsByClassName('tab-content');
    for (var i = 0; i < tabContents.length; i++) {
        tabContents[i].style.display = 'none';
    }

    // Remove 'active-tab' class from all tabs
    var tabs = document.getElementsByClassName('tab');
    for (var i = 0; i < tabs.length; i++) {
        tabs[i].classList.remove('active-tab');
    }

    // Show the selected tab content and mark it as active
    document.getElementById(tabId).style.display = 'block';
    document.querySelector('[onclick="openTab(\'' + tabId + '\')"]').classList.add('active-tab');
}