feat: add mage object and iteraction (#136)

Part of #130

src/gameObjects/map_campus_house_1/index.js

@@ -1,7 +1,9 @@
 import { computer } from './computer.gameObject';
+import { mage } from './mage.gameObject';
 
 const gameObjects = [
     computer,
+    mage,
     // Add more game objects here
 ];
 

src/gameObjects/map_campus_house_1/mage.gameObject.js

@@ -0,0 +1,35 @@
+import { scaleFactor } from '../../constants';
+
+export const mage = (k, map, spawnpoints) => {
+    k.loadSprite('mage', './assets/sprites/characters.png', {
+        sliceX: 10,
+        sliceY: 20,
+        anims: {
+            'idle-down': 140,
+            'walk-down': { from: 144, to: 145, loop: true, speed: 4 },
+            'idle-up': 141,
+            'walk-up': { from: 146, to: 147, loop: true, speed: 4 },
+            'idle-right': 142,
+        },
+    });
+
+    const [bedRoomTable] = map.query({ include: 'bedroom_table' });
+
+    const mageObj = k.make([
+        k.sprite('mage', { anim: 'idle-right' }),
+        k.area({
+            shape: new k.Rect(k.vec2(0), 16, 16),
+        }),
+        k.body({ isStatic: true }),
+        k.anchor('center'),
+        k.pos(
+            bedRoomTable.pos.x + 5,
+            bedRoomTable.pos.y - 70
+        ),
+        k.scale(scaleFactor * 0.5),
+        k.offscreen({ hide: true, distance: 10 }),
+        'mage',
+    ]);
+
+    return mageObj;
+};

src/interactions/map_campus_house_1/bed.interaction.js

@@ -29,7 +29,7 @@ export const bedInteractions = (player, k, map) => {
             }
         }
 
