Spaces:
Running
on
CPU Upgrade
Running
on
CPU Upgrade
remove console.log
Browse files- patches/InteractButton.tsx +87 -88
patches/InteractButton.tsx
CHANGED
@@ -1,88 +1,87 @@
|
|
1 |
-
import Button from './Button';
|
2 |
-
import { toast } from 'react-toastify';
|
3 |
-
import interactImg from '../../../assets/interact.svg';
|
4 |
-
import { useConvex, useMutation, useQuery } from 'convex/react';
|
5 |
-
import { api } from '../../../convex/_generated/api';
|
6 |
-
// import { SignInButton } from '@clerk/clerk-react';
|
7 |
-
import { ConvexError } from 'convex/values';
|
8 |
-
import { Id } from '../../../convex/_generated/dataModel';
|
9 |
-
import { useCallback } from 'react';
|
10 |
-
import { waitForInput } from '../../hooks/sendInput';
|
11 |
-
import { useServerGame } from '../../hooks/serverGame';
|
12 |
-
|
13 |
-
export default function InteractButton() {
|
14 |
-
// const { isAuthenticated } = useConvexAuth();
|
15 |
-
const worldStatus = useQuery(api.world.defaultWorldStatus);
|
16 |
-
const worldId = worldStatus?.worldId;
|
17 |
-
const game = useServerGame(worldId);
|
18 |
-
const oauth = JSON.parse(localStorage.getItem('oauth'));
|
19 |
-
const oauthToken = oauth ? oauth.userInfo.fullname : undefined;
|
20 |
-
|
21 |
-
const
|
22 |
-
|
23 |
-
|
24 |
-
const
|
25 |
-
const
|
26 |
-
|
27 |
-
|
28 |
-
const
|
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 |
-
}
|
|
|
1 |
+
import Button from './Button';
|
2 |
+
import { toast } from 'react-toastify';
|
3 |
+
import interactImg from '../../../assets/interact.svg';
|
4 |
+
import { useConvex, useMutation, useQuery } from 'convex/react';
|
5 |
+
import { api } from '../../../convex/_generated/api';
|
6 |
+
// import { SignInButton } from '@clerk/clerk-react';
|
7 |
+
import { ConvexError } from 'convex/values';
|
8 |
+
import { Id } from '../../../convex/_generated/dataModel';
|
9 |
+
import { useCallback } from 'react';
|
10 |
+
import { waitForInput } from '../../hooks/sendInput';
|
11 |
+
import { useServerGame } from '../../hooks/serverGame';
|
12 |
+
|
13 |
+
export default function InteractButton() {
|
14 |
+
// const { isAuthenticated } = useConvexAuth();
|
15 |
+
const worldStatus = useQuery(api.world.defaultWorldStatus);
|
16 |
+
const worldId = worldStatus?.worldId;
|
17 |
+
const game = useServerGame(worldId);
|
18 |
+
const oauth = JSON.parse(localStorage.getItem('oauth'));
|
19 |
+
const oauthToken = oauth ? oauth.userInfo.fullname : undefined;
|
20 |
+
const humanTokenIdentifier = useQuery(api.world.userStatus, worldId ? { worldId, oauthToken } : 'skip');
|
21 |
+
const userPlayerId =
|
22 |
+
game && [...game.world.players.values()].find((p) => p.human === humanTokenIdentifier)?.id;
|
23 |
+
const join = useMutation(api.world.joinWorld);
|
24 |
+
const leave = useMutation(api.world.leaveWorld);
|
25 |
+
const isPlaying = !!userPlayerId;
|
26 |
+
|
27 |
+
const convex = useConvex();
|
28 |
+
const joinInput = useCallback(
|
29 |
+
async (worldId: Id<'worlds'>) => {
|
30 |
+
let inputId;
|
31 |
+
try {
|
32 |
+
inputId = await join({ worldId, oauthToken });
|
33 |
+
} catch (e: any) {
|
34 |
+
if (e instanceof ConvexError) {
|
35 |
+
toast.error(e.data);
|
36 |
+
return;
|
37 |
+
}
|
38 |
+
throw e;
|
39 |
+
}
|
40 |
+
try {
|
41 |
+
await waitForInput(convex, inputId);
|
42 |
+
} catch (e: any) {
|
43 |
+
toast.error(e.message);
|
44 |
+
}
|
45 |
+
},
|
46 |
+
[convex, join, oauthToken],
|
47 |
+
);
|
48 |
+
|
49 |
+
|
50 |
+
const joinOrLeaveGame = () => {
|
51 |
+
if (
|
52 |
+
!worldId ||
|
53 |
+
// || !isAuthenticated
|
54 |
+
game === undefined
|
55 |
+
) {
|
56 |
+
return;
|
57 |
+
}
|
58 |
+
if (isPlaying) {
|
59 |
+
console.log(`Leaving game for player ${userPlayerId}`);
|
60 |
+
void leave({ worldId , oauthToken});
|
61 |
+
} else {
|
62 |
+
console.log(`Joining game`);
|
63 |
+
void joinInput(worldId);
|
64 |
+
}
|
65 |
+
};
|
66 |
+
// if (!isAuthenticated || game === undefined) {
|
67 |
+
// return (
|
68 |
+
// <SignInButton>
|
69 |
+
// <button className="button text-white shadow-solid text-2xl pointer-events-auto">
|
70 |
+
// <div className="inline-block bg-clay-700">
|
71 |
+
// <span>
|
72 |
+
// <div className="inline-flex h-full items-center gap-4">
|
73 |
+
// <img className="w-4 h-4 sm:w-[30px] sm:h-[30px]" src={interactImg} />
|
74 |
+
// Interact
|
75 |
+
// </div>
|
76 |
+
// </span>
|
77 |
+
// </div>
|
78 |
+
// </button>
|
79 |
+
// </SignInButton>
|
80 |
+
// );
|
81 |
+
// }
|
82 |
+
return (
|
83 |
+
<Button imgUrl={interactImg} onClick={joinOrLeaveGame}>
|
84 |
+
{isPlaying ? 'Leave' : 'Interact'}
|
85 |
+
</Button>
|
86 |
+
);
|
87 |
+
}
|
|