Easteregg

website/src/components/hero/Hero.js

@@ -21,6 +21,8 @@ import Christmas from "./christmas";
 import Chicken from "./chicken";
 import Pride from "./pride";
 import Halloween from "./halloween";
+import Game from "./game";
+import { EASTER_EGG_CREDENTIAL } from "@/utils/credentials";
 
 import styles from "./Hero.module.css";
 import Future from "./future";
@@ -31,6 +33,7 @@ export default function Hero({ className = "" }) {
   const [isSubmittingCredential, setIsSubmittingCredential] = useState(false);
   const [showApplications, setShowApplications] = useState(false);
   const [applicationsOpenMode, setApplicationsOpenMode] = useState("default");
+  const [isGameActive, setIsGameActive] = useState(false);
 
   const { selectedCredential: selectedToken } = useSelectedCredential();
   const { getCredentialEntry } = useCredentialEntries();
@@ -78,6 +81,9 @@ export default function Hero({ className = "" }) {
         : "";
   const hasActiveClientSummary = Boolean(selectedToken && resolvedDisplayName);
   const inputIsValid = hasResolvedCredential || canSubmitCredential;
+  const isGameReady =
+    selectedToken?.type === "easteregg" ||
+    selectedToken?.token === EASTER_EGG_CREDENTIAL;
 
   function handleOpenClientConnect() {
     setApplicationsOpenMode("add");
@@ -93,16 +99,24 @@ export default function Hero({ className = "" }) {
   }
 
   return (
-    <section className={`${styles.hero} ${className}`} id="hero">
+    <section
+      className={`${styles.hero} ${isGameActive ? styles.heroGameActive : ""} ${className}`}
+      id="hero"
+    >
       <div className={styles.color} />
       <div className={styles.silhouette} />
       {isChristmas && <Christmas />}
       {isEaster && <Chicken />}
       {isPride && <Pride />}
       {isHalloween && <Halloween />}
       {isFuture && <Future />}
+      <Game
+        className={styles.gameLayer}
+        isActive={isGameActive}
+        onActiveChange={setIsGameActive}
+      />
       <Container>
-        <Row className={styles.row}>
+        <Row className={`${styles.row} ${styles.contentRow}`}>
           <Col>
             <Title className={styles.title}>
               <Label for="token-input">
@@ -112,15 +126,20 @@ export default function Hero({ className = "" }) {
           </Col>
         </Row>
 
-        <Row className={styles.row}>
+        <Row className={`${styles.row} ${styles.contentRow}`}>
           <Col>
             <div className={styles.inputGroup}>
               <Connect
                 id="token-input"
                 className={styles.token}
                 onValidityChange={setCanSubmitCredential}
                 onPendingChange={setIsSubmittingCredential}
-                onSubmit={() => {
+                onSubmit={(value) => {
+                  if (value === EASTER_EGG_CREDENTIAL) {
+                    setIsGameActive(true);
+                    return;
+                  }
+
                   router.push({
                     pathname: "/documentation",
                   });
@@ -152,7 +171,7 @@ export default function Hero({ className = "" }) {
           </Col>
         </Row>
 
-        <Row className={styles.row}>
+        <Row className={`${styles.row} ${styles.contentRow}`}>
           <Col>
             <Button
               className={styles.go}
@@ -170,7 +189,7 @@ export default function Hero({ className = "" }) {
                   />
                 </>
               ) : (
-                "Go!"
+                isGameReady ? "Start game" : "Go!"
               )}
             </Button>
           </Col>

website/src/components/hero/Hero.module.css

@@ -47,6 +47,10 @@
   transform: scale(1.1);
   animation: heroGradientFlow 30s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite
     alternate;
+  transition:
+    opacity 220ms ease,
+    background 220ms ease,
+    filter 220ms ease;
 }
 
 .color::before,
@@ -124,6 +128,7 @@
   z-index: -2;
   opacity: 0.75;
   display: none;
+  transition: opacity 220ms ease;
 }
 
 .hero .row:first-of-type > div {
@@ -157,15 +162,28 @@
   margin-bottom: 2px;
 }
 
+.gameLayer {
+  position: absolute;
+  inset: 0;
+}
+
 .title {
   color: var(--white);
   align-self: center;
   text-shadow: 0 8px 32px rgba(8, 17, 38, 0.3);
+  transition:
+    color 220ms ease,
+    opacity 220ms ease,
+    transform 220ms ease;
 }
 
 .help {
   color: var(--text-light);
   margin-top: var(--pt1);
+  transition:
+    color 220ms ease,
+    opacity 220ms ease,
+    transform 220ms ease;
 }
 
 .history {
@@ -188,6 +206,27 @@
   z-index: 2;
 }
 
+.contentRow > div {
+  transition:
+    opacity 220ms ease,
+    transform 220ms ease;
+}
+
+.heroGameActive .silhouette {
+  opacity: 0.45;
+}
+
+.heroGameActive .title,
+.heroGameActive .help {
+  color: var(--white);
+  text-shadow: 0 8px 32px rgba(8, 17, 38, 0.3);
+}
+
+.heroGameActive .contentRow > div {
+  opacity: 0.85;
+  transform: none;
+}
+
 .hero > div {
   display: flex;
   flex-flow: column;
@@ -276,6 +315,7 @@
   .token {
     display: none !important;
   }
+
 }
 
 @media screen and (max-width: 576px) {
@@ -301,6 +341,14 @@
   .color::after {
     filter: blur(24px);
   }
+
+  .hero {
+    padding-bottom: var(--pt12);
+  }
+
+  .heroGameActive .contentRow > div {
+    opacity: 0.18;
+  }
 }
 
 @media screen and (min-width: 1201px) {