Add hand sorting

Close #4

Author: aod

package-lock.json

@@ -15,6 +15,7 @@
     "clsx": "^1.2.1",
     "framer-motion": "^7.2.0",
     "immer": "^9.0.15",
+    "lucide-react": "^0.88.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "xstate": "^4.32.1"

package.json

@@ -8,6 +8,7 @@ import Pile from "./Pile";
 import ShownHand from "./ShownHand";
 import Switcher from "./Switcher";
 import { isChoosingFaceUpCardsStor, isPlayingStor } from "../state/selectors";
+import SortButton from "./SortButton";
 
 export default function App() {
   const { zhitheadService } = useContext(GlobalStateContext);
@@ -62,7 +63,8 @@ export default function App() {
 
       <div className="relative pt-4">
         {isPlaying && (
-          <div className="absolute bottom-2 z-10 mx-auto w-full">
+          <div className="absolute -left-6 bottom-2 z-10 mx-auto flex w-full items-center justify-center gap-4">
+            <SortButton />
             <Switcher player="human" />
           </div>
         )}

src/components/App.tsx

@@ -0,0 +1,28 @@
+import { useSelector } from "@xstate/react";
+import { motion } from "framer-motion";
+import { SortAsc } from "lucide-react";
+import { useContext } from "react";
+import { GlobalStateContext } from "./providers/GlobalStateProvider";
+
+export default function SortButton() {
+  const { zhitheadService } = useContext(GlobalStateContext);
+  const { send } = zhitheadService;
+  const handLength = useSelector(
+    zhitheadService,
+    (state) => state.context.human.hand.length
+  );
+
+  return (
+    <motion.button
+      onClick={() => send("SORT_HAND")}
+      className="flex items-center justify-center rounded-full bg-black p-1.5 sm:p-2"
+      title="Sort your hand"
+      initial={{ y: 100 }}
+      animate={{ y: !handLength ? 100 : 0 }}
+      whileHover={{ scale: 1.15 }}
+      whileTap={{ scale: 0.9 }}
+    >
+      <SortAsc className="h-4 w-4 -rotate-90 stroke-zinc-200 sm:h-6 sm:w-6" />
+    </motion.button>
+  );
+}

src/components/SortButton.tsx

@@ -46,6 +46,10 @@ export function cardToString(card: Readonly<Card>) {
   return `${Suite[getSuite(card)]}-${[Rank[getRank(card)]]}`;
 }
 
+export function compareCards(a: Readonly<Card>, b: Readonly<Card>) {
+  return getRank(a) - getRank(b);
+}
+
 function createRanks(): Rank[] {
   return [
     Rank.Ace,

src/lib.ts

@@ -6,6 +6,7 @@ import {
   canPlay as _canPlay,
   Card,
   Cards,
+  compareCards,
   createDeck,
   dealCardsFor,
   getRank,
@@ -60,6 +61,7 @@ export const zhitheadModel = createModel(createInitialContext(), {
     }),
     TAKE_CARD: () => ({}),
     TAKE_PILE: () => ({}),
+    SORT_HAND: () => ({}),
     ...barePlayerEvent("CARD_CHOSEN"),
   },
 });
@@ -207,6 +209,15 @@ export const zhitheadMachine = zhitheadModel.createMachine(
               },
             },
           },
+          sorter: {
+            on: {
+              SORT_HAND: {
+                actions: assign((context) => {
+                  context.human.hand.sort(compareCards);
+                }),
+              },
+            },
+          },
         },
       },
     },