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