diff --git a/day.html b/day.html new file mode 100644 index 0000000..e780c6a --- /dev/null +++ b/day.html @@ -0,0 +1,133 @@ + + + + + + Day With Kids + + + + + +
+
+
+
+
+

About

+

+ Hi there! Enjoy this family-friendly app. I will be adding + questions and themes to it, eventually. My children had alot of + suggestions for this app, however, I don't have the time to + implement them now, much to their dismay. -Louisa-
+ Drag to discard for laptop-desktop. Swipe RIGHT to discard for + tablet. +

+
+
+

Time With Kids

+ +
+
+
+
+
+
+ + + + + + + + + + + + + + TWK + + +
+
+
+ +
+ +
+
+ + + +
+
+
+ +
+
+ + + + + + diff --git a/gameQuestions.json b/gameQuestions.json new file mode 100644 index 0000000..db759a9 --- /dev/null +++ b/gameQuestions.json @@ -0,0 +1,87 @@ +{ + "dayBreakerQuestions": [ + { + "name": "dayCard1", + "question": "What would you like to change about school?" + }, + { + "name": "dayCard2", + "question": "What would you like to change about your home?" + }, + { + "name": "dayCard3", + "question": "If you had to choose between, super speed or super stretch, for your superhero power, what would you choose?" + }, + { + "name": "dayCard4", + "question": "Complete this statement: My favorite character is... I am just like this character because..." + }, + { + "name": "dayCard5", + "question": "If you could go on an adventure, where would you go?" + }, + { + "name": "dayCard6", + "question": "If your favorite animal was as tall as a building, what would it do?" + }, + { + "name": "dayCard7", + "question": "If you were as tall as a building, what would you do?" + }, + { + "name": "dayCard8", + "question": "If you could make anything in the world, always be your favorite color, what would you pick?" + }, + { + "name": "dayCard9", + "question": "What is your favorite song?" + }, + { + "name": "dayCard10", + "question": "Think of a song that your parent likes, what is it? And why do you think they like it?" + } + ], + + "nightQuestions": [ + { + "name": "nightCard1", + "question": "If you could dream about anything, what would you choose?" + }, + { + "name": "nightCard2", + "question": "You get to pick one movie and one snack for movie night, what would you pick?" + }, + { + "name": "nightCard3", + "question": "You have a dream that you're in charge, what is the one rule you'd make?" + }, + { + "name": "nightCard4", + "question": "Complete this statement: My favorite character is... And this character dreams about..." + }, + { + "name": "nightCard5", + "question": "In your dream you're about to go on an adventure, are you traveling by sports car, jet, train, or hoverbike?" + }, + { + "name": "nightCard6", + "question": "If you could have a slumber party what is the one song you'd want to hear? What is the one food you'd want to eat? And what game would you want to play? " + }, + { + "name": "nightCard7", + "question": "You get to redecorate your room, what color would you paint it? What items would you add?" + }, + { + "name": "nightCard8", + "question": "You get to pick a bedtime for everyone in your house, what time would it be?" + }, + { + "name": "nightCard9", + "question": "In your dream, you have the power to talk to one kind of animal, what animal would it be?" + }, + { + "name": "nightCard10", + "question": "Complete this statement: My name is...My band's name is... And we..." + } + ] +} diff --git a/images/cover.webp b/images/cover.webp new file mode 100644 index 0000000..64b41a3 Binary files /dev/null and b/images/cover.webp differ diff --git a/images/day.jpg b/images/day.jpg new file mode 100644 index 0000000..1b6943c Binary files /dev/null and b/images/day.jpg differ diff --git a/images/dayCardImg.jpg b/images/dayCardImg.jpg new file mode 100644 index 0000000..10c6859 Binary files /dev/null and b/images/dayCardImg.jpg differ diff --git a/images/evening.jpg b/images/evening.jpg new file mode 100644 index 0000000..2fa3c6f Binary files /dev/null and b/images/evening.jpg differ diff --git a/images/kidsIcon.svg b/images/kidsIcon.svg new file mode 100644 index 0000000..cd8e679 --- /dev/null +++ b/images/kidsIcon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/images/nightCard.jpg b/images/nightCard.jpg new file mode 100644 index 0000000..712c992 Binary files /dev/null and b/images/nightCard.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..3a1f487 --- /dev/null +++ b/index.html @@ -0,0 +1,134 @@ + + + + + + Time With Kids + + + + +
+
+
+
+
+

