dcl-ui-toolkit
Version:
A collection of UI helpers to make it easier to build a Decentraland scene using the SDK 7.
56 lines • 10.1 kB
JavaScript
import { Color4 } from '@dcl/sdk/math';
import ReactEcs, { Label } from '@dcl/sdk/react-ecs';
import { UIObject } from '../UIObject';
import { toFixedLengthStringUtil } from '../../utils/textUtils';
import { defaultFont } from '../../constants/font';
const counterInitialConfig = {
startHidden: true,
value: 0,
xOffset: -40,
yOffset: 70,
color: Color4.White(),
size: 25,
fixedDigits: 0,
};
export class Counter extends UIObject {
constructor({ startHidden = counterInitialConfig.startHidden, value = counterInitialConfig.value, xOffset = counterInitialConfig.xOffset, yOffset = counterInitialConfig.yOffset, color = counterInitialConfig.color, size = counterInitialConfig.size, fixedDigits = counterInitialConfig.fixedDigits, }) {
super({ startHidden });
this.xOffset = xOffset;
this.yOffset = yOffset;
this.color = color;
this.size = size;
this.fixedDigits = fixedDigits;
this._value = value;
this._valueStep = 1;
this.textElement = {
textAlign: 'bottom-right',
font: defaultFont,
uiTransform: {
positionType: 'absolute',
},
};
}
read() {
return this._value;
}
set(value) {
this._value = value;
}
increase(amount) {
this._value += amount ? amount : this._valueStep;
}
decrease(amount) {
this._value -= amount ? amount : this._valueStep;
}
render(key) {
return (ReactEcs.createElement(Label, { key: key, ...this.textElement, fontSize: this.size, color: this.color, value: toFixedLengthStringUtil({
value: this._value,
fixedDigits: this.fixedDigits,
}), uiTransform: {
...this.textElement.uiTransform,
display: this.visible ? 'flex' : 'none',
position: { bottom: this.yOffset, right: this.xOffset * -1 },
} }));
}
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvdWktZW50aXRpZXMvQ291bnRlci9pbmRleC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQTtBQUN0QyxPQUFPLFFBQVEsRUFBRSxFQUFFLEtBQUssRUFBRSxNQUFNLG9CQUFvQixDQUFBO0FBSXBELE9BQU8sRUFBRSxRQUFRLEVBQWtCLE1BQU0sYUFBYSxDQUFBO0FBRXRELE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLHVCQUF1QixDQUFBO0FBRS9ELE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQTtBQWdCbEQsTUFBTSxvQkFBb0IsR0FBNEI7SUFDcEQsV0FBVyxFQUFFLElBQUk7SUFDakIsS0FBSyxFQUFFLENBQUM7SUFDUixPQUFPLEVBQUUsQ0FBQyxFQUFFO0lBQ1osT0FBTyxFQUFFLEVBQUU7SUFDWCxLQUFLLEVBQUUsTUFBTSxDQUFDLEtBQUssRUFBRTtJQUNyQixJQUFJLEVBQUUsRUFBRTtJQUNSLFdBQVcsRUFBRSxDQUFDO0NBQ04sQ0FBQTtBQWNWLE1BQU0sT0FBTyxPQUFRLFNBQVEsUUFBUTtJQVluQyxZQUFZLEVBQ1YsV0FBVyxHQUFHLG9CQUFvQixDQUFDLFdBQVcsRUFDOUMsS0FBSyxHQUFHLG9CQUFvQixDQUFDLEtBQUssRUFDbEMsT0FBTyxHQUFHLG9CQUFvQixDQUFDLE9BQU8sRUFDdEMsT0FBTyxHQUFHLG9CQUFvQixDQUFDLE9BQU8sRUFDdEMsS0FBSyxHQUFHLG9CQUFvQixDQUFDLEtBQUssRUFDbEMsSUFBSSxHQUFHLG9CQUFvQixDQUFDLElBQUksRUFDaEMsV0FBVyxHQUFHLG9CQUFvQixDQUFDLFdBQVcsR0FDaEM7UUFDZCxLQUFLLENBQUMsRUFBRSxXQUFXLEVBQUUsQ0FBQyxDQUFBO1FBRXRCLElBQUksQ0FBQyxPQUFPLEdBQUcsT0FBTyxDQUFBO1FBQ3RCLElBQUksQ0FBQyxPQUFPLEdBQUcsT0FBTyxDQUFBO1FBQ3RCLElBQUksQ0FBQyxLQUFLLEdBQUcsS0FBSyxDQUFBO1FBQ2xCLElBQUksQ0FBQyxJQUFJLEdBQUcsSUFBSSxDQUFBO1FBQ2hCLElBQUksQ0FBQyxXQUFXLEdBQUcsV0FBVyxDQUFBO1FBRTlCLElBQUksQ0FBQyxNQUFNLEdBQUcsS0FBSyxDQUFBO1FBRW5CLElBQUksQ0FBQyxVQUFVLEdBQUcsQ0FBQyxDQUFBO1FBRW5CLElBQUksQ0FBQyxXQUFXLEdBQUc7WUFDakIsU0FBUyxFQUFFLGNBQWM7WUFDekIsSUFBSSxFQUFFLFdBQVc7WUFDakIsV0FBVyxFQUFFO2dCQUNYLFlBQVksRUFBRSxVQUFVO2FBQ3pCO1NBQ0YsQ0FBQTtJQUNILENBQUM7SUFRTSxJQUFJO1FBQ1QsT0FBTyxJQUFJLENBQUMsTUFBTSxDQUFBO0lBQ3BCLENBQUM7SUFFTSxHQUFHLENBQUMsS0FBYTtRQUN0QixJQUFJLENBQUMsTUFBTSxHQUFHLEtBQUssQ0FBQTtJQUNyQixDQUFDO0lBUU0sUUFBUSxDQUFDLE1BQWU7UUFDN0IsSUFBSSxDQUFDLE1BQU0sSUFBSSxNQUFNLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQTtJQUNsRCxDQUFDO0lBUU0sUUFBUSxDQUFDLE1BQWU7UUFDN0IsSUFBSSxDQUFDLE1BQU0sSUFBSSxNQUFNLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQTtJQUNsRCxDQUFDO0lBRU0sTUFBTSxDQUFDLEdBQVk7UUFDeEIsT0FBTyxDQUNMLHVCQUFDLEtBQUssSUFDSixHQUFHLEVBQUUsR0FBRyxLQUNKLElBQUksQ0FBQyxXQUFXLEVBQ3BCLFFBQVEsRUFBRSxJQUFJLENBQUMsSUFBSSxFQUNuQixLQUFLLEVBQUUsSUFBSSxDQUFDLEtBQUssRUFDakIsS0FBSyxFQUFFLHVCQUF1QixDQUFDO2dCQUM3QixLQUFLLEVBQUUsSUFBSSxDQUFDLE1BQU07Z0JBQ2xCLFdBQVcsRUFBRSxJQUFJLENBQUMsV0FBVzthQUM5QixDQUFDLEVBQ0YsV0FBVyxFQUFFO2dCQUNYLEdBQUcsSUFBSSxDQUFDLFdBQVcsQ0FBQyxXQUFXO2dCQUMvQixPQUFPLEVBQUUsSUFBSSxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxNQUFNO2dCQUN2QyxRQUFRLEVBQUUsRUFBRSxNQUFNLEVBQUUsSUFBSSxDQUFDLE9BQU8sRUFBRSxLQUFLLEVBQUUsSUFBSSxDQUFDLE9BQU8sR0FBRyxDQUFDLENBQUMsRUFBRTthQUM3RCxHQUNELENBQ0gsQ0FBQTtJQUNILENBQUM7Q0FDRiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbG9yNCB9IGZyb20gJ0BkY2wvc2RrL21hdGgnXG5pbXBvcnQgUmVhY3RFY3MsIHsgTGFiZWwgfSBmcm9tICdAZGNsL3Nkay9yZWFjdC1lY3MnXG5pbXBvcnQgeyBFbnRpdHlQcm9wVHlwZXMgfSBmcm9tICdAZGNsL3JlYWN0LWVjcy9kaXN0L2NvbXBvbmVudHMvdHlwZXMnXG5pbXBvcnQgeyBVaUxhYmVsUHJvcHMgfSBmcm9tICdAZGNsL3JlYWN0LWVjcy9kaXN0L2NvbXBvbmVudHMvTGFiZWwvdHlwZXMnXG5cbmltcG9ydCB7IFVJT2JqZWN0LCBVSU9iamVjdENvbmZpZyB9IGZyb20gJy4uL1VJT2JqZWN0J1xuXG5pbXBvcnQgeyB0b0ZpeGVkTGVuZ3RoU3RyaW5nVXRpbCB9IGZyb20gJy4uLy4uL3V0aWxzL3RleHRVdGlscydcblxuaW1wb3J0IHsgZGVmYXVsdEZvbnQgfSBmcm9tICcuLi8uLi9jb25zdGFudHMvZm9udCdcblxuZXhwb3J0IHR5cGUgQ291bnRlclRleHRFbGVtZW50ID0gT21pdDxVaUxhYmVsUHJvcHMsICd2YWx1ZScgfCAnZm9udFNpemUnIHwgJ2NvbG9yJz4gJlxuICBPbWl0PEVudGl0eVByb3BUeXBlcywgJ3VpVHJhbnNmb3JtJz4gJiB7XG4gICAgdWlUcmFuc2Zvcm0/OiBPbWl0PE5vbk51bGxhYmxlPEVudGl0eVByb3BUeXBlc1sndWlUcmFuc2Zvcm0nXT4sICdkaXNwbGF5JyB8ICdwb3NpdGlvbic+XG4gIH1cblxuZXhwb3J0IHR5cGUgQ291bnRlckNvbmZpZyA9IFVJT2JqZWN0Q29uZmlnICYge1xuICB2YWx1ZTogbnVtYmVyXG4gIHhPZmZzZXQ/OiBudW1iZXJcbiAgeU9mZnNldD86IG51bWJlclxuICBjb2xvcj86IENvbG9yNFxuICBzaXplPzogbnVtYmVyXG4gIGZpeGVkRGlnaXRzPzogbnVtYmVyXG59XG5cbmNvbnN0IGNvdW50ZXJJbml0aWFsQ29uZmlnOiBSZXF1aXJlZDxDb3VudGVyQ29uZmlnPiA9IHtcbiAgc3RhcnRIaWRkZW46IHRydWUsXG4gIHZhbHVlOiAwLFxuICB4T2Zmc2V0OiAtNDAsXG4gIHlPZmZzZXQ6IDcwLFxuICBjb2xvcjogQ29sb3I0LldoaXRlKCksXG4gIHNpemU6IDI1LFxuICBmaXhlZERpZ2l0czogMCxcbn0gYXMgY29uc3RcblxuLyoqXG4gKiBEaXNwbGF5cyBhIG51bWJlciBvbiB0aGUgYm90dG9tLXJpZ2h0IG9mIHRoZSBVSS5cbiAqXG4gKiBAcGFyYW0ge2Jvb2xlYW59IFtzdGFydEhpZGRlbj10cnVlXSBzdGFydGluZyBoaWRkZW5cbiAqIEBwYXJhbSB7bnVtYmVyfSBbdmFsdWU9MF0gc3RhcnRpbmcgdmFsdWVcbiAqIEBwYXJhbSB7bnVtYmVyfSBbeE9mZnNldD0tNDBdIHBvc2l0aW9uIG9uIFgsIHRvIGVuYWJsZSBmaXR0aW5nIHNldmVyYWwgY291bnRlcnNcbiAqIEBwYXJhbSB7bnVtYmVyfSBbeU9mZnNldD03MF0gcG9zaXRpb24gb24gWSwgdG8gZW5hYmxlIGZpdHRpbmcgc2V2ZXJhbCBjb3VudGVyc1xuICogQHBhcmFtIHtDb2xvcjR9IFtjb2xvcj1Db2xvcjQuV2hpdGUoKV0gdGV4dCBjb2xvclxuICogQHBhcmFtIHtudW1iZXJ9IFtzaXplPTI1XSB0ZXh0IHNpemVcbiAqIEBwYXJhbSB7Ym9vbGVhbn0gW2ZpeGVkRGlnaXRzPTBdIGRpc3BsYXkgYSBzcGVjaWZpYyBhbW91bnQgb2YgZGlnaXRzLCByZWdhcmRsZXNzIG9mIHRoZSB2YWx1ZSwgYWRkaW5nIHByZWNlZGluZyAwc1xuICpcbiAqL1xuZXhwb3J0IGNsYXNzIENvdW50ZXIgZXh0ZW5kcyBVSU9iamVjdCB7XG4gIHB1YmxpYyB0ZXh0RWxlbWVudDogQ291bnRlclRleHRFbGVtZW50XG5cbiAgcHVibGljIHhPZmZzZXQ6IG51bWJlclxuICBwdWJsaWMgeU9mZnNldDogbnVtYmVyXG4gIHB1YmxpYyBjb2xvcjogQ29sb3I0XG4gIHB1YmxpYyBzaXplOiBudW1iZXJcbiAgcHVibGljIGZpeGVkRGlnaXRzOiBudW1iZXJcblxuICBwcml2YXRlIF92YWx1ZTogbnVtYmVyXG4gIHByaXZhdGUgcmVhZG9ubHkgX3ZhbHVlU3RlcDogbnVtYmVyXG5cbiAgY29uc3RydWN0b3Ioe1xuICAgIHN0YXJ0SGlkZGVuID0gY291bnRlckluaXRpYWxDb25maWcuc3RhcnRIaWRkZW4sXG4gICAgdmFsdWUgPSBjb3VudGVySW5pdGlhbENvbmZpZy52YWx1ZSxcbiAgICB4T2Zmc2V0ID0gY291bnRlckluaXRpYWxDb25maWcueE9mZnNldCxcbiAgICB5T2Zmc2V0ID0gY291bnRlckluaXRpYWxDb25maWcueU9mZnNldCxcbiAgICBjb2xvciA9IGNvdW50ZXJJbml0aWFsQ29uZmlnLmNvbG9yLFxuICAgIHNpemUgPSBjb3VudGVySW5pdGlhbENvbmZpZy5zaXplLFxuICAgIGZpeGVkRGlnaXRzID0gY291bnRlckluaXRpYWxDb25maWcuZml4ZWREaWdpdHMsXG4gIH06IENvdW50ZXJDb25maWcpIHtcbiAgICBzdXBlcih7IHN0YXJ0SGlkZGVuIH0pXG5cbiAgICB0aGlzLnhPZmZzZXQgPSB4T2Zmc2V0XG4gICAgdGhpcy55T2Zmc2V0ID0geU9mZnNldFxuICAgIHRoaXMuY29sb3IgPSBjb2xvclxuICAgIHRoaXMuc2l6ZSA9IHNpemVcbiAgICB0aGlzLmZpeGVkRGlnaXRzID0gZml4ZWREaWdpdHNcblxuICAgIHRoaXMuX3ZhbHVlID0gdmFsdWVcblxuICAgIHRoaXMuX3ZhbHVlU3RlcCA9IDFcblxuICAgIHRoaXMudGV4dEVsZW1lbnQgPSB7XG4gICAgICB0ZXh0QWxpZ246ICdib3R0b20tcmlnaHQnLFxuICAgICAgZm9udDogZGVmYXVsdEZvbnQsXG4gICAgICB1aVRyYW5zZm9ybToge1xuICAgICAgICBwb3NpdGlvblR5cGU6ICdhYnNvbHV0ZScsXG4gICAgICB9LFxuICAgIH1cbiAgfVxuXG4gIC8qKlxuICAgKiBHZXQgdGhlIGN1cnJlbnQgdmFsdWUgb2YgdGhlIGNvdW50ZXIuXG4gICAqXG4gICAqIEByZXR1cm4ge251bWJlcn0gVGhlIGN1cnJlbnQgdmFsdWUgb2YgdGhlIGNvdW50ZXJcbiAgICpcbiAgICovXG4gIHB1YmxpYyByZWFkKCk6IG51bWJlciB7XG4gICAgcmV0dXJuIHRoaXMuX3ZhbHVlXG4gIH1cblxuICBwdWJsaWMgc2V0KHZhbHVlOiBudW1iZXIpOiB2b2lkIHtcbiAgICB0aGlzLl92YWx1ZSA9IHZhbHVlXG4gIH1cblxuICAvKipcbiAgICogSW5jcmVhc2UgdGhlIHZhbHVlIG9uIHRoZSBjb3VudGVyLlxuICAgKlxuICAgKiBAcGFyYW0ge251bWJlcn0gW2Ftb3VudD0xXSBIb3cgbXVjaCB0byBpbmNyZWFzZSB0aGUgY291bnRlci4gQnkgZGVmYXVsdCwgaXQgaW5jcmVhc2VzIGJ5IDFcbiAgICpcbiAgICovXG4gIHB1YmxpYyBpbmNyZWFzZShhbW91bnQ/OiBudW1iZXIpOiB2b2lkIHtcbiAgICB0aGlzLl92YWx1ZSArPSBhbW91bnQgPyBhbW91bnQgOiB0aGlzLl92YWx1ZVN0ZXBcbiAgfVxuXG4gIC8qKlxuICAgKiBEZWNyZWFzZSB0aGUgdmFsdWUgb24gdGhlIGNvdW50ZXIuXG4gICAqXG4gICAqIEBwYXJhbSB7bnVtYmVyfSBbYW1vdW50PTFdIEhvdyBtdWNoIHRvIGRlY3JlYXNlIHRoZSBjb3VudGVyLiBCeSBkZWZhdWx0LCBpdCBkZWNyZWFzZXMgYnkgMVxuICAgKlxuICAgKi9cbiAgcHVibGljIGRlY3JlYXNlKGFtb3VudD86IG51bWJlcik6IHZvaWQge1xuICAgIHRoaXMuX3ZhbHVlIC09IGFtb3VudCA/IGFtb3VudCA6IHRoaXMuX3ZhbHVlU3RlcFxuICB9XG5cbiAgcHVibGljIHJlbmRlcihrZXk/OiBzdHJpbmcpOiBSZWFjdEVjcy5KU1guRWxlbWVudCB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxMYWJlbFxuICAgICAgICBrZXk9e2tleX1cbiAgICAgICAgey4uLnRoaXMudGV4dEVsZW1lbnR9XG4gICAgICAgIGZvbnRTaXplPXt0aGlzLnNpemV9XG4gICAgICAgIGNvbG9yPXt0aGlzLmNvbG9yfVxuICAgICAgICB2YWx1ZT17dG9GaXhlZExlbmd0aFN0cmluZ1V0aWwoe1xuICAgICAgICAgIHZhbHVlOiB0aGlzLl92YWx1ZSxcbiAgICAgICAgICBmaXhlZERpZ2l0czogdGhpcy5maXhlZERpZ2l0cyxcbiAgICAgICAgfSl9XG4gICAgICAgIHVpVHJhbnNmb3JtPXt7XG4gICAgICAgICAgLi4udGhpcy50ZXh0RWxlbWVudC51aVRyYW5zZm9ybSxcbiAgICAgICAgICBkaXNwbGF5OiB0aGlzLnZpc2libGUgPyAnZmxleCcgOiAnbm9uZScsXG4gICAgICAgICAgcG9zaXRpb246IHsgYm90dG9tOiB0aGlzLnlPZmZzZXQsIHJpZ2h0OiB0aGlzLnhPZmZzZXQgKiAtMSB9LFxuICAgICAgICB9fVxuICAgICAgLz5cbiAgICApXG4gIH1cbn1cbiJdfQ==