feat: adjust mechanism to toggle credits screen

index.html

@@ -110,11 +110,14 @@
                                 "M"/Map Button - Toggle Map
                             </li>
                             <li class="alert-text">
-                                "O"/Credits Button - Open Credits
+                                "O"/Credits Button - Toggle Credits screen
                             </li>
                             <li class="alert-text">
                                 "I"/Bagpack Icon - Toggle Inventory
                             </li>
+                            <li class="alert-text">
+                                "F8"/Debug Button - Toggle Debug mode
+                            </li>
                         </ul>
                         <p class="alert-heading">Main Mechanics</p>
                         <ul>
@@ -623,7 +626,7 @@ <h3>Controls</h3>
                     <button id="new-game-button" class="setting-btn">
                         New Game
                     </button>
-                    <button id="debug-button" class="setting-btn">DEBUG</button>
+                    <button id="debug-button" class="setting-btn">Debug</button>
                     <button id="audio-button" class="setting-btn">
                         <img
                             id="audio-icon"

src/constants.js

@@ -110,3 +110,20 @@ export const conversationRico = [
         'So go in there, have fun — and make it epic!',
     ],
 ];
+
+export const playerScenes = [
+    'start',
+    'city',
+    'arcade',
+    'forest',
+    'forest_junction',
+    'campus_house_1',
+    'classroom',
+    'seaside',
+    'downtown',
+    'extended_campus',
+    'orange_house',
+    'red_house',
+    'realtor',
+    'company_interior',
+];

src/gameObjects/map_start/library.gameObject.js

