diff --git a/Main-Game/1-Childhood/assets/0.png b/Main-Game/1-Childhood/assets/0.png new file mode 100644 index 0000000..3142687 Binary files /dev/null and b/Main-Game/1-Childhood/assets/0.png differ diff --git a/Main-Game/1-Childhood/assets/1.png b/Main-Game/1-Childhood/assets/1.png new file mode 100644 index 0000000..527175c Binary files /dev/null and b/Main-Game/1-Childhood/assets/1.png differ diff --git a/Main-Game/1-Childhood/assets/2.png b/Main-Game/1-Childhood/assets/2.png new file mode 100644 index 0000000..2918076 Binary files /dev/null and b/Main-Game/1-Childhood/assets/2.png differ diff --git a/Main-Game/1-Childhood/assets/3.png b/Main-Game/1-Childhood/assets/3.png new file mode 100644 index 0000000..b9af705 Binary files /dev/null and b/Main-Game/1-Childhood/assets/3.png differ diff --git a/Main-Game/1-Childhood/assets/4.png b/Main-Game/1-Childhood/assets/4.png new file mode 100644 index 0000000..30e5de6 Binary files /dev/null and b/Main-Game/1-Childhood/assets/4.png differ diff --git a/Main-Game/1-Childhood/index.html b/Main-Game/1-Childhood/index.html new file mode 100644 index 0000000..5302e43 --- /dev/null +++ b/Main-Game/1-Childhood/index.html @@ -0,0 +1,67 @@ + + + + + + + Chapter 1: Chidhood + + + + +
+ +
+
+
+
Story Teller
+
+ ON +
+
+
+
Full Screen
+
+ OFF +
+
+
+ + +
+

Project Repository

+ Project Repository +
+ +
+
+
+

Chapter 1: Childhood

+
+
+

You can turn off the story teller from Menu on top right

+

Click on right half of screen to continue

+
+
+
+

This Game is meant to be played in landscape mode please tilt your device and reload the page

