Merge pull request #5 from kunalshah017/main

Full Story Playthrough Complete

Game-Story.md

@@ -0,0 +1,82 @@
+## **The Tangled Path: A Choice-Based Anti-Drug Adventure**
+
+**Childhood (6 years old):**
+
+Meet Raj, Raj is a bright and curious boy. His playful days revolve around building sandcastles and catching fireflies. One day, Raj finds his older brother, Ravi, acting strangely. Ravi’s once vibrant eyes are glazed over, and his playful laughter has been replaced by a vacant smile. Ravi hides mysterious, colorful candies that seem to spark immense energy, followed by long periods of withdrawal and irritability. 
+
+**Choice 1:**
+
+- Curiosity consumes Raj. He secretly eats one of Ravi's candies. 
+- Fear grips Raj. He tells his parents about Ravis's behavior.
+
+**Teenage (15 years old):**
+
+### if Bad choice 1:
+Years have passed. Raj, now a teenager, struggles with the memory of his brother's battle. He feels isolated and yearns for a sense of belonging. At school, a charismatic group promises acceptance and escape from everyday pressures. They share a seemingly harmless powder that boosts confidence and makes the mundane exciting. as Raj has previously been exposed to drugs, he is more susceptible to addiction. and he is not able to resist the temptation.
+
+what should raj do?
+
+**Choice 2:**
+
+- Desperately wanting to fit in, Raj accepts the powder and joins the group. 
+- Resisting temptation, Raj avoids the group and connects with doctors and counselors to address his underlying issues. 
+
+### if Good choice 1:
+Years have passed. Raj, now a teenager, his parents have been able to help Ravi overcome his addiction. Raj has learned from his brother's experience and is more aware of the dangers of drugs. At school, a charismatic group promises acceptance and escape from everyday pressures. They share a seemingly harmless powder that boosts confidence and makes the mundane exciting. Friends offers Raj the powder.
+
+what should raj do?
+
+**Choice 2:**
+
+- Raj comes under peer pressure and accepts the powder. 
+  (Increases peer pressure and susceptibility to addiction.)
+- Remembering Ravi's struggles, Raj avoids the group and seeks connection through healthy activities. 
+  (Leads to self-awareness and strengthens resistance to peer pressure.)
+
+**Adult (25 years old):**
+
+### if Bad choice 2:
+Raj is now in adult phase of his life. he has been using the powder for years. He has become dependent on it to function. He is unable to hold a job and has lost his friends. Due to this addiction, it has become difficult for him to make correct decisions. He is not able to resist the temptation of drugs.
+his old friend from school days one day appears seeing condition of Raj he advises him to seek professional help.
+
+what should raj do?
+
+**Choice 3:**
+
+- Succumbing to temptation, Raj discovers a new syringes that is said to solve all problems. (Leads to spiraling addiction and loss of control.)
+
+- Recognizing the danger, Raj seeks professional help to address his underlying stress and break free from the addiction. (Leads to recovery and a healthier lifestyle.)
+
+### if Good choice 2:
+Raj is now in adult phase of his life. he is living a healthy life, after finishing his education he has landed a good job. He has good family and friends. but the Job where he currently works is very stressful. It becomes very difficult for him to cope up with the stress. this stress has resulted in sleepless nights and anxiety. One day while scrolling through social media he comes across a post about some stress relieving and sleep inducing syringes. It gains his attention.
+
+what should raj do?
+
+**Choice 3:**
+
+- To quickly solve his problems, Raj decides to buy the syringes. (Leads to spiraling addiction and loss of control.)
+- Without directly believing the post, Raj seeks professional help to address his underlying bad health and mental health. (Leads to recovery and a healthier lifestyle.)
+
+**Old Age (70 years old):**
+
+### if Bad choice 3:
+Raj is now in old age. He has been using all types of drugs and Syringes for years now. He has become dependent on it to function. He is unable to hold a job, have family or friends. Due to this addiction. atlast he decides to cure his years of addictiona and live his remaining little life in peace. He decides to seek professional help for his addiction. Professionals guides and recommends correct medication for his addiction. but the process is very strict to follow. 
+
+what should raj do?
+
+**Choice 4:**
+
+- Raj decides to follow the process and get rid of his addiction. (Leads to recovery and a healthier lifestyle.)
+
+- Raj follows the process in presence of professionals but after the process is over he decides to continue using drugs. (Leads to spiraling addiction and loss of control.)
+
+### if Good choice 3:
+Raj is now in old age. He has been living a healthy life. He has good family and friends. He has seen all the ups and downs of life. He has been able to overcome all the challenges of life. also he guides his younger generation to live a healthy life. and consult with parents and professionals if they face any wrong situations in life. with all the cherishable memories and happiness he dies at the age of 80. having many loved ones around him.
+
+## End for Bad Choices 4:
+
+** Good Ending:**
+After going through all strict process, treatment and medication. Raj is finally able to get rid of his addiction. Raj has now lived his remaining life in peace and happiness. He also started visting schools, colleges and Orphanages to guide younger generation to live a healthy life. with all good deeds and happiness he dies at the age of 80.
+
+** Bad Ending:**
+Atlast Raj is not able to get rid of his addiction. his brother Ravi also died recently due to overdoses of drugs. Due to this Raj's condition has become miserable. he have my diseases, disorders and mental health issues. his body no able to cope up he dies after some time of his brother's death.

