+ if (this.mode != "idle")
+ {
+ actionArray.push(
+ h('button',
+ {
+ on: { click: this.resign },
+ attrs: { "aria-label": 'Resign' },
+ 'class': {
+ "tooltip":true,
+ "bottom": true,
+ "small": smallScreen,
+ },
+ },
+ [h('i', { 'class': { "material-icons": true } }, "flag")])
+ );
+ }
+ else if (this.vr.moves.length > 0)
+ {
+ // A game finished, and another is not started yet: allow navigation
+ actionArray = actionArray.concat([
+ h('button',
+ {
+ on: { click: e => this.undo() },
+ attrs: { "aria-label": 'Undo' },
+ "class": {
+ "small": smallScreen,
+ "marginleft": true,
+ },
+ },
+ [h('i', { 'class': { "material-icons": true } }, "fast_rewind")]),
+ h('button',
+ {
+ on: { click: e => this.play() },
+ attrs: { "aria-label": 'Play' },
+ "class": { "small": smallScreen },
+ },
+ [h('i', { 'class': { "material-icons": true } }, "fast_forward")]),
+ ]
+ );
+ }
+ if (this.mode == "friend")
+ {
+ actionArray = actionArray.concat(
+ [
+ h('button',
+ {
+ on: { click: this.undoInGame },
+ attrs: { "aria-label": 'Undo' },
+ "class": {
+ "small": smallScreen,
+ "marginleft": true,
+ },
+ },
+ [h('i', { 'class': { "material-icons": true } }, "undo")]
+ ),
+ h('button',
+ {
+ on: { click: () => { this.mycolor = this.vr.getOppCol(this.mycolor) } },
+ attrs: { "aria-label": 'Flip' },
+ "class": { "small": smallScreen },
+ },
+ [h('i', { 'class': { "material-icons": true } }, "cached")]
+ ),
+ ]);
+ }
+ elementArray.push(gameDiv);
+ if (!!this.vr.reserve)
+ {
+ const shiftIdx = (this.mycolor=="w" ? 0 : 1);
+ let myReservePiecesArray = [];
+ for (let i=0; i<VariantRules.RESERVE_PIECES.length; i++)
+ {
+ myReservePiecesArray.push(h('div',
+ {
+ 'class': {'board':true, ['board'+sizeY]:true},
+ attrs: { id: this.getSquareId({x:sizeX+shiftIdx,y:i}) }
+ },
+ [
+ h('img',
+ {
+ 'class': {"piece":true},
+ attrs: {
+ "src": "/images/pieces/" +
+ this.vr.getReservePpath(this.mycolor,i) + ".svg",
+ }
+ }),
+ h('sup',
+ {"class": { "reserve-count": true } },
+ [ this.vr.reserve[this.mycolor][VariantRules.RESERVE_PIECES[i]] ]
+ )
+ ]));
+ }
+ let oppReservePiecesArray = [];
+ const oppCol = this.vr.getOppCol(this.mycolor);
+ for (let i=0; i<VariantRules.RESERVE_PIECES.length; i++)
+ {
+ oppReservePiecesArray.push(h('div',
+ {
+ 'class': {'board':true, ['board'+sizeY]:true},
+ attrs: { id: this.getSquareId({x:sizeX+(1-shiftIdx),y:i}) }
+ },
+ [
+ h('img',
+ {
+ 'class': {"piece":true},
+ attrs: {
+ "src": "/images/pieces/" +
+ this.vr.getReservePpath(oppCol,i) + ".svg",
+ }
+ }),
+ h('sup',
+ {"class": { "reserve-count": true } },
+ [ this.vr.reserve[oppCol][VariantRules.RESERVE_PIECES[i]] ]
+ )
+ ]));
+ }
+ let reserves = h('div',