Skip to content

Commit fb2dc17

Browse files
Austin2ShihAustin2Shih
authored
Merge pull request #84 from HackDavis/feat/judge-progress
Progress bar finished
2 parents c280ee1 + 0ef1098 commit fb2dc17

File tree

5 files changed

+221
-1
lines changed

5 files changed

+221
-1
lines changed

‎app/(pages)/_hooks/useJudgingProgress.ts

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
'use client';
2+
3+
import { useState, useEffect } from 'react';
4+
import { getManySubmissions } from '@actions/submissions/getSubmission';
5+
6+
export function useJudgingProgress(): any {
7+
const [total, setTotal] = useState<number>(1);
8+
const [finished, setFinished] = useState<number>(0);
9+
const [percent, setPercent] = useState<number>(0);
10+
const [loading, setLoading] = useState<boolean>(true);
11+
12+
useEffect(() => {
13+
const wrapper = async () => {
14+
const submissions = await getManySubmissions();
15+
if (submissions.ok) {
16+
const subs = submissions.body;
17+
const total = subs.length;
18+
const finished = subs.filter((sub: { scores?: number[] }) =>
19+
sub.scores ? true : false
20+
).length;
21+
const percent = Math.round((100 * finished) / total);
22+
setTotal(total);
23+
setFinished(finished);
24+
setPercent(percent);
25+
}
26+
27+
setLoading(false);
28+
};
29+
wrapper();
30+
}, []);
31+
32+
return { total, finished, percent, loading };
33+
}

‎app/(pages)/hackers/_components/JudgingProgress/JudgingProgress.module.scss

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
.container {
2+
display: flex;
3+
flex-direction: column;
4+
padding: 32px 24px 48px 24px;
5+
background-color: #173A52;
6+
7+
>h3 {
8+
font-size: 2rem;
9+
font-weight: 700;
10+
margin-bottom: 8px;
11+
}
12+
13+
>p {
14+
font-size: 1rem;
15+
font-weight: 400;
16+
margin-bottom: 80px;
17+
}
18+
19+
>h3, p {
20+
color: white;
21+
}
22+
}
23+
24+
.progress_container {
25+
width: 100%;
26+
display: flex;
27+
flex-direction: column;
28+
align-items: center;
29+
30+
.flag_duck {
31+
display: flex;
32+
flex-direction: row;
33+
34+
.flag {
35+
display: flex;
36+
flex-direction: row;
37+
transform: translate(8px, -50%);
38+
.pole {
39+
width: 4px;
40+
height: 150%;
41+
border-radius: 11px 11px 0px 0px;
42+
background: #8E6143;
43+
}
44+
45+
.fabric {
46+
display: flex;
47+
padding: 16px 22px;
48+
justify-content: center;
49+
align-items: center;
50+
background: #FFBB4D;
51+
box-shadow: 0px 5.451px 24px 0px rgba(255, 197, 61, 0.16);
52+
}
53+
54+
.percentage {
55+
color: black;
56+
text-align: center;
57+
font-size: 1.25rem;
58+
font-weight: 600;
59+
}
60+
}
61+
}
62+
63+
.progress_box {
64+
display: flex;
65+
width: 100%;
66+
flex-direction: column;
67+
padding: 12px 24px;
68+
align-items: center;
69+
gap: 10px;
70+
background-color: #E5EEF1;
71+
border-radius: 8px;
72+
* {
73+
color: #173A52;
74+
font-size: 1rem;
75+
font-weight: 700;
76+
}
77+
78+
.progress_num_container {
79+
height: 1rem;
80+
width: 100%;
81+
position: relative;
82+
83+
.progress_num {
84+
position: absolute;
85+
top: 0;
86+
bottom: 0;
87+
transform: translateX(-50%);
88+
transition: all 0.5s ease;
89+
}
90+
}
91+
92+
.bar_holder {
93+
height: 12px;
94+
width: 100%;
95+
border-radius: 8px;
96+
background-color: #E0DFD8;
97+
position: relative;
98+
99+
.bar {
100+
position: absolute;
101+
top: 0;
102+
bottom: 0;
103+
left: 0;
104+
border-radius: 8px;
105+
background-color: #FFC53D;
106+
transition: all 0.5s ease;
107+
}
108+
}
109+
110+
.scale_nums {
111+
display: flex;
112+
width: 100%;
113+
flex-direction: row;
114+
justify-content: space-between;
115+
}
116+
}
117+
}

‎app/(pages)/hackers/_components/JudgingProgress/JudgingProgress.tsx

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
'use client';
2+
import Image from 'next/image';
3+
4+
import styles from './JudgingProgress.module.scss';
5+
import duck from '/public/hackers/flag_duck.svg';
6+
7+
import { useJudgingProgress } from '@hooks/useJudgingProgress';
8+
9+
export default function JudgingProgress() {
10+
const { finished, total, percent } = useJudgingProgress();
11+
return (
12+
<div className={styles.container}>
13+
<h3>Hold on tight...</h3>
14+
<p>
15+
Our HD judges have submitted {finished} out of {total} submissions. Hang
16+
tight we’re almost there!
17+
</p>
18+
<div className={styles.progress_container}>
19+
<div className={styles.flag_duck}>
20+
<div className={styles.flag}>
21+
<div className={styles.fabric}>
22+
<p className={styles.percentage}>{percent}% done!</p>
23+
</div>
24+
<div className={styles.pole} />
25+
</div>
26+
<Image src={duck} alt="Duck holding flag!" />
27+
</div>
28+
<div className={styles.progress_box}>
29+
<div className={styles.progress_num_container}>
30+
<p className={styles.progress_num} style={{ left: `${percent}%` }}>
31+
{finished}
32+
</p>
33+
</div>
34+
<div className={styles.bar_holder}>
35+
<div
36+
className={styles.bar}
37+
style={{ right: `${100 - percent}%` }}
38+
/>
39+
</div>
40+
<div className={styles.scale_nums}>
41+
<p>0</p>
42+
<p>{total}</p>
43+
</div>
44+
</div>
45+
</div>
46+
</div>
47+
);
48+
}

‎app/(pages)/hackers/page.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
import Welcome from './_components/Welcome/Welcome';
2-
import JudgeNotHere from './_components/JudgeNotHere/JudgeNotHere';
32
import Tips from './_components/Tips/Tips';
3+
import JudgingProgress from './_components/JudgingProgress/JudgingProgress';
4+
import JudgeNotHere from './_components/JudgeNotHere/JudgeNotHere';
45
export default function Judging() {
56
return (
67
<main>
78
<Welcome />
89
<Tips />
10+
<JudgingProgress />
911
<JudgeNotHere />
1012
</main>
1113
);

‎public/hackers/flag_duck.svg

Lines changed: 20 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)