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 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 | import React from 'react';
import { css } from '@emotion/react';
import { EndScreen } from '@uniquegood/realworld-web-interface/lib/models/game/Screen/End';
import EndScreenPageButton from '@lib/components/Game/Screen/End/Button/';
import { useGameStateContext } from '@lib/providers/GameState';
import ShareIcon from '@lib/components/icons/Share';
import { useShareModalContext } from '@lib/providers/ShareModal';
import ProjectList from '@lib/components/Game/Screen/End/ProjectList';
interface EndScreenPageAProps {
screen: EndScreen;
}
export default function EndScreenPageA({ screen }: EndScreenPageAProps) {
const { openShareModal } = useShareModalContext();
const { resetOnServer } = useGameStateContext();
function handleClickReStart() {
(async () => {
await resetOnServer('Replay');
window.location.reload();
})();
}
return (
<div css={[container, noScrollbar]}>
<div css={imageContainer}>
<img css={imageStyle} src={screen.style.backgroundImageUrl} alt="엔딩스크린 배경이미지" />
</div>
<div css={buttonContainer}>
<EndScreenPageButton
button={screen.button}
text="다시하기"
onClick={handleClickReStart}
css={primaryButtonStyle}
/>
<EndScreenPageButton button={screen.button} onClick={openShareModal}>
<ShareIcon color={screen.button.style.color} />
</EndScreenPageButton>
</div>
<div css={bottomContainer}>
<ProjectList color={screen.style.color} />
</div>
</div>
);
}
const container = css`
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
overflow-y: scroll;
`;
const customScrollbarStyles = css`
scrollbar-width: thin;
scrollbar-color: rgba(34, 34, 34, 0.15) transparent;
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-thumb {
outline: none;
border-radius: 10px;
border: 4px solid transparent;
box-shadow: inset 6px 6px 0 rgba(34, 34, 34, 0.15);
}
::-webkit-scrollbar-thumb:hover {
border: 4px solid transparent;
box-shadow: inset 6px 6px 0 rgba(34, 34, 34, 0.25);
}
::-webkit-scrollbar-track {
box-shadow: none;
background-color: transparent;
}
`;
const noScrollbar = css`
::-webkit-scrollbar {
width: 0; /* 스크롤바 너비를 0으로 설정 */
}
::-webkit-scrollbar-thumb {
background-color: transparent; /* 스크롤바 색상을 투명하게 설정 */
}
`;
const imageContainer = css`
width: 100%;
`;
const imageStyle = css`
width: 100%;
`;
const buttonContainer = css`
display: flex;
gap: 16px;
width: 100%;
padding: 24px 16px;
`;
const primaryButtonStyle = css`
flex-grow: 1;
`;
const bottomContainer = css`
width: 100%;
`;
|