import styles from '@system/layouts/CardHandLayout.module.scss'; import * as React from 'react'; // Source: https://commons.wikimedia.org/wiki/File:Card_back_01.svg // This library is free software; you can redistribute it and/or modify it under the terms of the GNU Lesser General Public License as published by the Free Software Foundation; either version 2.1 of the License, or (at your option) any later version. This library is distributed in the hope that it will be useful, but without any warranty; without even the implied warranty of merchantability or fitness for a particular purpose. See version 2.1 and version 3 of the GNU Lesser General Public License for more details. const CardBack = (props) => { return ( ); }; const Card = (props) => { let style = {}; if (props.selectedIndex === props.index) { style = { transform: `rotateY(180deg) scale(2)`, zIndex: 1 }; } return (
{ e.preventDefault(); e.stopPropagation(); if (!props.onClick) { return; } props.onClick(); }} style={style} >
); }; const CardHandLayout = (props) => { const [selectedIndex, setSelectedIndex] = React.useState(-1); const { cards } = props; const indexMod = (index) => { if (index < Math.floor(cards.length / 2)) { return index + 1; } else { return cards.length - index; } }; React.useEffect(() => { if (props.expanded) { return; } setSelectedIndex(-1); }, [props.expanded]); let rootStyle = {}; if (!props.expanded) { rootStyle = { paddingLeft: `${cards.length * 96}px` }; } else { rootStyle = { paddingLeft: `0px` }; } return (
{cards.map((data, index) => { let style = {}; if (props.expanded) { const mod = indexMod(index); const angle = (index - Math.floor(cards.length / 2)) * 8; const translationY = -Math.sin((angle * Math.PI) / 180) * 122 * indexMod(index); style = { transform: `rotate(${angle}deg) translateY(${translationY}px)`, }; if (index === selectedIndex) { style = { transform: ``, zIndex: 1 }; } } else { const translationX = -104 * index; style = { transform: `translateX(${translationX}px)` }; } return (
setSelectedIndex(index) : () => { props.onExpand(); setSelectedIndex(index); } } src={data} />
); })}
); }; export default CardHandLayout;