Main-Game/1-Childhood/index.html

@@ -5,10 +5,19 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Chapter 1: Chidhood</title>
+    <link rel="icon" href="/assets/tab-logo.png" type="image/png">
     <link rel="stylesheet" href="style.css">
 </head>
 
 <body>
+    <div class="fullscreen-msg">
+        <h2>Game is best played in fullscreen mode <br>Click for Fullscreen mode</h2>
+        <div class="fullscreen-btn" onclick="toggleFullScreen()">
+            <label>Fullscreen</label>
+            <img src="/assets/Fit Screen.gif" alt="fullscreen-icon">
+        </div>
+        <div class="loading-bar"></div>
+    </div>
     <div class="menu-icon" onclick="toggleMenu()">
         <img src="/assets/menu-icon.png">
     </div>
@@ -26,13 +35,15 @@
             </div>
         </div>
         <div class="menu-footer">
-            <div class="team-logo">
-                <img src="/assets/Sudo.svg" alt="Sudo Logo">
-            </div>
-            <a href="https://github.com/spark-lucifer/Choices-an-Anti-Drug-Adventure">
+            <a href="/index.html" target="_blank">
+                <div class="team-logo">
+                    <img src="/assets/sudo.png" alt="Sudo Logo">
+                </div>
+            </a>
+            <a href="https://github.com/spark-lucifer/Choices-an-Anti-Drug-Adventure" target="_blank">
                 <div class="repo-link">
                     <p>Project Repository</p>
-                    <img src="/assets/github.svg" alt="Project Repository">
+                    <img src="/assets/github.png" alt="Project Repository">
                 </div>
             </a>
         </div>

Main-Game/1-Childhood/script.js

@@ -4,6 +4,8 @@ const rightHalf = document.querySelector(".right-half");
 var choiceBox = document.querySelector(".choice-box");
 var intro = document.querySelector(".intro");
 const menuItems = document.querySelector(".menu-items");
+const menuIcon = document.querySelector(".menu-icon img");
+const fullScreenMsg = document.querySelector(".fullscreen-msg");
 localStorage.setItem("isStorytelling", true);
 
 sharedIsStoryTelling = localStorage.getItem("isStorytelling");
@@ -47,6 +49,8 @@ preloadImages(imageUrls)
     console.log("All images are preloaded. Start your game here.");
     if (window.innerWidth > 760) {
       showIntro();
+      showFullScreenMsg();
+      setTimeout(hideFullScreenMsg, 7000);
       setTimeout(showRightHalf, 5000);
     }
   })
