DNDTools/src/app/journal/journal-stats/life-container/hit-dice/hit-dice.component.ts

import { Component, EventEmitter, Output } from '@angular/core';
import { DataService } from 'src/services/data/data.service';

@Component({
  selector: 'hit-dice',
  templateUrl: './hit-dice.component.html',
  styleUrls: ['./hit-dice.component.scss'],
})
export class HitDiceComponent {
  public hitDice: any;
  showEditButtons: boolean = false;

  @Output() public setHitDice: EventEmitter<any> = new EventEmitter();

  constructor(private dataAccessor: DataService) {
    this.hitDice = this.dataAccessor.hitDice;
  }

  public ngOnInit(): void {
    this.correctHitDiceView();
    this.emitHitDice();
  }

  public handleUsedHitDice(index: number, element: any): void {
    console.log('HITDICE in hitdice first: ', this.hitDice);
    if (element.checked) {
      console.log('The checkbox is checked now ');
      this.hitDice.diceUsed++;
      if (index + 1 !== this.hitDice.diceUsed) {
        this.correctHitDiceView();
      }
    } else {
      console.log('The checkbox is unchecked now ');
      this.hitDice.diceUsed--;
      if (index !== this.hitDice.diceUsed) {
        this.correctHitDiceView();
      }
    }
    console.log('HITDICE in hitdice: ', this.hitDice);
    this.emitHitDice();
  }

  private correctHitDiceView(): void {
    const totalHitDice = this.hitDice.diceNumber;
    const usedHitDice = this.hitDice.diceUsed;

    for (let index = 0; index < usedHitDice; index++) {
      setTimeout(() => {
        (
          document.getElementById('checkbox' + index) as HTMLInputElement
        ).checked = true;
      });
    }
    for (let index = usedHitDice; index < totalHitDice; index++) {
      setTimeout(() => {
        (
          document.getElementById('checkbox' + index) as HTMLInputElement
        ).checked = false;
      });
    }
  }

  public getArray(length: number): any[] {
    return Array.from({ length: length });
  }

  private emitHitDice(): void {
    if (this.hitDice.diceUsed > this.hitDice.diceNumber) {
      this.hitDice.diceUsed = this.hitDice.diceNumber;
    }
    this.setHitDice.emit(this.hitDice);
  }
}