- elementArray.push(gameDiv);
- if (!!this.vr.reserve) //TODO: table, show counts for reserve pieces
- //<tr style="padding:0">
- // <td style="padding:0;font-size:10px">3</td>
- {
- let reservePiecesArray = [];
- for (let i=0; i<VariantRules.RESERVE_PIECES.length; i++)
- {
- reservePiecesArray.push(h('img',
- {
- 'class': {"piece":true},
- attrs: {
- "src": "/images/pieces/" +
- this.vr.getReservePpath(this.mycolor,i) + ".svg",
- id: this.getSquareId({x:sizeX,y:i}),
- }
- })
- );
- }
- let reserve = h('div',
- {'class':{'game':true}}, [
- h('div',
- { 'class': { 'row': true }},
- [
- h('div',
- {'class':{'board':true, ['board'+sizeY]:true}},
- reservePiecesArray
- )
- ]
- )
- ],
- );
- elementArray.push(reserve);
- }
- const eogMessage = this.getEndgameMessage(this.score);
- const modalEog = [
- h('input',
- {
- attrs: { "id": "modal-eog", type: "checkbox" },
- "class": { "modal": true },
- }),
- h('div',
- {
- attrs: { "role": "dialog", "aria-labelledby": "dialog-title" },
- },
- [
- h('div',
- {
- "class": { "card": true, "smallpad": true },
- },
- [
- h('label',
- {
- attrs: { "for": "modal-eog" },
- "class": { "modal-close": true },
- }
- ),
- h('h3',
- {
- "class": { "section": true },
- domProps: { innerHTML: eogMessage },
- }
- )
- ]
- )
- ]
- )
- ];
- elementArray = elementArray.concat(modalEog);
- }
- const modalNewgame = [
- h('input',
- {
- attrs: { "id": "modal-newgame", type: "checkbox" },
- "class": { "modal": true },
- }),
- h('div',
- {
- attrs: { "role": "dialog", "aria-labelledby": "dialog-title" },
- },
- [
- h('div',
- {
- "class": { "card": true, "smallpad": true },
- },
- [
- h('label',
- {
- attrs: { "id": "close-newgame", "for": "modal-newgame" },
- "class": { "modal-close": true },
- }
- ),
- h('h3',
- {
- "class": { "section": true },
- domProps: { innerHTML: "New game" },
- }
- ),
- h('p',
- {
- "class": { "section": true },
- domProps: { innerHTML: "Waiting for opponent..." },
- }
- )
- ]
- )
- ]
- )
- ];
- elementArray = elementArray.concat(modalNewgame);
- const actions = h('div',
- {
- attrs: { "id": "actions" },
- 'class': { 'text-center': true },
- },
- actionArray
- );
- elementArray.push(actions);
- if (this.score != "*")
- {
- elementArray.push(
- h('div',
- { attrs: { id: "pgn-div" } },
- [
- h('a',
- {
- attrs: {
- id: "download",
- href: "#",
- }
- }
- ),
- h('p',
- {
- attrs: { id: "pgn-game" },
- on: { click: this.download },
- domProps: {
- innerHTML: this.pgnTxt
- }
- }
- )
- ]
- )
- );
- }
- return h(
- 'div',
- {
- 'class': {
- "col-sm-12":true,
- "col-md-8":true,
- "col-md-offset-2":true,
- "col-lg-6":true,
- "col-lg-offset-3":true,
- },
- // NOTE: click = mousedown + mouseup --> what about smartphone?!
- on: {
- mousedown: this.mousedown,
- mousemove: this.mousemove,
- mouseup: this.mouseup,
- touchdown: this.mousedown,
- touchmove: this.mousemove,
- touchup: this.mouseup,
- },
- },
- elementArray
- );