Fix Large Margin on Mobile

[robbobfrh84]

I think this was created by how the "shared" space of react/non-react JS is handled. So, the react component is forcing the screen in. Maybe? I think... However, it could just be fixed with a media width for now.

[matthewmain]

These margins are expected behavior (for now), so React probably isn't coming into play. The game screen canvas size is handled here as a percentage of the screen size in verlet.js:

function scaleToWindow() {
  if (window.innerWidth > window.innerHeight) {
    canvasContainerDiv.style.height = window.innerHeight*canvRatio+"px";
    canvasContainerDiv.style.width = canvasContainerDiv.style.height;
  } else {
    canvasContainerDiv.style.width = window.innerWidth*canvRatio+"px";
    canvasContainerDiv.style.height = canvasContainerDiv.style.width;
  }
  canvasPositionLeft = canvas.getBoundingClientRect().left + window.scrollX;
  canvasPositionTop = canvas.getBoundingClientRect().top + window.scrollY;
}

This is forcing the canvas to keep its aspect ratio (so the physics don't get fucked up on resize) at 75% (currently) of the narrowest width-or-height dimension. This will override any media queries, but can add some js here that lets the canvas screen be, say, 95% of the width for mobile-size screens instead?

But this would mostly be aesthetic--the game is so slow on mobile browsers that the touch actions barely even register, so it's not really playable on mobile anyway. Given how resource intensive the game is, not sure if there's a way to avoid it other than building a native app for mobile...

[robbobfrh84]

Makes sense. I'll close this out. Mobile approach will more than likely change as we go along. So just leaving it like this for now works.