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="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>
<div class="wrapper">
<div>Click on rotating icon</div>
<div id="game_div"> </div>
<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

class Example extends Phaser.Scene
{
    constructor ()
    {
        super();
    }

    preload ()
    {
    
        this.load.image('ayu', '//examples.phaser.io/assets/sprites/metalslug_mummy37x45.png');
        this.load.atlas('bot', 'https://cdn.glitch.com/5720d067-8492-4523-aa2c-0974bc11e98e%2Fspritesheet%20(1).png?v=1619803914098', 'https://2dpro.glitch.me/spritesheet.json');
                this.load.physics('physicsData', '//examples.phaser.io/assets/physics/sprites.json');
    }

    create ()
    {
        //  When creating images they are added in display order.
        //  The first one created appears at the back of the display list, and so on.
        //  By default that have a depth value of 0 which means "unsorted"
        //  Click to change the depth of image3 to 1, raising it higher than the others.
console.log(this.stage)
 			var anim = this.anims.create({
            key: 'walk',
            frames: 'bot',
            frameRate: 12,
            repeat: -1
        });

        
        const bot = this.add.sprite(200, 200, 'bot');
   			bot.play('walk')
        
        const image1 = this.add.image(100, 300, 'ayu');
        const image2 = this.add.image(200, 300, 'ayu');
        const image3 = this.add.image(300, 300, 'ayu');
        const image4 = this.add.image(400, 300, 'ayu');
        const image5 = this.add.image(500, 300, 'ayu');
        const image6 = this.add.image(600, 300, 'ayu');
        const image7 = this.add.image(700, 300, 'ayu');

        this.input.on(Phaser.Input.Events.POINTER_DOWN, function (pointer) {
            image3.setDepth(1);
        }, this);
    }
}

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    backgroundColor: '#2d2d2d',
    parent: 'phaser-example',
    scene: [ Example ]
};

const game = new Phaser.Game(config);