Merge pull request #155 from codersforcauses/unifying_art_branches

Unifying art branches

Author: laurenpudz

client/documentation/admin-dashboard/committee.md

@@ -1,6 +1,6 @@
 ## Committee Members
 
-URL: `/admin/game_dev/committee/add/`
+URL: `/admin/game_dev/committee/`
 
 Profiles of the Committee Members of the club that are displayed on the about page `/about`.
 

client/documentation/admin-dashboard/contributors.md

@@ -4,6 +4,7 @@ Models that associate a member object with another certain object as a contribut
 
 ## Game Contributor
 
+URL: `/admin/game_dev/gamecontributor/`
 A model that will associate a certain member with having contributed to a certain game. A Game Contributor object will be represented under the 'Contributors' section of a game's page as the name of the member who contributed.
 
 ## Fields
@@ -18,19 +19,15 @@ A model that will associate a certain member with having contributed to a certai
 
 You will see a little magnifying glass when selecting a Game and Member, click on it to see their respective table and be able choose the integer id's using the desired details. Though none of the individual fields are a primary key, the actual primary key is the unique (Game, Member) pair that each object forms.
 
-
 ## Art Contributor
 
+- This can be found inline inside of an art entry, e.g. `/admin/game_dev/art/1/change/`.
+
 A model that will associate a certain member with having contributed to a certain artwork. An Art Contributor object will be represented under the 'Contributors' section of an artworks's page as the name of the member who contributed.
 
 ## Fields
 
-**Art:** Required field for the artwork that the contributor is for. It is an integer field that corresponds to the raw integer id of an Art object in the Art table, known as a Foreign Key.
-
 **Member:** Required field for the member that is the contributor to the specified artwork. It is an integer field that corresponds to the raw integer id of a Member object in the Member table, known as a Foreign Key.
 
 **Role:** Required character field for the description of the role that the person played in contributing to the artwork. Maximum length of 100 characters
 
-## Other Notes
-
-You will see a little magnifying glass when selecting an Art and a Member, click on it to see their respective table and be able choose the integer id's using the desired details. Though none of the individual fields are a primary key, the actual primary key is the unique (Art, Member) pair that each object forms.

client/next.config.mjs

@@ -1,12 +1,6 @@
-// import os from "node:os";
-// import isInsideContainer from "is-inside-container";
-
-// const isWindowsDevContainer = () =>
-//   os.release().toLowerCase().includes("microsoft") && isInsideContainer();
-
 /** @type {import('next').NextConfig} */
 
-const config = {
+const nextConfig = {
   reactStrictMode: true,
   turbopack: {
     root: import.meta.dirname,
@@ -27,4 +21,4 @@ const config = {
   // : undefined,
 };
 
-export default config;
+export default nextConfig;

client/package-lock.json

@@ -32,6 +32,7 @@
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "react-social-icons": "^6.25.0",
+    "react-use-measure": "^2.1.7",
     "tailwind-merge": "^3.3.1",
     "tailwindcss-animate": "^1.0.7"
   },

client/package.json

@@ -7,7 +7,6 @@ import {
   Home,
   Map,
   Palette,
-  Sparkles,
   Users,
 } from "lucide-react";
 import Image from "next/image";
@@ -120,7 +119,7 @@ export default function Footer() {
                         ease: "easeInOut",
                       }}
                     >
-                      <Sparkles className="h-4 w-4 text-yellow-400" />
+                      <Gamepad2 className="h-5 w-5 text-yellow-400" />
                     </motion.div>
                   </motion.div>
                   <div>

client/public/placeholder-icon.svg

@@ -0,0 +1,116 @@
+import {
+  animate,
+  AnimationPlaybackControls,
+  motion,
+  useMotionValue,
+} from "framer-motion";
+import { useCallback, useEffect, useRef } from "react";
+import useMeasure from "react-use-measure";
+
+import ImageCard from "@/components/ui/ImageCard/ImageCard";
+import { Art } from "@/types/art";
+
+import ImageCardBack from "./ImageCard/ImageCardBack";
+
+const GAP = 16;
+const DURATION = 90;
+
+// modifying this to accept anything with a name, src, and id should be trivial.
+export default function ContinuousCarousel(artworks: Art[], reverse = false) {
+  const [ref, { width }] = useMeasure();
+  const xTranslation = useMotionValue(0);
+
+  const controlsRef = useRef<AnimationPlaybackControls | null>(null);
+
+  const startAnimation = useCallback(
+    (from: number) => {
+      const finalPosition = -(width + GAP) / 3;
+      const rangeSize = -finalPosition;
+
+      controlsRef.current?.stop();
+
+      // Normalize `from` into [finalPosition, 0) so the loop restarts cleanly
+      const normalizedFrom = -(((-from % rangeSize) + rangeSize) % rangeSize);
+      xTranslation.set(normalizedFrom);
+
+      const target = reverse ? 0 : finalPosition;
+      const loopStart = reverse ? finalPosition : 0;
+
+      const startFullLoop = () => {
+        const controls = animate(xTranslation, [loopStart, target], {
+          ease: "linear",
+          duration: DURATION,
+          repeat: Infinity,
+          repeatType: "loop",
+          repeatDelay: 0,
+        });
+        controlsRef.current = controls;
+      };
+
+      // if we're already at the target end, jump to loop start and begin
+      const remaining = Math.abs(target - normalizedFrom);
+      if (remaining < 0.5) {
+        xTranslation.set(loopStart);
+        startFullLoop();
+        return;
+      }
+
+      // animate the rest of this cycle, then resume full loops
+      const partialDuration = DURATION * (remaining / rangeSize);
+      const controls = animate(xTranslation, target, {
+        ease: "linear",
+        duration: partialDuration,
+        onComplete: startFullLoop,
+      });
+      controlsRef.current = controls;
+    },
+    [xTranslation, width, reverse],
+  );
+
+  useEffect(() => {
+    startAnimation(0);
+    return () => {
+      controlsRef.current?.stop();
+    };
+  }, [startAnimation]);
+
+  const items = artworks ?? [];
+  return (
+    <div className="overflow-hidden py-10">
+      <motion.div
+        className="flex w-max cursor-grab select-none gap-[16px] active:cursor-grabbing"
+        ref={ref}
+        style={{ x: xTranslation }}
+        // i'm not sure how to make these have momentum.. future TODO?
+        onPanStart={() => controlsRef.current?.stop()}
+        onPan={(_, info) => {
+          const rangeSize = (width + GAP) / 3;
+          const next = xTranslation.get() + info.delta.x;
+          const normalized = -(((-next % rangeSize) + rangeSize) % rangeSize);
+          xTranslation.set(normalized);
+        }}
+        onHoverEnd={() => startAnimation(xTranslation.get())}
+      >
+        {/* we need three copies to make sure it doesn't randomly snap incorrectly... issues may arise on huge display resolutions  */}
+        {[...items, ...items, ...items].map((item: Art, i: number) => (
+          <motion.div
+            key={`${item.art_id} - ${i}`}
+            style={{ transform: "translateZ(0)" }}
+            whileHover={{
+              scale: 1.05,
+              zIndex: 1,
+            }}
+            transition={{ type: "spring", stiffness: 300, damping: 20 }}
+          >
+            <ImageCard
+              imageSrc={item.media || undefined}
+              imageAlt={item.name}
+              href={`/artwork/${item.art_id}`}
+              backContent={<ImageCardBack artwork={item} />}
+            />
+          </motion.div>
+        ))}
+      </motion.div>
+    </div>
+  );
+}