<img id="castle_frame_0" [ngClass]="this.frame == 0 ? 'show' : 'hide'" src="../../assets/FC_Frame_0.png">

    <img id="castle_frame_1" [ngClass]="this.frame == 1 ? 'show' : 'hide'" src="../../assets/FC_Frame_1.png">

    <img id="castle_frame_2" [ngClass]="this.frame == 2 ? 'show' : 'hide'" src="../../assets/FC_Frame_2.png">

    <img id="castle_frame_3" [ngClass]="this.frame == 3 ? 'show' : 'hide'" src="../../assets/FC_Frame_3.png">

    <img id="castle_frame_4" [ngClass]="this.frame == 4 ? 'show' : 'hide'" src="../../assets/FC_Frame_4.png">

    <img id="castle_frame_5" [ngClass]="this.frame == 5 ? 'show' : 'hide'" src="../../assets/FC_Frame_5.png">

export class HomeComponent implements OnInit {

  frame = 0;

  refresh = 2000;

  maxFrames = 5;

  constructor() {

    setInterval(() => {

      this.blink()

    }, this.refresh); // will call the blink function after every 2 seconds

  }

  ngOnInit() {

    this.frame = 1; 

    console.log(this.frame);

  }

  blink() {

    // If frame is 0 then set it to some other number between 1 and 5 else set it back to 0;

    this.frame = this.frame === 0 ? this.getRandom(1, this.maxFrames)  : 0;

  }

  getRandom(min: number, max: number){

    return Math.floor(Math.random() * (max - min + 1) + min);

  }

}