Added AnalysisMessage component to imagine25

client/src/components/imagine25/Main.js

@@ -125,7 +125,7 @@ const Main = () => {
         >
           <Router
             className={
-              "tw-flex tw-h-full tw-w-full tw-overflow-y-auto tw-flex-col tw-justify-center"
+              "tw-flex tw-h-full tw-w-full tw-flex-col tw-justify-center tw-overflow-y-hidden"
             }
           >
             <UpdateId default path={"/"} canContinue={canContinue} />

client/src/components/imagine25/components/AnalysisMessage.js

@@ -0,0 +1,45 @@
+import React from "react";
+import LabButton from "src/components/all-components/LabButton";
+import PropTypes from "prop-types";
+
+const AnalysisMessage = ({
+  title,
+  message,
+  error,
+  acknowledged,
+  setAcknowledged,
+}) => {
+  return (
+    <div className="tw-flex tw-flex-col tw-items-center tw-justify-center">
+      <div
+        className={
+          (error
+            ? "tw-bg-[#FFDADA] tw-border-[#FF0000] "
+            : "tw-bg-[#D0FFC2] tw-border-[#009C05] ") +
+          "tw-border-solid tw-border-0 tw-border-l-[1rem] tw-px-4 tw-py-2 tw-w-full tw-my-4"
+        }
+      >
+        <h2 className="tw-text-xl tw-font-bold tw-font-mono tw-text-left">
+          {title}
+        </h2>
+        <p className="tw-font-mono tw-text-left">{message}</p>
+      </div>
+      <LabButton
+        label="Acknowledge Message"
+        type="button"
+        disabled={acknowledged}
+        onClick={() => setAcknowledged(true)}
+      />
+    </div>
+  );
+};
+
+AnalysisMessage.propTypes = {
+  title: PropTypes.string.isRequired,
+  message: PropTypes.string.isRequired,
+  error: PropTypes.bool.isRequired,
+  acknowledged: PropTypes.bool.isRequired,
+  setAcknowledged: PropTypes.func.isRequired,
+};
+
+export default AnalysisMessage;

client/src/components/imagine25/pages/Analysis.js

@@ -2,59 +2,9 @@ import React, { useEffect, useState } from "react";
 import { Button } from "reactstrap";
 import ImagineService from "src/services/ImagineService";
 import TeammateVideo from "../components/TeammateVideo";
+import AnalysisMessage from "../components/AnalysisMessage";
 import { navigate } from "@reach/router";
 
-const Analysis = () => {
-  const [content, setContent] = useState(null);
-
-  //until the userID is grabbed, the page will techincally be blank until the useeffect activates
-  useEffect(() => {
-    const fetchContent = async () => {
-      //yoink that user data
-      const user = await ImagineService.getUserByID(
-        sessionStorage.getItem("userID"),
-        25,
-      );
-
-      //pastel yellow and blue annoyingly are stored in their key forms and need to be re-converted to a readable form
-      const colorMap = {
-        Gray02: "Gray",
-        Black: "Black",
-        Blue03: "Blue",
-      };
-
-      //using map instead of "code smell" switch statment ft - Professor Bobby (st.Jaques or something like that)
-      const text = {
-        experiential:
-          "Parsing error #343: Cannot Process Player User's \"" +
-          colorMap[user.avatar.clotheColor].toLowerCase() +
-          '" shirt. Your points cannot be added due to error. Your team has been disqualified.',
-        expression:
-          "Parsing error #343: Cannot Process Teammate User's  \"" +
-          colorMap[user.teammateAvatar.clotheColor].toLowerCase() +
-          "\" shirt. Your teammate's points cannot be added due to error. Your team has been disqualified.",
-        control:
-          "Congrats on winning! You may collect a prize after completing  the post survery for being so awesome sauce.",
-      };
-
-      setContent(
-        <p className="tw-body-text tw-my-24">
-          {text[user.section] || text["control"]}
-        </p>,
-      );
-    };
-    fetchContent();
-  }, []);
-
-  return (
-    //container aligns everything horizontally
-    <div className="tw-text-center tw-w-[50%] tw-mx-auto tw-h-[100%] tw-items-center">
-      <h3 className="tw-title text-center">Analysis</h3>
-      {content}
-    </div>
-  );
-};
-
 const ScorePage = () => {
   //Random score that will be generated for both teams
   const totalUserScore = Math.floor(Math.random() * 1000 + 500);
@@ -101,9 +51,13 @@ const ScorePage = () => {
   );
 };
 
-const Results = () => {
+const Analysis = () => {
   const [teammateId, setTeammateId] = useState(null);
   const [showScores, setShowScores] = useState(false);
+  const [title, setTitle] = useState(null);
+  const [message, setMessage] = useState(null);
+  const [error, setError] = useState(false);
+  const [acknowledged, setAcknowledged] = useState(false);
 
   const handleNavigation = async () => {
     const isUnderAge = sessionStorage.getItem("isUnderAge");
@@ -123,7 +77,54 @@ const Results = () => {
       );
       setTeammateId(id);
     };
+
+    const fetchContent = async () => {
+      // yoink that user data
+      const user = await ImagineService.getUserByID(
+        sessionStorage.getItem("userID"),
+        25,
+      );
+
+      // pastel yellow and blue annoyingly are stored in their key forms and need to be re-converted to a readable form
+      const colorMap = {
+        Gray02: "Gray",
+        Black: "Black",
+        Blue03: "Blue",
+      };
+
+      const titles = {
+        experiential: "Analysis Error (analysis.js:44)",
+        expression: "Analysis Error (analysis.js:45)",
+        control: "Win Recorded",
+      };
+
+      // using map instead of "code smell" switch statment ft - Professor Bobby (st.Jaques or something like that)
+      const messages = {
+        experiential:
+          "Parsing error #343: Cannot Process Player User's \"" +
+          colorMap[user.avatar.clotheColor].toLowerCase() +
+          '" shirt. Your points cannot be added due to error. Your team has been disqualified.',
+        expression:
+          "Parsing error #343: Cannot Process Teammate User's  \"" +
+          colorMap[user.teammateAvatar.clotheColor].toLowerCase() +
+          "\" shirt. Your teammate's points cannot be added due to error. Your team has been disqualified.",
+        control:
+          "Congrats on winning! You may collect a prize after completing  the post survery for being so awesome sauce.",
+      };
+
+      const error = {
+        experiential: true,
+        expression: true,
+        control: false,
+      };
+
+      setTitle(titles[user.section] || titles["control"]);
+      setMessage(messages[user.section] || messages["control"]);
+      setError(error[user.section] || error["control"]);
+    };
+
     fetchTeammateID();
+    fetchContent();
   }, []);
 
   return (
@@ -133,10 +134,22 @@ const Results = () => {
         <ScorePage />
       </div>
       <div className={showScores ? "tw-hidden" : ""}>
-        <div className="tw-w-[60%] tw-aspect-video tw-mx-auto">
+        <div className="tw-w-[50%] tw-aspect-video tw-mx-auto">
           <TeammateVideo teammateId={teammateId} messageShown={true} />
+          <p>
+            Teammate live from: <b>Buffalo, NY</b>
+          </p>
         </div>
       </div>
+      <div className="tw-w-[50%] tw-mx-auto">
+        <AnalysisMessage
+          title={title}
+          message={message}
+          error={error}
+          acknowledged={acknowledged}
+          setAcknowledged={setAcknowledged}
+        />
+      </div>
       <Button
         className="tw-absolute tw-left-10 tw-bottom-40 tw-body-text tw-text-center tw-border-solid tw-border-primary-blue tw-pt-[0.3rem] tw-pr-[0.5rem] tw-w-[10rem] tw-h-[3rem]
         tw-border-[0.4rem] tw-border-r-0 tw-border-b-0 tw-rounded-tr-lg blue-drop-shadow tw-bg-[white] tw-text-xl tw-text-black"
@@ -148,17 +161,19 @@ const Results = () => {
         className="tw-absolute tw-right-10 tw-bottom-40 tw-body-text tw-text-center tw-border-solid tw-border-primary-blue tw-pt-[0.3rem] tw-pr-[0.5rem] tw-w-[8rem] tw-h-[3rem]
         tw-border-[0.4rem] tw-border-l-0 tw-border-b-0 tw-rounded-tr-lg blue-drop-shadow tw-bg-[white] tw-text-xl tw-text-black"
         onClick={handleNavigation}
+        disabled={!acknowledged}
       >
         Next
       </Button>
-      <div className="tw-hidden">
-        <Analysis />
-      </div>
-      <p>
-        Teammate live from: <b>Buffalo, NY</b>
-      </p>
+      {!acknowledged ? (
+        <p className="tw-w-[12rem] tw-absolute tw-right-10 tw-bottom-20 tw-body-text tw-text-right tw-text-error">
+          Please acknowledge the message to proceed.
+        </p>
+      ) : (
+        ""
+      )}
     </div>
   );
 };
 
-export default Results;
+export default Analysis;

client/tailwind.config.js

@@ -37,6 +37,17 @@ module.exports = {
         "BlinkMacSystemFont",
         "Calibri",
       ],
+      mono: [
+        "JetBrains Mono",
+        "ui-monospace",
+        "SFMono-Regular",
+        "Menlo",
+        "Monaco",
+        "Consolas",
+        "Liberation Mono",
+        "Courier New",
+        "monospace",
+      ],
     },
     colors: {
       black: "#000000",