bwc9876.dev
Live location tracking and playback for the game "manhunt"
Add Icons for Hider/Seeker
+5
-1
frontend/src/components/LobbyScreen.tsx
+5
-1
frontend/src/components/LobbyScreen.tsx
···
1
1
import React, { useEffect, useState } from "react";
2
2
import { commands, LobbyState, PlayerProfile } from "@/bindings";
3
3
import { useTauriEvent } from "@/lib/hooks";
4
-
import ProfilePicture, { ProfileDecor } from "./ProfilePicture";
4
+
import ProfilePicture, { iconForDecor, ProfileDecor } from "./ProfilePicture";
5
5
import { tempSettings } from "./MenuScreen";
6
6
import { IconArrowBigLeftLines, IconArrowBigLeftLinesFilled, IconCircleCheckFilled, IconCircleDashedPlus } from "@tabler/icons-react";
7
7
···
12
12
}
13
13
14
14
function TeamButton({ onClick, active, deco, text }: { onClick: () => void, active: boolean, deco: ProfileDecor, text: string }) {
15
+
16
+
const Icon = iconForDecor(deco);
17
+
15
18
return <button onClick={onClick} className={`team-button ${deco}`}>
19
+
<Icon />
16
20
{active ? "You're On" : "Join"} {text}
17
21
{active ? <IconCircleCheckFilled /> : <IconCircleDashedPlus />}
18
22
</button>;
+12
frontend/src/components/ProfilePicture.tsx
+12
frontend/src/components/ProfilePicture.tsx
···
1
1
import React from "react";
2
2
import fallbackPicture from "@/default-pfp.png";
3
+
import { IconBinocularsFilled, IconGhostFilled } from "@tabler/icons-react";
3
4
4
5
export type ProfileDecor = "hider" | "seeker";
6
+
7
+
export const iconForDecor = (decor: ProfileDecor) => {
8
+
if (decor === "hider") {
9
+
return IconGhostFilled;
10
+
} else {
11
+
return IconBinocularsFilled;
12
+
};
13
+
};
5
14
6
15
export type ProfilePictureProps = {
7
16
fallbackName: string;
···
34
43
35
44
const fallbackInitial = src === null ? (fallbackName[0] ?? "?") : undefined;
36
45
46
+
const Icon = decoration !== undefined ? iconForDecor(decoration) : null;
47
+
37
48
return <span data-initial={fallbackInitial} className={className}>
38
49
<img width={256} height={256} style={style} alt="Profile Picture" src={fallback} />
50
+
{Icon && <Icon size="1em"/>}
39
51
</span>;
40
52
}
41
53
+16
-3
frontend/src/style.css
+16
-3
frontend/src/style.css
···
182
182
align-items: center;
183
183
justify-content: center;
184
184
185
+
--deco-color: #0000;
186
+
185
187
box-sizing: border-box;
186
188
border-style: solid;
187
189
border-width: 4px;
188
-
border-color: #0000;
190
+
border-color: var(--deco-color);
189
191
190
192
img {
191
193
width: 2em;
···
193
195
border-radius: 50%;
194
196
}
195
197
198
+
svg {
199
+
position: absolute;
200
+
bottom: -10%;
201
+
right: -15%;
202
+
color: var(--deco-color);
203
+
filter: drop-shadow(0 0 2px black);
204
+
border-radius: 50%;
205
+
padding: 1px;
206
+
text-align: center;
207
+
}
208
+
196
209
&[data-initial]::after {
197
210
content: attr(data-initial);
198
211
color: white;
···
204
217
}
205
218
206
219
&.seeker {
207
-
border-color: #c67;
220
+
--deco-color: #c67;
208
221
}
209
222
210
223
&.hider {
211
-
border-color: #67c;
224
+
--deco-color: #67c;
212
225
}
213
226
}