Doubles

Description

Nothing to fancy on this on. Number go up.

I'm using bitty to load SVGs to use as the display instead of regular text. There's probably a better way to do the conversion of the number into individual characters. Same goes for the size calculation. I'll look into those at some point. They're fine for now.

The HTML

<bitty-2-0 data-connect="PageContent" data-send="double">
  <div data-receive="double"></div>
  <div class="button-wrapper">
    <button data-send="double">Double</button>
  </div>
</bitty-2-0>

The CSS

:root {
  --num-size: 4rem;
}

[data-receive=double] {
  background-color: var(--match);
  border-radius: var(--default-radius);
  display: flex;
  height: 6rem;
  justify-content: center;
  padding: var(--default-padding);
}

.button-wrapper {
  border-radius: var(--default-radius);
  display: flex;
  justify-content: center;
  padding: var(--default-padding);
}

svg {
  height: var(--num-size);
  stroke: var(--accent);
  width: var(--num-size);
}

The JavaScript

window.PageContent = class {
  #count = 1;

  async bittyInit() {
    this.svgs = [];
    for (let n = 0; n < 10; n += 1) {
      this.svgs.push(await this.api.fetchSVG(`/svgs/${n}.svg`));
    }
  }

  double(_event, el) {
    const output = [];
    let size = 4;
    let tmpCount = this.#count;
    while (tmpCount >= 10) {
      size -= 0.1;
      output.push(this.svgs[tmpCount % 10].cloneNode(true));
      tmpCount = Math.floor(tmpCount / 10);
    }
    output.push(this.svgs[tmpCount].cloneNode(true));
    output.reverse();
    if (size < 1.1) {
      size = 1.1;
    }
    document.documentElement.style.setProperty(
      "--num-size",
      `${size}rem`,
    );
    el.replaceChildren(...output);
    this.#count *= 2;
  }
};