Drawing gameboard/table size based on window size

Question

I have a question about resizing/drawing a gameboard based on the size of the window or browser that is being used. I am coding the game reversi using html/css/js. An image will be attached of what I want to achieve. The game board itself has the same height as the info that is displayed to the right of it. I would like it to be for example 70% of the window height so that I still have the remaining 30% to make a border etc. In HTML I defined a table with the 'board-table' id and then I tried making a variable 'size' to determine the height of this table. In CSS I specified that the height should be 70% so that the game board can be drawn afterwards. However, it always has a prefixed size when I reload the page in different dimensions and thus I was wondering how I could fix it. A section of my code is displayed below.

HTML:

<table id="board-table"></table>

CSS:

#board-table {
  height: 70%;
}

Javascript:

function draw() {
  var size = $('#board-table').height();
  var square = (1/8) * size;
  var half = (1/2) * square;
  for (var y = 0; y < 8; y++) {
    for (var x = 0; x < 8; x++) {
      var canvas = $("#canv_" + x + "" + y)[0]
      var ctx = canvas.getContext("2d")
      if (game.board[x][y] == 1) {
        ctx.fillStyle = "green"
        ctx.fillRect(0, 0, square, square)
        ctx.beginPath()
        ctx.fillStyle = "white"
        ctx.arc(half, half, half, 0, 2 * Math.PI)
        ctx.fill()
      } else if (game.board[x][y] == 2) {
        ctx.fillStyle = "green"
        ctx.fillRect(0, 0, square, square)
        ctx.beginPath()
        ctx.fillStyle = "black"
        ctx.arc(half, half, half, 0, 2 * Math.PI)
        ctx.fill()
      } else {
        ctx.fillStyle = "green"
        ctx.fillRect(0, 0, square, square)
      }
    }
  }
}

function generateBoard() {
  for (var y = 0; y < 8; y++) {
    $("#board-table").append("<tr id=row" + y + "" + "><tr")
    for (var x = 0; x < 8; x++) {
      $("#row" + y).append("<td id=cell_" + x + "" + y + "></td>")
      $("#cell_" + x + "" + y).append("<canvas height=100% onclick=handleclick(" + x + "," + y + ") onmouseover=handlehover(" + x + "," + y + ") width =100% id=canv_" + x + "" + y + "></canvas>")
    }
  }
}

Example of what I am trying to achieve.

Do you currently have any working code? I don't see the need for `` when you're trying to use ` — hungerstar, Dec 10 '18 at 21:04
I added a function in my code that generates the board, and edited my post. Hopefully it is more clear now. — Rowan Richie, Dec 10 '18 at 21:17
Thanks for the additional code, but alas, that is not enough to create a working example. Please provide functioning code. Also, what is the reason for creating all those ` — hungerstar, Dec 10 '18 at 21:28
You are making it overly complex by using CANVAS. for HTML/CSS/JS only inspiration see: https://codepen.io/k44/pen/zKiIo (not my codepen) — Danny '365CSI' Engelman, Dec 17 '18 at 11:01

score 0 · Answer 1 · answered Dec 10 '18 at 21:29

0

In css when you use height: 70%; this refers to 70% of the containing element.

This can be bypassed by using height: 70vh;

This is covered in detail here

answered Dec 10 '18 at 21:29

Reed Hambrook

144
2
6

I tried using that but my outcome is still the same. It seems to be a fixed table size. My main problem here is that if someone opens the file in a smaller window/resolution than the one I am using, then it will fill up the whole screen and the person would have to scroll to see the other part(s) of the table/game board. – Rowan Richie Dec 10 '18 at 22:06

score 0 · Answer 2 · answered Dec 10 '18 at 22:11

Here is my code, which is very different from yours, but it scales and handles colors for both placed pieces and pieces being placed.

<!doctype html>
<html>
<head>
  <title>Reversi</title>
  <style>
    body {
      bottom: 0;
      left: 0;
      position: fixed;
      right: 0;
      top: 0;
    }
  </style>
</head>
<body>
  <canvas class="board"></canvas>
  <script>
    const pi2 = 2 * Math.PI;
    const pieceColor = {
      1: '#FFF',
      2: '#000',
      11: '#fff5',
      12: '#0005'
    };
    let board = [];

    function resetBoard(canvas) {
      board = [];
      for(let i = 0; i < 8; i++) {
        board.push([0,0,0,0,0,0,0,0]);
      }

      board[3][3] = 1;
      board[4][4] = 1;
      board[4][3] = 2;
      board[3][4] = 2;
      board[3][5] = 11;
      board[2][3] = 12;
    }

    function draw(canvas) {
      const body = document.body;
      let canvasSize = (body.offsetWidth > body.offsetHeight ? body.offsetHeight : body.offsetWidth)-20;
      if (canvasSize < 150) {
        canvasSize = 150;
      }
      if (canvasSize > 550) {
        canvasSize = 550;
      }
      console.log(canvasSize);
      canvas.setAttribute('width', canvasSize+'px');
      canvas.setAttribute('height', canvasSize+'px');

      var ctx = canvas.getContext('2d')
      var size = canvas.offsetWidth;
      var square = (size-9)/8;
      var half = (square/2)-2;
      ctx.fillStyle = '#555';
      ctx.fillRect(0, 0, size, size);

      for (var y = 0; y < 8; y++) {
        for (var x = 0; x < 8; x++) {
          const piece = board[x][y];

          ctx.fillStyle = '#449933';
          const left = (x*(square+1))+1;
          const top = (y*(square+1))+1;
          ctx.fillRect(left, top, square, square);

          if (piece !== 0) {
            ctx.beginPath();
            ctx.fillStyle = pieceColor[piece];
            ctx.arc(half+left+2, half+top+2, half, 0, pi2);
            ctx.fill();
          }
        }
      }
    }

    const c = document.querySelector('.board');
    resetBoard(c);
    draw(c);
    window.addEventListener('resize', () => {
      draw(c);
    })
  </script>
</body>
</html>

Drawing gameboard/table size based on window size

2 Answers2