Merge pull request #292 from aram-cinnamon/resources_card

add resources page

src/AppRoutes.tsx

@@ -22,7 +22,10 @@ const AppRoutes = () => {
         <Route index element={<Home />} />
         <Route path="lessons" element={<Lessons />} />
         <Route path="lessons/:lessonId" element={<Challenges />} />
-        <Route path="lessons/:lessonId/:challengeId" element={<Challenge />} />
+        <Route
+          path="lessons/:lessonId/challenges/:challengeId"
+          element={<Challenge />}
+        />
         <Route path="resources" element={<Resources />} />
         <Route path="sandbox" element={<Sandbox />} />
         {/* debugging playground */}

src/components/ChallengeCard/ChallengeCard.tsx

@@ -102,7 +102,7 @@ export const ChallengeCard: FC<Props> = ({
         <Title>{title}</Title>
         <Paragraph>{description}</Paragraph>
         <Spacer size={1} />
-        <Button type="primary" to={challengeId}>
+        <Button type="primary" to={`challenges/${challengeId}`}>
           LET'S GO!
         </Button>
       </ContentWrap>

src/components/LessonCard/LessonCard.tsx

@@ -1,80 +1,78 @@
 import { FC } from "react";
 import styled from "styled-components";
-import shapesBgLesson1Url from "./shapes-bg-lesson1.svg";
-import shapesBgLesson2Url from "./shapes-bg-lesson2.svg";
-import shapesBgLesson3Url from "./shapes-bg-lesson3.svg";
-import shapesBgLesson4Url from "./shapes-bg-lesson4.svg";
-import shapesBgLesson5Url from "./shapes-bg-lesson5.svg";
-import shapesMascotLesson1Url from "./shapes-mascot-lesson1.svg";
-import shapesMascotLesson2Url from "./shapes-mascot-lesson2.svg";
-import shapesMascotLesson3Url from "./shapes-mascot-lesson3.svg";
-import shapesMascotLesson4Url from "./shapes-mascot-lesson4.svg";
-import shapesMascotLesson5Url from "./shapes-mascot-lesson5.svg";
+import urlLesson1MascotSvg from "./lesson-1-mascot.svg";
+import urlLesson1MaskBodySvg from "./lesson-1-mask-body.svg";
+import urlLesson1MaskHeadSvg from "./lesson-1-mask-head.svg";
+import urlLesson1MaskLegsSvg from "./lesson-1-mask-legs.svg";
+import urlLesson2MascotSvg from "./lesson-2-mascot.svg";
+import urlLesson2MaskBodySvg from "./lesson-2-mask-body.svg";
+import urlLesson2MaskHeadSvg from "./lesson-2-mask-head.svg";
+import urlLesson2MaskLegsSvg from "./lesson-2-mask-legs.svg";
+import urlLesson3MascotSvg from "./lesson-3-mascot.svg";
+import urlLesson3MaskBodySvg from "./lesson-3-mask-body.svg";
+import urlLesson3MaskHeadSvg from "./lesson-3-mask-head.svg";
+import urlLesson3MaskLegsSvg from "./lesson-3-mask-legs.svg";
+import urlLesson4MascotSvg from "./lesson-4-mascot.svg";
+import urlLesson4MaskBodySvg from "./lesson-4-mask-body.svg";
+import urlLesson4MaskHeadSvg from "./lesson-4-mask-head.svg";
+import urlLesson4MaskLegsSvg from "./lesson-4-mask-legs.svg";
+import urlLesson5MascotSvg from "./lesson-5-mascot.svg";
+import urlLesson5MaskBodySvg from "./lesson-5-mask-body.svg";
+import urlLesson5MaskHeadSvg from "./lesson-5-mask-head.svg";
+import urlLesson5MaskLegsSvg from "./lesson-5-mask-legs.svg";
+import urlLessonBackgroundSvg from "./lesson-background.svg";
+import urlGearSvg from "./gear.svg";
+import iconDownload from "../../ui/icon-download.svg";
 import { H3, Subheading2, P } from "../../ui/Typography";
 import { Button } from "../../ui/Button";
 
-type MascotType =
-  | "lesson-1"
-  | "lesson-2"
-  | "lesson-3"
-  | "lesson-4"
-  | "lesson-5";
-
 const Wrap = styled.div`
   display: flex;
   flex-wrap: nowrap;
   flex-direction: row;
 `;
 
-const BlockMascot = styled.div<{
-  $mascotType: MascotType;
-}>`
+const BlockMascot = styled.div`
+  min-height: 450px;
   flex-grow: 2;
   flex-basis: 0;
   display: flex;
   flex-wrap: nowrap;
   flex-direction: column;
-  justify-content: center;
+  justify-content: space-between;
   align-items: center;
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
   background-color: var(--color-blue-dark);
-
-  ${(props) =>
-    props.$mascotType === "lesson-1" &&
-    `
-    background-image: url(${shapesBgLesson1Url});
-  `}
-
-  ${(props) =>
-    props.$mascotType === "lesson-2" &&
-    `
-    background-image: url(${shapesBgLesson2Url});
-  `}
-
-  ${(props) =>
-    props.$mascotType === "lesson-3" &&
-    `
-    background-image: url(${shapesBgLesson3Url});
-  `}
-
-  ${(props) =>
-    props.$mascotType === "lesson-4" &&
-    `
-    background-image: url(${shapesBgLesson4Url});
-  `}
-
-  ${(props) =>
-    props.$mascotType === "lesson-5" &&
-    `
-    background-image: url(${shapesBgLesson5Url});
-  `}
+  background-image: url(${urlLessonBackgroundSvg});
+  overflow: hidden;
 `;
 
-const ImageMascot = styled.img`
+const DivMascot = styled.div<{
+  progress?: Progress;
+}>`
   width: 60%;
   flex-shrink: 1;
+  position: relative;
+
+  & img {
+    position: absolute;
+    top: var(--spacing-large);
+  }
+`;
+
+const DivProgress = styled.div`
+  background-color: var(--color-blue-dark);
+  margin-top: var(--spacing-medium);
+  padding: var(--spacing) var(--spacing-medium);
+  border-radius: var(--border-radius-small);
+  color: var(--color-white);
+  display: flex;
+  gap: var(--spacing-medium);
+  align-items: center;
+  position: relative;
+  bottom: var(--spacing-large);
 `;
 
 const BlockLesson = styled.div`
@@ -83,6 +81,9 @@ const BlockLesson = styled.div`
   display: flex;
   flex-wrap: nowrap;
   background-color: var(--color-white);
+  & button {
+    margin: 0 0 var(--spacing-medium) 0;
+  }
 `;
 
 const LessonDetails = styled.div`
@@ -108,61 +109,152 @@ const Paragraph = styled(P)`
   line-height: 19px;
 `;
 
+const Hr = styled.hr`
+  margin: var(--spacing-x-large) 0 var(--spacing-x-large) 0;
+`;
+
 const StyledButton = styled(Button)``;
 
+const IconDownload = styled.img`
+  margin-left: 10px;
+  width: 18;
+  height: 18;
+`;
+
+const selectMascot = (mascotType: MascotType, progress?: Progress) => {
+  let maskHead = false;
+  let maskBody = false;
+  let maskLegs = false;
+  if (progress) {
+    const progressRatio = progress.complete / progress.total;
+    maskHead = Boolean(progressRatio <= 2 / 3);
+    maskBody = Boolean(progressRatio <= 1 / 3);
+    maskLegs = Boolean(progressRatio <= 0 / 3);
+  }
+
+  let urlMascotSvg = "";
+  let urlMaskHeadSvg = "";
+  let urlMaskBodySvg = "";
+  let urlMaskLegsSvg = "";
+  switch (mascotType) {
+    case 1:
+      urlMascotSvg = urlLesson1MascotSvg;
+      urlMaskHeadSvg = urlLesson1MaskHeadSvg;
+      urlMaskBodySvg = urlLesson1MaskBodySvg;
+      urlMaskLegsSvg = urlLesson1MaskLegsSvg;
+      break;
+    case 2:
+      urlMascotSvg = urlLesson2MascotSvg;
+      urlMaskHeadSvg = urlLesson2MaskHeadSvg;
+      urlMaskBodySvg = urlLesson2MaskBodySvg;
+      urlMaskLegsSvg = urlLesson2MaskLegsSvg;
+      break;
+    case 3:
+      urlMascotSvg = urlLesson3MascotSvg;
+      urlMaskHeadSvg = urlLesson3MaskHeadSvg;
+      urlMaskBodySvg = urlLesson3MaskBodySvg;
+      urlMaskLegsSvg = urlLesson3MaskLegsSvg;
+      break;
+    case 4:
+      urlMascotSvg = urlLesson4MascotSvg;
+      urlMaskHeadSvg = urlLesson4MaskHeadSvg;
+      urlMaskBodySvg = urlLesson4MaskBodySvg;
+      urlMaskLegsSvg = urlLesson4MaskLegsSvg;
+      break;
+    case 5:
+    default:
+      urlMascotSvg = urlLesson5MascotSvg;
+      urlMaskHeadSvg = urlLesson5MaskHeadSvg;
+      urlMaskBodySvg = urlLesson5MaskBodySvg;
+      urlMaskLegsSvg = urlLesson5MaskLegsSvg;
+      break;
+  }
+
+  return (
+    <>
+      <img src={urlMascotSvg} />
+      {maskHead && <img src={urlMaskHeadSvg} />}
+      {maskBody && <img src={urlMaskBodySvg} />}
+      {maskLegs && <img src={urlMaskLegsSvg} />}
+    </>
+  );
+};
+
+export type MascotType = 1 | 2 | 3 | 4 | 5;
+
+type Progress = {
+  complete: number;
+  total: number;
+};
+
 type Props = {
-  lessonId: string;
+  mascotType: MascotType;
+  progress?: Progress;
   subtitle?: string;
   title: string;
   description: string;
-  call2actionText?: string;
-  mascotType: MascotType;
+  buttonTextPrimary?: string;
+  buttonDestPrimary?: string;
+  buttonTextSecondary?: string;
+  buttonDestSecondary?: string;
+  buttonTextTertiary?: string;
+  buttonDestTertiary?: string;
 };
 
 export const LessonCard: FC<Props> = ({
-  lessonId,
+  mascotType,
+  progress,
   subtitle,
   title,
   description,
-  call2actionText,
-  mascotType,
+  buttonTextPrimary,
+  buttonDestPrimary,
+  buttonTextSecondary,
+  buttonDestSecondary,
+  buttonTextTertiary,
+  buttonDestTertiary,
 }) => {
-  let mascotUrl;
-  switch (mascotType) {
-    case "lesson-1":
-      mascotUrl = shapesMascotLesson1Url;
-      break;
-    case "lesson-2":
-      mascotUrl = shapesMascotLesson2Url;
-      break;
-    case "lesson-3":
-      mascotUrl = shapesMascotLesson3Url;
-      break;
-    case "lesson-4":
-      mascotUrl = shapesMascotLesson4Url;
-      break;
-    case "lesson-5":
-      mascotUrl = shapesMascotLesson5Url;
-      break;
-    default:
-      mascotUrl = shapesMascotLesson1Url;
-      break;
-  }
   return (
     <Wrap>
-      <BlockMascot $mascotType={mascotType}>
-        <ImageMascot src={mascotUrl} />
+      <BlockMascot>
+        <DivMascot>{selectMascot(mascotType, progress)}</DivMascot>
+        {progress && (
+          <DivProgress>
+            <img src={urlGearSvg} />
+            <span>
+              {progress.complete}/{progress.total}
+            </span>
+          </DivProgress>
+        )}
       </BlockMascot>
+
       <BlockLesson>
         <LessonDetails>
           <Subheading>{subtitle}</Subheading>
           <Heading>{title}</Heading>
           <Paragraph>{description}</Paragraph>
-          {call2actionText && (
-            <StyledButton type="primary" to={lessonId}>
-              {call2actionText.toLocaleUpperCase()}
+
+          {buttonTextPrimary && (
+            <StyledButton type="primary" to={buttonDestPrimary}>
+              {buttonTextPrimary}
+            </StyledButton>
+          )}
+
+          {buttonTextSecondary && (
+            <StyledButton type="secondary" to={buttonDestSecondary}>
+              {buttonTextSecondary}
+              <IconDownload src={iconDownload} />
             </StyledButton>
           )}
+
+          {buttonTextTertiary && (
+            <>
+              <Hr />
+              <StyledButton type="tertiary" to={buttonDestTertiary}>
+                {buttonTextTertiary}
+              </StyledButton>
+            </>
+          )}
         </LessonDetails>
       </BlockLesson>
     </Wrap>