diff --git a/src/components/Game.js b/src/components/Game.js index d881b20..e293ffa 100644 --- a/src/components/Game.js +++ b/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 && ( style.left.idle && style.top.idle ? classes.staticCard @@ -273,11 +275,10 @@ function Game({ ) : ( ( + const menuItems = [...Object.keys(standardLayouts), "Custom"].map( + (layoutName) => ( {layoutName} - )); + ) + ); return ( diff --git a/src/components/ResponsiveSetCard.js b/src/components/ResponsiveSetCard.js index 6f1ff09..866cba0 100644 --- a/src/components/ResponsiveSetCard.js +++ b/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, diff --git a/src/themes.js b/src/themes.js index e3043d4..8b265f7 100644 --- a/src/themes.js +++ b/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],