Merge pull request #42 from AkinariHex/nextjs

Leaderboard page major fixes
osu-tournament-rating · Jan 14, 2024 · ba509c2 · ba509c2
2 parents 18e5fdb + d3f4d2c
commit ba509c2
Show file tree

Hide file tree

Showing 10 changed files with 53 additions and 44 deletions.
diff --git a/app/actions.ts b/app/actions.ts
@@ -183,8 +183,6 @@ export async function resetLeaderboardFilters(string: string) {
 }
 
 export async function applyLeaderboardFilters(params: {}) {
-  /* const { type, rank, rating, matches, winrate, inclTier, exclTier } = params; */
-
   let urlStringObject = {};
 
   Object.keys(params).forEach((key) => {
@@ -200,7 +198,6 @@ export async function applyLeaderboardFilters(params: {}) {
       let string = '';
 
       params[key].forEach((value, index) => {
-        console.log(value);
         string += `${value}${index === 0 ? `&${key}=` : ''}`;
       });
 
@@ -417,8 +414,6 @@ export async function fetchDashboard() {
 export async function paginationParamsToURL(params: {}) {
   let url = '';
 
-  console.log(params);
-
   if (Object.keys(params).length > 0) {
     Object.keys(params).forEach((key, index) => {
       if (key === 'page') return;
@@ -427,20 +422,16 @@ export async function paginationParamsToURL(params: {}) {
         let string = `${index !== 0 ? '&' : ''}${key}=`;
 
         params[key].forEach((value, index) => {
-          console.log(value);
           string += `${value}${index === 0 ? `&${key}=` : ''}`;
         });
 
-        return (url += `${string}${
-          index === Object.keys(params).length - 1 ? '&' : ''
-        }`);
+        return (url += `${string}`);
       }
 
       return (url += `${index !== 0 ? '&' : ''}${key}=${params[key]}${
         index === Object.keys(params).length - 1 ? '&' : ''
       }`);
     });
-    console.log(url);
   }
 
   return url;

diff --git a/components/Collapsible/FiltersCollapsible/FiltersCollapsible.module.css b/components/Collapsible/FiltersCollapsible/FiltersCollapsible.module.css
@@ -23,7 +23,14 @@
   flex-grow: 1;
 }
 
-.filter h2 {
+.filterName {
+  display: flex;
+  flex-flow: row;
+  gap: 0 0.5rem;
+}
+
+.filter h2,
+.filterName {
   font-weight: 600;
   font-size: 1.8rem;
 }

diff --git a/components/Collapsible/FiltersCollapsible/FiltersCollapsible.tsx b/components/Collapsible/FiltersCollapsible/FiltersCollapsible.tsx
@@ -3,6 +3,7 @@ import {
   applyLeaderboardFilters,
   resetLeaderboardFilters,
 } from '@/app/actions';
+import InfoIcon from '@/components/Form/InfoIcon/InfoIcon';
 import RangeSlider from '@/components/Range/RangeSlider';
 import TierSelector from '@/components/TierSelector/TierSelector';
 import { AnimatePresence, motion } from 'framer-motion';
@@ -30,18 +31,6 @@ export default function FiltersCollapsible({
     return resetLeaderboardFilters(string);
   };
 
-  /*  useEffect(() => {
-    setParamsToPush({
-      ...params,
-      inclTier: inclTier != null ? inclTier.split(',') : [],
-      exclTier: exclTier != null ? exclTier.split(',') : [],
-      rank: rank != null ? rank.split(',') : [],
-      rating: rating != null ? rating.split(',') : [],
-      matches: matches != null ? matches.split(',') : [],
-      winrate: winrate != null ? winrate.split(',') : [],
-    });
-  }, [params]); */
-
   useEffect(() => {
     setParamsToPush({
       ...params,
@@ -117,7 +106,14 @@ export default function FiltersCollapsible({
         >
           <motion.div variants={collapsibleContent} className={styles.filters}>
             <motion.div className={styles.filter}>
-              <h2>Rank</h2>
+              <div className={styles.filterName}>
+                <h2>Rank</h2>
+                <InfoIcon
+                  infoText="Filter by the last-known osu! rank of the player"
+                  positionBottom={true}
+                  startLeft={true}
+                />
+              </div>
               <RangeSlider
                 name={'rank'}
                 max={data.maxRank}

diff --git a/components/Dashboard/UserMainCard/UserMainCard.tsx b/components/Dashboard/UserMainCard/UserMainCard.tsx
@@ -12,8 +12,8 @@ export default function UserMainCard({ data }: { data: {} }) {
       <div className={styles.tierImageContainer}>
         <div className={styles.tierImage}>
           <Image
-            src={'http://s.ppy.sh/a/4001304'}
-            alt={"Player's propic"}
+            src={`http://s.ppy.sh/a/${data.playerId}`}
+            alt={"Player's Tier"}
             fill
           />
         </div>

diff --git a/components/Form/InfoIcon/InfoIcon.module.css b/components/Form/InfoIcon/InfoIcon.module.css
@@ -1,9 +1,4 @@
 .infoIcon {
-  /* position: absolute;
-  right: 1rem;
-  height: 100%;
-  width: 100%; 
-  aspect-ratio: 1; */
   position: relative;
   cursor: pointer;
 }
@@ -32,6 +27,17 @@
   visibility: hidden;
   opacity: 0;
   transition: opacity 0.2s ease-out;
+  z-index: 2;
+}
+
+.tooltip.positionBottom {
+  bottom: inherit;
+  top: 2.2rem;
+}
+
+.tooltip.startLeft {
+  left: -1rem;
+  right: inherit;
 }
 
 .infoIcon:hover > .tooltip {

diff --git a/components/Form/InfoIcon/InfoIcon.tsx b/components/Form/InfoIcon/InfoIcon.tsx
@@ -1,22 +1,32 @@
 'use client';
-/* import icon from '@/public/icons/info-icon.svg';
-import Image from 'next/image'; */
 import { faQuestion } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import clsx from 'clsx';
 import styles from './InfoIcon.module.css';
 
 export default function InfoIcon({
   infoText,
+  positionBottom,
+  startLeft,
   children,
 }: {
   infoText?: string;
+  positionBottom?: boolean;
+  startLeft?: boolean;
   children?: React.ReactNode;
 }) {
   return (
     <div className={styles.infoIcon}>
       <FontAwesomeIcon icon={faQuestion} />
-      {/* <Image src={icon} alt="Info" fill /> */}
-      <div className={styles.tooltip}>{infoText || children}</div>
+      <div
+        className={clsx(
+          styles.tooltip,
+          positionBottom === true ? styles.positionBottom : '',
+          startLeft === true ? styles.startLeft : ''
+        )}
+      >
+        {infoText || children}
+      </div>
     </div>
   );
 }
diff --git a/components/Pagination/Pagination.tsx b/components/Pagination/Pagination.tsx
@@ -37,7 +37,7 @@ export default function Pagination({
   const onPageChange = async (number: number) => {
     let url = await paginationParamsToURL(params);
 
-    router.push(`/leaderboards?${url}page=${number}#leaderboard`, {
+    router.push(`/leaderboards?${url}&page=${number}#leaderboard`, {
       scroll: true,
     });
 
@@ -53,7 +53,7 @@ export default function Pagination({
   const onNext = async () => {
     if (currentPage < parseInt(lastPage)) {
       let url = await paginationParamsToURL(params);
-      router.push(`/leaderboards?${url}page=${currentPage + 1}#leaderboard`, {
+      router.push(`/leaderboards?${url}&page=${currentPage + 1}#leaderboard`, {
         scroll: true,
       });
     }
@@ -62,7 +62,7 @@ export default function Pagination({
   const onPrevious = async () => {
     if (currentPage > 1) {
       let url = await paginationParamsToURL(params);
-      router.push(`/leaderboards?${url}page=${currentPage - 1}#leaderboard`, {
+      router.push(`/leaderboards?${url}&page=${currentPage - 1}#leaderboard`, {
         scroll: true,
       });
     }

diff --git a/components/Range/RangeSlider.tsx b/components/Range/RangeSlider.tsx
@@ -78,13 +78,13 @@ export default function RangeSlider({
               setParamsToPush((prev: any) => ({
                 ...prev,
                 [name]: [
-                  values[0],
                   Math.max(
                     min - 1,
                     Math.min(values[1], Number(e.target.value))
                   ) < min
                     ? min
                     : Math.min(max, Number(e.target.value)),
+                  values[1],
                 ],
               }));
             }}

diff --git a/components/SubmitMatches/Guidelines/Guidelines.tsx b/components/SubmitMatches/Guidelines/Guidelines.tsx
@@ -6,7 +6,7 @@ export default function Guidelines() {
   return (
     <div className={styles.list}>
       <Card
-        title="Submission F.A.Q."
+        title="Submission Rules"
         description="Please read the following before submitting. Our goal is to include matches that do not stray too far from the competitive norm, it's important that bad data remains out of our system."
       />
       <Card

diff --git a/components/SubmitMatches/MatchForm/MatchForm.tsx b/components/SubmitMatches/MatchForm/MatchForm.tsx
@@ -56,11 +56,10 @@ export default function MatchForm({ userRoles }: { userRoles: Array<string> }) {
         <Form action={formAction}>
           <div className={styles.section}>
             <div className={styles.header}>
-              <h1>Tournament</h1>
+              <h1>Tournament Submission</h1>
               <p>
-                We’re currently prioritizing badged tournaments, but you can
-                submit an unbadged tournament as well as long as it follows the
-                rules.
+                Any tournament, regardless of badge status, may be submitted, so
+                long as it follows our rules.
               </p>
             </div>
             <div className={styles.fields}>