Changes

README.md

@@ -1,4 +1,4 @@
-# HackPortal
+# NTHS HackPortal
 ### _A platform for user-friendly hackathon event management._  
 
 [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)

components/AppHeader.tsx

@@ -103,10 +103,8 @@ export default function AppHeader() {
             className="flex gap-2 ml-[6px] font-display self-center items-center md:ml-0"
           >
             {/* !change src */}
-            <Image alt="HackPortal logo" src={'/assets/hp-logo.png'} width={45} height={35} />
-            <span className="text-lg font-black md:z-0 md:text-3xl text-primaryDark">
-              HackPortal
-            </span>
+            <Image alt="HackPortal logo" src={'/assets/LassoCow1ONLY.png'} width={45} height={35} />
+            <span className="text-lg font-black md:z-0 md:text-3xl text-primaryDark">NTHS26</span>
           </Link>
         </div>
 

components/AppHeader2/FloatingDock/item.tsx

@@ -0,0 +1,45 @@
+import { motion, useSpring, useTransform, useMotionValue } from 'framer-motion';
+import { PropsWithChildren, useEffect } from 'react';
+
+type Props = {
+  className?: string;
+
+  originalHeight: number;
+  originalWidth: number;
+
+  widthScaleFactor: number;
+  distanceMagnify: number;
+  cursorFromCenter: number;
+};
+
+export default function BoxItem(props: PropsWithChildren<Props>) {
+  const minWidth = props.originalWidth;
+  const maxWidth = props.originalWidth + props.originalWidth * props.widthScaleFactor;
+
+  const cursorMotionValue = useMotionValue(props.cursorFromCenter);
+
+  useEffect(() => {
+    cursorMotionValue.set(props.cursorFromCenter);
+  }, [props.cursorFromCenter, cursorMotionValue]);
+
+  const widthSync = useTransform(
+    cursorMotionValue,
+    [-props.distanceMagnify, 0, props.distanceMagnify],
+    [minWidth, maxWidth, minWidth],
+  );
+
+  const width = useSpring(widthSync, {
+    mass: 0.1,
+    stiffness: 150,
+    damping: 12,
+  });
+
+  return (
+    <motion.div
+      style={{ width, height: props.originalHeight }}
+      className={props.className ?? 'shrink-0 flex justify-center items-center min-h-fit min-w-fit'}
+    >
+      {props.children}
+    </motion.div>
+  );
+}

components/AppHeader2/FloatingDock/wrapper.tsx

@@ -0,0 +1,107 @@
+import { useEffect, useRef, useState } from 'react';
+import FloatingDockItem from './item';
+
+type Props = {
+  items: JSX.Element[];
+
+  settings?: {
+    widthScaleFactor?: number;
+    distanceMagnify?: number;
+  };
+
+  classes?: {
+    wrapperDiv?: string;
+    itemDiv?: string;
+  };
+};
+
+export default function FloatingDockWrapper(props: Props) {
+  const originalWidths = props.items.map((item) => {
+    const el = item.props?.id ? document.getElementById(item.props.id) : null;
+    return el?.getBoundingClientRect().width ?? 0;
+  });
+
+  const originalHeights = props.items.map((item) => {
+    const el = item.props?.id ? document.getElementById(item.props.id) : null;
+    return el?.getBoundingClientRect().height ?? 0;
+  });
+
+  // in pixels
+  const widthScaleFactor = props.settings?.widthScaleFactor ?? 0.25;
+  const distanceMagnify = props.settings?.distanceMagnify ?? 140;
+
+  const boxRef = useRef<HTMLDivElement>(null);
+
+  // distance of cursor from center of each item
+  const [cursorFromCenters, setCursorFromCenters] = useState<number[]>(
+    Array(props.items.length).fill(distanceMagnify),
+  );
+
+  useEffect(() => {
+    const box = boxRef.current;
+
+    if (!box) {
+      return;
+    }
+
+    // Get children ---
+
+    const children: (Element | null)[] = [];
+    for (let i = 0; i < box.children.length; ++i) {
+      children.push(box.children.item(i));
+    }
+
+    // Handle mouse move ---
+
+    const handleMouseMove = (e: MouseEvent) => {
+      if (checkWithinRange(box, e.clientX, e.clientY)) {
+        const newDiffs = [...cursorFromCenters];
+        for (let i = 0; i < children.length; ++i) {
+          const child = children[i];
+          if (child && child instanceof HTMLElement) {
+            const el = child as HTMLElement;
+            const rect = el.getBoundingClientRect();
+            const center = rect.x + rect.width / 2;
+            const diff = e.clientX - center;
+            newDiffs[i] = diff;
+          }
+        }
+        setCursorFromCenters(newDiffs);
+      } else {
+        setCursorFromCenters(Array(props.items.length).fill(distanceMagnify));
+      }
+    };
+
+    window.addEventListener('mousemove', handleMouseMove);
+
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove);
+    };
+  }, [boxRef, cursorFromCenters, distanceMagnify, props.items]);
+
+  const checkWithinRange = (box: HTMLElement, mouseX: number, mouseY: number) => {
+    const { x, y, width, height } = box.getBoundingClientRect();
+    return mouseX >= x && mouseX <= x + width && mouseY >= y && mouseY <= y + height;
+  };
+
+  return (
+    <div
+      ref={boxRef}
+      className={props.classes?.wrapperDiv ?? 'gap-4 flex justify-center items-center flex-wrap'}
+    >
+      {props.items.map((item, i) => (
+        <FloatingDockItem
+          key={i}
+          className={props.classes?.itemDiv}
+          originalHeight={originalHeights[i]}
+          originalWidth={originalWidths[i]}
+          widthScaleFactor={widthScaleFactor}
+          distanceMagnify={distanceMagnify}
+          cursorFromCenter={cursorFromCenters[i]}
+        >
+          {item}
+        </FloatingDockItem>
+      ))}
+    </div>
+  );
+}

