feat: added explanation popup

assets/svgs/cross.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M23.954 21.03l-9.184-9.095 9.092-9.174L21.03-.046l-9.09 9.179L2.764.045l-2.81 2.81L9.14 11.96.045 21.144l2.81 2.81 9.112-9.192 9.18 9.1z"/></svg>

pages/roadmap.tsx

@@ -1,6 +1,13 @@
 import { METADATA, NAVIGATION, UI } from '@/constants';
-import React, { ReactElement, useContext, useEffect, useState } from 'react';
+import React, {
+  ReactElement,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from 'react';
 
+import { ReactComponent as CrossSVG } from '@/assets/svgs/cross.svg';
 import CustomHead from '@/components/CustomHead';
 import { ReactComponent as LoadingSVG } from '@/assets/svgs/loader.svg';
 import { ScreenContext } from '@/contexts/screen';
@@ -13,27 +20,76 @@ let pz = null; // global panzoom instance
 type RoadmapCanvasProps = {
   loaded: boolean;
   canScaleMore: boolean;
+  showExplanation: boolean;
+  setShowExplanation: any;
+  isMobileDisplay: boolean;
 };
 
 const RoadmapCanvas = (props: RoadmapCanvasProps): ReactElement => {
-  const { loaded, canScaleMore } = props;
+  const {
+    loaded,
+    canScaleMore,
+    showExplanation,
+    setShowExplanation,
+    isMobileDisplay,
+  } = props;
 
   return (
     <div
-      className={classNames(loaded ? 'visibility' : 'invisible')}
+      className={classNames(
+        'relative',
+        loaded ? 'visibility' : 'invisible',
+        isMobileDisplay && 'bg-tertiary',
+      )}
       style={{
         height: loaded ? `calc(100vh - ${UI.HEADER_HEIGHT_PX}px)` : '0vh',
       }}
     >
-      <canvas
-        id={'#roadmap-image'}
-        aria-label={"Oxen's roadmap for the future shown as a progress tree"}
-        className={classNames('cursor-move')}
-        // upscaled for better text rendering
-        // mobile and tablets have smaller upscale limit
-        width={3686 * (canScaleMore ? 1.75 : 1.45)}
-        height={2073 * (canScaleMore ? 1.75 : 1.45)}
-      />
+      {!isMobileDisplay && (
+        <canvas
+          id={'#roadmap-image'}
+          aria-label={"Oxen's roadmap for the future shown as a progress tree"}
+          className={classNames('cursor-move z-0')}
+          // upscaled for better text rendering
+          // mobile and tablets have smaller upscale limit
+          width={3686 * (canScaleMore ? 1.75 : 1.45)}
+          height={2073 * (canScaleMore ? 1.75 : 1.45)}
+        />
+      )}
+      {loaded && showExplanation && (
+        <div
+          className={classNames(
+            'relative flex justify-center items-center',
+            'tablet:absolute tablet:block tablet:left-6 tablet:bottom-6',
+          )}
+          style={{
+            height: isMobileDisplay ? '100%' : 304.8,
+            width: isMobileDisplay ? '100%' : 313.6,
+          }}
+          onClick={() => {
+            if (isMobileDisplay) {
+              setShowExplanation(false);
+            }
+          }}
+        >
+          <CrossSVG
+            className={classNames(
+              'cursor-pointer absolute z-10 inline w-4 h-4 text-white fill-current top-6 right-6',
+              'tablet:top-10 tablet:right-10 ',
+            )}
+            onClick={() => {
+              setShowExplanation(false);
+            }}
+          />
+          {/* eslint-disable @next/next/no-img-element */}
+          <img
+            src={'/svgs/roadmap-explanation.svg'}
+            alt="Oxen Roadmap Explanation"
+            height={isMobileDisplay ? '100%' : 762 / 2.5}
+            width={isMobileDisplay ? '100%' : 784 / 2.5}
+          />
+        </div>
+      )}
     </div>
   );
 };
@@ -41,8 +97,15 @@ const RoadmapCanvas = (props: RoadmapCanvasProps): ReactElement => {
 export default function Roadmap() {
   const { isMobile, isTablet, isHuge, isEnormous } = useContext(ScreenContext);
   const [loaded, setLoaded] = useState(false);
+  const [showExplanation, setShowExplanation] = useState(true);
+
+  const startup = useCallback(() => {
+    if (isMobile && showExplanation) {
+      console.log('mobile popup loaded');
+      setLoaded(true);
+      return;
+    }
 
-  const startup = () => {
     const canvasHolder = document.getElementById(
       '#roadmap-image',
     ) as HTMLCanvasElement;
@@ -63,12 +126,12 @@ export default function Roadmap() {
       console.log('roadmap loaded');
       setLoaded(true);
     };
-  };
+  }, [isMobile, showExplanation]);
 
   useEffect(() => {
     startup();
 
-    if (loaded) {
+    if (loaded && !(isMobile && showExplanation)) {
       const roadmapEl = document.getElementById('#roadmap-image');
       pz = panzoom(roadmapEl, {
         initialZoom: isMobile
@@ -109,7 +172,7 @@ export default function Roadmap() {
         pz.dispose();
       }
     };
-  }, [isMobile, isTablet, loaded]);
+  }, [isMobile, isTablet, isHuge, isEnormous, loaded, startup, showExplanation]);
 
   return (
     <>
@@ -133,22 +196,30 @@ export default function Roadmap() {
           />
         </div>
       )}
-      <RoadmapCanvas loaded={loaded} canScaleMore={!isMobile && !isTablet} />
-      {loaded && (
-        <div
-          className={classNames(
-            'absolute right-4 bottom-4',
-            'desktop:right-6 desktop:bottom-6',
-          )}
-        >
-          {/* eslint-disable @next/next/no-img-element */}
-          <img
-            src={'/svgs/roadmap-key.svg'}
-            alt="Oxen Roadmap Legend"
-            height={isMobile ? 180 : 242}
-            width={isMobile ? 150 : 200}
-          />
-        </div>
+      <RoadmapCanvas
+        loaded={loaded}
+        canScaleMore={!isMobile && !isTablet}
+        showExplanation={showExplanation}
+        setShowExplanation={setShowExplanation}
+        isMobileDisplay={isMobile && showExplanation}
+      />
+      {!(isMobile && showExplanation) && loaded && (
+        <>
+          <div
+            className={classNames(
+              'z-10 absolute right-4 bottom-4',
+              'desktop:right-6 desktop:bottom-6',
+            )}
+          >
+            {/* eslint-disable @next/next/no-img-element */}
+            <img
+              src={'/svgs/roadmap-key.svg'}
+              alt="Oxen Roadmap Legend"
+              height={isMobile ? 180 : 242}
+              width={isMobile ? 150 : 200}
+            />
+          </div>
+        </>
       )}
     </>
   );

tailwind.config.js

@@ -48,6 +48,7 @@ module.exports = {
       colors: {
         primary: '#1F1C47',
         secondary: '#12C7BA',
+        tertiary: '#181436',
         alt: '#DBF7F5',
         hyper: '#E5FF85',
         blush: '#FF7A87',