Redo puzzle mode animation (#184)

Author: eltoder

src/components/Game.js

@@ -31,7 +31,7 @@ function addLastSet(board, lastSet) {
   if (lastSet?.length) {
     const n = lastSet?.length % 3;
     if (n > 0) {
-      lastSet = lastSet.concat([null]);
+      lastSet = [...lastSet, null];
       if (n === 1) lastSet.splice(-3, 0, null);
     }
     board = lastSet.concat(board);
@@ -57,13 +57,13 @@ function Game({
   const isHorizontal = cardOrientation === "horizontal";
   const isLandscape = layoutOrientation === "landscape";
   const [gameDimensions, gameEl] = useDimensions();
-  const [highlightCards, setHighlightCards] = useState(null);
+  const [movingCards, setMovingCards] = useState(null);
 
   const lastKeptCards = lastKeptSet?.join("|");
   useEffect(() => {
-    setHighlightCards(lastKeptCards?.split("|"));
+    setMovingCards(lastKeptCards?.split("|").map((card) => " " + card));
     if (lastKeptCards) {
-      const timer = setTimeout(() => setHighlightCards(null), 300);
+      const timer = setTimeout(() => setMovingCards(null), 0);
       return () => clearTimeout(timer);
     }
   }, [lastKeptCards]);
@@ -117,7 +117,7 @@ function Game({
   // NOTE: put rotate into useTransition() instead of adding it to the style
   // outside to get a nice animation when cardOrientation changes.
   const cardProps = (card) => {
-    const i = board.indexOf(card);
+    const i = board.indexOf(card?.trimLeft());
     let positionX, positionY;
     let r, c;
     if (!isLandscape) {
@@ -145,13 +145,16 @@ function Game({
       opacity: 1,
     };
   };
-  const transitions = useTransition(board, {
-    from: {
-      left: -cardWidth,
-      top: gameHeight / 2 - cardHeight / 2,
-      rotate: rotateAmount,
-      opacity: 0,
-    },
+  const transitions = useTransition(movingCards?.concat(board) || board, {
+    from: (card) =>
+      card?.startsWith(" ")
+        ? cardProps(card)
+        : {
+            left: -cardWidth,
+            top: gameHeight / 2 - cardHeight / 2,
+            rotate: rotateAmount,
+            opacity: 0,
+          },
     enter: cardProps,
     update: cardProps,
     leave: {
@@ -244,7 +247,6 @@ function Game({
         (style, card) =>
           card && (
             <animated.div
-              key={card}
               className={to([style.left, style.top], () =>
                 style.left.idle && style.top.idle
                   ? classes.staticCard
@@ -273,11 +275,10 @@ function Game({
                 </div>
               ) : (
                 <ResponsiveSetCard
-                  value={card}
+                  value={card.trimLeft()}
                   width={cardWidth}
                   hinted={answer?.includes(card)}
                   active={selected?.includes(card)}
-                  highlight={highlightCards?.includes(card)}
                   faceDown={
                     faceDown === "all" ||
                     (faceDown &&

src/components/KeyboardLayoutDialog.js

@@ -63,13 +63,13 @@ function KeyboardLayoutDialog(props) {
     );
   };
 
-  const menuItems = Object.keys(standardLayouts)
-    .concat(["Custom"])
-    .map((layoutName) => (
+  const menuItems = [...Object.keys(standardLayouts), "Custom"].map(
+    (layoutName) => (
       <MenuItem key={layoutName} value={layoutName}>
         {layoutName}
       </MenuItem>
-    ));
+    )
+  );
 
   return (
     <Dialog open={open} onClose={onClose}>

src/components/ResponsiveSetCard.js

@@ -31,9 +31,6 @@ const useStyles = makeStyles((theme) => ({
   active: {
     boxShadow: "0px 0px 5px 3px #4b9e9e !important",
   },
-  highlight: {
-    backgroundColor: theme.setCard.highlight,
-  },
   hintedOverlay: {
     position: "absolute",
     inset: 0,
@@ -73,7 +70,7 @@ function ResponsiveSetCard(props) {
   const theme = useTheme();
 
   // Black magic below to scale cards given any width
-  const { width, value, onClick, hinted, active, highlight, faceDown } = props;
+  const { width, value, onClick, hinted, active, faceDown } = props;
   const height = Math.round(width / 1.6);
   const margin = Math.round(width * 0.035);
   const contentWidth = width - 2 * margin;
@@ -114,7 +111,6 @@ function ResponsiveSetCard(props) {
       className={clsx(classes.card, {
         [classes.clickable]: onClick,
         [classes.active]: active,
-        [classes.highlight]: highlight,
       })}
       style={{
         ...extraStyle,

src/themes.js

@@ -50,7 +50,6 @@ export const darkTheme = createTheme({
     orange: "#47b0ff",
     background: "#262626",
     hinted: "rgba(41, 182, 246, 0.25)",
-    highlight: "#404040",
     backColors: [
       grey[900],
       grey[800],
@@ -110,7 +109,6 @@ export const lightTheme = createTheme({
     orange: "#fb8c00",
     background: "#fff",
     hinted: "rgba(3, 169, 244, 0.2)",
-    highlight: "#fffedc",
     backColors: [
       indigo[600],
       indigo[300],