Merge pull request #796 from hackclub/project-update

Adds Project Update state & its corresponding descp in Wonderdome
hackclub · Nov 17, 2024 · 8692422 · 8692422
2 parents 96cf88b + 9466875
commit 8692422
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 3 deletions.
diff --git a/src/app/api/battles/matchups/route.ts b/src/app/api/battles/matchups/route.ts
@@ -54,6 +54,8 @@ export async function GET() {
         repo_url: matchup.project1.repo_url,
         deploy_url: matchup.project1.deploy_url,
         rating: matchup.project1.rating,
+        ship_type: matchup.project1.ship_type,
+        update_description: matchup.project1.update_description,
       },
       project2: {
         id: matchup.project2.id,
@@ -63,6 +65,8 @@ export async function GET() {
         repo_url: matchup.project2.repo_url,
         deploy_url: matchup.project2.deploy_url,
         rating: matchup.project2.rating,
+        ship_type: matchup.project2.ship_type,
+        update_description: matchup.project2.update_description,
       },
       signature: matchup.signature,
       ts: matchup.ts,

diff --git a/src/app/harbor/battles/battles.tsx b/src/app/harbor/battles/battles.tsx
@@ -56,6 +56,13 @@ const ProjectCard: React.FC<ProjectCardProps> = ({
     backgroundImage: `url(${notFoundImage})`,
     backgroundSize: 'cover',
   }
+  const [showFullText, setShowFullText] = useState(false)
+
+  const toggleReadMore = () => {
+    setShowFullText((prev) => !prev)
+  }
+
+  const truncatedText = project.update_description?.slice(0, 50)
 
   return (
     <div className="bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-all duration-300 hover:shadow-xl">
@@ -73,10 +80,19 @@ const ProjectCard: React.FC<ProjectCardProps> = ({
       <div className="p-6">
         <h2 className="font-heading text-2xl font-semibold text-indigo-600 dark:text-indigo-300 mb-4">
           {project.title}
+          {project.ship_type === 'update' ? (
+            <p className="text-gray-600 dark:text-gray-300 mb-4 inline">
+              {' '}
+              <Pill
+                msg="This is a project update"
+                color="green"
+                glyph="rep"
+                classes="text-lg"
+              />
+            </p>
+          ) : null}
         </h2>
-        {/* <p className="text-gray-600 dark:text-gray-300 mb-4">
-          Hours: {project.hours}
-        </p> */}
+
         <div className="flex flex-wrap gap-2 mb-4">
           {project.repo_url && (
             <a
@@ -114,6 +130,22 @@ const ProjectCard: React.FC<ProjectCardProps> = ({
             </button>
           )}
         </div>
+        {project.update_description && (
+          <p className="mt-4">
+            {showFullText
+              ? project.update_description
+              : truncatedText +
+                (project.update_description.length > 50 ? '...' : '')}
+            {project.update_description.length > 50 && (
+              <button
+                className="text-blue-500 ml-2 underline"
+                onClick={toggleReadMore}
+              >
+                {showFullText ? 'Read Less' : 'Read More'}
+              </button>
+            )}
+          </p>
+        )}
       </div>
       <div className="p-4 bg-gray-100 dark:bg-gray-700">
         <button

diff --git a/types/battles/airtable.ts b/types/battles/airtable.ts
@@ -21,6 +21,8 @@ export interface Ships extends FieldSet {
   autonumber?: number
   screenshot_url: string
   entrant__slack_id: string[]
+  ship_type?: string
+  update_description?: string
 }
 
 export interface Battles extends FieldSet {