Working prototype of software guide

Author: ESaracay

package-lock.json

@@ -9,9 +9,10 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "next": "14.2.3",
     "react": "^18",
     "react-dom": "^18",
-    "next": "14.2.3"
+    "react-img-mapper": "^1.5.1"
   },
   "devDependencies": {
     "postcss": "^8",

package.json

@@ -0,0 +1,38 @@
+// components/Legend.js
+const Legend = ({ categoryMap }) => {
+    const openSection = (sectionNum) => {
+    let section_id = `section-${sectionNum}`;
+    const section_elem = document.getElementById(section_id);
+
+    if (section_elem) {
+      if (!section_elem.open) {
+        section_elem.open = true;
+      }
+      window.scrollTo({
+        top:section_elem.offsetTop,
+        behavior: 'smooth'
+      })
+    } else {
+      console.log("Id not found for this section")
+    }
+  } 
+
+    return (
+        <div className="flex flex-row flex-wrap gap-2">
+         {Object.entries(categoryMap).map(([category, details]) => {
+
+          return (
+            <button
+              key={category}
+              onClick={() => openSection(details.section)}
+              className={`px-3 py-1 text-white rounded ${details.color || "bg-gray-500"}`}
+            >
+              {category}
+            </button>
+          );
+        })}
+        </div>
+    );
+};
+
+export default Legend;

public/exhibit_floor_plan.png

@@ -0,0 +1,34 @@
+import { useEffect, useState, useRef } from 'react';
+import ImageMapper from 'react-img-mapper';
+
+const ResponsiveImageMapper = ({ src, map, imgWidth, clickFunc, parentWidth = '100%' }) => {
+    const [dimensions, setDimensions] = useState({ width: 0 });
+    const containerRef = useRef(null);
+
+    const updateDimensions = () => {
+        if (containerRef.current) {
+            setDimensions({ width: containerRef.current.clientWidth });
+        }
+    };
+
+    useEffect(() => {
+        updateDimensions();
+        window.addEventListener('resize', updateDimensions);
+        return () => window.removeEventListener('resize', updateDimensions);
+    }, []);
+
+    return (
+        <div ref={containerRef} style={{ width: parentWidth }}>
+            <ImageMapper
+                src={src}
+                map={map}
+                imgWidth={imgWidth}
+                width={dimensions.width}
+                onClick={clickFunc}
+                responsive={false}
+            />
+        </div>
+    );
+};
+
+export default ResponsiveImageMapper;

public/software_fair.png

@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+
+const TeamInfo = ({ teamName, teamNum, description, teamMembers, categories, categoryMap }) => {
+  const [showDescription, setShowDescription] = useState(false);
+  const teamId = `team-div-${teamNum}`;
+
+  const openSection = (sectionNum) => {
+    let section_id = `section-${sectionNum}`;
+    const section_elem = document.getElementById(section_id);
+
+    if (section_elem) {
+      if (!section_elem.open) {
+        section_elem.open = true;
+      }
+      window.scrollTo({
+        top:section_elem.offsetTop,
+        behavior: 'smooth'
+      })
+    } else {
+      console.log("Id not found for this section")
+    }
+  } 
+
+  return (
+    <div id={teamId} className="container mx-auto p-4 border-b border-black">
+      <h1 className="text-2xl font-bold mb-4">{teamName}</h1>
+      <div className="flex space-x-2 mb-4">
+         {categories.map((category, index) => {
+          const categoryData = categoryMap[category];
+          return (
+            <button
+              key={index}
+              onClick={() => openSection(categoryData.section)}
+              className={`px-3 py-1 text-white rounded ${categoryData.color || "bg-gray-500"}`}
+            >
+              {category}
+            </button>
+          );
+        })}
+      </div>
+      <p>Team Members: {teamMembers}</p>
+      <button
+        className="text-blue-500 hover:text-blue-700 cursor-pointer pt-4"
+        onClick={() => setShowDescription(!showDescription)}
+      >
+        {showDescription ? 'Hide Description' : 'Show Description'}
+      </button>
+      {showDescription && (
+        <p className="bg-gray-200 text-black rounded-lg p-4">{description}</p>
+      )}
+    </div>
+  );
+};
+
+export default TeamInfo;

src/app/components/Legend.js

@@ -0,0 +1,9 @@
+[
+       {
+        "name": "0-1",
+        "shape": "poly",
+        "coords": [1468,317,1433,337,1507,371,1540,355],
+        "preFillColor": "green",
+        "fillColor": "#0000ff"
+      }
+  ]

src/app/components/ResponsiveImageMapper.js

@@ -0,0 +1,56 @@
+const categoryMap = {
+    "AI": {
+      "section": "0",
+      "color": "bg-red-500"
+    },
+    "Behavior Change/Wellness": {
+      "section": "1",
+      "color": "bg-blue-400"
+    },
+    "Business/Office": {
+      "section": "2",
+      "color": "bg-green-400"
+    },
+    "Marketing": {
+      "section": "3",
+      "color": "bg-pink-500"
+    },
+    "Education": {
+      "section": "4",
+      "color": "bg-lime-400"
+    },
+    "Finance": {
+      "section": "5",
+      "color": "bg-orange-400"
+    },
+    "Games": {
+      "section": "6",
+      "color": "bg-purple-500"
+    },
+    "Healthcare": {
+      "section": "7",
+      "color": "bg-yellow-400"
+    },
+    "Productivity": {
+      "section": "8",
+      "color": "bg-red-800"
+    },
+    "Research": {
+      "section": "9",
+      "color": "bg-emerald-400"
+    },
+    "Security": {
+      "section": "10",
+      "color": "bg-fuchsia-500"
+    },
+    "Social Media": {
+      "section": "11",
+      "color": "bg-sky-400"
+    },
+    "XR": {
+      "section": "12",
+      "color": "bg-amber-500"
+    }
+  };
+  
+  export default categoryMap;

src/app/components/TeamInfo.js

@@ -8,6 +8,10 @@
   --background-end-rgb: 255, 255, 255;
 }
 
+.shadow-blue {
+    box-shadow: 10px 10px 24px 7px rgba(133,198,255,0.76);
+}
+
 @media (prefers-color-scheme: dark) {
   :root {
     --foreground-rgb: 255, 255, 255;