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 117 118 119 120 121 122 123 | import React from 'react';
import { css } from '@emotion/react';
import {
BlockType,
BlockPosition
} from '@uniquegood/realworld-web-interface/lib/models/game/Block';
import { ButtonBlock as ButtonBlockModel } from '@uniquegood/realworld-web-interface/lib/models/game/Block/Button';
import { ImageBlock as ImageBlockModel } from '@uniquegood/realworld-web-interface/lib/models/game/Block/Image';
import { TextBlock as TextBlockModel } from '@uniquegood/realworld-web-interface/lib/models/game/Block/Text';
import { InputTextBlock as InputTextBlockModel } from '@uniquegood/realworld-web-interface/lib/models/game/Block/InputText';
import { InputTextWithSubmitBlock as InputTextWithSubmitBlockModel } from '@uniquegood/realworld-web-interface/lib/models/game/Block/InputTextWithSubmit';
import { InputNumberBlock as InputNumberBlockModel } from '@uniquegood/realworld-web-interface/lib/models/game/Block/InputNumber';
import { InputNumberWithSubmitBlock as InputNumberWithSubmitBlockModel } from '@uniquegood/realworld-web-interface/lib/models/game/Block/InputNumberWithSubmit';
import {
Page as PageModel,
PageStyle
} from '@uniquegood/realworld-web-interface/lib/models/game/Page';
import ButtonBlock from '@lib/components/Game/Screen/FreeForm/Page/Block/Button';
import ImageBlock from '@lib/components/Game/Screen/FreeForm/Page/Block/Image';
import TextBlock from '@lib/components/Game/Screen/FreeForm/Page/Block/Text';
import InputTextBlock from '@lib/components/Game/Screen/FreeForm/Page/Block/InputText';
import InputTextWithSubmitBlock from '@lib/components/Game/Screen/FreeForm/Page/Block/InputTextWithSubmitButton';
import {
MAX_HEIGHT_DP,
MAX_WIDTH_DP
} from '@uniquegood/realworld-web-interface/lib/constants/game';
import InputNumberBlock from '@lib/components/Game/Screen/FreeForm/Page/Block/InputNumber';
import InputNumberWithSubmitBlock from '@lib/components/Game/Screen/FreeForm/Page/Block/InputNumberWithSubmitButton';
const BlockTypeToComponent: Record<BlockType, (block: any) => React.ReactNode> = {
button: (block: ButtonBlockModel): React.ReactNode => {
return <ButtonBlock key={block.id} {...block} />;
},
image: (block: ImageBlockModel): React.ReactNode => {
return <ImageBlock key={block.id} {...block} />;
},
text: (block: TextBlockModel): React.ReactNode => {
return <TextBlock key={block.id} {...block} />;
},
inputText: (block: InputTextBlockModel): React.ReactNode => {
return <InputTextBlock key={block.id} {...block} />;
},
inputTextWithSubmit: (block: InputTextWithSubmitBlockModel): React.ReactNode => {
return <InputTextWithSubmitBlock key={block.id} {...block} />;
},
inputNumber: (block: InputNumberBlockModel): React.ReactNode => {
return <InputNumberBlock key={block.id} {...block} />;
},
inputNumberWithSubmit: (block: InputNumberWithSubmitBlockModel): React.ReactNode => {
return <InputNumberWithSubmitBlock key={block.id} {...block} />;
}
};
export default function PageComponent({ id, style, blockList }: PageModel) {
const pageContainerStyle = React.useMemo(() => {
const styleObj = PageStyle.parse(style);
const tempCSS = `
height: ${styleObj.scrollHeightDp}px;
`;
return css(tempCSS);
}, [style]);
return (
<div css={[pageContainer]}>
<div css={[pageWrap, pageContainerStyle]}>
{blockList.map((block, index) => {
const { position } = block;
if (!position) return <>기본값 미존재 블럭</>;
return (
<PositionBlockWrapper key={block.id} position={position} index={index}>
{BlockTypeToComponent[block.type](block)}
</PositionBlockWrapper>
);
})}
</div>
</div>
);
}
function PositionBlockWrapper({
position,
index,
children
}: {
position: BlockPosition;
index: number;
children: React.ReactNode;
}) {
const wrapperStyle = React.useMemo(() => {
const { top, left, width, height, angle } = position;
return css`
position: absolute;
z-index: ${index};
left: ${left}px;
top: ${top}px;
width: ${width}px;
height: ${height}px;
transform: rotate(${angle}deg);
transform-origin: top left;
`;
}, [position]);
return <div css={wrapperStyle}>{children}</div>;
}
const pageContainer = css`
width: 100%;
height: 100%;
`;
const pageWrap = css`
transform-origin: top left;
overflow: hidden;
width: ${MAX_WIDTH_DP}px;
height: ${MAX_HEIGHT_DP}px;
position: relative;
`;
|