@mai3/phaser-sdk
Version:
A UI component library based on the Phaser game engine
166 lines (165 loc) • 9.06 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 __());
};
})();
import Utils from '../utils';
import { BaseButton } from './BaseButton';
var BaseBar = /** @class */ (function (_super) {
__extends(BaseBar, _super);
function BaseBar(scene, config) {
var _this = _super.call(this, scene, config) || this;
_this._progressValue = 0;
_this._config = config;
_this.Type = 'BaseBar';
_this.reDraw(config);
return _this;
}
BaseBar.prototype.reDraw = function (config) {
var _a, _b, _c, _d, _e, _f, _g;
this._config = config;
this.bgWidth = (_a = config.width) !== null && _a !== void 0 ? _a : 300;
this.bgHeight = (_b = config.height) !== null && _b !== void 0 ? _b : 32;
this.fillWidth = 0;
this.borderWidth = (_c = config.borderWidth) !== null && _c !== void 0 ? _c : 0;
this.borderColor = (_e = (_d = this._config) === null || _d === void 0 ? void 0 : _d.borderColor) !== null && _e !== void 0 ? _e : 0xcf4b00;
this.radius = (_g = (_f = this._config) === null || _f === void 0 ? void 0 : _f.radius) !== null && _g !== void 0 ? _g : 0;
this.drawBarBg();
this.drawBarFill();
this.RefreshBounds();
};
BaseBar.prototype.drawBarBg = function () {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
if (((_a = this._config) === null || _a === void 0 ? void 0 : _a.bgTexture) && ((_b = this._config) === null || _b === void 0 ? void 0 : _b.bgTexture.length) > 0) {
this.bg = this.createOrGetSprite(this.bg, (_c = this._config) === null || _c === void 0 ? void 0 : _c.bgTexture, true);
this.bg.displayWidth = this.bgWidth;
this.bg.displayHeight = this.bgHeight;
this.bg.setOrigin(0);
}
else if ((((_d = this._config) === null || _d === void 0 ? void 0 : _d.radius) && ((_e = this._config) === null || _e === void 0 ? void 0 : _e.radius) > 0 || (((_f = this._config) === null || _f === void 0 ? void 0 : _f.bgTexture) && ((_g = this._config) === null || _g === void 0 ? void 0 : _g.bgTexture.length) == 0))) {
this.bg = this.reDrawRoundedRectBG(0, 0, this.bgWidth, this.bgHeight, this.borderWidth, this.radius, this.borderColor, ((_h = this._config) === null || _h === void 0 ? void 0 : _h.bgColor) || 0xcf4b00);
}
else {
this.bg = this.createOrGetRectangle(this.bg, true, 0, 0, this.bgWidth, this.bgHeight - this.borderWidth, (_j = this._config) === null || _j === void 0 ? void 0 : _j.bgColor);
this.bg.setStrokeStyle(this.borderWidth, (_k = this._config) === null || _k === void 0 ? void 0 : _k.bgColor, (_l = this._config) === null || _l === void 0 ? void 0 : _l.borderColorAlpha).setOrigin(0, 0);
this.bg.setOrigin(0);
}
this.addChildAt(this.bg, 0);
};
BaseBar.prototype.drawBarFill = function () {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
if (((_a = this._config) === null || _a === void 0 ? void 0 : _a.fillTexture) && ((_b = this._config) === null || _b === void 0 ? void 0 : _b.fillTexture.length) > 0) {
this.fill = this.createOrGetSprite(this.fill, (_c = this._config) === null || _c === void 0 ? void 0 : _c.fillTexture, false);
this.fill.displayWidth = 0;
this.fill.displayHeight = this.bgHeight;
this.fill.setOrigin(0);
}
else if ((((_d = this._config) === null || _d === void 0 ? void 0 : _d.radius) && ((_e = this._config) === null || _e === void 0 ? void 0 : _e.radius) > 0) || (((_f = this._config) === null || _f === void 0 ? void 0 : _f.fillTexture) && ((_g = this._config) === null || _g === void 0 ? void 0 : _g.fillTexture.length) == 0)) {
this.fill = this.reDrawRoundedRectFill(0, 0, 1, this.bgHeight, this.borderWidth, this.radius, this.borderColor, ((_h = this._config) === null || _h === void 0 ? void 0 : _h.fillColor) || 0xff8221);
}
else {
this.fill = this.createOrGetRectangle(this.fill, false, 0, 0, 4, this.bgHeight - this.borderWidth, (_j = this._config) === null || _j === void 0 ? void 0 : _j.fillColor, (_k = this._config) === null || _k === void 0 ? void 0 : _k.borderColorAlpha);
this.fill.setOrigin(0);
}
this.addChildAt(this.fill, 1);
};
BaseBar.prototype.createOrGetSprite = function (obj, key, isBg) {
var gameObj = obj !== null && obj !== void 0 ? obj : this.scene.make.sprite({ key: key });
if (!(obj instanceof Phaser.GameObjects.Sprite)) {
gameObj.destroy(true);
gameObj = this.scene.make.sprite({ key: key });
if (isBg)
this.bg = gameObj;
if (!isBg)
this.fill = gameObj;
this.addChildAt(isBg ? this.bg : this.fill, isBg ? 0 : 1);
}
gameObj.setTexture(key);
return gameObj;
};
BaseBar.prototype.createOrGetRectangle = function (obj, isBg, x, y, width, height, fillColor, fillAlpha) {
var gameObj = (obj !== null && obj !== void 0 ? obj : this.scene.add.rectangle(x, y, width, height, fillColor, fillAlpha));
if (!(obj instanceof Phaser.GameObjects.Rectangle)) {
gameObj.destroy(true);
gameObj = this.scene.add.rectangle(x, y, width, height, fillColor, fillAlpha);
if (isBg)
this.bg = gameObj;
if (!isBg)
this.fill = gameObj;
this.addChildAt(isBg ? this.bg : this.fill, isBg ? 0 : 1);
}
gameObj.width = width !== null && width !== void 0 ? width : gameObj.width;
gameObj.height = height !== null && height !== void 0 ? height : gameObj.height;
gameObj.setFillStyle(fillColor, fillAlpha);
return gameObj;
};
BaseBar.prototype.reDrawRoundedRectBG = function (x, y, width, height, borderWidth, radius, borderColor, fillColor) {
if (this.bg && !(this.bg instanceof Phaser.GameObjects.RenderTexture)) {
this.bg.destroy(true);
}
var rt = this.bg;
var newBg = Utils.reDrawRoundedRectRenderTexture(this.scene, rt, x, y, width, height, borderWidth, radius, borderColor, fillColor);
if (newBg) {
this.bg = newBg;
}
return this.bg;
};
BaseBar.prototype.reDrawRoundedRectFill = function (x, y, width, height, borderWidth, radius, borderColor, fillColor) {
if (this.fill && !(this.fill instanceof Phaser.GameObjects.RenderTexture)) {
this.fill.destroy(true);
}
var rt = this.fill;
var newFill = Utils.reDrawRoundedRectRenderTexture(this.scene, rt, x, y, width, height, borderWidth, radius, borderColor, fillColor);
if (newFill) {
this.fill = newFill;
}
return this.fill;
};
BaseBar.prototype.updateProgress = function (progress) {
var _a;
if (this.fill instanceof Phaser.GameObjects.Sprite) {
this.fill.x = 0;
this.fill.displayWidth = this.bgWidth * progress;
this.fillWidth = this.fill.displayWidth;
}
if (this.fill instanceof Phaser.GameObjects.Rectangle) {
this.fill.width = this.borderWidth * 2 + (this.bgWidth - this.borderWidth * 2) * progress;
this.fillWidth = this.fill.displayWidth;
}
if (this.fill instanceof Phaser.GameObjects.RenderTexture) {
this.fillWidth = this.bgWidth * progress;
if (this.fillWidth === 0)
this.fillWidth++;
this.fill = this.reDrawRoundedRectFill(0, 0, this.fillWidth, this.bgHeight, this.borderWidth, this.radius, this.borderColor, ((_a = this._config) === null || _a === void 0 ? void 0 : _a.fillColor) || 0xff8221);
if (this.fill) {
this.addChildAt(this.fill, 1);
}
}
this._progressValue = progress;
};
Object.defineProperty(BaseBar.prototype, "progress", {
get: function () {
return this._progressValue;
},
set: function (value) {
this.updateProgress(value);
},
enumerable: false,
configurable: true
});
BaseBar.prototype.getProgressWith = function () {
return this.fillWidth;
};
return BaseBar;
}(BaseButton));
export { BaseBar };