Skip to content

Commit 9778247

Browse files
cysabicysabi
committed
add "leaderboard" scene
1 parent 682a212 commit 9778247

File tree

1 file changed

+62
-91
lines changed

1 file changed

+62
-91
lines changed

‎src/break.jsx

+62-91
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@ const Main = () => {
7171
const teams = useCurrentTeams()
7272
const scores = useCurrentScores()
7373
const mapWinners = useCurrentMapWinners()
74+
const data = useLeaderboard()
7475

7576
return (
7677
<div className="absolute inset-0 text-white flex flex-col items-center justify-evenly z-10">
@@ -111,7 +112,7 @@ const Main = () => {
111112
initial="hidden"
112113
animate="show"
113114
exit="hidden"
114-
className="flex items-center justify-center h-[36rem] gap-8 p-12"
115+
className="flex items-center justify-center h-[36rem] w-full gap-8 p-12"
115116
>
116117
{screen === "maplist" &&
117118
round.value.map((game, i) => (
@@ -149,7 +150,7 @@ const Main = () => {
149150
<>
150151
<Section
151152
className={clsx(
152-
"flex-1 h-full !w-[36rem] flex flex-col justify-between text-4xl",
153+
"flex-1 h-full max-w-xl w-full flex flex-col justify-between text-4xl",
153154
"items-start"
154155
)}
155156
>
@@ -165,7 +166,7 @@ const Main = () => {
165166
</motion.div>
166167
<Section
167168
className={clsx(
168-
"flex-1 h-full !w-[36rem] flex flex-col justify-between text-4xl",
169+
"flex-1 h-full max-w-xl w-full flex flex-col justify-between text-4xl",
169170
"items-end"
170171
)}
171172
>
@@ -175,6 +176,41 @@ const Main = () => {
175176
</Section>
176177
</>
177178
)}
179+
{screen === "leaderboard" && data && (
180+
<>
181+
<Section
182+
className={clsx(
183+
"flex-1 h-full max-w-2xl flex flex-col justify-between text-4xl"
184+
)}
185+
>
186+
{data.slice(0, 5).map((v, i) => (
187+
<Row
188+
placement={i + 1}
189+
key={i}
190+
weapons={v.weapons}
191+
name={v.splashtag}
192+
points={v.points}
193+
/>
194+
))}
195+
</Section>
196+
<span />
197+
<Section
198+
className={clsx(
199+
"flex-1 h-full max-w-2xl flex flex-col justify-between text-4xl"
200+
)}
201+
>
202+
{data.slice(5, 10).map((v, i) => (
203+
<Row
204+
placement={i + 6}
205+
key={i}
206+
weapons={v.weapons}
207+
name={v.splashtag}
208+
points={v.points}
209+
/>
210+
))}
211+
</Section>
212+
</>
213+
)}
178214
</motion.div>
179215
)}
180216
<AnimatePresence mode="popLayout">
@@ -490,80 +526,11 @@ const Commentator = ({ left, right, comm }) => (
490526
</div>
491527
)
492528

493-
const LeaderboardSection = () => {
494-
const data = useLeaderboard()
495-
if (data === undefined) {
496-
return (
497-
<div className="w-full flex flex-col gap-3 animate-pulse">
498-
{Array.from({ length: 9 }).map((v, i) => (
499-
<div key={i} style={{ opacity: `calc(100% - ${(i + 1) * 10}%)` }}>
500-
<Row name={`\u200B`} />
501-
</div>
502-
))}
503-
</div>
504-
)
505-
}
506-
if (data?.message) {
507-
return (
508-
<div className="w-full flex flex-col gap-3">
509-
<div className="max-w-2xl w-full rounded-lg p-5 mx-auto text-xl text-center text-red-400 bg-red-400/20">
510-
Something went wrong, try again later.
511-
</div>
512-
</div>
513-
)
514-
}
515-
516-
if (data.length === 0) {
517-
return (
518-
<div className="w-full flex flex-col gap-3">
519-
<Row
520-
name={
521-
<div className="text-center w-full text-3xl overflow-auto whitespace-normal">
522-
Qualifiers have not begun yet, so standings are not avaliable.
523-
Check back soon!
524-
</div>
525-
}
526-
/>
527-
{Array.from({ length: 5 }).map((v, i) => (
528-
<div key={i} style={{ opacity: `calc(100% - ${(i + 1) * 10}%)` }}>
529-
<Row name={`\u200B`} />
530-
</div>
531-
))}
532-
</div>
533-
)
534-
}
529+
const Row = ({ placement, name, weapons, points }) => {
535530
return (
536-
<div className="w-full flex flex-col gap-3">
537-
{data.map((v, i) => (
538-
<Row
539-
placement={i + 1}
540-
key={i}
541-
name={
542-
<div className="flex items-center gap-3">
543-
<span>{v.splashtag}</span>
544-
<div className="flex items-center gap-2">
545-
{v.weapons.map((weapon) => (
546-
<img
547-
key={weapon.id}
548-
src={`https://raw.githubusercontent.com/Sendouc/sendou.ink/rewrite/public/static-assets/img/main-weapons-outlined/${weapon.id}.png`}
549-
className="h-7 w-7 sm:h-8 sm:w-8"
550-
/>
551-
))}
552-
</div>
553-
</div>
554-
}
555-
points={v.points}
556-
/>
557-
))}
558-
</div>
559-
)
560-
}
561-
562-
const Row = ({ placement, name, points }) => (
563-
<Section className="!p-4 flex items-center text-3xl sm:text-2xl max-w-3xl mx-auto w-full">
564-
{placement && (
531+
<div className="flex gap-8 items-center text-4xl max-w-3xl mx-auto w-full justify-between">
565532
<div
566-
className={`shrink-0 pr-4 sm:pr-0 sm:w-16 sm:text-center font-black text-fabl-indigo-light ${
533+
className={`shrink-0 font-mono text-center text-4xl font-black text-fabl-indigo-light ${
567534
placement <= 1
568535
? "!text-fabl-gold"
569536
: placement <= 3
@@ -573,23 +540,25 @@ const Row = ({ placement, name, points }) => (
573540
>
574541
{placement}
575542
</div>
576-
)}
577-
<div
578-
className={`flex-1 text-xl gap-4 rounded-md font-medium overflow-hidden py-3 px-4 flex items-center justify-between ${
579-
placement % 2 === 0 ? "bg-fabl-indigo-darker" : "bg-fabl-indigo-darker"
580-
}`}
581-
>
582-
<div className="flex-1">{name}</div>
583-
{points && (
584-
<div className="font-mono shrink-0">
585-
<span className="font-bold">{points}</span>{" "}
586-
<span className="hidden sm:inline">points</span>
543+
<div className="flex-1 truncate flex items-center gap-3">
544+
<span>{name}</span>
545+
<div className="flex shrink-0 items-center gap-1">
546+
{weapons.map((weapon) => (
547+
<img
548+
key={weapon.id}
549+
src={`https://raw.githubusercontent.com/Sendouc/sendou.ink/rewrite/public/static-assets/img/main-weapons-outlined/${weapon.id}.png`}
550+
className="h-12 shrink-0"
551+
/>
552+
))}
587553
</div>
588-
)}
554+
</div>
555+
<span className="font-bold font-mono">
556+
{Object.values(points).reduce((a, b) => a + b, 0)}
557+
<span className="font-sans">p</span>
558+
</span>
589559
</div>
590-
{placement && <div className="sm:w-16"></div>}
591-
</Section>
592-
)
560+
)
561+
}
593562

594563
const useLeaderboard = () => {
595564
const [data, setData] = useState()
@@ -598,7 +567,9 @@ const useLeaderboard = () => {
598567
fetch(
599568
"https://us-central1-off-the-dial-26e93.cloudfunctions.net/fabl-standings"
600569
)
601-
.then((res) => res.json())
570+
.then((res) => {
571+
if (res.ok) return res.json()
572+
})
602573
.then((data) => setData(data))
603574
}, [])
604575

0 commit comments

Comments
 (0)