@mai3/phaser-sdk
Version:
A UI component library based on the Phaser game engine
138 lines (137 loc) • 6.83 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
import { buttonDesign } from '../common/consts';
import Utils from '../utils';
import { Panel } from './Panel';
var DropdownMenuItem = /** @class */ (function (_super) {
__extends(DropdownMenuItem, _super);
function DropdownMenuItem(scene, config) {
var _a;
var _this = _super.call(this, scene, config) || this;
var styleSchema = config.style === 'dark' ? buttonDesign.dark : buttonDesign.light;
var text = scene.add.text(buttonDesign.dropDownItem.horizontalPadding +
buttonDesign.icon.width +
buttonDesign.dropDownItem.horizontalPadding, buttonDesign.dropDownItem.verticalPadding, config.text, {
color: styleSchema.fontColor,
fontFamily: buttonDesign.fontFamily,
fontSize: buttonDesign.fontSize
});
_this.text = text;
var textHeight = text.height;
var buttonWidth = buttonDesign.dropDown.width - buttonDesign.dropDown.horizontalPadding * 2;
var buttonHeight = textHeight + buttonDesign.dropDownItem.verticalPadding * 2;
_this.buttonHeight = buttonHeight;
var icon = scene.add.image(buttonDesign.dropDownItem.horizontalPadding + buttonDesign.icon.width * 0.5, buttonHeight * 0.5, config.icon);
_this.icon = icon;
var button = scene.add.graphics({
x: 0,
y: 0,
fillStyle: { color: Utils.hexToNumber(styleSchema.backgroundColor) }
});
button.fillRoundedRect(0, 0, buttonWidth, buttonHeight, 8);
button.setInteractive(new Phaser.Geom.Rectangle(0, 0, buttonWidth, buttonHeight), Phaser.Geom.Rectangle.Contains);
button.on('pointerover', function () {
scene.game.canvas.style.cursor = 'pointer';
button.clear();
button.fillStyle(Utils.hexToNumber(styleSchema.backgroundColorHover));
button.lineStyle(buttonDesign.borderWidth, Utils.hexToNumber(styleSchema.borderColor));
button.fillRoundedRect(0, 0, buttonWidth, buttonHeight, 8);
});
button.on('pointerout', function () {
scene.game.canvas.style.cursor = 'default';
button.clear();
button.fillStyle(Utils.hexToNumber(styleSchema.backgroundColor));
button.lineStyle(buttonDesign.borderWidth, Utils.hexToNumber(styleSchema.borderColor));
button.fillRoundedRect(0, 0, buttonWidth, buttonHeight, 8);
Utils.smoothScale(scene.tweens, _this, 1, 125);
});
button.on('pointerdown', function () {
Utils.smoothScale(scene.tweens, _this, 0.98, 125);
});
button.on('pointerup', function () {
Utils.smoothScale(scene.tweens, _this, 1, 125);
});
_this.button = button;
if (config.onClick) {
button.setInteractive({ useHandCursor: true });
button.on('pointerdown', function () {
config.onClick && config.onClick(_this);
});
}
_this.add([button, icon, text]);
_this.setDepth((_a = config.depth) !== null && _a !== void 0 ? _a : 1);
return _this;
}
return DropdownMenuItem;
}(Panel));
export { DropdownMenuItem };
var DropdownMenu = /** @class */ (function (_super) {
__extends(DropdownMenu, _super);
// private readonly container: Phaser.GameObjects.Graphics;
// private readonly containerHeight: number;
// private readonly items: DropdownMenuItem[];
function DropdownMenu(scene, config) {
var _a, _b, _c;
var _this = _super.call(this, scene, config) || this;
var styleSchema = config.style === 'dark' ? buttonDesign.dark : buttonDesign.light;
var itemsContainers = [];
config.x = (_a = buttonDesign.dropDown.horizontalPadding) !== null && _a !== void 0 ? _a : 0;
config.y = (_b = buttonDesign.dropDown.verticalPadding) !== null && _b !== void 0 ? _b : 0;
var totalHeight = (_c = buttonDesign.dropDown.verticalPadding) !== null && _c !== void 0 ? _c : 0;
config.items.forEach(function (item) {
var _a, _b;
var itemContainer = new DropdownMenuItem(scene, __assign(__assign({}, item), { style: config.style, x: (_a = config.x) !== null && _a !== void 0 ? _a : 0, y: (_b = config.y) !== null && _b !== void 0 ? _b : 0 }));
totalHeight += itemContainer.buttonHeight;
itemsContainers.push(itemContainer);
});
totalHeight += buttonDesign.dropDown.verticalPadding;
var container = scene.add.graphics({
x: 0,
y: 0,
fillStyle: { color: Utils.hexToNumber(styleSchema.backgroundColor) },
lineStyle: { width: buttonDesign.borderWidth, color: Utils.hexToNumber(styleSchema.borderColor) }
});
container.fillRoundedRect(0, 0, buttonDesign.dropDown.width, totalHeight, buttonDesign.dropDown.borderRadius);
container.strokeRoundedRect(0, 0, buttonDesign.dropDown.width, totalHeight, buttonDesign.dropDown.borderRadius);
_this.add(__spreadArray([container], itemsContainers, true));
return _this;
// this.container = container;
// this.containerHeight = totalHeight;
// this.items = itemsContainers;
}
return DropdownMenu;
}(Panel));
export { DropdownMenu };