components/AppHeader2/QRScanDialog.tsx

@@ -4,6 +4,7 @@ import { useAuthContext } from '@/lib/user/AuthContext';
 import { RequestHelper } from '@/lib/request-helper';
 import QRCodeReaderV2 from './QRCodeReaderV2';
 import QrScanner from 'qr-scanner';
+import QRCodeReader from '../dashboardComponents/QRCodeReader';
 
 interface QRScanDialogProps {
   scan: {
@@ -24,6 +25,7 @@ const successStrings = {
   unexpectedError: 'Unexpected error...',
   notCheckedIn: "User hasn't checked in!",
   invalidFormat: 'Invalid hacker tag format...',
+  lateCheckinIneligible: 'User is not eligible for late check-in...',
 };
 
 interface UserProfile extends Omit<Registration, 'user'> {
@@ -46,18 +48,21 @@ function getSuccessColor(success: string) {
 export default function QRScanDialog({ scan, onModalClose }: QRScanDialogProps) {
   const [scanData, setScanData] = useState(undefined);
   const [success, setSuccess] = useState(undefined);
+  const [userScanned, setUserScanned] = useState(false);
   const { user } = useAuthContext();
   const [scannedUserInfo, setScannedUserInfo] = useState(undefined);
 
   const handleScan = async (data: string) => {
+    if (userScanned) return;
     if (!data.startsWith('hack:')) {
       setScanData(data);
       setSuccess(successStrings.invalidFormat);
       return;
     }
+    setUserScanned(true);
     const query = new URL(`http://localhost:3000/api/scan`);
     query.searchParams.append('id', data.replaceAll('hack:', ''));
-    fetch(query.toString().replaceAll('http://localhost:3000', ''), {
+    await fetch(query.toString().replaceAll('http://localhost:3000', ''), {
       mode: 'cors',
       headers: { Authorization: user.token },
       method: 'POST',
@@ -81,6 +86,8 @@ export default function QRScanDialog({ scan, onModalClose }: QRScanDialogProps)
           return setSuccess(successStrings.alreadyClaimed);
         } else if (result.status === 403) {
           return setSuccess(successStrings.notCheckedIn);
+        } else if (result.status === 400) {
+          return setSuccess(successStrings.lateCheckinIneligible);
         } else if (result.status !== 200) {
           return setSuccess(successStrings.unexpectedError);
         }
@@ -99,7 +106,7 @@ export default function QRScanDialog({ scan, onModalClose }: QRScanDialogProps)
 
   return (
     <Transition appear show={scan !== null} as={Fragment}>
-      <Dialog as="div" className="relative z-10" onClose={onModalClose}>
+      <Dialog as="div" className="relative z-50" onClose={onModalClose}>
         <Transition.Child
           as={Fragment}
           enter="ease-out duration-300"
@@ -144,12 +151,7 @@ export default function QRScanDialog({ scan, onModalClose }: QRScanDialogProps)
                     </div>
                   ) : (
                     <div className="p-3">
-                      <QRCodeReaderV2
-                        onScanFail={(err: string | Error) => console.error(err)}
-                        onScanSuccess={async (scanResult: QrScanner.ScanResult) => {
-                          await handleScan(scanResult.data);
-                        }}
-                      />
+                      <QRCodeReader width={200} height={200} callback={handleScan} />
                     </div>
                   )}
                 </div>
@@ -158,7 +160,10 @@ export default function QRScanDialog({ scan, onModalClose }: QRScanDialogProps)
                   <button
                     type="button"
                     className="inline-flex justify-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
-                    onClick={() => setScanData(undefined)}
+                    onClick={() => {
+                      setScanData(undefined);
+                      setUserScanned(false);
+                    }}
                   >
                     Next Scan
                   </button>
@@ -167,6 +172,7 @@ export default function QRScanDialog({ scan, onModalClose }: QRScanDialogProps)
                     className="inline-flex justify-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
                     onClick={() => {
                       setScanData(undefined);
+                      setUserScanned(false);
                       onModalClose();
                     }}
                   >