87 lines
2.1 KiB
JavaScript
87 lines
2.1 KiB
JavaScript
import PropTypes from 'prop-types';
|
|
|
|
import FluidText from '#fluid-text';
|
|
import {useGame} from '#hooks';
|
|
|
|
import styles from './index.module.css';
|
|
|
|
const capitalize = (string) => string.slice(0, 1).toUpperCase() + string.slice(1);
|
|
|
|
function BlackCardText(props) {
|
|
const {answers} = props;
|
|
const game = useGame();
|
|
const parts = game.blackCard.split('_');
|
|
const blanksCount = parts.length - 1;
|
|
const decoratedText = parts.reduce((r, part, i) => (
|
|
<>
|
|
{r}
|
|
{
|
|
0 === i
|
|
? ''
|
|
: (
|
|
<span
|
|
className={[
|
|
styles.answer,
|
|
!answers[i - 1] && styles.blank,
|
|
].filter(Boolean).join(' ')}
|
|
>
|
|
{
|
|
// Capitalize the first letter if the blank is the first letter.
|
|
(
|
|
(
|
|
(
|
|
1 === i
|
|
&& '_'.charCodeAt(0) === game.blackCard.charCodeAt(0)
|
|
)
|
|
|| '. ' === parts[i - 1]
|
|
)
|
|
? capitalize
|
|
: (_) => _
|
|
)(answers[i - 1] || '_____')
|
|
}
|
|
</span>
|
|
)
|
|
}
|
|
{part}
|
|
</>
|
|
), '');
|
|
return (
|
|
<div className={styles['black-card-text']}>
|
|
<FluidText>
|
|
{
|
|
0 === blanksCount
|
|
? (
|
|
<>
|
|
{game.blackCard}
|
|
<div className="footer">
|
|
<span
|
|
className={[
|
|
styles.answer,
|
|
!answers[0] && styles.blank,
|
|
].filter(Boolean).join(' ')}
|
|
>
|
|
{answers[0] ? `${capitalize(answers[0])}` : '_____'}
|
|
</span>
|
|
.
|
|
</div>
|
|
</>
|
|
)
|
|
: decoratedText
|
|
}
|
|
</FluidText>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
BlackCardText.defaultProps = {
|
|
answers: [],
|
|
style: {},
|
|
};
|
|
|
|
BlackCardText.propTypes = {
|
|
answers: PropTypes.arrayOf(PropTypes.string),
|
|
style: PropTypes.shape({}),
|
|
};
|
|
|
|
export default BlackCardText;
|