@progracol/bingo-board-component
Version:
Componente cartón de bingo
662 lines (658 loc) • 21 kB
JavaScript
import { h } from "@stencil/core";
import { NumberBoard } from '../../models/number-board';
//import ResizeObserver from 'resize-observer-polyfill';
export class BingoBoardComponent {
constructor() {
this.moduleId = '';
this.numbers = [];
this.numbersBoard2 = [];
this.ranking = 1;
this.probability = 0;
this.bet = 0;
this.king = false;
this.secProbability = 0;
this.manual = false;
this.validated = false;
this.miniBoard = false;
this.select = false;
this.register = false;
this.hide = false;
this.posLast = -1;
this.posFigure = [];
}
//private ro: ResizeObserver;
componentDidLoad() {
/*this.ro = new ResizeObserver((entries, observer) => {
console.log(entries, observer);
for (const entry of entries) {
const { left, top, width, height } = entry.contentRect;
console.log('Element:', entry.target);
console.log(`Element's size: ${width}px x ${height}px`);
console.log(`Element's paddings: ${top}px ; ${left}px`);
}
});
//ro2.observe(document.getElementById('00144'));
this.ro.observe(this.element);
console.log(document.getElementById('00144'));
console.log(this.element);*/
}
componentDidUnload() {
/* if (this.ro)
this.ro.disconnect();*/
}
/*applySizeClasses(size: number) {
let small = false;
let medium = false;
let large = false;
if (size <= 200) small = true;
else if (size <= 400) medium = true;
else large = true;
this.element.classList.toggle("small", small);
this.element.classList.toggle("medium", medium);
this.element.classList.toggle("large", large);
}*/
/**
*
* @param position
*/
async newNumber(position) {
let arr = [...this.numbersBoard];
arr[position].checked = true;
this.numbersBoard = [...arr];
this.posLast = position;
}
async newBallotNumber(ballot) {
let pos = this.numbers.indexOf(ballot);
if (pos != -1) {
this.newNumber(pos);
}
else {
this.posLast = -1;
}
}
async noNumber() {
this.posLast = -1;
}
/*@Method()
async setBet(quantity: number) {
this.bet = quantity;
}*/
/* @Method()
async getProbability() {
return this.probability;
}*/
addNumber(position) {
if (this.manual && !this.miniBoard) {
if (this.numbersBoard[position].checked)
this.deleteNumber(position);
else
this.newNumber(position);
}
}
async deleteNumber(position) {
let arr = [...this.numbersBoard];
arr[position].checked = false;
this.numbersBoard = [...arr];
}
componentWillUpdate() {
//console.log("entrando;")
}
async clean() {
this.numbersBoard.forEach(element => {
element.checked = false;
});
}
async validateFigure(pattern) {
let arrResponse = [];
for (let i = 0; i < pattern.length; i++) {
arrResponse.push(this.oneValidate(pattern[i].positions));
}
return Promise.all(arrResponse).then((_res) => {
let i = 0;
while (i < _res.length) {
if (_res[i].hasBingo)
return { element: this.element, pattern: _res[i].pattern, hasBingo: true, moduleId: this.moduleId };
++i;
}
return { element: this.element, pattern: 0, hasBingo: false, moduleId: this.moduleId };
});
}
async validate(pattern) {
let arrResponse = [];
for (let i = 0; i < pattern.length; i++) {
arrResponse.push(this.oneValidate(pattern[i]));
}
return Promise.all(arrResponse).then((_res) => {
let i = 0;
while (i < _res.length) {
if (_res[i].hasBingo)
return { element: this.element, pattern: _res[i].pattern, hasBingo: true, moduleId: this.moduleId };
++i;
}
return { element: this.element, pattern: 0, hasBingo: false, moduleId: this.moduleId };
});
}
async oneValidate(pattern) {
let x = this.intFromBytes(this.numbersBoard) & pattern;
let y = (this.countOnes(pattern) - this.countOnes(x));
let z = this.calcProbability(y, 10);
this.getPositions(pattern);
if (z > this.probability) {
this.secProbability = this.probability;
this.probability = z;
}
else {
if (z > this.secProbability)
this.secProbability = z;
}
return { pattern: pattern, hasBingo: x == pattern };
}
calcProbability(y, quantity) {
let percent = 1;
for (let i = 0; i < y; i++) {
percent *= (i + 1) / (quantity - i);
}
return percent * 100;
}
intFromBytes(x) {
var val = 0;
for (var i = 0; i < x.length; ++i) {
val += (+x[i].checked);
if (i < x.length - 1) {
val = (val << 1);
}
}
return val;
}
getPositions(x) {
let pos = 24;
this.posFigure = [];
while (x > 0) {
if (x & 1)
this.posFigure.push(pos);
x >>= 1;
--pos;
}
}
countOnes(x) {
let ones = 0;
while (x > 0) {
if (x & 1)
++ones;
x >>= 1;
}
return ones;
}
parseNumbersProp(newValue) {
if (newValue) {
this.numbers = newValue;
this.numbersBoard = [];
this.numbers.forEach(element => {
this.numbersBoard.push(new NumberBoard(element, false));
});
}
}
parseNumbersBoard2Prop(newValue) {
if (newValue) {
this.numbersBoard = [...newValue];
}
}
componentWillLoad() {
this.parseNumbersProp(this.numbers);
if (!this.numbers.length)
this.parseNumbersBoard2Prop(this.numbersBoard2);
}
render() {
if (!this.hide) {
return (h("div", { class: 'board' + (this.select ? ' selected' : '') + (this.register ? ' registered' : '') + (this.validated ? ' validated' : '') + (this.miniBoard ? ' mini' : '') },
h("div", { class: "border" }, this.numbersBoard.map((element, i) => h("div", { onClick: () => { this.addNumber(i); }, class: 'column text-center' + (element.checked ? ' active' : '') + (this.posFigure.indexOf(i) == -1 ? '' : ' belong') + (i == this.posLast ? ' last' : '') },
h("div", { class: 'number' + (element.number ? '' : ' center') },
h("span", null, element.number ? element.number : this.moduleId))))),
h("div", { key: this.bet, class: "bet" }, this.bet > 0 ? this.bet : '')));
}
else {
return (h("div", { class: "board" }));
}
}
static get is() { return "bingo-board"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() { return {
"$": ["bingo-board.component.scss"]
}; }
static get styleUrls() { return {
"$": ["bingo-board.component.css"]
}; }
static get properties() { return {
"moduleId": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "module-id",
"reflect": false,
"defaultValue": "''"
},
"numbers": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "Array<number>",
"resolved": "number[]",
"references": {
"Array": {
"location": "global"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"defaultValue": "[]"
},
"numbersBoard2": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "Array<NumberBoard>",
"resolved": "NumberBoard[]",
"references": {
"Array": {
"location": "global"
},
"NumberBoard": {
"location": "import",
"path": "../../models/number-board"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"defaultValue": "[]"
},
"ranking": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "ranking",
"reflect": false,
"defaultValue": "1"
},
"probability": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "probability",
"reflect": false,
"defaultValue": "0"
},
"bet": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "bet",
"reflect": false,
"defaultValue": "0"
},
"king": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "king",
"reflect": false,
"defaultValue": "false"
},
"secProbability": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "sec-probability",
"reflect": false,
"defaultValue": "0"
},
"manual": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "manual",
"reflect": false,
"defaultValue": "false"
},
"validated": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "validated",
"reflect": false,
"defaultValue": "false"
},
"miniBoard": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "mini-board",
"reflect": false,
"defaultValue": "false"
},
"select": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "select",
"reflect": false,
"defaultValue": "false"
},
"register": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "register",
"reflect": false,
"defaultValue": "false"
},
"hide": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "hide",
"reflect": false,
"defaultValue": "false"
},
"posLast": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "pos-last",
"reflect": false,
"defaultValue": "-1"
}
}; }
static get states() { return {
"numbersBoard": {},
"posFigure": {}
}; }
static get methods() { return {
"newNumber": {
"complexType": {
"signature": "(position: number) => Promise<void>",
"parameters": [{
"tags": [{
"text": "position",
"name": "param"
}],
"text": ""
}],
"references": {
"Promise": {
"location": "global"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "",
"tags": [{
"name": "param",
"text": "position"
}]
}
},
"newBallotNumber": {
"complexType": {
"signature": "(ballot: number) => Promise<void>",
"parameters": [{
"tags": [],
"text": ""
}],
"references": {
"Promise": {
"location": "global"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "",
"tags": []
}
},
"noNumber": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "",
"tags": []
}
},
"clean": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "",
"tags": []
}
},
"validateFigure": {
"complexType": {
"signature": "(pattern: any[]) => Promise<{ element: HTMLElement; pattern: any; hasBingo: boolean; moduleId: string; }>",
"parameters": [{
"tags": [],
"text": ""
}],
"references": {
"Promise": {
"location": "global"
},
"HTMLElement": {
"location": "global"
}
},
"return": "Promise<{ element: HTMLElement; pattern: any; hasBingo: boolean; moduleId: string; }>"
},
"docs": {
"text": "",
"tags": []
}
},
"validate": {
"complexType": {
"signature": "(pattern: number[]) => Promise<{ element: HTMLElement; pattern: any; hasBingo: boolean; moduleId: string; }>",
"parameters": [{
"tags": [],
"text": ""
}],
"references": {
"Promise": {
"location": "global"
},
"HTMLElement": {
"location": "global"
}
},
"return": "Promise<{ element: HTMLElement; pattern: any; hasBingo: boolean; moduleId: string; }>"
},
"docs": {
"text": "",
"tags": []
}
},
"oneValidate": {
"complexType": {
"signature": "(pattern: number) => Promise<{ pattern: number; hasBingo: boolean; }>",
"parameters": [{
"tags": [],
"text": ""
}],
"references": {
"Promise": {
"location": "global"
}
},
"return": "Promise<{ pattern: number; hasBingo: boolean; }>"
},
"docs": {
"text": "",
"tags": []
}
}
}; }
static get elementRef() { return "element"; }
static get watchers() { return [{
"propName": "numbers",
"methodName": "parseNumbersProp"
}, {
"propName": "numbersBoard2",
"methodName": "parseNumbersBoard2Prop"
}]; }
}