+ tilt-icon +
+
+ +
+ + +
+
+
+ + + + \ No newline at end of file diff --git a/Main-Game/1-Childhood/script.js b/Main-Game/1-Childhood/script.js new file mode 100644 index 0000000..f7572df --- /dev/null +++ b/Main-Game/1-Childhood/script.js @@ -0,0 +1,290 @@ +const dialogueBox = document.getElementById("dialogueBox"); +const background = document.querySelector(".background"); +const rightHalf = document.querySelector(".right-half"); +var choiceBox = document.querySelector(".choice-box"); +var intro = document.querySelector(".intro"); +const menuItems = document.querySelector(".menu-items"); +localStorage.setItem("isStorytelling", true); + +sharedIsStoryTelling = localStorage.getItem("isStorytelling"); + +console.log("sharedIsStoryTelling = " + sharedIsStoryTelling); + +let isIntroShown = false; +let isMenuShown = false; + +const imageUrls = [ + "assets/0.png", + "assets/1.png", + "assets/2.png", + "assets/3.png", + "assets/4.png", + // Add more image URLs as needed +]; + +checkStoryTeller(); + +// Preload images +function preloadImages(urls) { + const imagePromises = []; + + for (const url of urls) { + const img = new Image(); + img.src = url; + + const promise = new Promise((resolve) => { + img.onload = resolve; + }); + + imagePromises.push(promise); + } + + return Promise.all(imagePromises); +} + +preloadImages(imageUrls) + .then(() => { + console.log("All images are preloaded. Start your game here."); + if (window.innerWidth > 760) { + showIntro(); + setTimeout(showRightHalf, 5000); + } + }) + .catch((error) => { + console.error("Image preload failed:", error); + }); + +let currentStoryIndex = 0; +const story = [ + "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.", + "What should Raj do?", + // Add more story lines +]; + +let currentCharacter = 0; +let isTyping = false; +let typingTimeout; // Store the typing timeout to be able to clear it + +document.addEventListener("click", handleScreenClick); + +const synth = window.speechSynthesis; + +function handleScreenClick(event) { + const clickedElement = event.target; + + if ( + !isIntroShown && + !clickedElement.closest(".mobile-popup") && + !clickedElement.closest(".menu-icon") && + !clickedElement.closest(".menu-items") + ) { + isIntroShown = true; + hideIntro(); + hideRightHalf(); + hideMenu(); + speak(story[currentStoryIndex]); + updateDialogue(); + updateBackground(); + return; + } + + // Check if the clicked element or any of its ancestors is the .choice-box + if ( + !clickedElement.closest(".choice-box") && + !clickedElement.closest(".mobile-popup") && + !clickedElement.closest(".menu-icon") && + !clickedElement.closest(".menu-items") + ) { + if (isTyping) { + // If typing is in progress, finish it instantly + clearTimeout(typingTimeout); // Clear the typing timeout + currentCharacter = story[currentStoryIndex].length; + dialogueBox.textContent = story[currentStoryIndex]; + isTyping = false; + } else { + const clickX = event.clientX; + const halfScreenWidth = window.innerWidth / 2; + + if (clickX > halfScreenWidth) { + // Clicked on the right half, move story forward + currentStoryIndex = Math.min(currentStoryIndex + 1, story.length - 1); + stopSpeaking(); + hideMenu(); + speak(story[currentStoryIndex]); + } else { + // Clicked on the left half, go back in the story + currentStoryIndex = Math.max(currentStoryIndex - 1, 0); + hideChoiceBox(); + } + + currentCharacter = 0; + updateDialogue(); + updateBackground(); + + if (currentStoryIndex === story.length - 1) { + showChoiceBox(); + } + } + } +} + +function speak(text) { + if (!sharedIsStoryTelling || window.innerWidth < 760) return; + const utterance = new SpeechSynthesisUtterance(text); + + // Get the list of available voices + 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')); + + // Set the selected voice + utterance.voice = femaleVoice || voices[0]; // Use the first available voice if a suitable female voice is not found + + // Additional voice settings (customize as needed) + utterance.rate = 1.0; // Speech rate (adjust as needed) + utterance.pitch = 1.0; // Speech pitch (adjust as needed) + + // Speak the text + synth.speak(utterance); +} + +function stopSpeaking() { + synth.cancel(); +} + +function hideMenu() { + menuItems.style.display = "none"; + isMenuShown = false; +} + +function toggleMenu() { + if (!isMenuShown) { + menuItems.style.display = "flex"; + isMenuShown = true; + } else { + menuItems.style.display = "none"; + isMenuShown = false; + } +} + +function choiceMade(choice) { + if (choice === 1) { + window.location.href = "/Main-Game/2-Teenage/Negative/index.html"; + } else if (choice === 2) { + window.location.href = "/Main-Game/2-Teenage/Positive/index.html"; + } +} + +function checkStoryTeller() { + const storyTeller = document.querySelector(".toggle-button-story"); + if (sharedIsStoryTelling) { + storyTeller.textContent = "ON"; + storyTeller.style.backgroundColor = "green"; + sharedIsStoryTelling = true; + } else { + storyTeller.textContent = "OFF"; + storyTeller.style.backgroundColor = "transparent"; + sharedIsStoryTelling = false; + } +} + +function toggleStoryTeller() { + const storyTeller = document.querySelector(".toggle-button-story"); + if (sharedIsStoryTelling) { + sharedIsStoryTelling = false; + localStorage.setItem("isStorytelling", sharedIsStoryTelling); + console.log("Storytelling turned off"); + console.log("sharedIsStoryTelling = " + sharedIsStoryTelling); + storyTeller.textContent = "OFF"; + storyTeller.style.backgroundColor = "transparent"; + } else { + sharedIsStoryTelling = true; + localStorage.setItem("isStorytelling", sharedIsStoryTelling); + console.log("Storytelling turned on"); + console.log("sharedIsStoryTelling = " + sharedIsStoryTelling); + storyTeller.textContent = "ON"; + storyTeller.style.backgroundColor = "green"; + } +} + +function toggleFullScreen() { + const fullscreen = document.querySelector(".toggle-button-fullscreen"); + if (!document.fullscreenElement) { + document.documentElement.requestFullscreen(); + fullscreen.textContent = "ON"; + fullscreen.style.backgroundColor = "green"; + } else { + if (document.exitFullscreen) { + document.exitFullscreen(); + fullscreen.textContent = "OFF"; + fullscreen.style.backgroundColor = "transparent"; + } + } +} + +function showChoiceBox() { + choiceBox.style.display = "flex"; + choiceBox.style.visibility = "visible"; +} + +function hideChoiceBox() { + choiceBox.style.display = "none"; + choiceBox.style.visibility = "hidden"; +} + +function hideDialogueBox() { + dialogueBox.style.display = "none"; + dialogueBox.style.visibility = "hidden"; +} + +function showDialogueBox() { + dialogueBox.style.display = "flex"; + dialogueBox.style.visibility = "visible"; +} + +function hideIntro() { + intro.style.display = "none"; + intro.style.visibility = "hidden"; +} + +function showRightHalf() { + rightHalf.style.display = "block"; + rightHalf.classList.add("blink"); +} + +function hideRightHalf() { + rightHalf.style.display = "none"; + rightHalf.classList.remove("blink"); +} + +function showIntro() { + intro.style.display = "flex"; + intro.style.visibility = "visible"; +} + +function updateBackground() { + background.style.backgroundImage = `url('assets/${currentStoryIndex}.png')`; +} + +function updateDialogue() { + isTyping = true; + dialogueBox.textContent = ""; // Clear previous text + + function type() { + dialogueBox.textContent += story[currentStoryIndex][currentCharacter]; + currentCharacter++; + + if (currentCharacter < story[currentStoryIndex].length) { + typingTimeout = setTimeout(type, 25); // Store the timeout for clearing later + } else { + isTyping = false; + } + } + + type(); +} diff --git a/Main-Game/1-Childhood/style.css b/Main-Game/1-Childhood/style.css new file mode 100644 index 0000000..77180c2 --- /dev/null +++ b/Main-Game/1-Childhood/style.css @@ -0,0 +1,334 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body{ + margin: 0; + padding: 0; + background-color: black; + font-family: 'Press Start 2P', cursive; + font-size: 1.5rem; + overflow: hidden; +} + +.intro{ + width: 100%; + height: 85vh; + background-color: black; + color: white; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + font-size: 1.5rem; + text-align: center; + font-family: 'Press Start 2P', cursive; +} + +.menu-icon img{ + height: 50px; + width: 50px; + position: absolute; + top: 20px; + right: 20px; + z-index:1000; +} + +.menu-items{ + color: white; + background-color: rgba(0, 0, 0, 0.5); + backdrop-filter: blur(8px); + border: 1px solid white; + height: 50vh; + width: 50vw; + display: flex; + justify-content: center; + flex-direction: column; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 1000; + display: none; + transition: all 0.5s ease-in-out; +} + +.menu-item-container { + display: flex; + justify-content: space-between; + align-items: center; + position: relative; + left:50%; + transform: translate(-50%, 0); + width: 60%; + margin: 1rem; + } + + .toggle-button-story { + border: 1px solid white; + background-color: green; + border-radius: 5px; + backdrop-filter: blur(8px); + cursor: pointer; + padding: 0.5rem; + } + .toggle-button-fullscreen { + border: 1px solid white; + background-color: transparent; + border-radius: 5px; + backdrop-filter: blur(8px); + cursor: pointer; + padding: 0.5rem; + } + + + .toggle-button-story:hover, .toggle-button-fullscreen:hover { + transform: scale(1.1); + box-shadow: 0 0 10px white; + } + + .menu-footer{ + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + width: 100%; + position: absolute; + bottom: 0; + } + + .menu-footer a{ + color: white; + } + + .team-logo + { + padding-left: 1.5rem; + } + + .team-logo img{ + width: 80px; + margin: 0.5rem; + } + + .repo-link{ + background-color: rgba(255, 254, 254, 0.1); + border-radius:15px 0 0 0; + backdrop-filter: blur(8px); + padding:0 1rem; + display: flex; + justify-content: center; + align-items: center; + } + +.repo-link p{ + margin: 0.5rem; + font-size: 1rem; +} + + .repo-link img{ + height: 40px; + margin: 0.5rem; + } + + + +.right-half { + width: 50%; + height: 100%; + background-color: rgba(97, 97, 28, 0.801); + position: absolute; + top: 0; + right: 0; + z-index: 1; + display: none; + background: linear-gradient(to left, rgba(97, 97, 28, 0.801) 0%, rgba(97, 97, 28, 0) 100%); +} + +.blink { + animation: blinkAnimation 0.5s infinite alternate; +} + +@keyframes blinkAnimation { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } +} + + + +.intro h1 { + opacity: 0; + transform: translateY(20px); /* Initial position, move from bottom */ + + /* Animation for fading in and moving up */ + animation: fadeInFromBottom 2s ease-out forwards; + z-index: 2; +} + +/* Define the animation */ +@keyframes fadeInFromBottom { + from { + opacity: 0; + transform: translateY(20px); /* Start from 20px below */ + } + to { + opacity: 1; + transform: translateY(0); /* Move to the original position */ + } +} + +.instructions{ + position: absolute; + bottom: 20px; + z-index: 2; +} + +.instructions p{ + margin-bottom: 1rem; +} + +.game-container{ + position: relative; + width: 100vw; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; +} + +.background{ + background: no-repeat center center/cover; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; + transition: all 0.9s ease; + border-image: fill 0 linear-gradient(#0003, #0007); +} + +.choice-box{ + display: none; + visibility: hidden; + background-color: rgba(0, 0, 0, 0.9); + position: absolute; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + width: 50%; + height: 25%; + top: 40%; + left: 50%; + transform: translate(-50%, -50%); + background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4) 10%, rgba(0, 0, 0, 0.4) 90%, rgba(0, 0, 0, 0)); +} + +.choice-box button{ + background-color: transparent; + border: 1px solid white; + color: white; + padding: 0.5rem 1rem; + font-family: 'Press Start 2P', cursive; + font-size: 1.5rem; + margin: 0.5rem; + cursor: pointer; + transition: all 0.3s ease; + backdrop-filter: blur(8px); +} + +.choice-box button:hover{ + background-color: white; + color: black; + transform: scale(1.1); + box-shadow: 0 0 10px white; +} + +.dialogue-box{ + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 20%; + background: rgba(0, 0, 0, 0.5); + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + padding: 1rem; + color: white; + font-size: 1.5rem; + text-align: center; + z-index: 1; + background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 90%); +} + +@media screen and (max-width: 768px){ + .gamecontainer{ + display: none; + visibility: hidden; + } + + .menu-icon img{ + display: none; + } + + body{ + background-color: black; + color: white; + display: flex; + justify-content: center; + align-items: center; + } + + .intro + { + display: none; + visibility: hidden; + } + + .mobile-popup{ + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + text-align: center; + position: absolute; + top:50%; + left: 50%; + transform: translate(-50%, -50%); + width: 95%; + } + + .tilt-icon{ + width: 100px; + height: 100px; + margin-top: 3rem; + } +} + +@media screen and (min-width: 768px){ + .mobile-popup{ + display: none; + visibility: hidden; + } +} + +@media screen and (max-height: 500px){ + + .choice-box{ + height: 40%; + } + + .menu-items{ + height: 75vh; + } + +} diff --git a/Main-Game/2-Teenage/Negative/index.html b/Main-Game/2-Teenage/Negative/index.html new file mode 100644 index 0000000..5302e43 --- /dev/null +++ b/Main-Game/2-Teenage/Negative/index.html @@ -0,0 +1,67 @@ + + + + + + + Chapter 1: Chidhood + + + + +
+ +
+
+
+
Story Teller
+
+ ON +
+
+
+
Full Screen
+
+ OFF +
+
+
+ + +
+

Project Repository

+ Project Repository +
+ +
+
+
+

Chapter 1: Childhood

+
+
+

You can turn off the story teller from Menu on top right

+

Click on right half of screen to continue

+
+
+
+

This Game is meant to be played in landscape mode please tilt your device and reload the page

+ tilt-icon +
+
+ +
+ + +
+
+
+ + + + \ No newline at end of file diff --git a/Main-Game/2-Teenage/Negative/script.js b/Main-Game/2-Teenage/Negative/script.js new file mode 100644 index 0000000..3a8fc9b --- /dev/null +++ b/Main-Game/2-Teenage/Negative/script.js @@ -0,0 +1,282 @@ +const dialogueBox = document.getElementById("dialogueBox"); +const background = document.querySelector(".background"); +const rightHalf = document.querySelector(".right-half"); +var choiceBox = document.querySelector(".choice-box"); +var intro = document.querySelector(".intro"); +const menuItems = document.querySelector(".menu-items"); +let sharedIsStoryTelling = localStorage.getItem("isStorytelling"); + +console.log("sharedIsStoryTelling = " + sharedIsStoryTelling); + +let isIntroShown = false; +let isMenuShown = false; + +const imageUrls = [ + "assets/0.png", + "assets/1.png", + "assets/2.png", + "assets/3.png", + "assets/4.png", + // Add more image URLs as needed +]; + +checkStoryTeller(); + +// Preload images +function preloadImages(urls) { + const imagePromises = []; + + for (const url of urls) { + const img = new Image(); + img.src = url; + + const promise = new Promise((resolve) => { + img.onload = resolve; + }); + + imagePromises.push(promise); + } + + return Promise.all(imagePromises); +} + +preloadImages(imageUrls) + .then(() => { + console.log("All images are preloaded. Start your game here."); + if (window.innerWidth > 760) { + showIntro(); + setTimeout(showRightHalf, 5000); + } + }) + .catch((error) => { + console.error("Image preload failed:", error); + }); + +let currentStoryIndex = 0; +const story = [ + "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.", + "What should Raj do?", + // Add more story lines +]; + +let currentCharacter = 0; +let isTyping = false; +let typingTimeout; // Store the typing timeout to be able to clear it + +document.addEventListener("click", handleScreenClick); + +const synth = window.speechSynthesis; + +function handleScreenClick(event) { + const clickedElement = event.target; + + if ( + !isIntroShown && + !clickedElement.closest(".mobile-popup") && + !clickedElement.closest(".menu-icon") && + !clickedElement.closest(".menu-items") + ) { + isIntroShown = true; + hideIntro(); + hideRightHalf(); + hideMenu(); + speak(story[currentStoryIndex]); + updateDialogue(); + updateBackground(); + return; + } + + // Check if the clicked element or any of its ancestors is the .choice-box + if ( + !clickedElement.closest(".choice-box") && + !clickedElement.closest(".mobile-popup") && + !clickedElement.closest(".menu-icon") && + !clickedElement.closest(".menu-items") + ) { + if (isTyping) { + // If typing is in progress, finish it instantly + clearTimeout(typingTimeout); // Clear the typing timeout + currentCharacter = story[currentStoryIndex].length; + dialogueBox.textContent = story[currentStoryIndex]; + isTyping = false; + } else { + const clickX = event.clientX; + const halfScreenWidth = window.innerWidth / 2; + + if (clickX > halfScreenWidth) { + // Clicked on the right half, move story forward + currentStoryIndex = Math.min(currentStoryIndex + 1, story.length - 1); + stopSpeaking(); + hideMenu(); + speak(story[currentStoryIndex]); + } else { + // Clicked on the left half, go back in the story + currentStoryIndex = Math.max(currentStoryIndex - 1, 0); + hideChoiceBox(); + } + + currentCharacter = 0; + updateDialogue(); + updateBackground(); + + if (currentStoryIndex === story.length - 1) { + showChoiceBox(); + } + } + } +} + +function speak(text) { + if (!sharedIsStoryTelling || window.innerWidth < 760) return; + const utterance = new SpeechSynthesisUtterance(text); + + // Get the list of available voices + const voices = synth.getVoices(); + + utterance.voice = voices[10]; // Set the voice + + // Additional voice settings (customize as needed) + utterance.rate = 1.0; // Speech rate (adjust as needed) + utterance.pitch = 1.0; // Speech pitch (adjust as needed) + + // Speak the text + synth.speak(utterance); +} + +function stopSpeaking() { + synth.cancel(); +} + +function hideMenu() { + menuItems.style.display = "none"; + isMenuShown = false; +} + +function toggleMenu() { + if (!isMenuShown) { + menuItems.style.display = "flex"; + isMenuShown = true; + } else { + menuItems.style.display = "none"; + isMenuShown = false; + } +} + +function choiceMade(choice) { + if (choice === 1) { + window.location.href = "/Main-Game/2-Teenage/Negative/index.html"; + } else if (choice === 2) { + window.location.href = "/Main-Game/2-Teenage/Positive/index.html"; + } +} + +function checkStoryTeller() { + const storyTeller = document.querySelector(".toggle-button-story"); + if (sharedIsStoryTelling === "true") { + storyTeller.textContent = "ON"; + storyTeller.style.backgroundColor = "green"; + sharedIsStoryTelling = true; + } else { + storyTeller.textContent = "OFF"; + storyTeller.style.backgroundColor = "transparent"; + sharedIsStoryTelling = false; + } +} + +function toggleStoryTeller() { + const storyTeller = document.querySelector(".toggle-button-story"); + if (sharedIsStoryTelling) { + sharedIsStoryTelling = false; + localStorage.setItem("isStorytelling", false); + console.log("Storytelling turned off"); + storyTeller.textContent = "OFF"; + storyTeller.style.backgroundColor = "transparent"; + } else { + sharedIsStoryTelling = true; + localStorage.setItem("isStorytelling", true); + console.log("Storytelling turned on"); + storyTeller.textContent = "ON"; + storyTeller.style.backgroundColor = "green"; + } +} + +function toggleFullScreen() { + const fullscreen = document.querySelector(".toggle-button-fullscreen"); + if (!document.fullscreenElement) { + document.documentElement.requestFullscreen(); + fullscreen.textContent = "ON"; + fullscreen.style.backgroundColor = "green"; + } else { + if (document.exitFullscreen) { + document.exitFullscreen(); + fullscreen.textContent = "OFF"; + fullscreen.style.backgroundColor = "transparent"; + } + } +} + +function showChoiceBox() { + choiceBox.style.display = "flex"; + choiceBox.style.visibility = "visible"; +} + +function hideChoiceBox() { + choiceBox.style.display = "none"; + choiceBox.style.visibility = "hidden"; +} + +function hideDialogueBox() { + dialogueBox.style.display = "none"; + dialogueBox.style.visibility = "hidden"; +} + +function showDialogueBox() { + dialogueBox.style.display = "flex"; + dialogueBox.style.visibility = "visible"; +} + +function hideIntro() { + intro.style.display = "none"; + intro.style.visibility = "hidden"; +} + +function showRightHalf() { + rightHalf.style.display = "block"; + rightHalf.classList.add("blink"); +} + +function hideRightHalf() { + rightHalf.style.display = "none"; + rightHalf.classList.remove("blink"); +} + +function showIntro() { + intro.style.display = "flex"; + intro.style.visibility = "visible"; +} + +function updateBackground() { + background.style.backgroundImage = `url('assets/${currentStoryIndex}.png')`; +} + +function updateDialogue() { + isTyping = true; + dialogueBox.textContent = ""; // Clear previous text + + function type() { + dialogueBox.textContent += story[currentStoryIndex][currentCharacter]; + currentCharacter++; + + if (currentCharacter < story[currentStoryIndex].length) { + typingTimeout = setTimeout(type, 25); // Store the timeout for clearing later + } else { + isTyping = false; + } + } + + type(); +} diff --git a/Main-Game/2-Teenage/Negative/style.css b/Main-Game/2-Teenage/Negative/style.css new file mode 100644 index 0000000..77180c2 --- /dev/null +++ b/Main-Game/2-Teenage/Negative/style.css @@ -0,0 +1,334 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body{ + margin: 0; + padding: 0; + background-color: black; + font-family: 'Press Start 2P', cursive; + font-size: 1.5rem; + overflow: hidden; +} + +.intro{ + width: 100%; + height: 85vh; + background-color: black; + color: white; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + font-size: 1.5rem; + text-align: center; + font-family: 'Press Start 2P', cursive; +} + +.menu-icon img{ + height: 50px; + width: 50px; + position: absolute; + top: 20px; + right: 20px; + z-index:1000; +} + +.menu-items{ + color: white; + background-color: rgba(0, 0, 0, 0.5); + backdrop-filter: blur(8px); + border: 1px solid white; + height: 50vh; + width: 50vw; + display: flex; + justify-content: center; + flex-direction: column; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 1000; + display: none; + transition: all 0.5s ease-in-out; +} + +.menu-item-container { + display: flex; + justify-content: space-between; + align-items: center; + position: relative; + left:50%; + transform: translate(-50%, 0); + width: 60%; + margin: 1rem; + } + + .toggle-button-story { + border: 1px solid white; + background-color: green; + border-radius: 5px; + backdrop-filter: blur(8px); + cursor: pointer; + padding: 0.5rem; + } + .toggle-button-fullscreen { + border: 1px solid white; + background-color: transparent; + border-radius: 5px; + backdrop-filter: blur(8px); + cursor: pointer; + padding: 0.5rem; + } + + + .toggle-button-story:hover, .toggle-button-fullscreen:hover { + transform: scale(1.1); + box-shadow: 0 0 10px white; + } + + .menu-footer{ + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + width: 100%; + position: absolute; + bottom: 0; + } + + .menu-footer a{ + color: white; + } + + .team-logo + { + padding-left: 1.5rem; + } + + .team-logo img{ + width: 80px; + margin: 0.5rem; + } + + .repo-link{ + background-color: rgba(255, 254, 254, 0.1); + border-radius:15px 0 0 0; + backdrop-filter: blur(8px); + padding:0 1rem; + display: flex; + justify-content: center; + align-items: center; + } + +.repo-link p{ + margin: 0.5rem; + font-size: 1rem; +} + + .repo-link img{ + height: 40px; + margin: 0.5rem; + } + + + +.right-half { + width: 50%; + height: 100%; + background-color: rgba(97, 97, 28, 0.801); + position: absolute; + top: 0; + right: 0; + z-index: 1; + display: none; + background: linear-gradient(to left, rgba(97, 97, 28, 0.801) 0%, rgba(97, 97, 28, 0) 100%); +} + +.blink { + animation: blinkAnimation 0.5s infinite alternate; +} + +@keyframes blinkAnimation { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } +} + + + +.intro h1 { + opacity: 0; + transform: translateY(20px); /* Initial position, move from bottom */ + + /* Animation for fading in and moving up */ + animation: fadeInFromBottom 2s ease-out forwards; + z-index: 2; +} + +/* Define the animation */ +@keyframes fadeInFromBottom { + from { + opacity: 0; + transform: translateY(20px); /* Start from 20px below */ + } + to { + opacity: 1; + transform: translateY(0); /* Move to the original position */ + } +} + +.instructions{ + position: absolute; + bottom: 20px; + z-index: 2; +} + +.instructions p{ + margin-bottom: 1rem; +} + +.game-container{ + position: relative; + width: 100vw; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; +} + +.background{ + background: no-repeat center center/cover; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; + transition: all 0.9s ease; + border-image: fill 0 linear-gradient(#0003, #0007); +} + +.choice-box{ + display: none; + visibility: hidden; + background-color: rgba(0, 0, 0, 0.9); + position: absolute; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + width: 50%; + height: 25%; + top: 40%; + left: 50%; + transform: translate(-50%, -50%); + background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4) 10%, rgba(0, 0, 0, 0.4) 90%, rgba(0, 0, 0, 0)); +} + +.choice-box button{ + background-color: transparent; + border: 1px solid white; + color: white; + padding: 0.5rem 1rem; + font-family: 'Press Start 2P', cursive; + font-size: 1.5rem; + margin: 0.5rem; + cursor: pointer; + transition: all 0.3s ease; + backdrop-filter: blur(8px); +} + +.choice-box button:hover{ + background-color: white; + color: black; + transform: scale(1.1); + box-shadow: 0 0 10px white; +} + +.dialogue-box{ + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 20%; + background: rgba(0, 0, 0, 0.5); + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + padding: 1rem; + color: white; + font-size: 1.5rem; + text-align: center; + z-index: 1; + background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 90%); +} + +@media screen and (max-width: 768px){ + .gamecontainer{ + display: none; + visibility: hidden; + } + + .menu-icon img{ + display: none; + } + + body{ + background-color: black; + color: white; + display: flex; + justify-content: center; + align-items: center; + } + + .intro + { + display: none; + visibility: hidden; + } + + .mobile-popup{ + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + text-align: center; + position: absolute; + top:50%; + left: 50%; + transform: translate(-50%, -50%); + width: 95%; + } + + .tilt-icon{ + width: 100px; + height: 100px; + margin-top: 3rem; + } +} + +@media screen and (min-width: 768px){ + .mobile-popup{ + display: none; + visibility: hidden; + } +} + +@media screen and (max-height: 500px){ + + .choice-box{ + height: 40%; + } + + .menu-items{ + height: 75vh; + } + +} diff --git a/Main-Game/2-Teenage/Positive/index.html b/Main-Game/2-Teenage/Positive/index.html new file mode 100644 index 0000000..5302e43 --- /dev/null +++ b/Main-Game/2-Teenage/Positive/index.html @@ -0,0 +1,67 @@ + + + + + + + Chapter 1: Chidhood + + + + +
+ +
+
+
+
Story Teller
+
+ ON +
+
+
+
Full Screen
+
+ OFF +
+
+
+ + +
+

Project Repository

+ Project Repository +
+ +
+
+
+

Chapter 1: Childhood

+
+
+

You can turn off the story teller from Menu on top right

+

Click on right half of screen to continue

+
+
+
+

This Game is meant to be played in landscape mode please tilt your device and reload the page

+ tilt-icon +
+
+ +
+ + +
+
+
+ + + + \ No newline at end of file diff --git a/Main-Game/2-Teenage/Positive/script.js b/Main-Game/2-Teenage/Positive/script.js new file mode 100644 index 0000000..3a8fc9b --- /dev/null +++ b/Main-Game/2-Teenage/Positive/script.js @@ -0,0 +1,282 @@ +const dialogueBox = document.getElementById("dialogueBox"); +const background = document.querySelector(".background"); +const rightHalf = document.querySelector(".right-half"); +var choiceBox = document.querySelector(".choice-box"); +var intro = document.querySelector(".intro"); +const menuItems = document.querySelector(".menu-items"); +let sharedIsStoryTelling = localStorage.getItem("isStorytelling"); + +console.log("sharedIsStoryTelling = " + sharedIsStoryTelling); + +let isIntroShown = false; +let isMenuShown = false; + +const imageUrls = [ + "assets/0.png", + "assets/1.png", + "assets/2.png", + "assets/3.png", + "assets/4.png", + // Add more image URLs as needed +]; + +checkStoryTeller(); + +// Preload images +function preloadImages(urls) { + const imagePromises = []; + + for (const url of urls) { + const img = new Image(); + img.src = url; + + const promise = new Promise((resolve) => { + img.onload = resolve; + }); + + imagePromises.push(promise); + } + + return Promise.all(imagePromises); +} + +preloadImages(imageUrls) + .then(() => { + console.log("All images are preloaded. Start your game here."); + if (window.innerWidth > 760) { + showIntro(); + setTimeout(showRightHalf, 5000); + } + }) + .catch((error) => { + console.error("Image preload failed:", error); + }); + +let currentStoryIndex = 0; +const story = [ + "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.", + "What should Raj do?", + // Add more story lines +]; + +let currentCharacter = 0; +let isTyping = false; +let typingTimeout; // Store the typing timeout to be able to clear it + +document.addEventListener("click", handleScreenClick); + +const synth = window.speechSynthesis; + +function handleScreenClick(event) { + const clickedElement = event.target; + + if ( + !isIntroShown && + !clickedElement.closest(".mobile-popup") && + !clickedElement.closest(".menu-icon") && + !clickedElement.closest(".menu-items") + ) { + isIntroShown = true; + hideIntro(); + hideRightHalf(); + hideMenu(); + speak(story[currentStoryIndex]); + updateDialogue(); + updateBackground(); + return; + } + + // Check if the clicked element or any of its ancestors is the .choice-box + if ( + !clickedElement.closest(".choice-box") && + !clickedElement.closest(".mobile-popup") && + !clickedElement.closest(".menu-icon") && + !clickedElement.closest(".menu-items") + ) { + if (isTyping) { + // If typing is in progress, finish it instantly + clearTimeout(typingTimeout); // Clear the typing timeout + currentCharacter = story[currentStoryIndex].length; + dialogueBox.textContent = story[currentStoryIndex]; + isTyping = false; + } else { + const clickX = event.clientX; + const halfScreenWidth = window.innerWidth / 2; + + if (clickX > halfScreenWidth) { + // Clicked on the right half, move story forward + currentStoryIndex = Math.min(currentStoryIndex + 1, story.length - 1); + stopSpeaking(); + hideMenu(); + speak(story[currentStoryIndex]); + } else { + // Clicked on the left half, go back in the story + currentStoryIndex = Math.max(currentStoryIndex - 1, 0); + hideChoiceBox(); + } + + currentCharacter = 0; + updateDialogue(); + updateBackground(); + + if (currentStoryIndex === story.length - 1) { + showChoiceBox(); + } + } + } +} + +function speak(text) { + if (!sharedIsStoryTelling || window.innerWidth < 760) return; + const utterance = new SpeechSynthesisUtterance(text); + + // Get the list of available voices + const voices = synth.getVoices(); + + utterance.voice = voices[10]; // Set the voice + + // Additional voice settings (customize as needed) + utterance.rate = 1.0; // Speech rate (adjust as needed) + utterance.pitch = 1.0; // Speech pitch (adjust as needed) + + // Speak the text + synth.speak(utterance); +} + +function stopSpeaking() { + synth.cancel(); +} + +function hideMenu() { + menuItems.style.display = "none"; + isMenuShown = false; +} + +function toggleMenu() { + if (!isMenuShown) { + menuItems.style.display = "flex"; + isMenuShown = true; + } else { + menuItems.style.display = "none"; + isMenuShown = false; + } +} + +function choiceMade(choice) { + if (choice === 1) { + window.location.href = "/Main-Game/2-Teenage/Negative/index.html"; + } else if (choice === 2) { + window.location.href = "/Main-Game/2-Teenage/Positive/index.html"; + } +} + +function checkStoryTeller() { + const storyTeller = document.querySelector(".toggle-button-story"); + if (sharedIsStoryTelling === "true") { + storyTeller.textContent = "ON"; + storyTeller.style.backgroundColor = "green"; + sharedIsStoryTelling = true; + } else { + storyTeller.textContent = "OFF"; + storyTeller.style.backgroundColor = "transparent"; + sharedIsStoryTelling = false; + } +} + +function toggleStoryTeller() { + const storyTeller = document.querySelector(".toggle-button-story"); + if (sharedIsStoryTelling) { + sharedIsStoryTelling = false; + localStorage.setItem("isStorytelling", false); + console.log("Storytelling turned off"); + storyTeller.textContent = "OFF"; + storyTeller.style.backgroundColor = "transparent"; + } else { + sharedIsStoryTelling = true; + localStorage.setItem("isStorytelling", true); + console.log("Storytelling turned on"); + storyTeller.textContent = "ON"; + storyTeller.style.backgroundColor = "green"; + } +} + +function toggleFullScreen() { + const fullscreen = document.querySelector(".toggle-button-fullscreen"); + if (!document.fullscreenElement) { + document.documentElement.requestFullscreen(); + fullscreen.textContent = "ON"; + fullscreen.style.backgroundColor = "green"; + } else { + if (document.exitFullscreen) { + document.exitFullscreen(); + fullscreen.textContent = "OFF"; + fullscreen.style.backgroundColor = "transparent"; + } + } +} + +function showChoiceBox() { + choiceBox.style.display = "flex"; + choiceBox.style.visibility = "visible"; +} + +function hideChoiceBox() { + choiceBox.style.display = "none"; + choiceBox.style.visibility = "hidden"; +} + +function hideDialogueBox() { + dialogueBox.style.display = "none"; + dialogueBox.style.visibility = "hidden"; +} + +function showDialogueBox() { + dialogueBox.style.display = "flex"; + dialogueBox.style.visibility = "visible"; +} + +function hideIntro() { + intro.style.display = "none"; + intro.style.visibility = "hidden"; +} + +function showRightHalf() { + rightHalf.style.display = "block"; + rightHalf.classList.add("blink"); +} + +function hideRightHalf() { + rightHalf.style.display = "none"; + rightHalf.classList.remove("blink"); +} + +function showIntro() { + intro.style.display = "flex"; + intro.style.visibility = "visible"; +} + +function updateBackground() { + background.style.backgroundImage = `url('assets/${currentStoryIndex}.png')`; +} + +function updateDialogue() { + isTyping = true; + dialogueBox.textContent = ""; // Clear previous text + + function type() { + dialogueBox.textContent += story[currentStoryIndex][currentCharacter]; + currentCharacter++; + + if (currentCharacter < story[currentStoryIndex].length) { + typingTimeout = setTimeout(type, 25); // Store the timeout for clearing later + } else { + isTyping = false; + } + } + + type(); +} diff --git a/Main-Game/2-Teenage/Positive/style.css b/Main-Game/2-Teenage/Positive/style.css new file mode 100644 index 0000000..77180c2 --- /dev/null +++ b/Main-Game/2-Teenage/Positive/style.css @@ -0,0 +1,334 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body{ + margin: 0; + padding: 0; + background-color: black; + font-family: 'Press Start 2P', cursive; + font-size: 1.5rem; + overflow: hidden; +} + +.intro{ + width: 100%; + height: 85vh; + background-color: black; + color: white; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + font-size: 1.5rem; + text-align: center; + font-family: 'Press Start 2P', cursive; +} + +.menu-icon img{ + height: 50px; + width: 50px; + position: absolute; + top: 20px; + right: 20px; + z-index:1000; +} + +.menu-items{ + color: white; + background-color: rgba(0, 0, 0, 0.5); + backdrop-filter: blur(8px); + border: 1px solid white; + height: 50vh; + width: 50vw; + display: flex; + justify-content: center; + flex-direction: column; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 1000; + display: none; + transition: all 0.5s ease-in-out; +} + +.menu-item-container { + display: flex; + justify-content: space-between; + align-items: center; + position: relative; + left:50%; + transform: translate(-50%, 0); + width: 60%; + margin: 1rem; + } + + .toggle-button-story { + border: 1px solid white; + background-color: green; + border-radius: 5px; + backdrop-filter: blur(8px); + cursor: pointer; + padding: 0.5rem; + } + .toggle-button-fullscreen { + border: 1px solid white; + background-color: transparent; + border-radius: 5px; + backdrop-filter: blur(8px); + cursor: pointer; + padding: 0.5rem; + } + + + .toggle-button-story:hover, .toggle-button-fullscreen:hover { + transform: scale(1.1); + box-shadow: 0 0 10px white; + } + + .menu-footer{ + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + width: 100%; + position: absolute; + bottom: 0; + } + + .menu-footer a{ + color: white; + } + + .team-logo + { + padding-left: 1.5rem; + } + + .team-logo img{ + width: 80px; + margin: 0.5rem; + } + + .repo-link{ + background-color: rgba(255, 254, 254, 0.1); + border-radius:15px 0 0 0; + backdrop-filter: blur(8px); + padding:0 1rem; + display: flex; + justify-content: center; + align-items: center; + } + +.repo-link p{ + margin: 0.5rem; + font-size: 1rem; +} + + .repo-link img{ + height: 40px; + margin: 0.5rem; + } + + + +.right-half { + width: 50%; + height: 100%; + background-color: rgba(97, 97, 28, 0.801); + position: absolute; + top: 0; + right: 0; + z-index: 1; + display: none; + background: linear-gradient(to left, rgba(97, 97, 28, 0.801) 0%, rgba(97, 97, 28, 0) 100%); +} + +.blink { + animation: blinkAnimation 0.5s infinite alternate; +} + +@keyframes blinkAnimation { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } +} + + + +.intro h1 { + opacity: 0; + transform: translateY(20px); /* Initial position, move from bottom */ + + /* Animation for fading in and moving up */ + animation: fadeInFromBottom 2s ease-out forwards; + z-index: 2; +} + +/* Define the animation */ +@keyframes fadeInFromBottom { + from { + opacity: 0; + transform: translateY(20px); /* Start from 20px below */ + } + to { + opacity: 1; + transform: translateY(0); /* Move to the original position */ + } +} + +.instructions{ + position: absolute; + bottom: 20px; + z-index: 2; +} + +.instructions p{ + margin-bottom: 1rem; +} + +.game-container{ + position: relative; + width: 100vw; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; +} + +.background{ + background: no-repeat center center/cover; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; + transition: all 0.9s ease; + border-image: fill 0 linear-gradient(#0003, #0007); +} + +.choice-box{ + display: none; + visibility: hidden; + background-color: rgba(0, 0, 0, 0.9); + position: absolute; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + width: 50%; + height: 25%; + top: 40%; + left: 50%; + transform: translate(-50%, -50%); + background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4) 10%, rgba(0, 0, 0, 0.4) 90%, rgba(0, 0, 0, 0)); +} + +.choice-box button{ + background-color: transparent; + border: 1px solid white; + color: white; + padding: 0.5rem 1rem; + font-family: 'Press Start 2P', cursive; + font-size: 1.5rem; + margin: 0.5rem; + cursor: pointer; + transition: all 0.3s ease; + backdrop-filter: blur(8px); +} + +.choice-box button:hover{ + background-color: white; + color: black; + transform: scale(1.1); + box-shadow: 0 0 10px white; +} + +.dialogue-box{ + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 20%; + background: rgba(0, 0, 0, 0.5); + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + padding: 1rem; + color: white; + font-size: 1.5rem; + text-align: center; + z-index: 1; + background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 90%); +} + +@media screen and (max-width: 768px){ + .gamecontainer{ + display: none; + visibility: hidden; + } + + .menu-icon img{ + display: none; + } + + body{ + background-color: black; + color: white; + display: flex; + justify-content: center; + align-items: center; + } + + .intro + { + display: none; + visibility: hidden; + } + + .mobile-popup{ + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + text-align: center; + position: absolute; + top:50%; + left: 50%; + transform: translate(-50%, -50%); + width: 95%; + } + + .tilt-icon{ + width: 100px; + height: 100px; + margin-top: 3rem; + } +} + +@media screen and (min-width: 768px){ + .mobile-popup{ + display: none; + visibility: hidden; + } +} + +@media screen and (max-height: 500px){ + + .choice-box{ + height: 40%; + } + + .menu-items{ + height: 75vh; + } + +} diff --git a/Main-Game/assets/0.png b/Main-Game/assets/0.png deleted file mode 100644 index 323e54d..0000000 Binary files a/Main-Game/assets/0.png and /dev/null differ diff --git a/Main-Game/assets/1.png b/Main-Game/assets/1.png deleted file mode 100644 index fed5002..0000000 Binary files a/Main-Game/assets/1.png and /dev/null differ diff --git a/Main-Game/index.html b/Main-Game/index.html deleted file mode 100644 index c688591..0000000 --- a/Main-Game/index.html +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - Game - - - - -
- -
-
- - - - \ No newline at end of file diff --git a/Main-Game/script.js b/Main-Game/script.js deleted file mode 100644 index dc97531..0000000 --- a/Main-Game/script.js +++ /dev/null @@ -1,62 +0,0 @@ -const dialogueBox = document.getElementById('dialogueBox'); -const background = document.querySelector('.background'); - -let currentStoryIndex = 0; -const story = [ - "Once upon a time...", - "In a land far, far away...", - "You find yourself at a crossroad..." - // Add more story lines -]; - -let currentCharacter = 0; -let isTyping = false; - -updateDialogue(); -updateBackground(); - -document.addEventListener('click', handleScreenClick); - -function handleScreenClick(event) { - if (isTyping) { - // If typing is in progress, finish it instantly - currentCharacter = story[currentStoryIndex].length; - } else { - const clickX = event.clientX; - const halfScreenWidth = window.innerWidth / 2; - - if (clickX > halfScreenWidth) { - // Clicked on the right half, move story forward - currentStoryIndex = Math.min(currentStoryIndex + 1, story.length - 1); - } else { - // Clicked on the left half, go back in the story - currentStoryIndex = Math.max(currentStoryIndex - 1, 0); - } - - currentCharacter = 0; - updateDialogue(); - updateBackground(); - } -} - -function updateBackground() { - background.style.backgroundImage = `url('assets/${currentStoryIndex}.png')`; -} - -function updateDialogue() { - isTyping = true; - dialogueBox.textContent = ''; // Clear previous text - - function type() { - dialogueBox.textContent += story[currentStoryIndex][currentCharacter]; - currentCharacter++; - - if (currentCharacter < story[currentStoryIndex].length) { - setTimeout(type, 30); // Adjust typing speed here (in milliseconds) - } else { - isTyping = false; - } - } - - type(); -} \ No newline at end of file diff --git a/Main-Game/style.css b/Main-Game/style.css deleted file mode 100644 index 0b5d5a2..0000000 --- a/Main-Game/style.css +++ /dev/null @@ -1,50 +0,0 @@ -*{ - margin: 0; - padding: 0; - box-sizing: border-box; -} - -body{ - font-family: 'Press Start 2P', cursive; - font-size: 1.5rem; - overflow: hidden; -} - -.game-container{ - position: relative; - width: 100vw; - height: 100vh; - display: flex; - justify-content: center; - align-items: center; -} - -.background{ - background: no-repeat center center/cover; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: -1; -} - -.dialogue-box{ - position: absolute; - bottom: 0; - left: 0; - width: 100%; - height: 30%; - background: rgba(0, 0, 0, 0.5); - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - padding: 1rem; - color: white; - font-size: 1.5rem; - text-align: center; - z-index: 1; -} - - diff --git a/Mini-Games/image/Untitled.png b/Mini-Games/image/Untitled.png index a4baaa7..2b8a8ad 100644 Binary files a/Mini-Games/image/Untitled.png and b/Mini-Games/image/Untitled.png differ diff --git a/Mini-Games/image/no_drugs_PNG10.png b/Mini-Games/image/no_drugs_PNG10.png index b37a359..30b287d 100644 Binary files a/Mini-Games/image/no_drugs_PNG10.png and b/Mini-Games/image/no_drugs_PNG10.png differ diff --git a/Mini-Games/image/pill-png-hd-pills-transparent-png-sticker-3000.png b/Mini-Games/image/pill-png-hd-pills-transparent-png-sticker-3000.png index fd6f16c..82a3f41 100644 Binary files a/Mini-Games/image/pill-png-hd-pills-transparent-png-sticker-3000.png and b/Mini-Games/image/pill-png-hd-pills-transparent-png-sticker-3000.png differ diff --git a/assets/Web-Site-Background-2.mp4 b/assets/Web-Site-Background-2.mp4 new file mode 100644 index 0000000..294333b Binary files /dev/null and b/assets/Web-Site-Background-2.mp4 differ diff --git a/assets/Web-Site-Background-3.mp4 b/assets/Web-Site-Background-3.mp4 new file mode 100644 index 0000000..642bf89 Binary files /dev/null and b/assets/Web-Site-Background-3.mp4 differ diff --git a/assets/Web-Site-Background.mp4 b/assets/Web-Site-Background.mp4 new file mode 100644 index 0000000..6906bb6 Binary files /dev/null and b/assets/Web-Site-Background.mp4 differ diff --git a/assets/cross-icon.png b/assets/cross-icon.png new file mode 100644 index 0000000..a182d9f Binary files /dev/null and b/assets/cross-icon.png differ diff --git a/assets/github.png b/assets/github.png new file mode 100644 index 0000000..a51df5b Binary files /dev/null and b/assets/github.png differ diff --git a/assets/menu-icon.png b/assets/menu-icon.png new file mode 100644 index 0000000..4e42a6e Binary files /dev/null and b/assets/menu-icon.png differ diff --git a/assets/sudo.png b/assets/sudo.png new file mode 100644 index 0000000..8804b17 Binary files /dev/null and b/assets/sudo.png differ diff --git a/assets/tilt.gif b/assets/tilt.gif new file mode 100644 index 0000000..e765c87 Binary files /dev/null and b/assets/tilt.gif differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..09452a8 --- /dev/null +++ b/index.html @@ -0,0 +1,77 @@ + + + + + + + Document + + + + + + +
+ +
+

Empower Your Future:

+

Choose Life

+

Not Drugs

+

+ Experience this storyline play-through to learn more about the effects of drugs on your body and how to + avoid them.
+ Every Choice Matters in this play-through. +
+ try to make the right choices to get the best ending. +
+
+ Click the Start game button to begin. +

+
+
+

Ready?

+ + +
+
+ +
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit quibusdam repellat sunt quos iure ipsa + ratione quas temporibus autem. Nam dolorum asperiores assumenda, eveniet, atque, quasi impedit culpa + sequi + tempore numquam quaerat possimus reprehenderit ex praesentium necessitatibus. In blanditiis itaque + doloremque. Numquam debitis earum ea praesentium illum odit quibusdam consectetur id placeat. +
+ + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..e27edcc --- /dev/null +++ b/script.js @@ -0,0 +1,157 @@ +document.addEventListener("DOMContentLoaded", function () { + const tagLine = document.querySelector(".tag-line"); + const tagLineH1 = document.querySelector(".tag-line h1"); + const description = document.querySelector(".description"); + const video = document.getElementById("videoBackground"); + const nav = document.querySelector("nav"); + const rules = document.querySelector(".rules"); + const gameRedirectContainer = document.querySelector( + ".game-redirect-container" + ); + + let isScrolled = false; + let autoScrollCount = 0; + + // Pause the video at the start + + const targetId = "homeSection"; + const targetElement = document.getElementById(targetId); + + window.scrollTo({ + top: targetElement.offsetTop, + behavior: "smooth", + }); + + video.addEventListener("timeupdate", function () { + if (video.currentTime >= 0.9 * video.duration && autoScrollCount < 1) { + window.scrollTo({ + top: 0, + behavior: "smooth", + }); + autoScrollCount++; + console.log("Scrolling : Auto Scroll Count = " + autoScrollCount); + } + }); + + let lastScrollPos = 0; + + // Smooth scroll functionality + const scrollLinks = document.querySelectorAll('a[href^="#"]'); + + scrollLinks.forEach((scrollLink) => { + scrollLink.addEventListener("click", function (e) { + e.preventDefault(); + + isScrolled = true; + + const targetId = this.getAttribute("href").substring(1); + const targetElement = document.getElementById(targetId); + + window.scrollTo({ + top: targetElement.offsetTop, + behavior: "smooth", + }); + }); + }); + + window.addEventListener("scroll", function () { + const currentScrollPos = window.scrollY; + + if (currentScrollPos > lastScrollPos) { + // Scrolling down + nav.style.top = "-50%"; + } else { + // Scrolling up + nav.style.top = "0"; + } + + lastScrollPos = currentScrollPos; + + if (currentScrollPos === 0) { + isScrolled = false; + } + + // Automatically scroll down by 70px when the user scrolls a little bit greater than 0 + if (currentScrollPos > 0 && currentScrollPos <= 70) { + if (isScrolled) return; + const targetId = "homeSection"; + const targetElement = document.getElementById(targetId); + + window.scrollTo({ + top: targetElement.offsetTop, + behavior: "smooth", + }); + isScrolled = true; + } + + // Adjust the pixel value as needed to control when the animation should trigger + if (currentScrollPos > 0) { + tagLine.style.padding = "50px 0px"; + tagLineH1.style.margin = "25px 30px"; + description.style.left = 0; + description.style.marginTop = "20rem"; + description.style.opacity = 1; + if (window.innerWidth > 850) { + gameRedirectContainer.style.right = "20px"; + gameRedirectContainer.style.bottom = "10px"; + gameRedirectContainer.style.height = "30%"; + gameRedirectContainer.style.width = "25%"; + rules.style.display = "none"; + rules.style.opacity = 0; + } else { + if (autoScrollCount < 1) { + setTimeout(() => { + gameRedirectContainer.style.bottom = "-2%"; + }, 3000); + } else { + gameRedirectContainer.style.bottom = "-2%"; + } + } + // Start playing the video when scrolling + if (video.paused) { + video.play(); + } + } else { + tagLine.style.padding = "10px 0px"; + tagLineH1.style.margin = "0px 30px"; + description.style.marginTop = "17rem"; + if (window.innerWidth > 850) { + gameRedirectContainer.style.bottom = "100px"; + gameRedirectContainer.style.transition = "all 0.5s ease-in-out"; + gameRedirectContainer.style.height = "70%"; + gameRedirectContainer.style.width = "40%"; + rules.style.display = "flex"; + rules.style.opacity = 1; + } else { + gameRedirectContainer.style.bottom = "7%"; + } + } + }); +}); + +const mobileMenu = document.querySelector(".menu-overlay"); +const menuButton = document.querySelector(".hamburger-menu"); + +let isMenuOpen = false; + +function showMenu() { + mobileMenu.style.right = "0"; + menuButton.style.backgroundImage = "url(/assets/cross-icon.png)"; +} + +function hideMenu() { + mobileMenu.style.right = "-100%"; + menuButton.style.backgroundImage = "url(/assets/menu-icon.png)"; +} + +function toggleMenu() { + if (!isMenuOpen) { + showMenu(); + console.log("Showing menu"); + isMenuOpen = true; + } else { + hideMenu(); + console.log("Hiding menu"); + isMenuOpen = false; + } +} diff --git a/style.css b/style.css new file mode 100644 index 0000000..39e2110 --- /dev/null +++ b/style.css @@ -0,0 +1,400 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; +} + +nav { + display: flex; + height: 70px; + width: 100%; + background-color: rgba(27, 25, 25, 0.788); + align-items: center; + position: fixed; /* Fixed positioning to make it stay at the top */ + top: 0; /* Set distance from the top */ + z-index: 1000; /* Set a high z-index to ensure it's above other elements */ + transition: all 0.3s ease; + scroll-snap-align: start; +} + +nav * { + /* border: 1px solid red; */ +} + +.logo { + height: 50%; + margin-left: 30px; +} + +.nav-links { + list-style-type: none; + display: flex; + width: 50%; + height: 100%; + justify-content: space-around; + align-items: center; + margin-left: auto; +} + +.nav-links li a { + text-decoration: none; + color: #fff; + font-size: 20px; + font-weight: 500; + outline: none; +} + +.nav-links li a:hover { + color: #fff; + border-bottom: 2px solid #fff; +} + +.nav-links li a:active { + color: #fff; + border-bottom: 2px solid #fff; +} + +.hamburger-menu { + position: absolute; + right: 0; + background-image: url(/assets/menu-icon.png); + background-size: cover; + background-repeat: no-repeat; + background-color: transparent; + border: none; + height: 35px; + width: 35px; + cursor: pointer; + margin-right: 30px; + display: none; + z-index: 1000; + transition: all 0.3s ease; +} + +.hamburger-menu:focus { + outline: none; +} + +.menu-overlay { + border: 1px solid red; + position: fixed; + top: 0; + right: 0; + height: 50vh; + width: 200px; + background-color: rgba(27, 25, 25, 0.788); + z-index: 100; + right: -100%; + border-radius: 0 0 0 10px; + transition: all 0.3s ease; +} + +.menu-overlay-items { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 100%; + list-style-type: none; + padding: 0; +} + +.menu-overlay-items li { + margin-bottom: 25px; +} + +.menu-overlay-items li a { + text-decoration: none; + color: #fff; + font-size: 20px; + font-weight: 500; + outline: none; + margin-bottom: 20px; +} + +.menu-overlay-items li a:hover { + color: #fff; + border-bottom: 2px solid #fff; +} + + +main { + height: 100vh; + width: 100%; + overflow: hidden; /* Ensure the video doesn't affect scrolling */ + position: relative; /* Ensure other absolute-positioned elements are positioned relative to this */ + margin-top: 70px; + scroll-snap-align: start; +} + + main *{ + /* border: 1px solid red; */ + } + + .video-background { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + z-index: -1; + } + + .tag-line { + color: #fff; + display: flex; + flex-direction: column; + width: 50%; + position: absolute; /* Use absolute positioning to overlay on top of the video */ + top: 10px; + left: 0; + transition: all 1s ease; + /* border: 1px solid green; */ + padding-top: 25px; + padding-bottom: 25px; + } + + .tag-line h1{ + font-family: 'Lora', serif; + font-size: 80px; + font-weight: 700; + margin: 0 30px; + transition: all 2s ease; + } + + .tag-line h2{ + font-family: 'Lora', serif; + font-size: 50px; + font-weight: 600; + margin: 0px 30px; + transition: all 2s ease; + } + + .description { + font-family: 'Poppins', sans-serif; + color: #fff; + font-size: 20px; + font-weight: 500; + margin-left: 30px; + margin-top: 17rem; + position: absolute; /* Use absolute positioning to overlay on top of the video */ + left: -100%; + transition: all 2s ease; + opacity: 0; + } + + .description strong { + font-family: 'Lora', serif; + font-size: 30px; + font-weight: 700; + } + + .about { + color: #fff; + display: flex; + padding: 20px; + height: 100vh; + background-color: rgba(0, 0, 0, 0.5); + backdrop-filter: blur(10px); + scroll-snap-align: start; + } + + .game-redirect-container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 25%; + height: 30%; + position:absolute; + bottom: 10px; + right: 20px; + /* border: 1px solid red; */ + background-color: rgba(255, 255, 255, 0.2); + backdrop-filter: blur(5px); + border-radius: 20px; + right: -100%; + transition: all 5s ease; + } + + .game-redirect-container h2 { + color: black; + /* text-shadow: 2px 5px 5px #0edf23; */ + font-family: 'Lora', serif; + font-size: 50px; + font-weight: 700; + margin-bottom: 20px; + } + + .rules{ + list-style-type:disc; + /* text-decoration:underline; */ + display: flex; + flex-direction: column; + width: 60%; + justify-content: center; + /* align-items: center; */ + margin-bottom: 20px; + display: none; + transition: all 5s ease-in-out;; + } + + .rules li { + margin-bottom: 20px; + font-family:'Lora', serif; + font-size: 20px; + font-weight: 600; + } + + .game-redirect-button { + width: 220px; + height: 50px; + border: none; + outline: none; + color: #fff; + background: #111; + cursor: pointer; + position: relative; + z-index: 0; + border-radius: 10px; + font-size: 20px; + margin-bottom: 20px; + } + + .game-redirect-button:before { + content: ''; + background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000); + position: absolute; + top: -2px; + left:-2px; + background-size: 400%; + z-index: -1; + filter: blur(5px); + width: calc(100% + 4px); + height: calc(100% + 4px); + animation: glowing 20s linear infinite; + opacity: 0; + transition: opacity .3s ease-in-out; + border-radius: 10px; + } + + .game-redirect-button:active { + color: #000 + } + + .game-redirect-button:active:after { + background: transparent; + } + + .game-redirect-button:hover:before { + opacity: 1; + } + + .game-redirect-button:after { + z-index: -1; + content: ''; + position: absolute; + width: 100%; + height: 100%; + background: #111; + left: 0; + top: 0; + border-radius: 10px; + } + + @keyframes glowing { + 0% { background-position: 0 0; } + 50% { background-position: 400% 0; } + 100% { background-position: 0 0; } + } + + + @media screen and (max-width: 1150px) { + .nav-links { + width: 60%; + } + + .tag-line { + width: 100%; + } + + .description { + width: 50%; + } + + } + + @media screen and (max-width: 620px){ + + .video-background { + position: fixed; + top: 0; + right: 0; + width: 100%; + height: 100%; + object-fit: cover; + object-position: 70% 50%; + z-index: -1; + } + + .nav-links { + display: none; + } + + .hamburger-menu { + display: flex; + } + + .tag-line { + width: 100%; + text-align: center; + margin-left: 0; + } + + + .main{ + height: 110vh; + } + + .description { + display: none; + } + + .description br{ + display: none; + } + + .game-redirect-container { + width: 90%; + height: 45%; + /* margin-top: 50px; */ + bottom:-100%; + right: 50%; + transform: translateX(50%); + transition: all 1s ease-in-out; + } + + .game-redirect-container h2 { + font-size: 30px; + margin-bottom:7px; + } + + .rules{ + display: block; + width: 80%; + border: 1px solid red; + } + + .rules li { + font-family:'Lora', serif; + font-size: 20px; + font-weight: 600; + margin-bottom:5px; + } + + + + + }