Added interactions in map_campus_house_1 (#146)

#130

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: `<pre style="font-size: 14px;"><code>${value}</code></pre>`
+            }));
+
+            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';
+}

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;

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);
+    });
+};

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: "<!-- This is a comment -->",
+                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];
+};