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 | 1x 1x 1x | import React from 'react';
import { css } from '@emotion/react';
import { Layer as LayerModel } from '@uniquegood/realworld-web-interface/lib/models/game/Layer';
import Layer from '@lib/components/Game/Layer';
import { useRunStatement } from '@lib/utils/Game/Statement';
import { useGameStateContext } from '@lib/providers/GameState';
export function useLayerBottomSheet({ layerList }: { layerList: LayerModel[] }) {
const { render, saveOnServer } = useGameStateContext();
const [currentLayer, setCurrentLayer] = React.useState<LayerModel | undefined>();
const { runStatement } = useRunStatement();
const onClose = () => {
setCurrentLayer(undefined);
};
const openLayerBottomSheet = React.useCallback(
(v: string) => {
const layer = layerList.find((layer) => layer.id === v);
if (!layer) {
return;
}
setCurrentLayer(layer);
},
[layerList]
);
const handleSuccess = () => {
if (!currentLayer) return;
(async () => {
if (currentLayer.actionMap.onLayerCloseAfterSuccess) {
for await (const eachStatement of currentLayer.actionMap.onLayerCloseAfterSuccess
.statementList) {
await runStatement({
statement: eachStatement,
withParameter: {
layerId: currentLayer.id,
originActionType: 'onLayerCloseAfterSuccess'
}
});
}
saveOnServer();
render();
}
})();
onClose();
};
return React.useMemo(
() => ({
isOpen: Boolean(currentLayer),
currentLayer,
onClose,
open: openLayerBottomSheet,
onSuccess: handleSuccess
}),
[currentLayer]
);
}
interface LayerBottomSheetProps {
layer: LayerModel;
onSuccess: () => unknown;
onClose: () => unknown;
}
export function LayerBottomSheet({ layer, onSuccess, onClose }: LayerBottomSheetProps) {
return (
<div css={inventoryWrapper}>
<div css={inventoryBody}>
<div css={inventoryContents}>
<Layer layer={layer} onSuccess={onSuccess} onClose={onClose} />
</div>
</div>
</div>
);
}
const inventoryWrapper = css`
height: 80vh;
display: flex;
justify-content: center;
`;
const inventoryBody = css`
width: 100%;
height: 100%;
text-align: center;
`;
const inventoryContents = css`
width: 100%;
height: 100%;
`;
|