diff --git a/src/gameObjects/map_campus_house_1/computer.gameObject.js b/src/gameObjects/map_campus_house_1/computer.gameObject.js new file mode 100644 index 00000000..c3c190c2 --- /dev/null +++ b/src/gameObjects/map_campus_house_1/computer.gameObject.js @@ -0,0 +1,29 @@ +import { scaleFactor } from '../../constants'; + +export const computer = (k, map, spawnpoints) => { + k.loadSprite('computer', './assets/sprites/laptop.png', { + sliceX: 4, + sliceY: 4, + anims: { + on: { from: 4, to: 5, loop: false }, + off: { from: 5, to: 4, loop: false }, + }, + }); + + const [diningRoomTable] = map.query({ include: 'dining_room_table' }); + const tableWidth = diningRoomTable.area.shape.width; + const tableHeight = diningRoomTable.area.shape.height; + + return k.make([ + k.sprite('computer', { frame: 4 }), + k.area(), + k.pos( + (tableWidth + diningRoomTable.pos.x - 20) * scaleFactor, + (tableHeight + diningRoomTable.pos.y - 20) * scaleFactor + ), + k.body({ isStatic: true }), + k.scale(scaleFactor - 0.7), + k.offscreen({ hide: true, distance: 10 }), + 'computer', + ]); +}; diff --git a/src/gameObjects/map_campus_house_1/index.js b/src/gameObjects/map_campus_house_1/index.js index 94f437b5..937c3011 100644 --- a/src/gameObjects/map_campus_house_1/index.js +++ b/src/gameObjects/map_campus_house_1/index.js @@ -1,4 +1,7 @@ +import { computer } from './computer.gameObject'; + const gameObjects = [ + computer, // Add more game objects here ]; diff --git a/src/interactions/map_campus_house_1/computer.interaction.js b/src/interactions/map_campus_house_1/computer.interaction.js new file mode 100644 index 00000000..641b6e0b --- /dev/null +++ b/src/interactions/map_campus_house_1/computer.interaction.js @@ -0,0 +1,124 @@ +import { displayDialogue } from '../../utils'; +import { updateEnergyState } from '../../utils/energyUpdate'; + +const challengeText = `What's the value of output?: +
const one = false || {} || null;
+const two = null || false || '';
+const three = [] || 0 || true;
+console.log(one, two, three);
`;
+
+const options = [
+ {
+ value: 'A',
+ text: `false null []
`,
+ },
+ {
+ value: 'B',
+ text: `null "" true
`,
+ },
+ {
+ value: 'C',
+ text: `{} "" []
`,
+ },
+ {
+ value: 'D',
+ text: `null null true
`,
+ },
+];
+
+export const computerInteractions = async (player, k, map) => {
+ player.onCollide('computer', async () => {
+ const energyUI = document.getElementById('energy-container');
+ energyUI.style.display = 'none';
+ const [computer] = k.query({ include: 'computer' });
+ computer.play('on');
+ player.isInDialog = true;
+
+ 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.onCollideEnd('computer', () => {
+ const energyUI = document.getElementById('energy-container');
+ energyUI.style.display = 'flex';
+ const [computer] = k.query({ include: 'computer' });
+ computer.play('off');
+ });
+};
+
+function showCustomPrompt(message, options, callback) {
+ // Set the prompt message
+ const energyUI = document.getElementById('energy-container');
+ energyUI.style.display = 'none';
+
+ let promotMessage = document.getElementById('prompt-message');
+ promotMessage.innerHTML = message;
+
+ // Clear any existing options in the container
+ const optionsContainer = document.getElementById('options-container');
+ optionsContainer.innerHTML = '';
+
+ // Create buttons for each option
+ options.forEach((option) => {
+ const button = document.createElement('button');
+ button.innerHTML = option.text;
+ button.classList.add('option-btn');
+ button.setAttribute('tabindex', '0'); // Make the button focusable
+
+ // Add click event for mouse interactions
+ button.onclick = function () {
+ callback(option.value);
+ closeCustomPrompt();
+ };
+
+ // Add keyboard event listener for accessibility
+ button.addEventListener('keydown', function (e) {
+ if (e.key === 'Enter' || e.key === ' ') {
+ // Enter or Space key
+ e.preventDefault(); // Prevent the default behavior (e.g., form submission)
+ callback(option);
+ closeCustomPrompt();
+ }
+ });
+
+ optionsContainer.appendChild(button);
+ });
+
+ // Display the custom prompt
+ document.getElementById('custom-prompt').style.display = 'flex';
+
+ // Set focus on the first button
+ if (optionsContainer.children.length > 0) {
+ optionsContainer.children[0].focus();
+ }
+}
+
+// Function to close the custom prompt
+function closeCustomPrompt() {
+ // Hide the custom prompt
+ 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 91c00370..a6811be6 100644
--- a/src/interactions/map_campus_house_1/index.js
+++ b/src/interactions/map_campus_house_1/index.js
@@ -1,10 +1,12 @@
import { enterMapCityInteraction } from './enterMapCity.interactions';
import { bedInteractions } from './bed.interaction';
+import { computerInteractions } from './computer.interaction';
const interactions = [
// Add more interactions here
enterMapCityInteraction,
bedInteractions,
+ computerInteractions,
];
export default interactions;
diff --git a/src/utils/energyUpdate.js b/src/utils/energyUpdate.js
index 994327e2..dbab81df 100644
--- a/src/utils/energyUpdate.js
+++ b/src/utils/energyUpdate.js
@@ -1,8 +1,14 @@
export const updateEnergyState = (state, val) => {
state.energy += val;
+
if (state.energy > 100) {
state.energy = 100;
}
+
+ if (state.energy <= 0) {
+ state.energy = 0;
+ }
+
updateEnergyUI(state.energy);
};