- render(h) {
- let [sizeX,sizeY] = VariantRules.size;
- // 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 = [];
- const playingHuman = (this.mode == "human");
- const playingComp = (this.mode == "computer");
- let actionArray = [
- h('button',
- {
- on: { click: this.clickGameSeek },
- attrs: { "aria-label": 'New game VS human' },
- 'class': {
- "tooltip": true,
- "bottom": true, //display below
- "seek": this.seek,
- "playing": playingHuman,
- },
- },
- [h('i', { 'class': { "material-icons": true } }, "accessibility")]),
- h('button',
- {
- on: { click: this.clickComputerGame },
- attrs: { "aria-label": 'New game VS computer' },
- 'class': {
- "tooltip":true,
- "bottom": true,
- "playing": playingComp,
- },
- },
- [h('i', { 'class': { "material-icons": true } }, "computer")])
- ];
- if (!!this.vr)
- {
- const square00 = document.getElementById("sq-0-0");
- const squareWidth = !!square00
- ? parseFloat(window.getComputedStyle(square00).width.slice(0,-2))
- : 0;
- const indicWidth = (squareWidth>0 ? squareWidth/2 : 20);
- 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 expertSwitch = h(
- 'button',
- {
- on: { click: this.toggleExpertMode },
- attrs: { "aria-label": 'Toggle expert mode' },
- 'class': {
- "tooltip":true,
- "topindicator": true,
- "indic-right": true,
- "expert-switch": true,
- "expert-mode": this.expert,
- },
- },
- [h('i', { 'class': { "material-icons": true } }, "remove_red_eye")]
- );
- elementArray.push(expertSwitch);
- 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 },
- 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, 'board': true },
- on: { "click": e => { this.play(m); this.choices=[]; } },
- })
- ]
- );
- })
- );
- // Create board element (+ reserves if needed by variant or mode)
- 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.expert && hintSquares[ci][cj])
- {
- elems.push(
- h(
- 'img',
- {
- 'class': {
- 'mark-square': true,
- },
- attrs: {
- src: "/images/mark.svg",
- },
- }
- )
- );
- }
- const lm = this.vr.lastMove;
- const highlight = !!lm && _.isMatch(lm.end, {x:ci,y:cj});
- return h(
- 'div',
- {
- 'class': {
- 'board': true,
- 'light-square': (i+j)%2==0 && (this.expert || !highlight),
- 'dark-square': (i+j)%2==1 && (this.expert || !highlight),
- 'highlight': !this.expert && highlight,
- 'incheck': !this.expert && 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,
- },
- },
- [h('i', { 'class': { "material-icons": true } }, "flag")])
- );
- }
- elementArray.push(gameDiv);
- // if (!!vr.reserve)
- // {
- // let reserve = h('div',
- // {'class':{'game':true}}, [
- // h('div',
- // { 'class': { 'row': true }},
- // [
- // h('div',
- // {'class':{'board':true}},
- // [h('img',{'class':{"piece":true},attrs:{"src":"/images/pieces/wb.svg"}})]
- // )
- // ]
- // )
- // ],
- // );
- // 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" },
- },
- [