12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697 |
- import React from "react";
- import { useTranslation } from "react-i18next";
- import { Trans } from "react-i18next";
- import styled from "styled-components";
- import { toast } from "react-toastify";
- import Modal from "../../components/ui/Modal";
- import useSession from "../../hooks/useSession";
- const StyledUrl = styled.div`
- background-color: var(--color-midGrey);
- padding: 0.5em;
- border-radius: 2px;
- display: flex;
- align-items: center;
- justify-content: space-between;
- margin-bottom: 2em;
- & span {
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
- & img {
- margin-left: 1em;
- cursor: pointer;
- }
- `;
- const WelcomeModal = ({ show, setShow, welcome = true }) => {
- const { t } = useTranslation();
- const currentUrl = window.location.href;
- const inputRef = React.useRef();
- const { sessionId: room } = useSession();
- const handleCopy = () => {
- inputRef.current.style.display = "block";
- inputRef.current.select();
- document.execCommand("copy");
- inputRef.current.style.display = "none";
- toast.info(t("Url copied to clipboard!"), { autoClose: 1000 });
- };
- const meetUrl = `https://meet.jit.si/airboardgame__${room}`;
- return (
- <Modal
- title={welcome ? t("Ready to play ?") : t("Invite more player")}
- setShow={setShow}
- show={show}
- >
- <header>
- <h3>{t("Share this link with your friends")}</h3>
- </header>
- <section>
- <StyledUrl>
- <span>{currentUrl}</span>
- <img
- className="copy"
- src="https://icongr.am/entypo/copy.svg?size=22&color=888886"
- alt={t("Copy")}
- onClick={handleCopy}
- />
- </StyledUrl>
- <Trans i18nKey="welcomeTip">
- <p>
- Tip: Use an audio conferencing system to talk with other players,
- like <a href={meetUrl}>Jitsi</a> (free & open-source).
- </p>
- </Trans>
- </section>
- {welcome && (
- <button
- onClick={() => {
- setShow(false);
- }}
- className="button success"
- style={{ margin: "1em auto" }}
- >
- {t("I want to play...")}
- </button>
- )}
- <input
- value={currentUrl}
- readOnly
- ref={inputRef}
- style={{ display: "none" }}
- />
- </Modal>
- );
- };
- export default WelcomeModal;
|