anagrams: Compute correct constraints when dragging tiles

Keeping tiles precisely in the bounds of play.

diff --git a/anagrams/anagrams.jsx b/anagrams/anagrams.jsx
index 67091051f258f9ccdbe9c674013f1155393b637d..b6476867072e700564da9c9ffb1525f95aebc338 100644 (file)
--- a/anagrams/anagrams.jsx
+++ b/anagrams/anagrams.jsx
@@ -660,10 +660,15 @@ class Game extends React.Component {
   on_center_mouse_down(e, tile) {
     if (e.button !== 0) return;
 
+    const el = e.target.closest(".tile");
     const pool = e.target.closest(".center-pool");
     if (!pool) return;
 
     const rect = pool.getBoundingClientRect();
+    const tileW = el ? el.offsetWidth : 44;
+    const tileH = el ? el.offsetHeight : 44;
+    const maxX = (1 - tileW / rect.width) * 100;
+    const maxY = (1 - tileH / rect.height) * 100;
     const startX = e.clientX;
     const startY = e.clientY;
     this._drag_offset = {
@@ -687,8 +692,8 @@ class Game extends React.Component {
         tile_positions: {
           ...prev.tile_positions,
           [tile.id]: {
-            x: Math.max(0, Math.min(90, x)),
-            y: Math.max(0, Math.min(85, y))
+            x: Math.max(0, Math.min(maxX, x)),
+            y: Math.max(0, Math.min(maxY, y))
           }
         }
       }));
@@ -713,11 +718,18 @@ class Game extends React.Component {
   on_center_touch_start(e, tile) {
     if (e.touches.length !== 1) return;
 
+    const el = e.target.closest(".tile");
     const pool = e.target.closest(".center-pool");
     if (!pool) return;
 
     const touch = e.touches[0];
     const rect = pool.getBoundingClientRect();
+    const tileW = el ? el.offsetWidth : 44;
+    const tileH = el ? el.offsetHeight : 44;
+    this._drag_max = {
+      x: (1 - tileW / rect.width) * 100,
+      y: (1 - tileH / rect.height) * 100
+    };
     this._drag_start = { x: touch.clientX, y: touch.clientY };
     this._drag_offset = {
       x: touch.clientX - (this.state.tile_positions[tile.id].x / 100 * rect.width),
@@ -735,6 +747,7 @@ class Game extends React.Component {
     const touch = e.touches[0];
     this._drag_last_touch = { x: touch.clientX, y: touch.clientY };
     const rect = this._drag_pool_rect;
+    const max = this._drag_max;
 
     if (!this._drag_dragging) {
       const dx = touch.clientX - this._drag_start.x;
@@ -750,8 +763,8 @@ class Game extends React.Component {
       tile_positions: {
         ...prev.tile_positions,
         [this._drag_tile.id]: {
-          x: Math.max(0, Math.min(90, x)),
-          y: Math.max(0, Math.min(85, y))
+          x: Math.max(0, Math.min(max.x, x)),
+          y: Math.max(0, Math.min(max.y, y))
         }
       }
     }));