fix graphic errors

game/Camera.js

@@ -53,32 +53,77 @@ export default class Camera {
 
   /**
    * Translate a coordinate in the viewport to a
-     * coordinate in the world
+   * coordinate in the world, rounded
    * @param {x, y} coord
    */
   viewportToWorld(coord) {
+    const worldCoord = this.viewportToWorldRaw(coord)
     return {
-            x: Math.round((coord.x / this.zoom) - this.x),
+      x: Math.round(worldCoord.x),
-            y: Math.round((coord.y / this.zoom) - this.y),
+      y: Math.round(worldCoord.y),
+    }
+  }
+
+  /**
+   * Translate a coordinate in the viewport to a
+   * coordinate in the world, not rounded
+   * @param {x, y} coord
+   */
+  viewportToWorldRaw(coord) {
+    return {
+      x: (coord.x / this.zoom) - this.x,
+      y: (coord.y / this.zoom) - this.y,
     }
   }
 
   /**
    * Translate a coordinate in the world to a
-     * coordinate in the viewport
+   * coordinate in the viewport, rounded
    * @param {x, y} coord
    */
   worldToViewport(coord) {
+    const viewportCoord = this.worldToViewportRaw(coord)
     return {
-            x: Math.round((coord.x + this.x) * this.zoom),
+      x: Math.round(viewportCoord.x),
-            y: Math.round((coord.y + this.y) * this.zoom),
+      y: Math.round(viewportCoord.y),
     }
   }
 
-    worldDimToViewport(dim) {
+  /**
+   * Translate a coordinate in the world to a
+   * coordinate in the viewport, not rounded
+   * @param {x, y} coord
+   */
+  worldToViewportRaw(coord) {
     return {
-            w: Math.round(dim.w * this.zoom),
+      x: (coord.x + this.x) * this.zoom,
-            h: Math.round(dim.h * this.zoom),
+      y: (coord.y + this.y) * this.zoom,
+    }
+  }
+
+  /**
+   * Translate a 2d dimension (width/height) in the world to
+   * one in the viewport, rounded
+   * @param {x, y} coord
+   */
+  worldDimToViewport(dim) {
+    const viewportDim = this.worldDimToViewportRaw(dim)
+    return {
+      w: Math.round(viewportDim.w),
+      h: Math.round(viewportDim.h),
+    }
+  }
+
+
+  /**
+   * Translate a 2d dimension (width/height) in the world to
+   * one in the viewport, not rounded
+   * @param {x, y} coord
+   */
+  worldDimToViewportRaw(dim) {
+    return {
+      w: dim.w * this.zoom,
+      h: dim.h * this.zoom,
     }
   }
 }

game/game.js

@@ -8,7 +8,6 @@ import Util from './../common/Util.js'
 import PuzzleGraphics from './PuzzleGraphics.js'
 import Game from './Game.js'
 import fireworksController from './Fireworks.js'
-import { Rng } from '../common/Rng.js'
 import Protocol from '../common/Protocol.js'
 
 if (typeof GAME_ID === 'undefined') throw '[ GAME_ID not set ]'
@@ -645,15 +644,15 @@ async function main() {
 
     // DRAW BOARD
     // ---------------------------------------------------------------
-    pos = viewport.worldToViewport({
+    pos = viewport.worldToViewportRaw({
       x: (Game.getTableWidth(gameId) - Game.getPuzzleWidth(gameId)) / 2,
       y: (Game.getTableHeight(gameId) - Game.getPuzzleHeight(gameId)) / 2
     })
-    dim = viewport.worldDimToViewport({
+    dim = viewport.worldDimToViewportRaw({
       w: Game.getPuzzleWidth(gameId),
       h: Game.getPuzzleHeight(gameId),
     })
-    ctx.fillStyle = 'rgba(255, 255, 255, .5)'
+    ctx.fillStyle = 'rgba(255, 255, 255, .3)'
     ctx.fillRect(pos.x, pos.y, dim.w, dim.h)
     if (DEBUG) Debug.checkpoint('board done')
     // ---------------------------------------------------------------
@@ -663,11 +662,11 @@ async function main() {
     // ---------------------------------------------------------------
     for (let tile of Game.getTilesSortedByZIndex(gameId)) {
       const bmp = bitmaps[tile.idx]
-      pos = viewport.worldToViewport({
+      pos = viewport.worldToViewportRaw({
         x: Game.getTileDrawOffset(gameId) + tile.pos.x,
         y: Game.getTileDrawOffset(gameId) + tile.pos.y,
       })
-      dim = viewport.worldDimToViewport({
+      dim = viewport.worldDimToViewportRaw({
         w: Game.getTileDrawSize(gameId),
         h: Game.getTileDrawSize(gameId),
       })
@@ -685,7 +684,7 @@ async function main() {
     const ts = TIME()
     for (let player of Game.getActivePlayers(gameId, ts)) {
       const cursor = await getPlayerCursor(player)
-      const pos = viewport.worldToViewport(player)
+      const pos = viewport.worldToViewportRaw(player)
       ctx.drawImage(cursor,
         Math.round(pos.x - cursor.width/2),
         Math.round(pos.y - cursor.height/2)