From e9a32b2e370e73d8eb568fdf8e4c739dbcf5fcf0 Mon Sep 17 00:00:00 2001 From: Anand Raj Date: Sun, 13 Oct 2024 00:03:29 +0530 Subject: [PATCH] added interactions in map_campus_house_1 --- .../bedroom_table.interaction.js | 107 ++++++++++++++++ src/interactions/map_campus_house_1/index.js | 4 + .../livingRoomCouch.interaction.js | 20 +++ src/utils/randomCodingJokes.js | 18 +++ src/utils/randomJSQuestion.js | 118 ++++++++++++++++++ 5 files changed, 267 insertions(+) create mode 100644 src/interactions/map_campus_house_1/bedroom_table.interaction.js create mode 100644 src/interactions/map_campus_house_1/livingRoomCouch.interaction.js create mode 100644 src/utils/randomCodingJokes.js create mode 100644 src/utils/randomJSQuestion.js diff --git a/src/interactions/map_campus_house_1/bedroom_table.interaction.js b/src/interactions/map_campus_house_1/bedroom_table.interaction.js new file mode 100644 index 0000000..cd3a333 --- /dev/null +++ b/src/interactions/map_campus_house_1/bedroom_table.interaction.js @@ -0,0 +1,107 @@ +import { displayDialogue } from '../../utils'; +import { updateEnergyState } from '../../utils/energyUpdate'; +import { getRandomQuestion } from '../../utils/randomJSQuestion'; +import { displayPermissionBox } from '../../utils'; + +export const bedroomTableInteractions = async (player, k, map) => { + player.onCollide('bedroom_table', async () => { + player.isInDialog = true; + + let quizDecision = await displayPermissionBox({ + k, + player, + text: [ + 'Do you want to play a quick quiz about JavaScript?', + ], + onDisplayEnd: () => { + player.isInDialog = false; + }, + }); + + if (quizDecision) { + const quizQuestion = getRandomQuestion(); + + const questionText = quizQuestion.question; + const options = Object.entries(quizQuestion.options).map(([key, value]) => ({ + value: key, + text: `
${value}
` + })); + + showCustomPrompt(questionText, options, async (selectedOption) => { + let feedbackText = []; + + if (selectedOption === quizQuestion.answer) { + updateEnergyState(player.state, 10); + feedbackText.push("Correct! You're on fire!"); + } else { + updateEnergyState(player.state, -10); + feedbackText.push("Oops! That's not right."); + } + + feedbackText.push(`Correct answer: ${quizQuestion.answer}. ${quizQuestion.explanation}`); + feedbackText.push('Thanks for playing! You can continue exploring.'); + + await displayDialogue({ + k, + player, + text: feedbackText, + onDisplayEnd: () => { + player.isInDialog = false; + }, + }); + }); + } else { + await displayDialogue({ + k, + player, + text: ['No problem! Feel free to explore the room.'], + onDisplayEnd: () => { + player.isInDialog = false; + }, + }); + } + }); +}; + +function showCustomPrompt(message, options, callback) { + const energyUI = document.getElementById('energy-container'); + energyUI.style.display = 'none'; + + let promptMessage = document.getElementById('prompt-message'); + promptMessage.innerHTML = message; + + const optionsContainer = document.getElementById('options-container'); + optionsContainer.innerHTML = ''; + + options.forEach((option) => { + const button = document.createElement('button'); + button.innerHTML = option.text; + button.classList.add('option-btn'); + button.setAttribute('tabindex', '0'); + + button.onclick = function () { + callback(option.value); + closeCustomPrompt(); + }; + + button.addEventListener('keydown', function (e) { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + callback(option.value); + closeCustomPrompt(); + } + }); + + optionsContainer.appendChild(button); + }); + + document.getElementById('custom-prompt').style.display = 'flex'; + + if (optionsContainer.children.length > 0) { + optionsContainer.children[0].focus(); + } +} + +function closeCustomPrompt() { + document.getElementById('custom-prompt').style.display = 'none'; +} diff --git a/src/interactions/map_campus_house_1/index.js b/src/interactions/map_campus_house_1/index.js index cfd00c3..850b51a 100644 --- a/src/interactions/map_campus_house_1/index.js +++ b/src/interactions/map_campus_house_1/index.js @@ -5,6 +5,8 @@ import { mageInteractions } from './mage.interaction'; import { bedroomVanityInteractions } from './bedroomVanity.interaction'; import { kitchenFridgeInteractions } from './kitchenFridge.interaction'; import { bedroomShelfInteractions } from './bedroomShelf.interaction'; +import { livingRoomCouchInteractions } from './livingRoomCouch.interaction'; +import { bedroomTableInteractions } from './bedroom_table.interaction'; const interactions = [ // Add more interactions here @@ -15,6 +17,8 @@ const interactions = [ bedroomVanityInteractions, kitchenFridgeInteractions, bedroomShelfInteractions, + livingRoomCouchInteractions, + bedroomTableInteractions, ]; export default interactions; diff --git a/src/interactions/map_campus_house_1/livingRoomCouch.interaction.js b/src/interactions/map_campus_house_1/livingRoomCouch.interaction.js new file mode 100644 index 0000000..ab6bd61 --- /dev/null +++ b/src/interactions/map_campus_house_1/livingRoomCouch.interaction.js @@ -0,0 +1,20 @@ +import { displayDialogue } from '../../utils'; +import { updateEnergyState } from '../../utils/energyUpdate'; +import { getRandomCodingJoke } from '../../utils/randomCodingJokes.js'; + +export const livingRoomCouchInteractions = (player, k, map) => { + player.onCollide('living_room_couch', () => { + player.isInDialog = true; + + const jokeStarter = "You sit down on the couch and suddenly feel a bit funny. Here’s a joke to lighten the mood:"; + displayDialogue({ + k, + player, + text: [jokeStarter, getRandomCodingJoke()], + onDisplayEnd: () => { + player.isInDialog = false; + }, + }); + updateEnergyState(player.state, player.state.energy + 5); + }); +}; diff --git a/src/utils/randomCodingJokes.js b/src/utils/randomCodingJokes.js new file mode 100644 index 0000000..382e4d0 --- /dev/null +++ b/src/utils/randomCodingJokes.js @@ -0,0 +1,18 @@ +export const getRandomCodingJoke = () => { + const storyJokes = [ + "A programmer was driving down the road and saw a sign that said 'Left Lane Closed.' He drove in the right lane instead and yelled, 'Why can’t I go left? The road is closed, not the lane!'", + "Two developers were talking about their work. One said, 'I have a problem with my code; it keeps crashing.' The other replied, 'Have you tried turning it off and on again?' The first one laughed and said, 'I’m not that desperate yet!'", + "Once, a programmer got locked out of his house. He thought, 'I'll just change the door's state to 'open.' It didn't work, but at least I learned something about state management!", + "A Python programmer and a Java programmer went camping. The Python programmer built a tent in a few minutes, while the Java programmer took hours to compile his tent. When the storm hit, the Python programmer stayed dry while the Java programmer debugged his tent!", + "A developer walks into a bar and orders a drink. The bartender says, 'Sorry, we don't serve your kind here.' The developer replies, 'That's okay; I’m just here for the exceptions!'", + "At a coding bootcamp, a student asked the instructor, 'What’s the best way to learn how to code?' The instructor smiled and said, 'Start by learning to write errors. You’ll get really good at fixing them!'", + "A junior developer asked a senior developer, 'What’s the secret to writing good code?' The senior developer replied, 'Always keep your code clean and readable.' The junior developer replied, 'Well, that explains why my code is always messy; I forget to clean it!'", + "Once, a web developer tried to build a bridge. When asked why, he said, 'I wanted to see if I could get across with just a few lines of code!'", + "A programmer was on a date when his phone started buzzing. He said, 'Sorry, I have to check my notifications.' His date replied, 'Is that really necessary?' The programmer said, 'Of course! I can't let any exceptions go unhandled!'", + ]; + + const randomJoke = + storyJokes[Math.floor(Math.random() * storyJokes.length)]; + + return randomJoke; +}; diff --git a/src/utils/randomJSQuestion.js b/src/utils/randomJSQuestion.js new file mode 100644 index 0000000..20ce1c4 --- /dev/null +++ b/src/utils/randomJSQuestion.js @@ -0,0 +1,118 @@ +export const getRandomQuestion = () => { + const questions = [ + { + question: "What is 2 + '2'?", + options: { + A: "22", + B: "4", + C: "undefined", + D: "Error", + }, + answer: 'A', + explanation: "In JavaScript, adding a number and a string results in string concatenation, so 2 + '2' gives '22'." + }, + { + question: "Which type is used for text in JavaScript?", + options: { + A: "String", + B: "Character", + C: "Float", + D: "None", + }, + answer: 'A', + explanation: "A String is a data type in JavaScript used to represent text." + }, + { + question: "What does 'NaN' mean?", + options: { + A: "Not a Number", + B: "Not an Object", + C: "Number Array", + D: "None", + }, + answer: 'A', + explanation: "'NaN' stands for 'Not a Number', and it represents a value that is not a valid number." + }, + { + question: "How do you define a function?", + options: { + A: "function = myFunction()", + B: "function myFunction()", + C: "create myFunction()", + D: "None", + }, + answer: 'B', + explanation: "The correct syntax to define a function is 'function myFunction()'." + }, + { + question: "How to create an array?", + options: { + A: "var colors = ['red', 'green']", + B: "var colors = (1:'red', 2:'green')", + C: "var colors = 'red', 'green'", + D: "None", + }, + answer: 'A', + explanation: "You create an array in JavaScript using square brackets: var colors = ['red', 'green'];" + }, + { + question: "Which keyword is used for variable declaration?", + options: { + A: "var", + B: "let", + C: "const", + D: "All", + }, + answer: 'D', + explanation: "'var', 'let', and 'const' are all keywords used to declare variables in JavaScript." + }, + { + question: "Which method converts a string to a number?", + options: { + A: "parseInt()", + B: "Number()", + C: "Both A and B", + D: "None", + }, + answer: 'C', + explanation: "Both parseInt() and Number() can convert a string to a number." + }, + { + question: "What does JSON stand for?", + options: { + A: "JavaScript Object Notation", + B: "Java Object Notation", + C: "JavaScript Online Notation", + D: "None", + }, + answer: 'A', + explanation: "JSON stands for 'JavaScript Object Notation', a format for structuring data." + }, + { + question: "What is a closure?", + options: { + A: "A function inside another function", + B: "A variable that holds a function", + C: "An object that holds values", + D: "None", + }, + answer: 'A', + explanation: "A closure is a function that retains access to its lexical scope, even when the function is executed outside that scope." + }, + { + question: "How to comment in JavaScript?", + options: { + A: "// This is a comment", + B: "", + C: "/* This is a comment */", + D: "Both A and C", + }, + answer: 'D', + explanation: "Both '//' and '/* */' are used for comments in JavaScript." + }, + ]; + + // Select a random question from the array + const randomIndex = Math.floor(Math.random() * questions.length); + return questions[randomIndex]; +};