The weeb for the next gen discord boat - Wamellow
wamellow.com
bot
discord
add customizable starboard color
+98
-90
+15
-1
app/dashboard/[guildId]/starboard/page.tsx
+15
-1
app/dashboard/[guildId]/starboard/page.tsx
···
16
16
import NumberInput from "@/components/inputs/number-input";
17
17
import SelectMenu from "@/components/inputs/select-menu";
18
18
import Switch from "@/components/inputs/switch";
19
+
import TextInput from "@/components/inputs/text-input";
19
20
import { ScreenMessage } from "@/components/screen-message";
20
21
import { cacheOptions, getData } from "@/lib/api";
21
22
import SadWumpusPic from "@/public/sad-wumpus.gif";
···
208
209
onSave={(o) => edit("emoji", o.value as string)}
209
210
/>
210
211
</div>
211
-
212
212
<div className="lg:w-1/2">
213
213
<SelectMenu
214
214
name="Profile display style"
···
269
269
max={500}
270
270
disabled={!data.enabled}
271
271
onSave={(o) => edit("blacklistChannelIds", o.map(({ value }) => value as string))}
272
+
/>
273
+
</div>
274
+
</div>
275
+
276
+
<div className="lg:flex gap-3">
277
+
<div className="w-1/2">
278
+
<TextInput
279
+
name="Color"
280
+
url={url}
281
+
dataName="embedColor"
282
+
description="Color used for the side of the embed."
283
+
type="color"
284
+
defaultState={data.embedColor ?? 0}
285
+
onSave={(o) => edit("embedColor", o as number)}
272
286
/>
273
287
</div>
274
288
</div>
+80
-89
app/profile/rank/page.tsx
+80
-89
app/profile/rank/page.tsx
···
15
15
16
16
if (user?.id && !user.extended) return <></>;
17
17
18
-
return (
19
-
<div>
18
+
return (<>
19
+
<div className="lg:flex gap-3">
20
+
<div className="lg:w-1/2">
21
+
<SelectInput
22
+
name="Secondary text"
23
+
url="/users/@me/rank"
24
+
dataName="subText.type"
25
+
description="This text will be displayed bellow the /rank progressbar."
26
+
items={[
27
+
{
28
+
name: "None",
29
+
value: 0
30
+
},
31
+
{
32
+
name: "ETA to next milestone reach date",
33
+
value: 1
34
+
},
35
+
{
36
+
name: "ETA to next milestone reach relative date",
37
+
value: 2
38
+
},
39
+
{
40
+
name: "Custom text",
41
+
value: 3,
42
+
error: "Not done yet"
43
+
}
44
+
]}
45
+
defaultState={user?.extended?.rank?.subText?.type}
46
+
onSave={(options) => {
47
+
userStore.setState(deepMerge<User>(user, { extended: { rank: { subText: { type: Number(options.value) as 0 | 1 | 2 | 3 } } } }));
48
+
}}
49
+
/>
50
+
</div>
20
51
21
-
<div className="lg:flex gap-3">
22
-
<div className="lg:w-1/2">
23
-
<SelectInput
24
-
name="Secondary text"
52
+
<div className="lg:w-1/2 flex gap-2 w-full">
53
+
<div className="w-1/2">
54
+
<TextInput
55
+
name="Text color"
25
56
url="/users/@me/rank"
26
-
dataName="subText.type"
27
-
description="This text will be displayed bellow the /rank progressbar."
28
-
items={[
29
-
{
30
-
name: "None",
31
-
value: 0
32
-
},
33
-
{
34
-
name: "ETA to next milestone reach date",
35
-
value: 1
36
-
},
37
-
{
38
-
name: "ETA to next milestone reach relative date",
39
-
value: 2
40
-
},
41
-
{
42
-
name: "Custom text",
43
-
value: 3,
44
-
error: "Not done yet"
45
-
}
46
-
]}
47
-
defaultState={user?.extended?.rank?.subText?.type}
48
-
onSave={(options) => {
49
-
userStore.setState(deepMerge<User>(user, { extended: { rank: { subText: { type: Number(options.value) as 0 | 1 | 2 | 3 } } } }));
57
+
dataName="textColor"
58
+
description="Color used for your username."
59
+
type="color"
60
+
defaultState={user?.extended?.rank?.textColor ?? 0}
61
+
onSave={(value) => {
62
+
userStore.setState(deepMerge<User>(user, { extended: { rank: { textColor: Number(value) } } }));
50
63
}}
51
64
/>
52
65
</div>
53
-
54
-
<div className="lg:w-1/2 flex gap-2 w-full">
55
-
56
-
<div className="w-1/2">
57
-
<TextInput
58
-
key="textColor"
59
-
name="Text color"
60
-
url="/users/@me/rank"
61
-
dataName="textColor"
62
-
description="Color used for your username."
63
-
type="color"
64
-
defaultState={user?.extended?.rank?.textColor ?? 0}
65
-
onSave={(value) => {
66
-
userStore.setState(deepMerge<User>(user, { extended: { rank: { textColor: Number(value) } } }));
67
-
}}
68
-
/>
69
-
</div>
70
-
71
-
<div className="w-1/2">
72
-
<TextInput
73
-
key="barColor"
74
-
name="Bar color"
75
-
url="/users/@me/rank"
76
-
dataName="barColor"
77
-
description="Color used for the progress bar."
78
-
type="color"
79
-
defaultState={user?.extended?.rank?.barColor ?? 0}
80
-
onSave={(value) => {
81
-
userStore.setState(deepMerge<User>(user, { extended: { rank: { barColor: Number(value) } } }));
82
-
}}
83
-
/>
84
-
</div>
85
-
66
+
<div className="w-1/2">
67
+
<TextInput
68
+
name="Bar color"
69
+
url="/users/@me/rank"
70
+
dataName="barColor"
71
+
description="Color used for the progress bar."
72
+
type="color"
73
+
defaultState={user?.extended?.rank?.barColor ?? 0}
74
+
onSave={(value) => {
75
+
userStore.setState(deepMerge<User>(user, { extended: { rank: { barColor: Number(value) } } }));
76
+
}}
77
+
/>
86
78
</div>
87
79
</div>
88
-
89
-
<ImageUrlInput
90
-
name="Background"
91
-
url="/users/@me/rank"
92
-
ratio="aspect-[4/1]"
93
-
dataName="background"
94
-
description="Enter a url which should be the background of your /rank card. The recomended image ration is 4:1 and recommended resolution 1024x256px."
95
-
defaultState={user?.extended?.rank?.background || ""}
96
-
onSave={(value) => {
97
-
userStore.setState(deepMerge<User>(user, { extended: { rank: { background: value } } }));
98
-
}}
99
-
/>
80
+
</div>
100
81
101
-
<Section
102
-
title="/leaderboard style"
103
-
>
104
-
Choose how your personal /leaderboard should look like.
105
-
</Section>
82
+
<ImageUrlInput
83
+
name="Background"
84
+
url="/users/@me/rank"
85
+
ratio="aspect-[4/1]"
86
+
dataName="background"
87
+
description="Enter a url which should be the background of your /rank card. The recomended image ration is 4:1 and recommended resolution 1024x256px."
88
+
defaultState={user?.extended?.rank?.background || ""}
89
+
onSave={(value) => {
90
+
userStore.setState(deepMerge<User>(user, { extended: { rank: { background: value } } }));
91
+
}}
92
+
/>
106
93
107
-
<LeaderboardStyle />
94
+
<Section
95
+
title="/leaderboard style"
96
+
>
97
+
Choose how your personal /leaderboard should look like.
98
+
</Section>
108
99
109
-
<Section
110
-
title="Web leaderboard card style"
111
-
>
112
-
Customize your card for web leaderboards.
113
-
</Section>
100
+
<LeaderboardStyle />
114
101
115
-
<CardSyle />
102
+
<Section
103
+
title="Web leaderboard card style"
104
+
>
105
+
Customize your card for web leaderboards.
106
+
</Section>
116
107
117
-
</div>
118
-
);
108
+
<CardSyle />
109
+
</>);
119
110
}
+3
public/docs/starboard.md
+3
public/docs/starboard.md
···
51
51
- Guild Nickname & Per-Guild Avatar (`Luna`)
52
52
- Anonymous (removes the username & avatar)
53
53
54
+
### ⭐ Custom color
55
+
Select any RGB color for the message embed.
56
+
54
57
### 🤚 Blacklist roles
55
58
Specify roles that are restricted from starring other people's messages and prevent their own messages from appearing on the starboard.
56
59