Spaces:
Paused
Paused
File size: 2,852 Bytes
30e8a79 |
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 |
import Button from './Button';
import { toast } from 'react-toastify';
import interactImg from '../../../assets/interact.svg';
import { useConvex, useMutation, useQuery } from 'convex/react';
import { api } from '../../../convex/_generated/api';
// import { SignInButton } from '@clerk/clerk-react';
import { ConvexError } from 'convex/values';
import { Id } from '../../../convex/_generated/dataModel';
import { useCallback } from 'react';
import { waitForInput } from '../../hooks/sendInput';
import { useServerGame } from '../../hooks/serverGame';
export default function InteractButton() {
// const { isAuthenticated } = useConvexAuth();
const worldStatus = useQuery(api.world.defaultWorldStatus);
const worldId = worldStatus?.worldId;
const game = useServerGame(worldId);
const oauth = JSON.parse(localStorage.getItem('oauth'));
const oauthToken = oauth ? oauth.userInfo.fullname : undefined;
const humanTokenIdentifier = useQuery(api.world.userStatus, worldId ? { worldId, oauthToken } : 'skip');
const userPlayerId =
game && [...game.world.players.values()].find((p) => p.human === humanTokenIdentifier)?.id;
const join = useMutation(api.world.joinWorld);
const leave = useMutation(api.world.leaveWorld);
const isPlaying = !!userPlayerId;
const convex = useConvex();
const joinInput = useCallback(
async (worldId: Id<'worlds'>) => {
let inputId;
try {
inputId = await join({ worldId, oauthToken });
} catch (e: any) {
if (e instanceof ConvexError) {
toast.error(e.data);
return;
}
throw e;
}
try {
await waitForInput(convex, inputId);
} catch (e: any) {
toast.error(e.message);
}
},
[convex, join, oauthToken],
);
const joinOrLeaveGame = () => {
if (
!worldId ||
// || !isAuthenticated
game === undefined
) {
return;
}
if (isPlaying) {
console.log(`Leaving game for player ${userPlayerId}`);
void leave({ worldId , oauthToken});
} else {
console.log(`Joining game`);
void joinInput(worldId);
}
};
// if (!isAuthenticated || game === undefined) {
// return (
// <SignInButton>
// <button className="button text-white shadow-solid text-2xl pointer-events-auto">
// <div className="inline-block bg-clay-700">
// <span>
// <div className="inline-flex h-full items-center gap-4">
// <img className="w-4 h-4 sm:w-[30px] sm:h-[30px]" src={interactImg} />
// Interact
// </div>
// </span>
// </div>
// </button>
// </SignInButton>
// );
// }
return (
<Button imgUrl={interactImg} onClick={joinOrLeaveGame}>
{isPlaying ? 'Leave' : 'Interact'}
</Button>
);
}
|