Merge branch 'main' into ztm-map

src/interactions/map_campus_house_1/bedroom_table.interaction.js

@@ -0,0 +1,111 @@
+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,21 @@
+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,128 @@
+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];
+};