{"size": 1687, "ext": "js", "max_stars_repo_path": "src/components/text-button.js", "max_stars_repo_name": "jokuf/chaos-boats-jstalks-2020", "max_stars_repo_stars_event_min_datetime": "2020-11-17T08:36:33.000Z", "max_stars_repo_stars_event_max_datetime": "2022-02-10T10:49:48.000Z", "max_issues_repo_path": "src/components/text-button.js", "max_issues_repo_name": "jokuf/chaos-boats-jstalks-2020", "max_issues_repo_issues_event_min_datetime": "2020-11-21T12:18:38.000Z", "max_issues_repo_issues_event_max_datetime": "2020-11-24T16:48:44.000Z", "max_forks_repo_path": "src/components/text-button.js", "max_forks_repo_name": "jokuf/chaos-boats-jstalks-2020", "max_forks_repo_forks_event_min_datetime": "2020-11-20T11:24:24.000Z", "max_forks_repo_forks_event_max_datetime": "2020-11-24T16:50:48.000Z"}
{"max_stars_count": 8, "max_issues_count": 2, "max_forks_count": 10, "avg_line_length": 20.0833333333, "max_line_length": 83, "alphanum_fraction": 0.6259632484}
import Phaser from 'phaser';

const BASE_STYLE = { color: '#ffffff', stroke: '#6c8587', strokeThickness: 4 };
const HOVER_STYLE = { color: '#dbf6f8', stroke: '#6c8587', strokeThickness: 4 };
const ACTIVE_STYLE = { color: '#637c7e', stroke: '#96b0b2', strokeThickness: 1 };
const DISABLED_STYLE = { color: '#dbf6f8', stroke: '#a4bec0', strokeThickness: 4 };

export default class TextButton extends Phaser.GameObjects.Text {
	_over = false;
	_down = false;

	constructor(scene, x, y, text, style) {
		super(scene, x, y, text, {
			...style,
			align: 'center',
		});

		this.setPadding(4, 1);

		this.setInteractive({ useHandCursor: true })
			.on('pointerover', () => this.onPointerOver())
			.on('pointerout', () => this.onPointerOut())
			.on('pointerdown', () => this.onPointerDown())
			.on('pointerup', () => this.onPointerUp());
	}

	get disabled() {
		return !this.input.enabled;
	}

	set disabled(value) {
		if (this.disabled !== !!value) {
			if (value) {
				this.disableInteractive();
				this.setStyle(DISABLED_STYLE);
			} else {
				this.setInteractive();
				this.setStyle(this._over ? HOVER_STYLE : BASE_STYLE);
			}
		}
	}

	onPointerOver() {
		if (this.disabled) {
			return;
		}

		if (!this._over) {
			this.setStyle(HOVER_STYLE);
		}
		this._over = true;
	}

	onPointerOut() {
		if (this.disabled) {
			return;
		}

		this.setStyle(BASE_STYLE);
		this._over = false;
		this._down = false;
	}

	onPointerDown() {
		if (this.disabled) {
			return;
		}
		this.setStyle(ACTIVE_STYLE);
		this._down = true;
	}

	onPointerUp() {
		if (this.disabled) {
			return;
		}
		this.setStyle(HOVER_STYLE);

		if (this._down) {
			this.emit('click');
		}
		this._down = false;
	}
}
