The weeb for the next gen discord boat - Wamellow
wamellow.com
bot
discord
add change leaderboard style
+95
-8
+4
-4
app/dashboard/page.tsx
+4
-4
app/dashboard/page.tsx
···
126
126
opacity: 1,
127
127
scale: 1,
128
128
transition: {
129
-
delayChildren: 0.3,
130
-
staggerChildren: 0.2
129
+
delayChildren: guilds.length > 20 ? 0.2 : 0.3,
130
+
staggerChildren: guilds.length > 20 ? 0.1 : 0.2
131
131
}
132
132
}
133
133
}}
···
159
159
opacity: 1,
160
160
transition: {
161
161
type: "spring",
162
-
bounce: 0.4,
163
-
duration: 0.7
162
+
bounce: guilds.length > 20 ? 0.2 : 0.4,
163
+
duration: guilds.length > 20 ? 0.35 : 0.7
164
164
}
165
165
}
166
166
}}
+90
-4
app/profile/rank/page.tsx
+90
-4
app/profile/rank/page.tsx
···
1
1
"use client";
2
+
import { useState } from "react";
3
+
2
4
import { User, userStore } from "@/common/user";
3
5
import ErrorBanner from "@/components/Error";
4
6
import ImageUrlInput from "@/components/inputs/ImageUrlInput";
···
9
11
export default function Home() {
10
12
const user = userStore((s) => s);
11
13
14
+
const [is, up] = useState(false);
15
+
12
16
if (user?.id && user.extended === undefined) return <ErrorBanner message={"Error while fetching user"} />;
13
17
14
18
return (
···
17
21
<div className="lg:flex gap-3">
18
22
<div className="lg:w-1/2">
19
23
<SelectInput
20
-
name="Secondary Text"
24
+
name="Secondary text"
21
25
url="/users/@me/rank"
22
26
dataName="subText.type"
23
27
description="This text will be displayed bellow the /rank progressbar."
···
53
57
<div className="w-1/2">
54
58
<TextInput
55
59
key="textColor"
56
-
name="Text Color"
60
+
name="Text color"
57
61
url="/users/@me/rank"
58
62
dataName="textColor"
59
63
description="Color used for your username."
···
69
73
<div className="w-1/2">
70
74
<TextInput
71
75
key="barColor"
72
-
name="Bar Color"
76
+
name="Bar color"
73
77
url="/users/@me/rank"
74
78
dataName="barColor"
75
79
description="Color used for the progress bar."
···
98
102
}}
99
103
/>
100
104
101
-
</div>
105
+
<div className="text-lg dark:text-neutral-300 text-neutral-700 font-medium mb-1 mt-3">Leaderboard syle</div>
106
+
107
+
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 ">
108
+
109
+
<button
110
+
className="w-full"
111
+
onClick={() => {
112
+
if (user?.extended?.rank?.useLeaderboardList === false) return;
113
+
114
+
fetch(`${process.env.NEXT_PUBLIC_API}/users/@me/rank`, {
115
+
method: "PATCH",
116
+
headers: {
117
+
"Content-Type": "application/json",
118
+
authorization: localStorage.getItem("token") as string
119
+
},
120
+
body: JSON.stringify({ useLeaderboardList: false })
121
+
})
122
+
.then(async (res) => {
123
+
const response = await res.json();
124
+
if (!response) return;
125
+
126
+
switch (res.status) {
127
+
case 200: {
128
+
userStore.setState(deepMerge<User>(user, { extended: { rank: { useLeaderboardList: false } } }));
129
+
up(!is);
130
+
break;
131
+
}
132
+
}
133
+
134
+
});
135
+
}}
136
+
>
137
+
<div className={`border-2 ${user?.extended?.rank?.useLeaderboardList ? "dark:border-neutral-700 hover:border-neutral-500 border-neutral-300 " : "dark:border-violet-400/60 dark:hover:border-violet-400 border-violet-600/60 hover:border-violet-600"} duration-200 rounded-md group p-6 mt-1 grid grid-rows-5 grid-cols-2 gap-3`}>
138
+
{new Array(10).fill("").map((_, i) =>
139
+
<div key={i} className="flex gap-2">
140
+
<div className={`${user?.extended?.rank?.useLeaderboardList ? "dark:bg-neutral-700/90 dark:group-hover:bg-neutral-400/60 bg-neutral-300 group-hover:bg-neutral-600/60" : "dark:bg-violet-400/50 dark:group-hover:bg-violet-400/70 bg-violet-600/50 group-hover:bg-violet-600/70"} duration-200 h-6 w-6 aspect-square rounded-full`} />
141
+
<div className={`${user?.extended?.rank?.useLeaderboardList ? "dark:bg-neutral-700/80 dark:group-hover:bg-neutral-400/50 bg-neutral-300 group-hover:bg-neutral-600/50" : "dark:bg-violet-400/40 dark:group-hover:bg-violet-400/60 bg-violet-600/40 group-hover:bg-violet-600/60"} duration-200 h-6 rounded-full`} style={{ width: `${30 + ((i % 1.7) + (i % 3) + (i % 2)) * 10}%` }} />
142
+
</div>
143
+
)}
144
+
</div>
145
+
</button>
146
+
147
+
<button
148
+
className="w-full"
149
+
onClick={() => {
150
+
if (user?.extended?.rank?.useLeaderboardList === true) return;
151
+
152
+
fetch(`${process.env.NEXT_PUBLIC_API}/users/@me/rank`, {
153
+
method: "PATCH",
154
+
headers: {
155
+
"Content-Type": "application/json",
156
+
authorization: localStorage.getItem("token") as string
157
+
},
158
+
body: JSON.stringify({ useLeaderboardList: true })
159
+
})
160
+
.then(async (res) => {
161
+
const response = await res.json();
162
+
if (!response) return;
163
+
164
+
switch (res.status) {
165
+
case 200: {
166
+
userStore.setState(deepMerge<User>(user, { extended: { rank: { useLeaderboardList: true } } }));
167
+
up(!is);
168
+
break;
169
+
}
170
+
}
171
+
172
+
});
173
+
}}
174
+
>
175
+
<div className={`border-2 ${!user?.extended?.rank?.useLeaderboardList ? "dark:border-neutral-700 hover:border-neutral-500 border-neutral-300 " : "dark:border-violet-400/60 dark:hover:border-violet-400 border-violet-600/60 hover:border-violet-600"} duration-200 rounded-md p-4 mt-1 flex flex-col gap-2 group`}>
176
+
{new Array(8).fill("").map((_, i) =>
177
+
<div key={i} className="flex gap-2">
178
+
<div className={`${!user?.extended?.rank?.useLeaderboardList ? "dark:bg-neutral-700/90 dark:group-hover:bg-neutral-400/60 bg-neutral-300 group-hover:bg-neutral-600/60" : "dark:bg-violet-400/50 dark:group-hover:bg-violet-400/70 bg-violet-600/50 group-hover:bg-violet-600/70"}duration-200 h-4 w-4 aspect-square rounded-full`} />
179
+
<div className={`${!user?.extended?.rank?.useLeaderboardList ? "dark:bg-neutral-700/80 dark:group-hover:bg-neutral-400/50 bg-neutral-300 group-hover:bg-neutral-600/50" : "dark:bg-violet-400/40 dark:group-hover:bg-violet-400/60 bg-violet-600/40 group-hover:bg-violet-600/60"} duration-200 h-4 rounded-full`} style={{ width: `${30 + ((i % 1.7) + (i % 3) + (i % 2)) * 10}%` }} />
180
+
</div>
181
+
)}
182
+
</div>
183
+
</button>
184
+
185
+
</div>
186
+
187
+
</div >
102
188
);
103
189
}