Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | /* eslint-disable jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */
import { StartScreen } from '@uniquegood/realworld-web-interface/lib/models/game/Screen/Start';
import React from 'react';
import { css } from '@emotion/react';
import { useGameStateContext } from '@lib/providers/GameState';
interface StartScreenPageButtonProps {
button: StartScreen['button'];
nextScreenId?: string;
}
export default function StartScreenPageButton({
button,
nextScreenId
}: StartScreenPageButtonProps) {
const { start } = useGameStateContext();
const buttonWrapStyle = React.useMemo(() => {
let cssText = `
color: ${button.style.color};
`;
if (button.type === 'A') {
cssText += `
background-color: ${button.style.backgroundColor};
`;
}
if (button.type === 'B') {
cssText += `
background-color: ${button.style.backgroundColor};
border-radius: 6px;
`;
}
if (button.type === 'C') {
cssText += `
background-color: ${button.style.backgroundColor};
border-radius: 26px;
`;
}
return css(cssText);
}, [button.style, button.type]);
const handleClick = React.useCallback(() => {
if (!nextScreenId) return;
start(nextScreenId);
}, []);
return (
<div css={[buttonWrap, buttonWrapStyle]} onClick={handleClick}>
<div>{button.text}</div>
</div>
);
}
const buttonWrap = css`
user-select: none;
width: 360px;
height: 52px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
font-weight: 600;
font-size: 17px;
cursor: pointer;
`;
|