From 7471740ffd2a9c0e7debf4f7af91a1b79de16623 Mon Sep 17 00:00:00 2001 From: poschuler Date: Thu, 10 Oct 2024 10:44:04 -0500 Subject: [PATCH 1/2] feat: add control when is less than zero --- src/utils/energyUpdate.js | 6 ++++++ 1 file changed, 6 insertions(+) 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); }; From 84b36060df9e1c756d7e3dba988f1f207f374ef3 Mon Sep 17 00:00:00 2001 From: poschuler Date: Thu, 10 Oct 2024 10:51:43 -0500 Subject: [PATCH 2/2] feat: add computer object and interaction in house 1 --- .../map_campus_house_1/computer.gameObject.js | 29 ++++ src/gameObjects/map_campus_house_1/index.js | 3 + .../computer.interaction.js | 124 ++++++++++++++++++ src/interactions/map_campus_house_1/index.js | 2 + 4 files changed, 158 insertions(+) create mode 100644 src/gameObjects/map_campus_house_1/computer.gameObject.js create mode 100644 src/interactions/map_campus_house_1/computer.interaction.js 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 c1666db4..af7c422e 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 bf582b4f..eb2cae57 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 const attachInteractions = (gameObj, k) => {