import React from "react"; import { useTranslation, Trans } from "react-i18next"; import { useRecoilValue } from "recoil"; import useAsyncEffect from "use-async-effect"; import styled from "styled-components"; import Modal from "../../components/ui/Modal"; // import { BoardConfigAtom } from "../../components/board"; import { getBestTranslationFromConfig } from "../../utils/api"; const Kbd = styled.kbd` background-color: #eee; border-radius: 3px; border: 1px solid #b4b4b4; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 2px 0 0 rgba(255, 255, 255, 0.7) inset; color: #333; display: inline-block; font-family: consolas, "Liberation Mono", courier, monospace; font-size: 0.85em; font-weight: 700; line-height: 1; padding: 2px 4px; white-space: nowrap; `; const InfoModal = ({ show, setShow }) => { const { t, i18n } = useTranslation(); const [info, setInfo] = React.useState(""); // const boardConfig = useRecoilValue(BoardConfigAtom); const translation = React.useMemo( // () => getBestTranslationFromConfig(boardConfig, i18n.languages), () => getBestTranslationFromConfig({}, i18n.languages), [i18n.languages] ); useAsyncEffect( async (isMounted) => { const marked = (await import("marked")).default; if (!isMounted()) return; const renderer = new marked.Renderer(); renderer.link = (href, title, text) => { return `${text}`; }; setInfo( marked(translation.description || "", { renderer: renderer, }) ); }, [setInfo, translation.description] ); return ( {t("Game information")} {translation.description && ( )} {!translation.description && {t("No information")}} {t("Board interactions")} Move the board with middle mouse button click. Alternatively you can use left button with alt key. Zoom with mouse wheel. Switch to edit mode with top button to be able to edit the game. You can save and reload game by clicking the burger menu. Use Ctrl + 1-9 to save a position and 1-9 to restore it. Use space to zoom temporally to the center of screen. {t("Item interactions")} Double click on any item to execute the main action on it. Long clic on item to be able to selected previously locked item. See other shortcuts in action menu. {t("More information")} For more information, visit{" "} github repository . ); }; export default InfoModal;
For more information, visit{" "} github repository .