About

+

+ Hi there! Enjoy this family-friendly app. I will be adding + questions and themes to it, eventually. My children had alot of + suggestions for this app, however, I don't have the time to + implement them now, much to their dismay. -Louisa-
+ Drag to discard for laptop-desktop. Swipe RIGHT to discard for + tablet. +

+
+
+

Time With Kids

+ +
+
+
+
+
+
+ + + + + + + + + + + + + + TWK + + +
+
+
+
+
+
+

TIME WITH KIDS

+

Questions for conversations and laughs.

+

+ Day With Kids + Night With Kids +

+
+ + +
+
+ + + + diff --git a/night.html b/night.html new file mode 100644 index 0000000..879dc8a --- /dev/null +++ b/night.html @@ -0,0 +1,129 @@ + + + + + + Night With Kids + + + + + +
+
+
+
+
+

About

+

+ Hi there! Enjoy this family-friendly app. I will be adding + questions and themes to it, eventually. My children had alot of + suggestions for this app, however, I don't have the time to + implement them now, much to their dismay. -Louisa-
+ Drag to discard for laptop-desktop. Swipe RIGHT to discard for + tablet. +

+
+
+

Contact

+ +
+
+
+
+
+
+ + + + + + + + + + + + + + TWK + + +
+
+
+ +
+
+ + +
+
+
+
+
+ + + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..9f9a9fb --- /dev/null +++ b/script.js @@ -0,0 +1,301 @@ +//run the code only after the DOM has been fully parsed +document.addEventListener("DOMContentLoaded", function () { + let discard = document.getElementById("discard"); + discard.addEventListener("dragover", allowDrop); + discard.addEventListener("drop", drop); + + let cardFlip = document.getElementsByClassName("questionCardFlip"); + + class Card { + constructor(question, type, containerID) { + this.question = question; + this.type = type; + this.containerID = containerID; + this.completeCard = []; + this.finished = []; + } + + make() { + let deck = this.question; + let stack = this.completeCard; + let finished = this.finished; + let discardBtn = this.discardBtn; + + for (let index = 0; index < deck.length; index++) { + const qCard = deck[index]; + stack.push(qCard); + } + + stack.forEach((element) => { + let inside = document.createTextNode(element.question); + const cardPaper = document.createElement("div"); + const backCardPaper = document.createElement("div"); + + cardPaper.classList.add( + "side", + this.type === "day" ? "front" : "frontNIGHT" + ); + backCardPaper.classList.add("side", "back"); + backCardPaper.appendChild(inside); + + const cardWrapper = document.createElement("div"); + cardWrapper.classList.add("questionCard"); + cardWrapper.appendChild(cardPaper); + cardWrapper.appendChild(backCardPaper); + let cardNumber = parseInt(element.name.replace(this.type + "Card", "")); + // Set the z-index + cardWrapper.style.zIndex = 1000 - cardNumber; + + cardWrapper.setAttribute("draggable", "true"); + cardWrapper.setAttribute("id", `card-${element.name}`); // Unique id for each card + + cardWrapper.addEventListener("dragstart", (event) => { + event.dataTransfer.setData("text/plain", event.target.id); + }); + + finished.push(cardWrapper); + }); + + // Pop the last card in the stack and append it to the middle container + this.showNextCard(); + } + + // Method to show the next card + showNextCard() { + if (this.finished.length > 0) { + let current = this.finished.pop(); + current.style.zIndex = 1000; + + // Add click listener for the card + current.addEventListener("click", () => { + current.classList.toggle("flipCard"); + }); + + let container = document.getElementById(this.containerID); + container.appendChild(current); + } + } + } + + let nightQues; + let dayQues; + let freshDayQues; + let freshNightQues; // Declared a global variable for the Card instance, for access throughout the code + + function startGame() { + fetchQuestions().then(({ dayQues, nightQues }) => { + // Check if the data is fetched and available + if (dayQues) { + console.log("clicked"); + freshDayQues = new Card(dayQues, "day", "secondCol"); // Assign to global variable + freshDayQues.make(); + } else { + console.log("Data not available yet"); + } + }); + } + + function startNightGame() { + fetchQuestions().then(({ dayQues, nightQues }) => { + if (nightQues) { + console.log("clicked"); + freshNightQues = new Card(nightQues, "night", "nightContainerID"); + freshNightQues.make(); + } else { + console.log("Data not available yet"); + } + }); + } + + //Drag and drop functionality + function allowDrop(ev) { + ev.preventDefault(); + } + function drop(ev) { + ev.preventDefault(); + var data = ev.dataTransfer.getData("text"); + var newCard = document.getElementById(data); + + var discardPile = document.getElementById("discard"); + + // Check if the discard pile already contains a card + if (discardPile.firstChild) { + // Remove the existing card + discardPile.removeChild(discardPile.firstChild); + } + // Append the new card + discardPile.appendChild(newCard); + } + discard.addEventListener("drop", (event) => { + event.preventDefault(); + var data = event.dataTransfer.getData("text"); + var newCard = document.getElementById(data); + var discardPile = discard; + + // Check if the discard pile already contains a card + if (discardPile.firstChild) { + // Remove the existing card + discardPile.removeChild(discardPile.firstChild); + } + // Append the new card + discardPile.appendChild(newCard); + + // Show the next card + if (freshDayQues) { + // Check if the Day Card instance exists + freshDayQues.showNextCard(); // Use the existing Day Card instance to show the next card + } + if (freshNightQues) { + // Check if the Night Card instance exists + freshNightQues.showNextCard(); // Use the existing Night Card instance to show the next card + } + }); + + //Fetch JSON data + function fetchQuestions() { + return new Promise((resolve, reject) => { + fetch("gameQuestions.json") + .then((response) => response.json()) + .then((data) => { + console.log(data); + //store data into variable + let dayQues = data.dayBreakerQuestions; + let nightQues = data.nightQuestions; + resolve({ dayQues, nightQues }); + }) + .catch((err) => { + console.log("Error loading question data:", err); + reject(err); + }); + }); + } + + const startDayCard = document.getElementById("startGmDayBtn"); + //Checks if startCard exists/available and proceeds to add the eventlistener.Wont try to add an event listener to a non-existing element, which would cause an error. + startDayCard && startDayCard.addEventListener("click", startGame); + + const beginNightGm = document.getElementById("testNight"); + + beginNightGm && beginNightGm.addEventListener("click", startNightGame); + + //Click button to discard functionality. Only shows on viewports 480px max-width + + const discardDayCard = document.getElementById("discardDay"); + + discardDayCard && + discardDayCard.addEventListener("click", () => { + var dayCardCont = document.getElementById("secondCol"); + dayCardCont.removeChild(dayCardCont.firstChild); + + if (freshDayQues) { + freshDayQues.showNextCard(); + } + }); + + const discardNightCard = document.getElementById("discardNight"); + discardNightCard && + discardNightCard.addEventListener("click", () => { + let nightCardCont = document.getElementById("nightContainerID"); + nightCardCont.removeChild(nightCardCont.firstChild); + if (freshNightQues) { + freshNightQues.showNextCard(); + } + }); + + // Touch surface event of swipe right to discard. Only shows on tablets + let touchsurface = document.getElementById("touchSwipeCont"), + startX, + startY, + dist, + threshold = 50, //required min distance traveled to be considered swipe + allowedTime = 500, // maximum time allowed to travel that distance + elapsedTime, + startTime; + + function handleswipe(isrightswipe) { + if (isrightswipe) { + var dayCardCont = document.getElementById("secondCol"); + + if (dayCardCont && freshDayQues) { + dayCardCont.removeChild(dayCardCont.firstChild); + freshDayQues.showNextCard(); + } + } else { + console.log("not swiped right"); + } + } + + function handleswipeN(isrightswipe) { + if (isrightswipe) { + var nightCardCont = document.getElementById("nightContainerID"); + + if (nightCardCont && freshNightQues) { + nightCardCont.removeChild(nightCardCont.firstChild); + freshNightQues.showNextCard(); + } + } else { + console.log("not swiped right"); + } + } + + touchsurface && + touchsurface.addEventListener( + "touchstart", + function (e) { + var touchobj = e.changedTouches[0]; + dist = 0; + startX = touchobj.pageX; + startY = touchobj.pageY; + startTime = new Date().getTime(); // record time when finger first makes contact with surface + e.preventDefault(); + }, + false + ); + + touchsurface && + touchsurface.addEventListener( + "touchmove", + function (e) { + e.preventDefault(); // prevent scrolling when inside DIV + }, + false + ); + + touchsurface && + touchsurface.addEventListener( + "touchend", + function (e) { + var touchobj = e.changedTouches[0]; + dist = touchobj.pageX - startX; // get total dist traveled by finger while in contact with surface + elapsedTime = new Date().getTime() - startTime; // get time elapsed + // check that elapsed time is within specified, horizontal dist traveled >= threshold, and vertical dist traveled <= 100 + + console.log("elapsedTime:", elapsedTime); + console.log("dist:", dist); + console.log("vertical dist:", Math.abs(touchobj.pageY - startY)); + console.log("threshold", threshold); + + var isDayPage = document.getElementById("secondCol") !== null; + var isNightPage = document.getElementById("nightContainerID") !== null; + + var swiperightBol = + elapsedTime <= allowedTime && + dist >= threshold && + Math.abs(touchobj.pageY - startY) <= 500; + + var swiperightBolN = + elapsedTime <= allowedTime && + dist >= threshold && + Math.abs(touchobj.pageY - startY) <= 500; + + if (isDayPage) { + handleswipe(swiperightBol); + } else if (isNightPage) { + handleswipeN(swiperightBolN); + } + + e.preventDefault(); + }, + false + ); +}); diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..a933960 --- /dev/null +++ b/styles.css @@ -0,0 +1,181 @@ +html { + min-height: 100%; +} + +.cover-container { + max-width: 42em; +} + +.bgImage { + background: url("/images/cover.webp"); + background-size: cover; + background-repeat: no-repeat; + background-position: top center; +} + +.bgDayImg { + background: url("/images/day.jpg"); + background-size: cover; + background-repeat: no-repeat; + background-position: top center; +} + +.bgNightImg { + background: url("/images/evening.jpg"); + background-size: cover; + background-repeat: no-repeat; + background-position: top center; +} + +.purpleColor { + background-color: #578ae2; +} + +.topCushion { + margin-top: 200px; +} + +.chooseGameBtn { + margin: 20px; +} + +.gmBtn { + margin-top: 10px; + margin-bottom: 10px; +} + +/* CARD */ +.cardContainer { + display: flex; + justify-content: space-around; + perspective: 150rem; +} +.startPile { + max-width: 28rem; +} + +.discard { + min-height: 38rem; /* Adjust as needed */ + min-width: 24rem; /* Adjust as needed */ +} + +.questionCard { + width: 22rem; + cursor: pointer; + position: relative; + transition: transform 1.5s ease; + transform-style: preserve-3d; +} + +.side { + font-size: 2.15rem; + line-height: 1.5em; + text-align: center; + height: 34rem; + width: 100%; + position: absolute; + top: 0; + left: 0; + z-index: 2; + backface-visibility: hidden; + border-radius: 5px; + overflow: hidden; + box-shadow: 0 1.5rem 4rem rgba(10, 11, 12, 0.3); +} + +.front { + background: url("/images/dayCardImg.jpg"); + background-size: cover; + background-position: bottom; + opacity: 70%; +} + +.frontNIGHT { + background: url("/images/nightCard.jpg"); + background-size: cover; + background-position: bottom; + opacity: 80%; +} + +.back { + background-color: white; + display: flex; + justify-content: space-evenly; + align-items: center; + padding: 0 10px; + transform: rotateY(-180deg); +} + +.questionCard.flipCard { + transform: rotateY(180deg); +} + +.space { + margin-top: 30px; +} + +.vanish { + display: none; + color: red; +} + +.bigBoxTest { + width: 600px; + height: 600px; +} + +@media screen and (max-width: 480px) { + /* your CSS rules here */ + .vanish { + display: block; + color: red; + } + .cardContainer { + flex-direction: column; + justify-content: center; + align-items: center; + perspective: 150rem; + margin: 0 auto; + } + .discard { + min-height: auto; /* Adjust as needed */ + min-width: auto; /* Adjust as needed */ + } +} + +.portrait { + display: none; +} + +@media screen and (max-width: 376px) { + /* your CSS rules here */ + .questionCard { + width: 18rem; + } + + .side { + height: 28rem; + font-size: 1.875rem; + line-height: 1.375em; + } +} + +@media (min-width: 539px) and (max-width: 1024px) { + .portrait { + display: block; + } + .cardContainer { + flex-direction: column; + justify-content: center; + align-items: center; + perspective: 150rem; + margin: 0 auto; + } + .discard { + min-height: auto; /* Adjust as needed */ + min-width: auto; /* Adjust as needed */ + } + .questionCard { + width: 24rem; + } +}