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 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 | /* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable jsx-a11y/click-events-have-key-events */
import React from 'react';
import { css } from '@emotion/react';
import ExitIconForPauseMenu from '@lib/components/icons/Exit';
import { RefreshIconForPauseMenu } from '@lib/components/icons/Refresh';
import PlayIconForPauseMenu from '@lib/components/icons/Play';
import { useModalContext } from '@lib/providers/Modal';
import { useGameStateContext } from '@lib/providers/GameState';
export function usePauseMenu() {
const [isOpen, setIsOpen] = React.useState(false);
const onCloseRef = React.useRef(() => {
setIsOpen(false);
});
const openPauseMenuWithAwait = React.useCallback(
() =>
new Promise((resolve) => {
onCloseRef.current = () => {
setIsOpen(false);
resolve(true);
};
setIsOpen(true);
}),
[setIsOpen]
);
const pauseMenuProps = React.useMemo(
() => ({
isOpen,
onClose: onCloseRef.current
}),
[isOpen, setIsOpen]
);
return {
props: pauseMenuProps,
openPauseMenuWithAwait
};
}
export function PauseMenu({ onClose }: { onClose: () => void }) {
const { resetOnServer } = useGameStateContext();
const { openModal } = useModalContext();
return (
<div css={pauseMenuWrapper}>
<div css={pauseMenuBody}>
<div css={iconContainer}>
<ExitIconForPauseMenu
css={iconStyle}
onClick={() => {
onClose();
openModal({
title: '나가기',
content: '게임을 종료할까요?',
onConfirm: () => {
window.open('', '_self', '');
window.close();
return false;
}
});
}}
/>
<div css={iconText}>나가기</div>
</div>
<div css={iconContainer}>
<RefreshIconForPauseMenu
css={iconStyle}
onClick={() => {
onClose();
openModal({
title: '다시하기',
content: '게임을 처음부터 다시 플레이할까요?',
onConfirm: async () => {
await resetOnServer();
window.location.reload();
}
});
}}
/>
<div css={iconText}>다시하기</div>
</div>
<div css={iconContainer}>
<PlayIconForPauseMenu css={iconStyle} onClick={onClose} />
<div css={iconText}>계속하기</div>
</div>
</div>
</div>
);
}
const pauseMenuWrapper = css`
display: flex;
flex-grow: 1;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
`;
const pauseMenuBody = css`
width: 100%;
display: flex;
justify-content: center;
gap: 8px;
`;
const iconContainer = css`
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
margin: 0 25px;
@media (max-width: 380px) {
margin: 0 10px;
}
`;
const iconStyle = css`
cursor: pointer;
`;
const iconText = css`
color: var(--theme-inventory-title-color);
font-family: Noto Sans KR sans-serif;
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: 16px;
`;
|