+ [
+ h(
+ "div",
+ {
+ class: {
+ row: true,
+ "reserve-row": true
+ }
+ },
+ myReserveTop ? myReservePiecesArray : oppReservePiecesArray
+ )
+ ]
+ );
+ var reserveBottom =
+ h(
+ "div",
+ {
+ class: {
+ game: true,
+ "reserve-div": true
+ },
+ style: {
+ "margin-left": marginLeft
+ }
+ },
+ [
+ h(
+ "div",
+ {
+ class: {
+ row: true,
+ "reserve-row": true
+ }
+ },
+ myReserveTop ? oppReservePiecesArray : myReservePiecesArray
+ )
+ ]
+ );
+ elementArray.push(reserveTop);
+ }
+ elementArray.push(gameDiv);
+ if (!!this.vr.reserve) elementArray.push(reserveBottom);
+ const boardElt = document.querySelector(".game");
+ if (this.choices.length > 0 && !!boardElt) {
+ // No choices to show at first drawing
+ const squareWidth = boardElt.offsetWidth / sizeY;
+ const offset = [boardElt.offsetTop, boardElt.offsetLeft];
+ // TODO: multi-rows if more than V.size.y pieces (as inEightpieces)
+ const choices = h(
+ "div",
+ {
+ attrs: { id: "choices" },
+ class: { row: true },
+ style: {
+ top: offset[0] + (sizeY / 2) * squareWidth - squareWidth / 2 + "px",
+ left:
+ offset[1] +
+ (squareWidth * (sizeY - this.choices.length)) / 2 +
+ "px",
+ width: this.choices.length * squareWidth + "px",
+ height: squareWidth + "px"
+ }