diff --git a/client/src/components/imagine25/Main.js b/client/src/components/imagine25/Main.js index 10c55f209..c5f567417 100644 --- a/client/src/components/imagine25/Main.js +++ b/client/src/components/imagine25/Main.js @@ -125,7 +125,7 @@ const Main = () => { > diff --git a/client/src/components/imagine25/components/AnalysisMessage.js b/client/src/components/imagine25/components/AnalysisMessage.js new file mode 100644 index 000000000..6ffe01092 --- /dev/null +++ b/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 ( +
+
+

+ {title} +

+

{message}

+
+ setAcknowledged(true)} + /> +
+ ); +}; + +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; diff --git a/client/src/components/imagine25/pages/Analysis.js b/client/src/components/imagine25/pages/Analysis.js index 1d87cb987..959e8588e 100644 --- a/client/src/components/imagine25/pages/Analysis.js +++ b/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( -

- {text[user.section] || text["control"]} -

, - ); - }; - fetchContent(); - }, []); - - return ( - //container aligns everything horizontally -
-

Analysis

- {content} -
- ); -}; - 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 = () => {
-
+
+

+ Teammate live from: Buffalo, NY +

+
+ +
-
- -
-

- Teammate live from: Buffalo, NY -

+ {!acknowledged ? ( +

+ Please acknowledge the message to proceed. +

+ ) : ( + "" + )}
); }; -export default Results; +export default Analysis; diff --git a/client/tailwind.config.js b/client/tailwind.config.js index a3886aacc..d548e8638 100644 --- a/client/tailwind.config.js +++ b/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",