HERE WE GO, HERE WE GO, HERE WE GO

1 files changed, 123 insertions, 0 deletions

diff --git a/jb-ui/src/pages/Result.tsx b/jb-ui/src/pages/Result.tsx
new file mode 100644
index 0000000..47af248
--- /dev/null
+++ b/jb-ui/src/pages/Result.tsx
@@ -0,0 +1,123 @@
+import { useAppSelector } from "@/hooks";
+import confetti from "canvas-confetti";
+import { useEffect } from "react";
+
+// getOutcomeStr: function () {
+//     return {
+//         0: "UNKNOWN", 1: "ENTER",
+//         2: "INCOMPLETE", 3: "COMPLETE"
+//     }[this.get('status')] || '';
+// }
+
+export const Complete = () => {
+    const ts = useAppSelector(state => state.app.taskStatus)
+
+    return (
+        <>
+            <h2 className="text-lg">Survey Completed</h2>
+            <p className="text-emerald-700 text-lg font-bold">Congratulations! You completed the Survey.</p>
+            <p className="text-emerald-700 text-2xl font-bold">{ts?.user_payout_string}</p>
+            <p className="text-slate-300">You may close this tab and return to submit the HIT</p>
+        </>
+    )
+}
+
+export const Enter = () => {
+    return (
+        <>
+            <h2 className="text-lg">Entered</h2>
+            <p className="text-slate-800 text-lg font-bold">You're currently in the Survey</p>
+            <p className="text-slate-300">You may close this tab and return to submit the HIT</p>
+        </>
+    )
+}
+
+export const InComplete = () => {
+    const ts = useAppSelector(state => state.app.taskStatus)
+    if (!ts) { return null; }
+
+    return (
+        <>
+            <h2 className="text-lg">HIT Complete</h2>
+            <p className="text-rose-800 text-lg font-bold">Survey terminated the attempt.</p>
+            <p className="text-slate-300">You may close this tab and return to submit the HIT</p>
+        </>
+
+    )
+}
+
+export const Unknown = () => {
+
+    return (
+        <>
+            <h2 className="text-lg">Task Issue</h2>
+            <p className="text-rose-800 text-lg font-bold">You're not currently eligible for any Surveys</p>
+            <p className="text-slate-300">You may close this tab and return to submit the HIT</p>
+        </>
+    )
+}
+
+export const Loading = () => {
+
+    return (
+        <p className="text-2xl font-semibold">Loading...</p>
+    )
+}
+
+
+const Result = () => {
+
+    const ts = useAppSelector(state => state.app.taskStatus)
+
+    const confettiCannons = () => {
+        const end = Date.now() + 3 * 1000
+        const colors = ["#84cc16", "#1e3a8a", "#ec4899"]
+        const frame = () => {
+            if (Date.now() > end) return
+            confetti({
+                particleCount: 3,
+                angle: 60,
+                spread: 55,
+                startVelocity: 80,
+                gravity: 0.7,
+                origin: { x: 0, y: 0.8 },
+                colors: colors,
+            })
+            confetti({
+                particleCount: 3,
+                angle: 120,
+                spread: 55,
+                startVelocity: 80,
+                gravity: 0.7,
+                origin: { x: 1, y: 0.8 },
+                colors: colors,
+            })
+            requestAnimationFrame(frame)
+        }
+        frame()
+    }
+
+    useEffect(() => {
+        if (ts?.status === 3) {
+            confettiCannons()
+        }
+    }, [ts])
+
+
+    switch (ts?.status) {
+        case 0:  // UNKNOWN
+            return <Unknown />;
+        case 1:  // ENTER
+            return <Enter />;
+        case 2:  // INCOMPLETE
+            return <InComplete />;
+        case 3:  // COMPLETE
+            return <Complete />;
+        default:
+            return <Loading />;
+    }
+
+};
+
+
+export default Result;
\ No newline at end of file