bwc9876.dev
Live location tracking and playback for the game "manhunt"
Add Quit Button to Lobby
+14
-3
frontend/src/components/LobbyScreen.tsx
+14
-3
frontend/src/components/LobbyScreen.tsx
···
3
import { useTauriEvent } from "@/lib/hooks";
4
import ProfilePicture, { ProfileDecor } from "./ProfilePicture";
5
import { tempSettings } from "./MenuScreen";
6
-
import { IconCircleCheckFilled, IconCircleDashedPlus } from "@tabler/icons-react";
7
8
function ProfileList({ profiles, decoration }: { profiles: [string, PlayerProfile][], decoration: ProfileDecor }) {
9
return <div className="lobby-pfps">
···
55
56
const isSeeker = lobbyState.teams[lobbyState.self_id] ?? false;
57
58
return (
59
<>
60
<header>
61
<span className="grow">Lobby</span>
62
<span>Join: {lobbyState.join_code}</span>
63
</header>
64
-
<main>
65
<ProfileList profiles={seekers} decoration="seeker" />
66
<TeamButton onClick={() => commands.switchTeams(true)} active={isSeeker} text="Seekers" deco="seeker" />
67
-
<div className="map" />
68
<TeamButton onClick={() => commands.switchTeams(false)} active={!isSeeker} text="Hiders" deco="hider" />
69
<ProfileList profiles={hiders} decoration="hider" />
70
</main>
···
3
import { useTauriEvent } from "@/lib/hooks";
4
import ProfilePicture, { ProfileDecor } from "./ProfilePicture";
5
import { tempSettings } from "./MenuScreen";
6
+
import { IconArrowBigLeftLines, IconArrowBigLeftLinesFilled, IconCircleCheckFilled, IconCircleDashedPlus } from "@tabler/icons-react";
7
8
function ProfileList({ profiles, decoration }: { profiles: [string, PlayerProfile][], decoration: ProfileDecor }) {
9
return <div className="lobby-pfps">
···
55
56
const isSeeker = lobbyState.teams[lobbyState.self_id] ?? false;
57
58
+
const onLeaveLobby = () => {
59
+
// TODO: Tauri plugin dialog instead
60
+
const choice = window.confirm("Are you sure you want to leave this lobby?");
61
+
62
+
if (choice) {
63
+
commands.quitToMenu();
64
+
}
65
+
};
66
+
67
return (
68
<>
69
<header>
70
<span className="grow">Lobby</span>
71
<span>Join: {lobbyState.join_code}</span>
72
</header>
73
+
<main className="lobby">
74
<ProfileList profiles={seekers} decoration="seeker" />
75
<TeamButton onClick={() => commands.switchTeams(true)} active={isSeeker} text="Seekers" deco="seeker" />
76
+
<div className="frame">
77
+
<button onClick={onLeaveLobby} aria-label="Leave Lobby" className="fab left"><IconArrowBigLeftLinesFilled size="2em"/></button>
78
+
</div>
79
<TeamButton onClick={() => commands.switchTeams(false)} active={!isSeeker} text="Hiders" deco="hider" />
80
<ProfileList profiles={hiders} decoration="hider" />
81
</main>
+31
frontend/src/style.css
+31
frontend/src/style.css
···
101
}
102
}
103
104
+
&.lobby > div.frame {
105
+
flex-grow: 1;
106
+
background-color: #aaa;
107
+
position: relative;
108
+
overflow-y: scroll;
109
+
width: 100%;
110
+
111
+
button.fab {
112
+
background-color: black;
113
+
color: white;
114
+
border-radius: 50%;
115
+
box-shadow: 0 0 5px black;
116
+
border: none;
117
+
display: flex;
118
+
align-items: center;
119
+
justify-content: center;
120
+
font-size: 12pt;
121
+
padding: var(--2);
122
+
position: absolute;
123
+
bottom: var(--small);
124
+
125
+
&.left {
126
+
left: var(--small);
127
+
}
128
+
129
+
&.right {
130
+
right: var(--small);
131
+
}
132
+
}
133
+
}
134
+
135
&.menu button {
136
display: flex;
137
flex-direction: row;