fixes for mobile

alieninterfaces · Aug 31, 2024 · 3143211 · 3143211
1 parent b3659a7
commit 3143211
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 62 deletions.
diff --git a/main.js b/main.js
@@ -1,4 +1,7 @@
 
+let lastTouchX = 0;
+let lastTouchY = 0;
+
 // Define Tetris pieces
 const tetrisPieces = {
   I: {
@@ -122,14 +125,14 @@ function renderTetrisPiece(key, piece, container) {
 function updatePieceGrid(grid, shape, color) {
   grid.innerHTML = '';
   grid.style.display = 'grid';
-  grid.style.gridTemplateRows = `repeat(${shape.length}, 20px)`;
-  grid.style.gridTemplateColumns = `repeat(${shape[0].length}, 20px)`;
+  grid.style.gridTemplateRows = `repeat(${shape.length}, 10px)`;
+  grid.style.gridTemplateColumns = `repeat(${shape[0].length}, 10px)`;
 
   shape.forEach(row => {
     row.forEach(cell => {
       const cellElement = document.createElement('div');
       cellElement.className = 'piece-cell';
-      cellElement.style.backgroundColor = cell ? color : 'transparent';
+      //cellElement.style.backgroundColor = cell ? color : 'transparent';
       if (cell) {
         cellElement.style.backgroundImage = 'url("./public/bubble.png")';
         cellElement.style.backgroundSize = 'cover';
@@ -325,6 +328,8 @@ function drag(e) {
   if (draggedPiece) {
     const clientX = e.clientX || e.touches[0].clientX;
     const clientY = e.clientY || e.touches[0].clientY;
+    lastTouchX = clientX;
+    lastTouchY = clientY;
     const cellSize = document.querySelector('.grid-cell').offsetWidth;
     const activeRow = parseInt(draggedPiece.dataset.activeRow || 0);
     const activeCol = parseInt(draggedPiece.dataset.activeCol || 0);
@@ -333,78 +338,27 @@ function drag(e) {
   }
 }
 
-/*
-// Unified drop event handler
-function drop(e) {
-  e.preventDefault();
-  console.log('drop')
-  if (!draggedPiece) return;
-
-  const clientX = e.clientX || (e.changedTouches && e.changedTouches[0].clientX);
-  const clientY = e.clientY || (e.changedTouches && e.changedTouches[0].clientY);
-
-  const pieceShape = JSON.parse(draggedPiece.dataset.shape);
-  const pieceId = draggedPiece.dataset.originalId;
-  const pieceType = pieceId.split('-')[1];
-  const activeRow = parseInt(draggedPiece.dataset.activeRow);
-  const activeCol = parseInt(draggedPiece.dataset.activeCol);
-
-  const gridSize = 5;
-  const gridContainer = document.getElementById('game-grid-container');
-  const gridRect = gridContainer.getBoundingClientRect();
-  const cellSize = (gridRect.width - 10) / gridSize; // Subtract padding
-
-  // Check if the drop occurred within the grid container boundaries
-  if (clientX < gridRect.left || clientX > gridRect.right ||
-      clientY < gridRect.top || clientY > gridRect.bottom) {
-        console.log('out of bounds')
-    returnPieceToBank(pieceId);
-    clearDraggedPiece();
-    clearPreview();
-    return;
-  }
-
-  console.log('in bounds')
-
-  // Adjust the target calculation to consider the center of the piece
-  const pieceWidth = draggedPiece.offsetWidth;
-  const pieceHeight = draggedPiece.offsetHeight;
-  const targetCol = Math.floor((clientX - gridRect.left - 5 - pieceWidth / 2) / cellSize);
-  const targetRow = Math.floor((clientY - gridRect.top - 5 - pieceHeight / 2) / cellSize);
-  const targetIndex = targetRow * gridSize + targetCol;
-
-  if (canPlacePiece(pieceShape, targetIndex, gridSize)) {
-    const color = draggedPiece.dataset.color;
-    placePiece(pieceShape, targetIndex, gridSize, color);
-    replaceUsedPiece(document.getElementById(pieceId));
-  } else {
-    returnPieceToBank(pieceId);
-  }
-
-  clearDraggedPiece();
-  clearPreview();
-}
-  */
 
 function drop(e) {
   e.preventDefault();
-  console.log('drop')
   if (!draggedPiece) return;
 
-  const clientX = e.clientX || e.touches[0].clientX;
-  const clientY = e.clientY || e.touches[0].clientY;
+  const clientX = e.clientX || lastTouchX;
+  const clientY = e.clientY || lastTouchY;
   const cellSize = document.querySelector('.grid-cell').offsetWidth;
   const pieceId = draggedPiece.dataset.originalId;
   const pieceShape = JSON.parse(draggedPiece.dataset.shape);
 
+  lastTouchX = 0;
+  lastTouchY = 0;
+
   const gridSize = 5;
   const gridContainer = document.getElementById('game-grid-container');
   const gridRect = gridContainer.getBoundingClientRect();
 
   // Check if the drop occurred within the grid container boundaries
   if (clientX < gridRect.left || clientX > gridRect.right ||
       clientY < gridRect.top || clientY > gridRect.bottom) {
-        console.log('out of bounds')
     returnPieceToBank(pieceId);
     clearDraggedPiece();
     clearPreview();

diff --git a/style.css b/style.css
@@ -38,7 +38,6 @@ h1 {
 #app {
   max-width: 1280px;
   margin: 0 auto;
-  padding: 2rem;
   text-align: center;
   display: flex;
   flex-direction: column;
@@ -166,6 +165,11 @@ button:focus-visible {
   transition: transform 0.3s ease;
   transition: opacity 0.3s ease;
   touch-action: none; /* Prevents default touch actions like scrolling */
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .tetris-piece.unplaceable {
@@ -187,8 +191,8 @@ button:focus-visible {
 }
 
 .piece-cell {
-  width: 20px; /* Adjust cell size as needed */
-  height: 20px;
+  width: 10px; /* Adjust cell size as needed */
+  height: 10px;
   border-radius: 2px;
 }