Phaser 3: duration of click on a sprite

Using the methods "upTime" and "downTime" of Pointer (this includes both touch and click input) (https://photonstorm.github.io/phaser3-docs/Phaser.Input.Pointer.html). See also "Get input duration on Phaser js 3" (https://stackoverflow.com/questions/53801288/get-input-duration-on-phaser-js-3/53801661)

by realhunts

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser.min.js"></script>
<div class="wrapper">
<div>Click on rotating icon</div>
<canvas id="game_div"> </canvas>
<div id="click_duration">
</div>
</div>

CSS

body { /* can also be whatever container */
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}

.wrapper{
    margin-left:auto;
    margin-right:auto;
    height:auto; 
    width:auto;
}

JavaScript

var config = {
  type: Phaser.WEBGL,
  parent: 'game_div',
  width: 200,
  height: 200,
  scene: {
    preload: preload,
    create: create,
    update: update
  }
};

var sprite;

// Initialize Phaser
var game = new Phaser.Game(config);

function preload() {
  // this.load.image('eye', 'assets/pics/lance-overdose-loader-eye.png');
  this.load.image('star', 'assets/star.png');
}

function create() {
  //sprite = this.add.sprite(150, 150, 'eye');
  sprite = this.add.sprite(100, 100, 'eye');
  
  sprite.setInteractive();

  sprite.on('pointerdown', function() {
    this.setTint(0xff0000);
  });

  sprite.on('pointerup', function(pointer) {
    this.clearTint();
    c_time.nodeValue = "Click duration: "+(pointer.upTime - pointer.downTime).toFixed(2);
  });

}

function update() {
  sprite.rotation += 0.01;
}

var click_duration = document.getElementById("click_duration");
var c_time = document.createTextNode("");
click_duration.appendChild(c_time);