- render(h) {
- const [sizeX,sizeY] = [V.size.x,V.size.y];
- const smallScreen = (window.innerWidth <= 420);
- // Precompute hints squares to facilitate rendering
- let hintSquares = doubleArray(sizeX, sizeY, false);
- this.possibleMoves.forEach(m => { hintSquares[m.end.x][m.end.y] = true; });
- // Also precompute in-check squares
- let incheckSq = doubleArray(sizeX, sizeY, false);
- this.incheck.forEach(sq => { incheckSq[sq[0]][sq[1]] = true; });
- let elementArray = [];
- let actionArray = [];
- actionArray.push(
- h('button',
- {
- on: { click: this.clickGameSeek },
- attrs: { "aria-label": 'New online game' },
- 'class': {
- "tooltip": true,
- "bottom": true, //display below
- "seek": this.seek,
- "playing": this.mode == "human",
- "small": smallScreen,
- },
- },
- [h('i', { 'class': { "material-icons": true } }, "accessibility")])
- );
- if (["idle","computer"].includes(this.mode))
- {
- actionArray.push(
- h('button',
- {
- on: { click: this.clickComputerGame },
- attrs: { "aria-label": 'New game VS computer' },
- 'class': {
- "tooltip":true,
- "bottom": true,
- "playing": this.mode == "computer",
- "small": smallScreen,
- },
- },
- [h('i', { 'class': { "material-icons": true } }, "computer")])
- );
- }
- if (["idle","friend"].includes(this.mode))
- {
- actionArray.push(
- h('button',
- {
- on: { click: this.clickFriendGame },
- attrs: { "aria-label": 'New IRL game' },
- 'class': {
- "tooltip":true,
- "bottom": true,
- "playing": this.mode == "friend",
- "small": smallScreen,
- },
- },
- [h('i', { 'class': { "material-icons": true } }, "people")])
- );
- }
- if (!!this.vr)
- {
- const square00 = document.getElementById("sq-0-0");
- const squareWidth = !!square00
- ? parseFloat(window.getComputedStyle(square00).width.slice(0,-2))
- : 0;
- const settingsBtnElt = document.getElementById("settingsBtn");
- const indicWidth = !!settingsBtnElt //-2 for border:
- ? parseFloat(window.getComputedStyle(settingsBtnElt).height.slice(0,-2)) - 2
- : (smallScreen ? 31 : 37);
- if (this.mode == "human")
- {
- let connectedIndic = h(
- 'div',
- {
- "class": {
- "topindicator": true,
- "indic-left": true,
- "connected": this.oppConnected,
- "disconnected": !this.oppConnected,
- },
- style: {
- "width": indicWidth + "px",
- "height": indicWidth + "px",
- },
- }
- );
- elementArray.push(connectedIndic);
- }
- let turnIndic = h(
- 'div',
- {
- "class": {
- "topindicator": true,
- "indic-right": true,
- "white-turn": this.vr.turn=="w",
- "black-turn": this.vr.turn=="b",
- },
- style: {
- "width": indicWidth + "px",
- "height": indicWidth + "px",
- },
- }
- );
- elementArray.push(turnIndic);
- let settingsBtn = h(
- 'button',
- {
- on: { click: this.showSettings },
- attrs: {
- "aria-label": 'Settings',
- "id": "settingsBtn",
- },
- 'class': {
- "tooltip": true,
- "topindicator": true,
- "indic-right": true,
- "settings-btn": !smallScreen,
- "settings-btn-small": smallScreen,
- },
- },
- [h('i', { 'class': { "material-icons": true } }, "settings")]
- );
- elementArray.push(settingsBtn);
- let choices = h('div',
- {
- attrs: { "id": "choices" },
- 'class': { 'row': true },
- style: {
- "display": this.choices.length>0?"block":"none",
- "top": "-" + ((sizeY/2)*squareWidth+squareWidth/2) + "px",
- "width": (this.choices.length * squareWidth) + "px",
- "height": squareWidth + "px",
- },
- },
- this.choices.map( m => { //a "choice" is a move
- return h('div',
- {
- 'class': {
- 'board': true,
- ['board'+sizeY]: true,
- },
- style: {
- 'width': (100/this.choices.length) + "%",
- 'padding-bottom': (100/this.choices.length) + "%",
- },
- },
- [h('img',
- {
- attrs: { "src": '/images/pieces/' +
- VariantRules.getPpath(m.appear[0].c+m.appear[0].p) + '.svg' },
- 'class': { 'choice-piece': true },
- on: { "click": e => { this.play(m); this.choices=[]; } },
- })
- ]
- );
- })
- );
- // Create board element (+ reserves if needed by variant or mode)
- const lm = this.vr.lastMove;
- const showLight = this.hints &&
- (this.mode!="idle" || this.cursor==this.vr.moves.length);
- let gameDiv = h('div',
- {
- 'class': { 'game': true },
- },
- [_.range(sizeX).map(i => {
- let ci = this.mycolor=='w' ? i : sizeX-i-1;
- return h(
- 'div',
- {
- 'class': {
- 'row': true,
- },
- style: { 'opacity': this.choices.length>0?"0.5":"1" },
- },
- _.range(sizeY).map(j => {
- let cj = this.mycolor=='w' ? j : sizeY-j-1;
- let elems = [];
- if (this.vr.board[ci][cj] != VariantRules.EMPTY)
- {
- elems.push(
- h(
- 'img',
- {
- 'class': {
- 'piece': true,
- 'ghost': !!this.selectedPiece
- && this.selectedPiece.parentNode.id == "sq-"+ci+"-"+cj,
- },
- attrs: {
- src: "/images/pieces/" +
- VariantRules.getPpath(this.vr.board[ci][cj]) + ".svg",
- },
- }
- )
- );
- }
- if (this.hints && hintSquares[ci][cj])
- {
- elems.push(
- h(
- 'img',
- {
- 'class': {
- 'mark-square': true,
- },
- attrs: {
- src: "/images/mark.svg",
- },
- }
- )
- );
- }
- return h(
- 'div',
- {
- 'class': {
- 'board': true,
- ['board'+sizeY]: true,
- 'light-square': (i+j)%2==0,
- 'dark-square': (i+j)%2==1,
- [this.color]: true,
- 'highlight': showLight && !!lm && _.isMatch(lm.end, {x:ci,y:cj}),
- 'incheck': showLight && incheckSq[ci][cj],
- },
- attrs: {
- id: this.getSquareId({x:ci,y:cj}),
- },
- },
- elems
- );
- })
- );
- }), choices]
- );
- 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',
- {
- 'class':{
- 'game': true,
- "reserve-div": true,
- },
- },
- [
- h('div',
- {
- 'class': {
- 'row': true,
- "reserve-row-1": true,
- },
- },
- myReservePiecesArray
- ),
- h('div',
- { 'class': { 'row': true }},
- oppReservePiecesArray
- )
- ]
- );
- elementArray.push(reserves);
- }
- 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": "modal-eog" },
- },
- [
- 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);
- }
- // NOTE: this modal could be in Pug view (no usage of Vue functions or variables)
- const modalNewgame = [
- h('input',
- {
- attrs: { "id": "modal-newgame", type: "checkbox" },
- "class": { "modal": true },
- }),
- h('div',
- {
- attrs: { "role": "dialog", "aria-labelledby": "modal-newgame" },
- },
- [