Disabled cursor follow for mobiles

Pudi-Sravan · Nov 8, 2024 · 51744a9 · 51744a9
1 parent 959453c
commit 51744a9
Show file tree

Hide file tree

Showing 5 changed files with 269 additions and 833 deletions.
diff --git a/app/quiz/canvas.jsx b/app/quiz/canvas.jsx
@@ -30,6 +30,7 @@ const FLAGS = Object.freeze({
 	ENABLE_SHADOWS: !IS_MOBILE_DEVICE,
 	ENABLE_BLOOM: !IS_MOBILE_DEVICE,
 	ENABLE_NOISE: !IS_MOBILE_DEVICE,
+	ENABLE_FOLLOW: !IS_MOBILE_DEVICE,
 })
 
 // https://coolors.co/palette/f72585-b5179e-7209b7-560bad-480ca8-3a0ca3-3f37c9-4361ee-4895ef-4cc9f0
@@ -1000,14 +1001,14 @@ class FullScreen3DExample {
 			}
 		})
 
-		{
+		if(FLAGS.ENABLE_FOLLOW) {
 			// CODE for following cursor
-			// const x = this.#cameraData.positionX
-			//     + 0.3 * (Math.sin(0.1 * t) + Math.sin(0.05 * t));
-			// const y = this.#cameraData.positionY
-			//     + 0.3 * Math.cos(0.3 * t);
-			// this.#camera.position.set(x, y, 1);
-			// this.#camera.updateProjectionMatrix();
+			const x = this.#cameraData.positionX
+			    + 0.3 * (Math.sin(0.1 * t) + Math.sin(0.05 * t));
+			const y = this.#cameraData.positionY
+			    + 0.3 * Math.cos(0.3 * t);
+			this.#camera.position.set(x, y, 1);
+			this.#camera.updateProjectionMatrix();
 		}
 	}
 

diff --git a/components/Questioncomponent/Question.module.scss b/components/Questioncomponent/Question.module.scss
@@ -11,7 +11,7 @@
   justify-content: space-between;
 
   .outerquestion {
-    height: 100%;
+    height: 70vh;
     width: 36%;
     background-color: rgba(9, 255, 0, 0.89);
     clip-path: polygon(0 0, 91% 0, 100% 13%, 100% 100%, 16% 100%, 0 90%);
@@ -35,10 +35,23 @@
 
 .cluemap {
   overflow: hidden;
-  height: 100%;
+  height: 70vh;
   width: 35%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 }
 
+.map{
+  height: max(60px, 50%);
+  width: 60%;
+  padding: 2rem 1.5rem;
+  background-color: rgba(9, 255, 0, 0.89);
+  font-size: 1.5rem;
+  font-weight: bold;
+  color: #333;
+  clip-path: polygon(0 0, 91% 0, 100% 13%, 100% 100%, 16% 100%, 0 90%);
+}
 
 .overlay {
   position: fixed;

diff --git a/components/Questioncomponent/Question.tsx b/components/Questioncomponent/Question.tsx
@@ -29,11 +29,6 @@ const Question : React.FC<QuestionProps> = ({isCorrect , setIsCorrect}) => {
           value: "clue3",
           content: "The third clue will help you make connections between events.",
         },
-        {
-          title: "Map",
-          value: "map",
-          content: "Here is the map that shows the locations of interest.",
-        },
       ];
       setTabs(tabData);
     };
@@ -56,6 +51,9 @@ const Question : React.FC<QuestionProps> = ({isCorrect , setIsCorrect}) => {
         </div>
         <div className={styles.cluemap}>
           <Tabs tabs={tabs} />
+          <div className={styles.map}>
+            Here is the map !
+          </div>
         </div>
       </div>
       <div className={styles.overlay + " " + (isCorrect ? styles.overlayActive : "")}></div>