-        //player.isInDialog = true;
+        player.isInDialog = true;
         displayDialogue({
             k,
             player,

src/interactions/map_campus_house_1/computer.interaction.js

@@ -28,40 +28,64 @@ const options = [
 
 export const computerInteractions = async (player, k, map) => {
     const [computer] = map.query({ include: 'computer' });
-
     player.onCollide('computer', async () => {
-        const energyUI = document.getElementById('energy-container');
-        energyUI.style.display = 'none';
-
-        player.isInDialog = true;
-        computer.play('on');
-
-        showCustomPrompt(challengeText, options, async (selectedOption) => {
-            const response = [];
-
-            if (selectedOption == 'C') {
-                updateEnergyState(player.state, -10);
-                response.push("Correct!, you're a genius!");
-                response.push('It was a tough one!, You look tired');
-            } else {
-                updateEnergyState(player.state, -30);
-                response.push('Incorrect! Try again next time!');
-                response.push('Anyway it was a good effort, You look tired');
-            }
-
-            response.push(
-                'You should take a nap before you continue exploring the campus'
-            );
+        if (!player.state.alreadyTalkedToMage) {
+            player.isInDialog = true;
+            computer.play('on');
 
             await displayDialogue({
                 k,
                 player,
-                text: response,
+                text: [
+                    'It looks like the computer has a interesting challenge for you but it is locked.',
+                    'It has some kind of protection spell.',
+                    'You should talk to the house mage to unlock it.',
+                ],
                 onDisplayEnd: () => {
                     player.isInDialog = false;
                 },
             });
-        });
+
+            computer.play('off');
+        }
+
+        if (player.state.alreadyTalkedToMage) {
+            const energyUI = document.getElementById('energy-container');
+            energyUI.style.display = 'none';
+
+            player.isInDialog = true;
+            computer.play('on');
+
+            showCustomPrompt(challengeText, options, async (selectedOption) => {
+                const response = [];
+
+                if (selectedOption == 'C') {
+                    updateEnergyState(player.state, -10);
+                    response.push("Correct!, you're a genius!");
+                    response.push('It was a tough one!, You look tired');
+                } else {
+                    updateEnergyState(player.state, -30);
+                    response.push('Incorrect! Try again next time!');
+                    response.push(
+                        'Anyway it was a good effort, You look tired'
+                    );
+                }
+
+                response.push(
+                    'You should take a nap before you continue exploring the campus'
+                );
+
+                await displayDialogue({
+                    k,
+                    player,
+                    text: response,
+                    onDisplayEnd: () => {
+                        player.isInDialog = false;
+                        player.state.alreadyTalkedToMage = false;
+                    },
+                });
+            });
+        }
     });
 
     player.onCollideEnd('computer', () => {

src/interactions/map_campus_house_1/index.js

@@ -1,13 +1,15 @@
 import { enterMapCityInteraction } from './enterMapCity.interactions';
 import { bedInteractions } from './bed.interaction';
 import { computerInteractions } from './computer.interaction';
+import { mageInteractions } from './mage.interaction';
 import { bedroomVanityInteractions } from './bedroomVanity.interaction';
 
 const interactions = [
     // Add more interactions here
     enterMapCityInteraction,
     bedInteractions,
     computerInteractions,
+    mageInteractions,
     bedroomVanityInteractions,
 ];
 

src/interactions/map_campus_house_1/mage.interaction.js

@@ -0,0 +1,109 @@
+import { displayDialogue, displayPermissionBox } from '../../utils';
+
+const alredyUnlockText = ['The challenge is waiting for you!'];
+
+const firstText = [
+    'You shall not pass! Bruruuuuu!',
+    'Hehe, you’ve found me, just as I was practicing my lines!',
+    'Cof cof… the dust of ancient tomes, no doubt!',
+    'I am the Mage of the House, keeper of secrets, and I hold a special challenge within the depths of this computer!',
+    'I can unlock the computer for thee, but beware—thou shalt have but one chance to find the right answer!',
+];
+
+const questionText = [
+    'Do you dare to try thy hand at this most perilous trial?',
+];
+
+const spell = [
+    'By the stars above, and the code beneath, unlock this mystery, to test their wit and feat!',
+    'The computer suddenly glows with a bright light, and the screen changes to show a challenge.',
+];
+
+const noSpell = [
+    'It does not seem like thou art yet prepared for the challenge...',
+];
+
+export const mageInteractions = async (player, k, map) => {
+    const [computer] = map.query({ include: 'computer' });
+    let mageInteractionCounter = 0;
+    player.state.alreadyTalkedToMage = false;
+
+    //TODO: You can add some prize for the player if they solve the challenge and get back to the mage
+    player.onCollide('mage', async () => {
+        computer.play('on');
+
+        if (!player.state.alreadyTalkedToMage) {
+            mageInteractionCounter++;
+
+            if (mageInteractionCounter === 1) {
+                player.isInDialog = true;
+                await displayDialogue({
+                    k,
+                    player,
+                    text: firstText,
+                    characterName: 'Mage',
+                    onDisplayEnd: () => {
+                        player.isInDialog = false;
+                    },
+                });
+            }
+
+            if (mageInteractionCounter >= 2) {
+                player.isInDialog = true;
+
+                let tryChallenge = await displayPermissionBox({
+                    k,
+                    player,
+                    text: questionText,
+                    onDisplayEnd: () => {
+                        player.isInDialog = false;
+                    },
+                });
+
+                if (tryChallenge) {
+                    player.isInDialog = true;
+                    await displayDialogue({
+                        k,
+                        player,
+                        text: spell,
+                        characterName: 'Mage',
+                        onDisplayEnd: () => {
+                            player.isInDialog = false;
+                        },
+                    });
+
+                    //TODO: You can add a flickering effect to the dialog box to make it more magical
+
+                    player.state.alreadyTalkedToMage = true;
+                } else {
+                    player.isInDialog = true;
+                    await displayDialogue({
+                        k,
+                        player,
+                        text: noSpell,
+                        characterName: 'Mage',
+                        onDisplayEnd: () => {
+                            player.isInDialog = false;
+                        },
+                    });
+                }
+            }
+        } else {
+            player.isInDialog = true;
+            computer.play('on');
+
+            await displayDialogue({
+                k,
+                player,
+                text: alredyUnlockText,
+                onDisplayEnd: () => {
+                    player.isInDialog = false;
+                },
+            });
+        }
+    });
+
+    player.onCollideEnd('mage', () => {
+        computer.play('off');
+    });
+};