},
render(h) {
const [sizeX,sizeY] = VariantRules.size;
+ const smallScreen = (screen.width <= 500);
// Precompute hints squares to facilitate rendering
let hintSquares = doubleArray(sizeX, sizeY, false);
this.possibleMoves.forEach(m => { hintSquares[m.end.x][m.end.y] = true; });
this.incheck.forEach(sq => { incheckSq[sq[0]][sq[1]] = true; });
let elementArray = [];
let actionArray = [];
- if (["idle","human"].includes(this.mode))
- {
- 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",
- },
+ 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")])
- );
- }
+ },
+ [h('i', { 'class': { "material-icons": true } }, "accessibility")])
+ );
if (["idle","computer"].includes(this.mode))
{
actionArray.push(
"tooltip":true,
"bottom": true,
"playing": this.mode == "computer",
+ "small": smallScreen,
},
},
[h('i', { 'class': { "material-icons": true } }, "computer")])
"tooltip":true,
"bottom": true,
"playing": this.mode == "friend",
+ "small": smallScreen,
},
},
[h('i', { 'class': { "material-icons": true } }, "people")])
"indic-right": true,
"expert-switch": true,
"expert-mode": this.expert,
+ "small": smallScreen,
},
},
[h('i', { 'class': { "material-icons": true } }, "visibility_off")]
'class': {
"tooltip":true,
"bottom": true,
+ "small": smallScreen,
},
},
[h('i', { 'class': { "material-icons": true } }, "flag")])
style: { "margin-left": "30px" },
on: { click: e => this.undo() },
attrs: { "aria-label": 'Undo' },
+ "class": { "small": smallScreen },
},
[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")]),
]
style: { "margin-left": "30px" },
on: { click: this.undoInGame },
attrs: { "aria-label": 'Undo' },
+ "class": { "small": smallScreen },
},
[h('i', { 'class': { "material-icons": true } }, "undo")]
),
{
on: { click: () => { this.mycolor = this.vr.getOppCol(this.mycolor) } },
attrs: { "aria-label": 'Flip' },
+ "class": { "small": smallScreen },
},
[h('i', { 'class': { "material-icons": true } }, "cached")]
),