@@ -80,7 +84,8 @@ function handleScreenClick(event) {
     !isIntroShown &&
     !clickedElement.closest(".mobile-popup") &&
     !clickedElement.closest(".menu-icon") &&
-    !clickedElement.closest(".menu-items")
+    !clickedElement.closest(".menu-items") &&
+    !clickedElement.closest(".fullscreen-msg")
   ) {
     isIntroShown = true;
     hideIntro();
@@ -97,7 +102,8 @@ function handleScreenClick(event) {
     !clickedElement.closest(".choice-box") &&
     !clickedElement.closest(".mobile-popup") &&
     !clickedElement.closest(".menu-icon") &&
-    !clickedElement.closest(".menu-items")
+    !clickedElement.closest(".menu-items") &&
+    !clickedElement.closest(".fullscreen-msg")
   ) {
     if (isTyping) {
       // If typing is in progress, finish it instantly
@@ -140,7 +146,9 @@ function speak(text) {
   const voices = synth.getVoices();
 
   // Find a female voice with a pleasant tone (customize as needed)
-  const femaleVoice = voices.find(voice => voice.name.includes('Female') && voice.lang.includes('en'));
+  const femaleVoice = voices.find(
+    (voice) => voice.name.includes("Female") && voice.lang.includes("en")
+  );
 
   // Set the selected voice
   utterance.voice = femaleVoice || voices[0]; // Use the first available voice if a suitable female voice is not found
@@ -160,15 +168,20 @@ function stopSpeaking() {
 function hideMenu() {
   menuItems.style.display = "none";
   isMenuShown = false;
+  menuIcon.src = "/assets/menu-icon.png";
+}
+
+function showMenu() {
+  menuItems.style.display = "flex";
+  isMenuShown = true;
+  menuIcon.src = "/assets/cross-icon.png";
 }
 
 function toggleMenu() {
   if (!isMenuShown) {
-    menuItems.style.display = "flex";
-    isMenuShown = true;
+    showMenu();
   } else {
-    menuItems.style.display = "none";
-    isMenuShown = false;
+    hideMenu();
   }
 }
 
@@ -218,6 +231,7 @@ function toggleFullScreen() {
     document.documentElement.requestFullscreen();
     fullscreen.textContent = "ON";
     fullscreen.style.backgroundColor = "green";
+    fullScreenMsg.style.display = "none";
   } else {
     if (document.exitFullscreen) {
       document.exitFullscreen();
@@ -267,6 +281,16 @@ function showIntro() {
   intro.style.visibility = "visible";
 }
 
+function showFullScreenMsg() {
+  fullScreenMsg.style.display = "block";
+}
+
+function hideFullScreenMsg() {
+  const loadingBar = document.querySelector(".loading-bar");
+  loadingBar.style.width = "0%";
+  fullScreenMsg.style.display = "none";
+}
+
 function updateBackground() {
   background.style.backgroundImage = `url('assets/${currentStoryIndex}.png')`;
 }

Main-Game/1-Childhood/style.css

@@ -27,6 +27,95 @@ body{
     font-family: 'Press Start 2P', cursive;
 }
 
+.fullscreen-msg{
+    /* border: 1px solid red; */
+    position: absolute;
+    top: -100%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: rgba(109, 104, 104, 0.671);
+    backdrop-filter: blur(8px);
+    color: white;
+    z-index: 1000;  
+    padding-top: 2rem;
+    border-radius: 15px 15px;
+    display: none;
+    animation: slideIn 1s ease-out forwards; /* Animation definition */
+}
+
+@keyframes slideIn {
+    from {
+        top: -100%;
+    }
+
+    to {
+        top: 12%;
+    }
+}
+
+.fullscreen-msg h2{
+    margin: 1rem;
+    text-align: center;
+    font-size: 1.5rem;
+    padding-bottom: 2rem;
+}
+
+.fullscreen-btn{
+    /* border: 1px solid red; */
+    position: relative;
+    bottom: 10px;
+    left: 50%;
+    transform: translate(-50%, 0);
+    background-color: rgba(0, 0, 0, 0.644);
+    backdrop-filter: blur(8px);
+    border-radius: 15px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 70%;
+}
+
+.fullscreen-btn:hover{
+    /* background-color: rgba(0, 0, 0, 0.8); */
+    box-shadow: 0 0 10px white;
+    cursor: pointer;
+}
+
+.fullscreen-btn img{
+    width: 50px;
+    height: 50px;
+    filter: invert(1);
+    margin: 0.5rem;
+}
+
+.loading-bar{
+    position: relative;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 10px;
+    background-color: rgb(255, 255, 255);
+    border-radius: 10px 10px 15px 15px;
+    animation: reduceWidth 7s ease-out forwards;
+}
+
+@keyframes reduceWidth{
+    0%{
+        width: 100%;
+    }
+    100%{
+        width: 0%;
+    }
+}
+
+.menu-icon{
+    position: absolute;
+    top: 0px;
+    right: 20px;
+    z-index: 1000;
+    cursor: pointer;
+}
+
 .menu-icon img{
     height: 50px;
     width: 50px;
@@ -331,4 +420,11 @@ body{
         height: 75vh;
     }
 
+    .fullscreen-msg{
+        position: absolute;
+        top: 15%;
+        left:70%;
+        transform: scale(0.8);
+    }
+
 }

Main-Game/2-Teenage/Negative/index.html

@@ -4,11 +4,20 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Chapter 1: Chidhood</title>
+    <title>Chapter 2: Teenage</title>
+    <link rel="icon" href="/assets/tab-logo.png" type="image/png">
     <link rel="stylesheet" href="style.css">
 </head>
 
 <body>
+    <div class="fullscreen-msg">
+        <h2>Game is best played in fullscreen mode <br>Click for Fullscreen mode</h2>
+        <div class="fullscreen-btn" onclick="toggleFullScreen()">
+            <label>Fullscreen</label>
+            <img src="/assets/Fit Screen.gif" alt="fullscreen-icon">
+        </div>
+        <div class="loading-bar"></div>
+    </div>
     <div class="menu-icon" onclick="toggleMenu()">
         <img src="/assets/menu-icon.png">
     </div>
@@ -26,19 +35,21 @@
             </div>
         </div>
         <div class="menu-footer">
-            <div class="team-logo">
-                <img src="/assets/Sudo.svg" alt="Sudo Logo">
-            </div>
-            <a href="https://github.com/spark-lucifer/Choices-an-Anti-Drug-Adventure">
+            <a href="/index.html" target="_blank">
+                <div class="team-logo">
+                    <img src="/assets/sudo.png" alt="Sudo Logo">
+                </div>
+            </a>
+            <a href="https://github.com/spark-lucifer/Choices-an-Anti-Drug-Adventure" target="_blank">
                 <div class="repo-link">
                     <p>Project Repository</p>
-                    <img src="/assets/github.svg" alt="Project Repository">
+                    <img src="/assets/github.png" alt="Project Repository">
                 </div>
             </a>
         </div>
     </div>
     <div class="intro">
-        <h1>Chapter 1: Childhood</h1>
+        <h1>Chapter 2: Teenage</h1>
         <div class="right-half blink"></div>
         <div class="instructions">
             <p>You can turn off the story teller from Menu on top right</p>
@@ -52,12 +63,10 @@ <h1>Chapter 1: Childhood</h1>
     <div class="gamecontainer">
         <img alt="" class="background">
         <div class="choice-box" id="choiceBox">
-            <button class="choice" id="choice1" onclick="choiceMade(1)">In Curosity. He secretly eats one of
-                Ravi's
-                candies.</button>
-            <button class="choice" id="choice2" onclick="choiceMade(2)">With Fear and Understanding. He tells
-                his
-                parents about Ravis's behavior.</button>
+            <button class="choice" id="choice1" onclick="choiceMade(1)">Desperately wanting to fit in, Raj accepts the
+                powder and joins the group.</button>
+            <button class="choice" id="choice2" onclick="choiceMade(2)">Resisting temptation, Raj avoids the group and
+                connects with doctors and counselors to address his underlying issues.</button>
         </div>
         <div class="dialogue-box" id="dialogueBox"></div>
     </div>