<template>
  <p>time: {{time}}, starttime: {{startTime}}</p>
  <p>fps: {{fps}}, fps (min): {{fpsMin}}, fps (max): {{fpsMax}}</p>
</template>

<style scoped lang="scss">
p
{ font-family: $font-family-serif;
  font-size:   $font-size-p !important;
}
</style>

<script>
const
  v_time_format =
    new Intl.DateTimeFormat
        ( 'de-DE', 
          { hour: 'numeric', minute: 'numeric', second: 'numeric' }
        );

export default 
{ name: 'Time',

  data()
  { return {
      get time() { return v_time_format.format(Date.now()) }, // value is not cached
      fps:    0,
      fpsMin: Infinity,
      fpsMax: 0
    }
  },

  computed:
  { startTime() { return v_time_format.format(Date.now()) }, // value is cached
  },

  mounted()
  { let 
      l_last_timestamp = performance.now(),
      l_nr_of_frames   = 0;

    const
      f_step = 
      (p_timestamp) =>
      { const c_delta = (p_timestamp - l_last_timestamp)/1000;

        this.fps = (Math.round(100/c_delta)/100).toFixed(2);
        if (++l_nr_of_frames > 10) // wait until the timer has settled
        { this.fpsMin = (this.fps < this.fpsMin) ?  this.fps : this.fpsMin;
          this.fpsMax = (this.fps > this.fpsMax) ?  this.fps : this.fpsMax;
        }

        l_last_timestamp = p_timestamp;                // remember the last timestamp
        window.requestAnimationFrame(f_step);          // f_step is a callback function
      };
    
    window.requestAnimationFrame(f_step);              // starts the game loop
/*
    function f_step(p_timestamp)
    { const c_delta = (p_timestamp - l_last_timestamp)/1000;

      this.fps = (Math.round(100/c_delta)/100).toFixed(2);
      if (++l_nr_of_frames > 10)                       // wait until the timer has settled
      { this.fpsMin = (this.fps < this.fpsMin) ?  this.fps : this.fpsMin;
        this.fpsMax = (this.fps > this.fpsMax) ?  this.fps : this.fpsMax;
      }

      l_last_timestamp = p_timestamp;                  // remember the last timestamp
      window.requestAnimationFrame(f_step.bind(this)); // f_step is a callback function
    };  

    window.requestAnimationFrame(f_step.bind(this));   // starts the game loop
*/ 
  },
}
</script>

