Merge pull request #22 from akshithere/tutorialPage

Tutorial page
osdc · Sep 15, 2024 · 69ab2d5 · 69ab2d5
2 parents 810cea2 + 2cb7092
commit 69ab2d5
Show file tree

Hide file tree

Showing 3 changed files with 307 additions and 54 deletions.
diff --git a/frontend/src/components/hallofame/Canvas.tsx b/frontend/src/components/hallofame/Canvas.tsx
@@ -1,7 +1,6 @@
 import React, { useEffect, useRef, useState } from "react";
 import { getRandomInt } from "./utils/misc";
 import gba from "/gba.png";
-import introVideo from "/intro.mp4"; // Path to the intro video
 import { fetchPokemonData } from "./fetchPokemonData";
 let scaleFactor = 1;
 let maxX = 0;
@@ -151,9 +150,6 @@ const Canvas: React.FC = () => {
           (0.719 * imagesCanvas.width -
             (maxX * scaleFactor + 0.284 * imagesCanvas.width)) /
           2;
-
-        loaded = true;
-
         // Draw Pokémon images on the images canvas
         const drawPokemonImages = () => {
           if (imagesCtx) {
@@ -221,7 +217,7 @@ const Canvas: React.FC = () => {
       {!allAssetsLoaded && (
         <video
           ref={videoRef}
-          src={introVideo}
+          src="https://www.kapwing.com/videos/66e6c86940753aff5b18b834"
           style={{ display: "none" }}
           preload="auto"
           muted

diff --git a/frontend/src/components/tutorial/Tutorial.tsx b/frontend/src/components/tutorial/Tutorial.tsx
@@ -8,7 +8,7 @@ const Tutorial = () => {
   const imageSection = dataArray[moduleNo].module[tipNo].imageData.src;
   const listModules = dataArray.map((x) => (
     <button
-      className="fr text-2xl m-5 text-gray-600"
+      className="fr text-4xl m-5 text-gray-600"
       onClick={() => {
         setModuleNo(x.index);
         setTipNo(0);
@@ -27,16 +27,17 @@ const Tutorial = () => {
     <>
       <div className="flex flex-col items-center justify-center h-screen bg-[#3B8481]">
         <div className="flex flex-row h-[70%] w-full">
-          <div className="oak flex w-3/4 flex-row m-5 justify-end">
+          <div className="oak flex w-[70%] flex-row m-5 justify-end">
             <div className="h-full flex flex-col items-center justify-center w-1/2">
               <img src={imageSection} alt="Not Found" className="max-h-[50%]" />
             </div>
             <img src={Oak} alt="Not Found" />
           </div>
           <div className="list flex flex-col items-center justify-center w-[25%]">
-            <div className="border-black border-2 h-full m-10 w-full mr-4 bg-[#756C80] rounded-md">
-              <div className="bg-white m-2 rounded-md w-auto h-full mb-6 flex flex-col ">
+            <div className="border-black border-2 h-auto m-10 w-full mr-4 bg-[#756C80] rounded-md">
+              <div className="bg-white m-2 rounded-md w-auto h-auto mb-6 flex flex-col items-start">
                 {listModules}
+                <button></button>
               </div>
             </div>
           </div>
@@ -47,9 +48,11 @@ const Tutorial = () => {
             className="w-3/4 h-[80%] bg-no-repeat bg-center bg-contain text-4xl flex flex-col jusitfy-center items-center"
             style={{ backgroundImage: `url(${TipBox})` }}
           >
-            <div className="w-3/4 flex flex-col justify-center items-center h-full">
+            <div className="w-3/4 flex flex-col justify-center items-start h-full">
               {" "}
-              <p className="fr">{dataArray[moduleNo].module[tipNo].tip}</p>
+              <p className="fr text-2xl ">
+                {dataArray[moduleNo].module[tipNo].tip}
+              </p>
             </div>
           </div>
           <div className="list w-[25%] h-full flex flex-row  ">