Fix #20 particles now displaying, misc fixes

MaxLaumeister · Dec 24, 2019 · a2b0c14 · a2b0c14
1 parent d134b73
commit a2b0c14
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 2 deletions.
diff --git a/src/GridRenderer.js b/src/GridRenderer.js
@@ -40,6 +40,7 @@ class GridRenderer { // eslint-disable-line no-unused-vars
  Util.assert(arguments.length === 3);
 
  const playheadX = grid.player.getPlayheadX();
+ const dpr = Util.getDevicePixelRatio();
 
  // Defaults
  this.ctx.globalAlpha = 1;
@@ -75,7 +76,7 @@ class GridRenderer { // eslint-disable-line no-unused-vars
  // Create particles
  const px = dx * (gridx + 0.5);
  const py = dy * (gridy + 0.5);
- const velocityscalar = 10 * this.DPR;
+ const velocityscalar = 10 * dpr;
  const numparticles = 20;
  for (let j = 0; j < 2 * Math.PI; j += (2 * Math.PI) / numparticles) {
  const pvx = Math.cos(j) * velocityscalar;

diff --git a/src/SpriteSheet.js b/src/SpriteSheet.js
@@ -16,7 +16,7 @@ class SpriteSheet { // eslint-disable-line no-unused-vars
  this.spriteSheet.width = 3 * this.tileWidth; // 3 sprites. very magical
  this.spriteSheet.height = this.tileHeight;
 
- const currentDevicePixelRatio = devicePixelRatio || 1;
+ const currentDevicePixelRatio = Util.getDevicePixelRatio();
 
  // For all rectangles
 

diff --git a/src/ToneMatrix.js b/src/ToneMatrix.js
@@ -108,6 +108,10 @@ class ToneMatrix { // eslint-disable-line no-unused-vars
  },
  );
  });
+ this.c.addEventListener('touchend', (e) => {
+ e.preventDefault(); // Prevent emulated click
+ this.resetCanvasMousePosition();
+ });
  this.c.addEventListener('touchmove', (e) => {
  e.preventDefault(); // Prevent emulated click
  Array.from(e.touches).forEach(

diff --git a/src/Util.js b/src/Util.js
@@ -74,6 +74,14 @@ class Util { // eslint-disable-line no-unused-vars
  }
  }
 
+ /**
+ * Gets the current devicePixelRatio in a performant way
+ * @returns {number} - The device pixel ratio
+ */
+ static getDevicePixelRatio() {
+ return Util.devicePixelRatio;
+ }
+
  /**
  * Logs an error to the console if an assertion is false
  * @param {boolean} bool - The assertion to check
@@ -84,3 +92,14 @@ class Util { // eslint-disable-line no-unused-vars
  if (!bool) console.error('assertion failed');
  }
 }
+
+Util.devicePixelRatio = 1;
+
+(function initPixelRatio() {
+ const mqString = `(resolution: ${window.devicePixelRatio}dppx)`;
+ const updatePixelRatio = () => {
+ Util.devicePixelRatio = window.devicePixelRatio || 1;
+ };
+ updatePixelRatio();
+ matchMedia(mqString).addEventListener('change', updatePixelRatio);
+}());