New Interaction Drink Machine (#64)

Part of #2

index.html

@@ -28,6 +28,53 @@
                 height: 100%;
                 position: relative;
             }
+            #custom-prompt {
+                display: none;
+                position: absolute;
+                left: 15%;
+                right: 15%;
+                bottom: 2vh;
+                background: #fff;
+                border-radius: 10px;
+                border: 2px solid #007bff;
+                padding: 1rem;
+                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+                flex-direction: column;
+                align-items: flex-start;
+                word-spacing: 0.2rem;
+                z-index: 10; /* Ensure it's above other UI elements */
+            }
+
+            .prompt-content {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+            }
+
+            .options-container {
+                display: flex;
+                justify-content: center;
+                gap: 1rem; /* Adds space between buttons */
+                margin-top: 1rem;
+            }
+
+            .option-btn {
+                padding: 0.8rem 1.5rem;
+                background-color: #007bff;
+                border: none;
+                border-radius: 8px;
+                color: white;
+                font-size: 1rem;
+                cursor: pointer;
+                transition:
+                    background-color 0.3s ease,
+                    transform 0.2s ease;
+            }
+
+            .option-btn:hover {
+                background-color: #0056b3;
+                transform: translateY(-2px);
+            }
 
             #textbox {
                 position: absolute;
@@ -69,7 +116,11 @@
                 opacity: 0;
                 animation: slideIn 1s forwards 0.3s;
             }
-
+            .ui-text {
+                transition:
+                    transform 0.5s ease,
+                    opacity 0.5s ease;
+            }
             .ui-close-btn,
             .ui-next-btn {
                 font-family: 'Courier New', monospace;
@@ -177,6 +228,16 @@
                     Tap/Click/↑↓←→ around to move
                 </p>
 
+                <p id="dialogue-text"></p>
+                <div id="custom-prompt" class="custom-prompt">
+                    <div class="prompt-content">
+                        <p id="prompt-message"></p>
+                        <div
+                            id="options-container"
+                            class="options-container"
+                        ></div>
+                    </div>
+                </div>
                 <div id="textbox-container" style="display: none">
                     <div id="textbox">
                         <p id="dialogue" class="ui-text"></p>

src/interactions/map_start/drink_machine.interaction.js

@@ -0,0 +1,68 @@
+import { displayDialogueWithoutCharacter } from '../../utils';
+
+// List of drinks and possible fun surprises
+
+export const interactionWithDrinksMachine = (player, k, map) => {
+    player.onCollide('drinks_machine', () => {
+        // Trigger the custom prompt when the player collides with the drinks machine
+        showCustomPrompt(
+            'What would you like to drink?', // Prompt message
+            ['Coke', 'Soda', 'Water', 'Sprite'], // Options
+            (selectedOption) => {
+                // Callback when an option is selected
+                // Logic based on the selected option
+                if (selectedOption === 'Coke') {
+                    displayDialogueWithoutCharacter(
+                        'Coke - "Taste the Feeling!" A cold refreshment is coming your way!',
+                        () => {}
+                    );
+                } else if (selectedOption === 'Soda') {
+                    displayDialogueWithoutCharacter(
+                        'Soda - "Fizz up your life!" Time for some sparkling fun!',
+                        () => {}
+                    );
+                } else if (selectedOption === 'Water') {
+                    displayDialogueWithoutCharacter(
+                        'Water - "Pure as the mountain stream." Stay hydrated and fresh!',
+                        () => {}
+                    );
+                } else if (selectedOption === 'Sprite') {
+                    displayDialogueWithoutCharacter(
+                        'Sprite - "Obey Your Thirst!" Crisp and refreshing as ever!',
+                        () => {}
+                    );
+                }
+            }
+        );
+    });
+};
+
+function showCustomPrompt(message, options, callback) {
+    // Set the prompt message
+    document.getElementById('prompt-message').textContent = 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.textContent = option;
+        button.classList.add('option-btn');
+        button.onclick = function () {
+            callback(option);
+            closeCustomPrompt();
+        };
+        optionsContainer.appendChild(button);
+    });
+
+    // Display the custom prompt
+    document.getElementById('custom-prompt').style.display = 'flex';
+}
+
+// Function to close the custom prompt
+function closeCustomPrompt() {
+    // Hide the custom prompt
+    document.getElementById('custom-prompt').style.display = 'none';
+}

src/interactions/map_start/index.js

@@ -4,14 +4,15 @@ import { interactionWithMainboxMainArea } from './mailboxMainArea.interaction';
 import { restroomInteractions } from './restroom.interactions';
 import { interactionWithComputer } from './computer.interaction';
 import { interactionWithJokeTeller } from './jokeTeller.interaction';
-
+import { interactionWithDrinksMachine } from './drink_machine.interaction';
 const interactions = [
     restroomInteractions,
     interactionWithBruno,
     enterMapCityInteraction,
     interactionWithMainboxMainArea,
     interactionWithComputer,
     interactionWithJokeTeller,
+    interactionWithDrinksMachine,
     // Add more interactions here
 ];