bwc9876.dev
Live location tracking and playback for the game "manhunt"
1import { commands, GameSettings } from "@/bindings";
2import { sharedSwrConfig } from "@/lib/hooks";
3import React from "react";
4import useSWR from "swr";
5
6// Temp settings for now.
7const settings: GameSettings = {
8 random_seed: 21341234,
9 hiding_time_seconds: 10,
10 ping_start: "Instant",
11 ping_minutes_interval: 1,
12 powerup_start: "Instant",
13 powerup_chance: 60,
14 powerup_minutes_cooldown: 1,
15 powerup_locations: [
16 {
17 lat: 0,
18 long: 0,
19 heading: null
20 }
21 ]
22};
23
24export default function MenuScreen() {
25 const [roomCode, setRoomCode] = React.useState("");
26 const [newName, setName] = React.useState("");
27
28 const { data: profile, mutate: setProfile } = useSWR(
29 "fetch-profile",
30 commands.getProfile,
31 sharedSwrConfig
32 );
33 const { data: gameHistory } = useSWR(
34 "list-game-history",
35 commands.listGameHistories,
36 sharedSwrConfig
37 );
38
39 const onStartGame = async (code: string | null) => {
40 if (code) {
41 try {
42 const validCode = await commands.checkRoomCode(code);
43 if (!validCode) {
44 window.alert("Invalid Join Code");
45 return;
46 }
47 } catch (e) {
48 window.alert(`Failed to connect to Server ${e}`);
49 return;
50 }
51 }
52 await commands.startLobby(code, settings);
53 };
54
55 const onSaveProfile = async () => {
56 await commands.updateProfile({ ...profile, display_name: newName });
57 setProfile({ ...profile, display_name: newName });
58 };
59
60 return (
61 <>
62 {profile.pfp_base64 && (
63 <img src={profile.pfp_base64} alt={`${profile.display_name}'s Profile Picture`} />
64 )}
65 <h2>Welcome, {profile.display_name}</h2>
66 <hr />
67 <h3>Play</h3>
68 <button onClick={() => onStartGame(null)}>Start Lobby</button>
69 <div>
70 <input
71 value={roomCode}
72 placeholder="Room Code"
73 onChange={(e) => setRoomCode(e.target.value)}
74 />
75 <button onClick={() => onStartGame(roomCode)} disabled={roomCode === ""}>
76 Join Lobby
77 </button>
78 </div>
79 <hr />
80 <h3>Edit Profile</h3>
81 <input
82 placeholder={profile.display_name}
83 value={newName}
84 onChange={(e) => setName(e.target.value)}
85 />
86 <button onClick={onSaveProfile}>Save</button>
87 <hr />
88 <h3>Previous Games</h3>
89 <ul>
90 {gameHistory.map((time) => (
91 <li key={time}>{time}</li>
92 ))}
93 </ul>
94 </>
95 );
96}