import sc from "@/assets/sc.png"; import sc0 from "@/assets/sc0.png"; import sc2 from "@/assets/sc2.png"; import NewSiteWindow from "@/site/NewSiteWindow"; import SiteCipherWindow from "@/site/SiteCipherWindow"; import SiteComponent from "@/site/SiteComponent"; import useGetSites from "@/site/useGetSites"; import { useSiteStore } from "@/Stores"; import { observer } from "mobx-react-lite"; import { useTranslations } from "next-intl"; import Image from "next/image"; import { useState } from "react"; import { Button, Col, Modal, Row } from "reactstrap"; import { sprintf } from "sprintf-js"; const EventPB = require("@/Event_pb"); const scs = [sc0, "", sc2]; export default observer(() => { const { siteAvatarID, isSiteWindowOpened, setSiteWindowOpened, setSiteCipherWindowOpened, targetSiteID, setNewSiteWindowOpened, } = useSiteStore(); const t = useTranslations(); const [siteID, setSiteID] = useState(""); const [siteName, setSiteName] = useState(""); const { data: sites } = useGetSites(); const onClose = () => { setSiteWindowOpened(false); }; return ( <Modal isOpen={isSiteWindowOpened} toggle={onClose} centered> <Row className="g-0"> <Col className="m-1" xs="auto"> {sites.map( ({ siteID, hasCipher, siteConfigure, siteName, avatarCount }) => ( <Row key={siteID} className={`g-0 ${targetSiteID === siteID ? "target" : ""}`} > <Col className="m-1" xs="auto"> {scs[siteConfigure] && ( <Image alt="" src={scs[siteConfigure]} height={24} /> )}{" "} <span className="route" onClick={() => { if (hasCipher) { setSiteID(siteID); setSiteName(siteName); setSiteCipherWindowOpened(true); } else { SiteComponent.send({ eventID: EventPB.Event.EventID.ENTER_SITE, text: JSON.stringify({ siteID, siteCipher: "" }), }); onClose(); } }} > {siteName} ({sprintf(t("avatarCountText"), avatarCount)}) {hasCipher && ( <> {" "} <Image alt="" src={sc} height={24} /> </> )} </span> </Col> </Row> ), )} </Col> </Row> <Row className="justify-content-center g-0"> <Col className="m-1" xs="auto"> <Button onClick={() => { setNewSiteWindowOpened(true); }} disabled={!siteAvatarID} > {t("siteWindowNew")} </Button> </Col> </Row> <SiteCipherWindow siteID={siteID} siteName={siteName} /> <NewSiteWindow /> </Modal> ); });