make custom pool ui reflect possible actions

skedwards88 · Aug 19, 2024 · 82236bd · 82236bd
1 parent 72736cf
commit 82236bd
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 25 deletions.
diff --git a/TODO.md b/TODO.md
@@ -32,3 +32,4 @@ For screenshots:
 // todo wip new, incomplete file
 - Use the hasVisited state to announce
 - put arrayToGrid to common or to word-logic package
+- make way to share (of if can't share, to get link)
diff --git a/src/components/CustomPool.js b/src/components/CustomPool.js
@@ -1,11 +1,8 @@
 import React from "react";
 import Piece from "./Piece";
-import DragShadow from "./DragShadow";
-import {countingGrid} from "./Board";
 
 export default function CustomPool({
   pieces,
-  dragDestination,
   dispatchGameState,
 }) {
   const poolPieces = pieces.filter((piece) => piece.poolIndex >= 0);
@@ -24,24 +21,6 @@ export default function CustomPool({
     </div>
   ));
 
-  if (dragDestination?.where === "pool") {
-    const draggedPieces = pieces.filter((piece) => piece.dragGroupTop >= 0);
-    pieceElements.splice(
-      dragDestination.index,
-      0,
-      draggedPieces.map((piece) => (
-        <div className="pool-slot shadow" key={piece.id}>
-          <DragShadow
-            key={`shadow-piece-${piece.id}`}
-            grid={countingGrid(piece.letters.length, piece.letters[0].length, [
-              {...piece, dragGroupTop: 0, dragGroupLeft: 0},
-            ])}
-          />
-        </div>
-      )),
-    );
-  }
-
   return <div id="pool">{pieceElements}</div>;
 }
 

diff --git a/src/logic/customReducer.js b/src/logic/customReducer.js
@@ -1,7 +1,6 @@
 import {updatePieceDatum} from "./assemblePiece";
 import {getConnectedPieceIDs} from "./getConnectedPieceIDs";
 import {updateDragState} from "./updateDragState";
-import {arraysMatchQ} from "@skedwards88/word_logic";
 
 function updateStateForDragStart({
   currentGameState,
@@ -91,6 +90,17 @@ function updateStateForDragStart({
     };
   }
 
+  // If dragging from the pool, add a dummy placeholder
+  let placeholderPoolPieces = [];
+  if (groupBoardTop === undefined) {
+    placeholderPoolPieces = piecesBeingDragged.map((piece) =>
+      updatePieceDatum(piece, {
+        letters: [[""]],
+        id: (piece.id + 1) * (-1)
+      }),
+    )
+  }
+
   currentGameState = {
     ...currentGameState,
     pieces: piecesNotBeingDragged.concat(
@@ -106,7 +116,7 @@ function updateStateForDragStart({
             groupBoardLeft === undefined ? 0 : piece.boardLeft - groupBoardLeft,
         }),
       ),
-    ),
+    ).concat(placeholderPoolPieces),
     dragCount: currentGameState.dragCount + 1,
     dragState: updateDragState({
       pieceIDs: piecesBeingDragged.map((piece) => piece.id),
@@ -193,6 +203,7 @@ function updateStateForDragEnd(currentGameState) {
           );
         }
       } else if (
+        piece.letters[0][0] !== "" &&
         !overwrittenPositions.some(
           (position) =>
             position[0] == piece.boardTop && position[1] == piece.boardLeft,
@@ -206,7 +217,7 @@ function updateStateForDragEnd(currentGameState) {
     for (const piece of currentGameState.pieces) {
       if (draggedPieceIDs.includes(piece.id)) {
         continue;
-      } else {
+      } else if (piece.letters[0][0] !== ""){
         newPieces.push(piece);
       }
     }
@@ -222,7 +233,7 @@ function updateStateForDragEnd(currentGameState) {
             dragGroupLeft: undefined,
           }),
         );
-      } else {
+      } else if (piece.letters[0][0] !== ""){
         newPieces.push(piece);
       }
     }