Merge branch 'main' into 29-city-interactions

zero-to-mastery · Oct 3, 2024 · 3d43242 · 3d43242
2 parents ac4a9e9 + fc116d0
commit 3d43242
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 55 deletions.
diff --git a/index.html b/index.html
@@ -15,7 +15,8 @@
                 src: url(PixelifySans-VariableFont_wght.ttf);
             }
 
-            html, body {
+            html,
+            body {
                 overflow: hidden;
                 margin: 0;
                 padding: 0;
@@ -78,7 +79,7 @@
                 box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
                 transform: translateY(-2px);
             }
-            
+
             .btn-container {
                 align-self: flex-end;
                 margin-top: 1rem;
@@ -94,7 +95,8 @@
                 top: 2vh;
                 display: flex;
                 flex-direction: column;
-                color: #aaa;
+                color: #fff;
+                text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
                 font-size: 1rem;
                 line-height: 1.6;
                 opacity: 0;
@@ -151,14 +153,14 @@
                         <p id="dialogue" class="ui-text"></p>
                         <div class="btn-container">
                             <button
-                                id="close"
+                                id="dialog-close-btn"
                                 class="ui-close-btn"
                                 aria-label="Close dialog"
                             >
                                 Close
                             </button>
                             <button
-                                id="next"
+                                id="dialog-next-btn"
                                 class="ui-next-btn"
                                 aria-label="Next dialog"
                             >

diff --git a/src/interactions/handler.interactions.js b/src/interactions/handler.interactions.js
@@ -8,16 +8,22 @@ export const npcInteractionHandler = (
     onCollideEnd
 ) => {
     let keyHandler;
+    let clickHandler;
+
     player.onCollide(target, (sprite) => {
         // Display the modal prompting the user to press 't'
         const { actionModal, actionLabel } = buildActionModal(sprite, k);
 
-        keyHandler = k.onKeyPress('t', () => {
+        function handleOnCollide() {
             k.destroy(actionModal);
             k.destroy(actionLabel);
             onCollide();
+            clickHandler.cancel();
             keyHandler.cancel();
-        });
+        }
+
+        clickHandler = k.onClick('action-modal', () => handleOnCollide());
+        keyHandler = k.onKeyPress('t', () => handleOnCollide());
     });
 
     player.onCollideEnd(target, () => {
@@ -30,6 +36,7 @@ export const npcInteractionHandler = (
             actionLabel.destroy();
         }
 
+        clickHandler.cancel();
         keyHandler.cancel();
 
         if (onCollideEnd) {

diff --git a/src/kplayCtx.js b/src/kplayCtx.js
@@ -12,7 +12,9 @@ export const k = kaplay({
         right: { keyboard: ['d', 'right'], gamepad: 'east' },
     },
 });
-
-export const setGlobalEvents = (cb = () => {}) => {
-    cb();
+k.onCustomEvent = (eventName, cb) => {
+    k.canvas.addEventListener(eventName, cb.bind(k));
+};
+k.triggerEvent = (eventName, detail) => {
+    k.canvas.dispatchEvent(new CustomEvent(eventName, { detail }));
 };
diff --git a/src/player.controls.js b/src/player.controls.js
@@ -13,7 +13,7 @@ export const addPlayerControls = (k, player) => {
         (dir) => player.isInDialog || pressed.delete(dir)
     );
     // Control what happens when a dialog starts
-    k.canvas.addEventListener('dialogueDisplayed', () => {
+    k.onCustomEvent('dialog-displayed', () => {
         pressed.clear();
         // TODO: should it look at the character?
         stopCharacterAnims(player);
@@ -49,6 +49,7 @@ export const addPlayerControls = (k, player) => {
         if (player.isInDialog) return;
         // If three buttons are pressed, the player should not move
         if (pressed.size > 2) return;
+        if (pressed.size === 0) return;
         // Also, if opposite buttons are pressed, the player should not move
         if (pressed.has('left') && pressed.has('right')) return;
         if (pressed.has('up') && pressed.has('down')) return;

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -3,4 +3,4 @@
 button:focus {
     box-shadow: 2px 3px 5px #8383af;
     outline: 2px solid blue;
-}
+}
diff --git a/src/utils.js b/src/utils.js
@@ -1,20 +1,25 @@
 const processDialog = (dialogue, text) => {
     let index = 0;
     let currentText = '';
+    let fullText = Array.isArray(text) ? text.join(' ') : text;
     const intervalRef = setInterval(() => {
-        if (index < text.length) {
-            currentText += text[index];
+        if (index < fullText.length) {
+            currentText += fullText[index];
             dialogue.innerHTML = currentText; // Display the current tex
             index++;
             return;
         }
 
         clearInterval(intervalRef);
-    }, 1);
+    }, 20);
 
     return intervalRef;
 };
 
+// Seems to be a bug where when the canvas loses focus,
+// the keypress event listener is not triggered
+const slightPause = () => new Promise((res) => setTimeout(res, 500));
+
 const processDialogWithCharacterName = (dialogue, characterName, text) => {
     let index = 0;
     let currentText = '';
@@ -41,8 +46,8 @@ export async function displayDialogueWithCharacter({
 }) {
     const dialogueUI = document.getElementById('textbox-container');
     const dialogue = document.getElementById('dialogue');
-    const closeBtn = document.getElementById('close');
-    const nextBtn = document.getElementById('next');
+    const closeBtn = document.getElementById('dialog-close-btn');
+    const nextBtn = document.getElementById('dialog-next-btn');
 
     let intervalRef = null;
 
@@ -51,14 +56,10 @@ export async function displayDialogueWithCharacter({
     if (text instanceof Array) {
         closeBtn.style.display = 'none';
         nextBtn.style.display = 'block';
+        await slightPause().then(() => nextBtn.focus());
         for await (const t of text) {
             intervalRef = await new Promise((res) => {
-                nextBtn.removeEventListener('click', () => {
-                    res(intervalRef);
-                });
-                nextBtn.addEventListener('click', () => {
-                    res(intervalRef);
-                });
+                nextBtn.addEventListener('click', () => res(intervalRef));
                 intervalRef = processDialogWithCharacterName(
                     dialogue,
                     characterName,
@@ -83,12 +84,7 @@ export async function displayDialogueWithCharacter({
         dialogue.innerHTML = '';
         clearInterval(intervalRef);
         closeBtn.removeEventListener('click', onCloseBtnClick);
-        k.canvas.focus();
-        k.canvas.dispatchEvent(
-            new CustomEvent('dialogueClosed', {
-                detail: { k, player, characterName, text },
-            })
-        );
+        k.triggerEvent('dialog-closed', { player, characterName, text });
         k.canvas.focus();
     }
 
@@ -99,12 +95,7 @@ export async function displayDialogueWithCharacter({
             closeBtn.click();
         }
     });
-
-    k.canvas.dispatchEvent(
-        new CustomEvent('dialogueDisplayed', {
-            detail: { k, player, characterName, text },
-        })
-    );
+    k.triggerEvent('dialog-displayed', { player, characterName, text });
 }
 
 export async function displayDialogueWithoutCharacter({
@@ -115,47 +106,39 @@ export async function displayDialogueWithoutCharacter({
 }) {
     const dialogueUI = document.getElementById('textbox-container');
     const dialogue = document.getElementById('dialogue');
-    const closeBtn = document.getElementById('close');
-
-    let intervalRef = null;
+    const closeBtn = document.getElementById('dialog-close-btn');
+    const nextBtn = document.getElementById('dialog-next-btn');
 
+    let intervalRef = 0;
     dialogueUI.style.display = 'block';
+    nextBtn.style.display = 'none';
+    closeBtn.style.display = 'block';
 
     intervalRef = processDialog(dialogue, text); // Call function without character name
 
-    closeBtn.style.display = 'block';
-
     function onCloseBtnClick() {
         onDisplayEnd();
         dialogueUI.style.display = 'none';
         dialogue.innerHTML = '';
         clearInterval(intervalRef);
         closeBtn.removeEventListener('click', onCloseBtnClick);
-        k.canvas.focus();
-        k.canvas.dispatchEvent(
-            new CustomEvent('dialogueClosed', { detail: { k, player, text } })
-        );
+        k.triggerEvent('dialog-closed', { player, text });
         k.canvas.focus();
     }
-
     closeBtn.addEventListener('click', onCloseBtnClick);
 
-    addEventListener('keypress', (key) => {
-        if (key.code === 'Enter') {
-            closeBtn.click();
-        }
+    addEventListener('keydown', (key) => {
+        if (['Enter', 'Escape'].includes(key.code)) closeBtn.click();
     });
-
-    k.canvas.dispatchEvent(
-        new CustomEvent('dialogueDisplayed', { detail: { k, player, text } })
-    );
+    await slightPause().then(() => closeBtn.focus());
+    k.triggerEvent('dialog-displayed', { player, text });
 }
 
 export async function displayPermissionBox(text, onDisplayEnd = () => {}) {
     const dialogueUI = document.getElementById('textbox-container');
     const dialogue = document.getElementById('dialogue');
-    const closeBtn = document.getElementById('close');
-    const nextBtn = document.getElementById('next');
+    const closeBtn = document.getElementById('dialog-close-btn');
+    const nextBtn = document.getElementById('dialog-next-btn');
     closeBtn.innerHTML = 'No';
     nextBtn.innerHTML = 'Yes';
 
@@ -212,11 +195,13 @@ export function setCamScale(k) {
     }
 }
 
+// NOTE: sprite must be an npc not an object like mailbox
 export function buildActionModal(sprite, k) {
     const spritePos = sprite.pos;
 
     const actionModal = k.add([
         k.rect(20, 20),
+        k.area(),
         k.color(255, 255, 255),
         k.outline(2, k.Color.BLACK),
         k.pos(spritePos.x - 10, spritePos.y - sprite.height - 30),