@@ -5,7 +5,7 @@ export const library = (k, map, spawnpoints) => {
     const librarySpawnY = 100;
 
     const libraryObj = k.make([
-        k.sprite('library', { frame: 0, anim: 'laying' }),
+        k.sprite('library', { frame: 0 }),
         k.area(),
         k.pos(map.pos.x + librarySpawnX, map.pos.y + librarySpawnY),
         k.scale(0.15),

src/interactions/map_city/jessica.interation.js

@@ -3,7 +3,7 @@ import { displayDialogue } from '../../utils';
 import {
     completeQuestObjective,
     playerHasQuest,
-    recieveQuest,
+    receiveQuest,
     completeQuest,
     isObjectiveComplete,
 } from '../../utils/questHandler';
@@ -48,7 +48,7 @@ export const jessicaInteraction = async (player, k) => {
             text: [generateJessicaDialogue(player)],
             onDisplayEnd: async () => {
                 if (!playerHasQuest(player, 'Find the Flash Drive')) {
-                    await recieveQuest(
+                    await receiveQuest(
                         player,
                         jessicaQuests.findTheFlashDriveQuest
                     );

src/interactions/map_realtor/counterClerkInteraction.interactions.js

@@ -8,7 +8,7 @@ import {
 import {
     completeQuest,
     completeQuestObjective,
-    recieveQuest,
+    receiveQuest,
 } from '../../utils/questHandler';
 import { takeAwayCoins } from '../../utils/coinsUpdate';
 import { map_realtor } from '../quests/constants.quests';
@@ -26,7 +26,7 @@ export const counterClerkInteraction = (player, k) => {
                 'Would you like to purchase a house?',
             ],
         });
-        await recieveQuest(player, map_realtor['Buy a house!']);
+        await receiveQuest(player, map_realtor['Buy a house!']);
         await completeQuestObjective(
             player,
             'Buy a house!',

src/interactions/map_start/bruno.interaction.js

@@ -5,7 +5,7 @@ import {
     completeQuestObjective,
     completeQuest,
     playerHasQuest,
-    recieveQuest,
+    receiveQuest,
 } from '../../utils/questHandler';
 import { map_start_quests } from '../quests/constants.quests';
 
@@ -18,7 +18,7 @@ export const interactionWithBruno = (player, k, map) => {
             text: conversationBruno,
             onDisplayEnd: async () => {
                 if (!playerHasQuest(player, 'Start Interacting!')) {
-                    await recieveQuest(
+                    await receiveQuest(
                         player,
                         map_start_quests['Start Interacting!']
                     );

src/interactions/map_start/enterMapCityLeft.interaction.js

@@ -1,6 +1,6 @@
 import { displayDialogue } from '../../utils';
 import {
-    recieveQuest,
+    receiveQuest,
     retrieveQuestObjectiveStatus,
 } from '../../utils/questHandler';
 import { map_start_quests } from '../quests/constants.quests';
@@ -31,7 +31,7 @@ export const enterMapCityLeftInteraction = (player, k, map) => {
         ) {
             k.go('city', 'spawn_office_left');
         } else {
-            await recieveQuest(player, map_start_quests['Start Interacting!']);
+            await receiveQuest(player, map_start_quests['Start Interacting!']);
             if (!hasTalkedToBruno) {
                 displayDialogue({
                     k,

src/interactions/map_start/enterMapCityRight.interactions.js

@@ -1,6 +1,6 @@
 import { displayDialogue } from '../../utils';
 import {
-    recieveQuest,
+    receiveQuest,
     retrieveQuestObjectiveStatus,
 } from '../../utils/questHandler';
 import { map_start_quests } from '../quests/constants.quests';
@@ -32,7 +32,7 @@ export const enterMapCityRightInteraction = (player, k, map) => {
         ) {
             k.go('city', 'spawn_office_right'); // City spawn point
         } else {
-            await recieveQuest(player, map_start_quests['Start Interacting!']);
+            await receiveQuest(player, map_start_quests['Start Interacting!']);
             if (!hasTalkedToBruno) {
                 displayDialogue({
                     k,

src/interactions/map_start/restroom.interactions.js

@@ -12,18 +12,20 @@ export const restroomInteractions = (player, k, map) => {
         questName,
         'hasTalkedToBruno'
     );
-    player.onCollide('restroom_toilet', async () => {
-        await completeQuestObjective(player, questName, 'wasInRestroom');
-        await completeQuest(player, questName);
+    player.onCollide('restroom_toilet', () => {
         const dialogue = ['You feel refreshed now.', 'Ready for the ride.'];
-
+        
         if (!hasTalkedToBruno) {
             dialogue.push('You should talk to Bruno first.');
         }
         displayDialogue({
             k,
             player,
             text: [dialogue.join(' ')],
+            onDisplayEnd: async () => {
+                await completeQuestObjective(player, questName, 'wasInRestroom');
+                await completeQuest(player, questName);
+            }
         });
     });
 

src/kplayCtx.js

@@ -13,6 +13,7 @@ export const k = kaplay({
         right: { keyboard: ['d', 'right'], gamepad: 'east' },
         map: { keyboard: ['m'] },
         backpack: { keyboard: ['i'] },
+        credits: { keyboard: ['o'] },
     },
     loadingScreen: false,
     background: [15, 15, 35],

src/main.js

@@ -31,6 +31,7 @@ import { setupPauseMenu } from './utils/pauseMenu';
 import { setupMenuModals } from './utils/menuModals';
 
 import { Backpack } from './backpack';
+import { playerScenes } from './constants';
 
 k.scene('loadingScreen', () => loadingScreen(k));
 k.scene('start', (enter_tag) => bootstrap(start, { enter_tag }));
@@ -131,7 +132,14 @@ if (creditsButton) {
         const leftPanel = document.getElementById('left-panel');
         leftPanel.classList.toggle('show-misc-menu');
 
-        k.go('gameOver');
+        const gameState = getGameState();
+        const playerScene = gameState.player.scene;
+        if (playerScenes.includes(playerScene)) {
+            k.go('gameOver');
+        } else if (playerScene === 'gameOver') {
+            k.go('start');
+        }
+        k.canvas.focus();
     });
 }
 

src/player.controls.js

@@ -1,8 +1,9 @@
-import { scaleFactor } from './constants';
+import { playerScenes, scaleFactor } from './constants';
 import { animations, stopCharacterAnims } from './utils/animation';
 import { getCamScale } from './utils';
 import { k } from './kplayCtx';
 import { drawMinimap, toggleMinimap } from './utils/miniMap';
+import { getGameState } from './utils/gameState';
 
 // Manage multiple pressed buttons
 const pressed = new Set();
@@ -185,6 +186,15 @@ export const addPlayerControls = (player) => {
         toggleMinimap(k);
     });
 
+    // Set up the button press event to toggle credits screen
+    k.onButtonPress('credits', () => {
+        const gameState = getGameState();
+        const playerScene = gameState.player.scene;
+        if (playerScenes.includes(playerScene)) {
+            k.go('gameOver');
+        }
+    });
+
     // Only stop animations if no buttons are pressed
     k.onMouseRelease(() => pressed.size || stopCharacterAnims(player));
 

src/scenes/gameOver.js

@@ -60,7 +60,7 @@ Thank you for playing!
     ]);
 
     const crossButton = k.add([
-        k.rect(65, 35),
+        k.rect(120, 35),
         k.color(255, 0, 0),
         k.anchor('topright'),
         k.z(101),
@@ -69,7 +69,7 @@ Thank you for playing!
     ]);
 
     const exitText = k.add([
-        k.text('Exit', { size: 26 / camScale }),
+        k.text('Exit (O)', { size: 26 / camScale }),
         k.color(255, 255, 255),
         k.anchor('topright'),
         k.z(102),
@@ -159,7 +159,7 @@ Thank you for playing!
     });
 
     // key bindings, again for added functionality
-    k.onKeyPress('x', () => {
+    k.onKeyPress('o', () => {
         k.go('start');
     });
 });

src/scenes/loadingScreen.js

@@ -21,8 +21,9 @@ export function loadingScreen(k) {
 
     const walkingNPCs = [];
     for (let i = 0; i < 3; i++) {
-        const randomChar =
-            characters[Math.floor(Math.random() * characters.length)];
+        const charIdx = Math.floor(Math.random() * characters.length);
+        const randomChar = characters[charIdx];
+        characters.splice(charIdx,1);   // This ensures characters are unique
         walkingNPCs.push({
             character: randomChar,
             startX: -100 - i * 150,
@@ -176,7 +177,7 @@ export function loadingScreen(k) {
             }
 
             const walkCycle = Math.floor((time * 4) % 2);
-            const frameIndex = npc.character.frames[walkCycle === 0 ? 1 : 0];
+            const frameIndex = npc.character.frames[walkCycle === 0 ? 3 : 2];
 
             k.drawSprite({
                 sprite: 'characters',

src/scenes/start.js

@@ -38,9 +38,5 @@ export async function start() {
     // Immediately apply the selected character
     changePlayerSprite(charName, 'idle-down', k, player);
 
-    k.onKeyPress('o', () => {
-        k.go('gameOver');
-    });
-
     return [map, spawnpoint, gameObjects, interactions, sounds];
 }

src/styles/dialogs.css

@@ -268,6 +268,7 @@
 }
 
 #textbox #dialog {
+    max-height: 100px;
     overflow-y: auto;
     width: 100%;
 }

src/utils/jobHandler.js

@@ -1,5 +1,5 @@
 // jobHandler.js
-import { playerHasQuest, recieveQuest, completeQuest } from './questHandler.js';
+import { playerHasQuest, receiveQuest, completeQuest } from './questHandler.js';
 
 export const JOB_QUEST_NAME = 'company_job';
 
@@ -18,7 +18,7 @@ export const playerHasJob = (player) => {
  */
 export const startJobQuest = async (player) => {
     if (!playerHasQuest(player, JOB_QUEST_NAME)) {
-        await recieveQuest(player, {
+        await receiveQuest(player, {
             [JOB_QUEST_NAME]: {
                 done: false,
                 objectives: {},

src/utils/questHandler.js

@@ -127,7 +127,7 @@ export const retrieveQuestObjectiveStatus = (player, questName, objective) => {
     return player.state.quests[questName].objectives[objective];
 };
 
-export const recieveQuest = async (player, quest) => {
+export const receiveQuest = async (player, quest) => {
     if (!playerHasQuest(player, Object.keys(quest)[0])) {
         // Triggers set handler in Proxy state object
         player.state.quests = { ...player.state.quests, ...quest };
@@ -160,4 +160,4 @@ export const isObjectiveComplete = (player, questName, objective) => {
 };
 
 // If you want to add quests, you can recieve them through interactions.
-// Use recieveQuest to get the quest via the player's state object.
+// Use receiveQuest to get the quest via the player's state object.