Merge pull request #16 from JollyGrin/bug/fix-grave

Bug/fix grave

README.md

@@ -7,3 +7,10 @@ Playtest Sorcery TCG in the browser
 - [ ] add solo turn rotator (play against yourself)
     - use top header for info
 - [ ] add websocket
+
+## Feature ideas
+- [ ] support 4players
+- [ ] support battlebox (shared deck)
+
+## Bugs
+- [ ] graveyard sorting. Ensure that in the handle drag it ignores ordering conditions

notes/2024-09-12.md

@@ -13,3 +13,13 @@
 
 #### 03:28
 - we have a bug, the graveyard is being shared
+
+#### 01:15
+- right when i thjought i had it, fixing grave, aura 12 is messed up when swapping back and forth. ugh
+
+#### 01:16
+- 
+- seems like the lengths or something are off. will try this again tomorrow. Might need to ditch the gridindexes for values for personal
+
+#### 01:17
+- i forget, i added gridindex id to grave and also tried deep cloning in grid.ts on actmovecard

notes/2024-09-13.md

@@ -0,0 +1,3 @@
+
+#### 18:03
+- i think i finally got it working. i made a huge debugger and was finding where things were not hitting. just logged personal and global and found a mismatch

src/components/organisms/GameBoard/Footer/Grave/index.tsx

@@ -33,7 +33,7 @@ export const GraveTray = (props: GameStateActions) => {
           content={<DiscardModalBody cards={graveCards} {...props} />}
         />
       )}
-      <DroppableGridItem gridIndex={GRIDS.GRAVE} id="droppable-grave">
+      <DroppableGridItem gridIndex={GRIDS.GRAVE} id={GRIDS.GRAVE.toString()}>
         {hasCards && (
           <Grid
             position="relative"

src/pages/game.tsx

@@ -21,26 +21,23 @@ export default function GamePage() {
   function setPlayer(playerName: keyof typeof players) {
     return (state: GameState) => {
       const newState = [...state]; // make a copy of state
-      const GLOBAL = newState.splice(0, GRIDS.AURA_12 + 1); // GLOBAL takes game grid
+      const GLOBAL = newState.slice(0, GRIDS.AURA_12 + 1); // GLOBAL takes game grid
       const GLOBAL_EMPTY = Array.from({ length: 4 }, () => []); // empties player data
+      const newGlobal = [...GLOBAL, ...GLOBAL_EMPTY];
       setPlayers((prev) => ({
         ...prev,
-        GLOBAL: [...GLOBAL, ...GLOBAL_EMPTY],
+        GLOBAL: newGlobal,
         [playerName]: state,
       }));
     };
   }
 
-  const state = useMemo(
-    () => [
-      ...players.GLOBAL.slice(0, GRIDS.AURA_12),
-      ...players[name as keyof typeof players].slice(
-        GRIDS.AURA_12,
-        GRIDS.AURA_12 + 5,
-      ),
-    ],
-    [players, name],
-  );
+  const state = useMemo(() => {
+    return [
+      ...players.GLOBAL.slice(0, GRIDS.HAND),
+      ...players[name as keyof typeof players].slice(GRIDS.HAND),
+    ];
+  }, [players, name]);
 
   if (needsDeck(players["p1"]))
     return (

src/utils/actions/grid.ts

@@ -34,7 +34,7 @@ export function actMoveCardOutsideCell(state: GameState, event: DragEndEvent) {
   const destinationIndex = event.over?.data?.current?.gridIndex;
 
   // Remove the active card from its original position
-  const updatedGrid = [...state];
+  const updatedGrid = state.map((arr) => [...arr]);
   const [movedCard] = updatedGrid[originIndex].splice(
     event.active?.data?.current?.index,
     1,

src/utils/helpers/debugState.ts

@@ -0,0 +1,23 @@
+import { GRIDS } from "@/components/organisms/GameBoard/constants";
+import { GameState } from "@/types/card";
+
+/**
+ * Having trouble understanding the state?
+ * Throw this around state anywhere to see a table in the console logs
+ * */
+export function debugState(state: GameState) {
+  // Transform each row into an object that includes the `id` from each object
+  const arrayOfObjects = state.map((row, rowIndex) => {
+    // Start with the row name from the enum
+    const rowObject = { "Row Name": GRIDS[rowIndex] };
+
+    // Add the id from each object in the row
+    row.forEach((obj, colIndex) => {
+      //@ts-expect-error: do not care, it works
+      rowObject[`Card Index ${colIndex}`] = obj.id;
+    });
+
+    return rowObject;
+  });
+  console.table(arrayOfObjects);
+}