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 | /* eslint-disable jsx-a11y/click-events-have-key-events */
import React from 'react';
import {
Screen as ScreenModel,
ScreenType
} from '@uniquegood/realworld-web-interface/lib/models/game/Screen';
import { css } from '@emotion/react';
import ScrollScreen from '@lib/components/Game/Screen/FreeForm/Scroll';
import SwipeScreen from '@lib/components/Game/Screen/FreeForm/Swipe';
import GPSMapScreen from '@lib/components/Game/Screen/GPSMap';
import StartScreen from '@lib/components/Game/Screen/Start';
import EndScreen from '@lib/components/Game/Screen/End';
import VisualNovelScreen from '@lib/components/Game/Screen/VisualNovel';
import {
MAX_HEIGHT_DP,
MAX_WIDTH_DP
} from '@uniquegood/realworld-web-interface/lib/constants/game';
const screenTypeToComponentMap: Record<ScreenType, React.FC<any>> = {
scroll: ScrollScreen,
swipe: SwipeScreen,
gpsMap: GPSMapScreen,
visualNovel: VisualNovelScreen,
start: StartScreen,
end: EndScreen
};
export default function Screen(props: ScreenModel) {
const { type } = props;
const ScreenComponent = screenTypeToComponentMap[type];
const pageRef = React.useRef<HTMLDivElement | null>(null);
const [dpRatio, setDpRatio] = React.useState({ width: 1, height: 1 });
const handleResize = () => {
if (!pageRef.current) return;
setDpRatio({
width: pageRef.current.clientWidth / MAX_WIDTH_DP,
height: Math.floor((pageRef.current.clientHeight / MAX_HEIGHT_DP) * 10000) / 10000 // 계산 오차로 스크롤이 무조건 생기게 되는데, 이를 방지하기 위해 소수점 4자리까지만 허용
});
};
React.useEffect(() => {
handleResize();
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
const pageContainerStyle = React.useMemo(() => {
return css(`
transform: scale(${dpRatio.width}, ${dpRatio.height});
transform-origin: top left;
`);
}, [dpRatio]);
return (
<div css={mainWrap}>
<div css={mainRatioWrap}>
<div css={mainRatioContainer}>
<div css={mainContainer} ref={pageRef}>
<div css={[pageContainer, pageContainerStyle]}>
<ScreenComponent {...props} />
</div>
</div>
</div>
</div>
</div>
);
}
const mainWrap = css`
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
`;
const mainRatioWrap = css`
width: 100%;
max-width: min(calc(100% - 10px), calc(calc(100vh - 52px) * 0.5625));
`;
const mainRatioContainer = css`
position: relative;
padding-top: 160%;
`;
const mainContainer = css`
position: absolute;
inset: 0;
border-radius: 24px;
overflow: hidden;
box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.12);
`;
const pageContainer = css`
width: ${MAX_WIDTH_DP}px;
height: ${MAX_HEIGHT_DP}px;
`;
|