123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125 |
- import React from "react";
- import useC2C, { C2CProvider } from "../components/hooks/useC2C";
- import { itemMap, useGameItemActionMap, ItemForm } from "../gameComponents";
- import BoardView from "./BoardView";
- import Waiter from "./Waiter";
- import { useUsers } from "../components/users";
- import useSession, { SessionProvider } from "../hooks/useSession";
- import AutoSaveSession from "./AutoSaveSession";
- import { useTranslation } from "react-i18next";
- import useAsyncEffect from "use-async-effect";
- export const SessionView = () => {
- const {
- loadSession,
- setSession,
- sessionLoaded,
- gameId,
- sessionId,
- } = useSession();
- const { c2c, isMaster } = useC2C("board");
- const { actionMap } = useGameItemActionMap();
- const { setCurrentUser } = useUsers();
- const gameLoadingRef = React.useRef(false);
- const { t } = useTranslation();
- React.useEffect(() => {
- setCurrentUser((prev) => ({ ...prev, space: sessionId }));
- }, [sessionId, setCurrentUser]);
- useAsyncEffect(
- async (isMounted) => {
- if (isMaster && !sessionLoaded && !gameLoadingRef.current) {
- gameLoadingRef.current = true;
- const sessionData = await loadSession();
- if (!isMounted) return;
- setSession(sessionData, true);
- }
- },
- [sessionLoaded, isMaster]
- );
- // Load game from master if any
- React.useEffect(() => {
- if (!isMaster && !sessionLoaded && !gameLoadingRef.current) {
- gameLoadingRef.current = true;
- const onReceiveGame = (receivedSession) => {
- setSession(receivedSession);
- };
- c2c.call("getSession").then(onReceiveGame, () => {
- setTimeout(
- () =>
- c2c
- .call("getSession")
- .then(onReceiveGame, (error) =>
- console.log("Failed to call getSession with error", error)
- ),
- 1000
- );
- });
- }
- }, [c2c, isMaster, sessionLoaded, setSession]);
- const mediaLibraries = React.useMemo(
- () =>
- gameId
- ? [
- {
- id: "session",
- name: t("Session"),
- boxId: "session",
- resourceId: sessionId,
- },
- { id: "game", name: t("Game"), boxId: "game", resourceId: gameId },
- ]
- : [
- {
- id: "session",
- name: t("Session"),
- boxId: "session",
- resourceId: sessionId,
- },
- ],
- [gameId, sessionId, t]
- );
- if (!sessionLoaded) {
- return <Waiter message={t("Session loading...")} />;
- }
- return (
- <>
- <AutoSaveSession />
- <BoardView
- mediaLibraries={mediaLibraries}
- itemMap={itemMap}
- actionMap={actionMap}
- ItemFormComponent={ItemForm}
- />
- </>
- );
- };
- const ConnectedSessionView = ({ sessionId, fromGame }) => {
- return (
- <C2CProvider room={sessionId} channel="board">
- <SessionProvider sessionId={sessionId} fromGameId={fromGame}>
- <SessionView />
- </SessionProvider>
- </C2CProvider>
- );
- };
- export default ConnectedSessionView;
|