partey_workadventure/front/src/Phaser/Components/MobileJoystick.ts

import VirtualJoystick from 'phaser3-rex-plugins/plugins/virtualjoystick.js';
import {waScaleManager} from "../Services/WaScaleManager";
import {DEPTH_INGAME_TEXT_INDEX} from "../Game/DepthIndexes";

//the assets were found here: https://hannemann.itch.io/virtual-joystick-pack-free
export const joystickBaseKey = 'joystickBase';
export const joystickBaseImg = 'resources/objects/joystickSplitted.png';
export const joystickThumbKey = 'joystickThumb';
export const joystickThumbImg = 'resources/objects/smallHandleFilledGrey.png';

const baseSize = 50;
const thumbSize = 25;
const radius = 17.5;

export class MobileJoystick extends VirtualJoystick {
    private resizeCallback: () => void;

    constructor(scene: Phaser.Scene) {
        super(scene, {
            x: -1000,
            y: -1000,
            radius: radius * window.devicePixelRatio,
            base: scene.add.image(0, 0, joystickBaseKey).setDisplaySize(baseSize * window.devicePixelRatio, baseSize * window.devicePixelRatio).setDepth(DEPTH_INGAME_TEXT_INDEX),
            thumb: scene.add.image(0, 0, joystickThumbKey).setDisplaySize(thumbSize * window.devicePixelRatio, thumbSize * window.devicePixelRatio).setDepth(DEPTH_INGAME_TEXT_INDEX),
            enable: true,
            dir: "8dir",
        });
        this.visible = false;
        this.enable = false;

        this.scene.input.on('pointerdown', (pointer: { x: number; y: number; wasTouch: boolean; event: TouchEvent }) => {
            if (!pointer.wasTouch) {
                return;
            }

            // Let's only display the joystick if there is one finger on the screen
            if (pointer.event.touches.length === 1) {
                this.x = pointer.x;
                this.y = pointer.y;
                this.visible = true;
                this.enable = true;
            } else {
                this.visible = false;
                this.enable = false;
            }
        });
        this.scene.input.on('pointerup', () => {
            this.visible = false;
            this.enable = false;
        });
        this.resizeCallback = this.resize.bind(this);
        this.scene.scale.on(Phaser.Scale.Events.RESIZE, this.resizeCallback);
    }

    private resize() {
        this.base.setDisplaySize(baseSize / waScaleManager.zoomModifier * window.devicePixelRatio, baseSize / waScaleManager.zoomModifier * window.devicePixelRatio);
        this.thumb.setDisplaySize(thumbSize / waScaleManager.zoomModifier * window.devicePixelRatio, thumbSize / waScaleManager.zoomModifier * window.devicePixelRatio);
        this.setRadius(radius / waScaleManager.zoomModifier * window.devicePixelRatio);
    }

    public destroy() {
        super.destroy();
        this.scene.scale.removeListener(Phaser.Scale.Events.RESIZE, this.resizeCallback);
    }
}