A grid with clickable edges

Question

I'm trying to make a web game (Dots and boxes) for which I need a Grid (of squares) which has edges that I can register an click-event-listener to.

So far I have tried using a grid of square divs/canvases which I rotated by 45 deg.

https://codepen.io/cutenickychan/pen/XWpmWdv

The grid gets populated by

function generateGrid(height, width) {
        var rules = document.styleSheets[0].cssRules || document.styleSheets[0].rules//IE support;
        for (i = 0; i < rules.length; i++) {
            if (rules[i].selectorText.toLowerCase() == ".diamond") {
                targetRule = rules[i];
                break;
            }
        }

        var max = Math.max(width, height)
        var _i = 100 / max;

        targetRule.style.width = _i + "%";

        var big_Dia = document.getElementById("big_diamond");
        for (i = 0; i < height * width; i++) {
            var gridNode = document.createElement("canvas");

            gridNode.classList.add("diamond");

            if (i % 2 != 1) {
                gridNode.addEventListener("click", (e) => {
                    e = e || window.event;
                    var target = e.target || e.srcElement,
                        text = target.textContent || target.innerText;
                    target.classList.add("clicked");
                    ctx = target.getContext("2d");
                    ctx.moveTo(0.5,0.5);
                    ctx.lineWidth = 20;
                    ctx.lineTo(target.width + .5, target.width +.5);
                    ctx.stroke();
                    
                }, false);
            }
            else {
                gridNode.addEventListener("click", (e) => {
                    e = e || window.event;
                    var target = e.target || e.srcElement,
                        text = target.textContent || target.innerText;
                    target.classList.add("clicked");
                    ctx = target.getContext("2d");
                    ctx.moveTo(0.5, target.width +.5);
                    ctx.lineWidth = 20;
                    ctx.lineTo(target.width +.5,0.5);
                    ctx.stroke();
                    
                }, false);
            }

            gridNode.height = gridNode.width;

            big_Dia.appendChild(gridNode);
        }
    }

    generateGrid(29, 29);

html, body {
  height: 100vh;
  margin: 0;
  background: #333;
}

::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.html {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

#big_diamond {
  position: relative;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  width: 100vw;
  overflow: hidden;
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  margin: auto;
  border: 3px solid green;
  padding: 10px;
}

.diamond {
  float: left;
  position: relative;
}

.diamond a {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.diamond:not(.clicked):hover {
  background: yellow;
}

The Problem with this approach was that a Diamond shape does not fill a rectangle screen very well AND calculating the correct edge for the (not rotated) game grid seems like a ton of work.

I am getting the feeling that I might be on the wrong track to making a grid like this.

So what am I really asking? I am asking either for a hint as to how I would convert the clicked edges into a not rotated grid OR Preferably a better solution for a grid that is less of a bodge (not using a rotated grid as the edge selector)

A grid with clickable edges

0 Answers