sounds; draggable console (#256)

Author: jbampton

src/_includes/footer.njk

@@ -67,15 +67,15 @@
     </div>
 
     <div class="space-y-1 mb-2">
-        <button onclick="addExperience(5)" class="w-full flex justify-between px-2 py-1 bg-cyan-500/5 text-cyan-400 text-[8px] border border-cyan-500/20 rounded">
+        <button onclick="addExperience(5); playSound('click');" class="w-full flex justify-between px-2 py-1 bg-cyan-500/5 text-cyan-400 text-[8px] border border-cyan-500/20 rounded">
             <span>💎 SKILL_MINER</span>
             <span class="opacity-50">+5</span>
         </button>
         <button onclick="addExperience(15); playSound('restore');" class="w-full flex justify-between px-2 py-1 bg-pink-500/5 text-pink-400 text-[8px] border border-pink-500/20 rounded">
             <span>🛠️ SYS_OPTIMIZE</span>
             <span class="opacity-50">+15</span>
         </button>
-        <button onclick="triggerMagicXP()" class="w-full flex justify-between px-2 py-1.5 bg-gradient-to-r from-purple-600/20 to-blue-600/20 text-purple-400 text-[8px] border border-purple-500/30 rounded hover:from-purple-600/40 hover:to-blue-600/40 transition-all group">
+        <button onclick="triggerMagicXP(); playSound('levelUp');" class="w-full flex justify-between px-2 py-1.5 bg-gradient-to-r from-purple-600/20 to-blue-600/20 text-purple-400 text-[8px] border border-purple-500/30 rounded hover:from-purple-600/40 hover:to-blue-600/40 transition-all group">
             <span>✨ CAST_MAGIC_XP</span>
             <span class="group-hover:animate-pulse">+50 XP</span>
         </button>
@@ -130,8 +130,8 @@
 <div id="matrix-console-container" class="fixed bottom-6 right-6 w-80 z-[1000] transition-all duration-300 ease-in-out">
     <div class="bg-black/90 backdrop-blur-xl border border-green-500/30 rounded-t-lg overflow-hidden shadow-2xl">
 
-        <div class="bg-green-500/10 border-b border-green-500/30 px-3 py-2 flex justify-between items-center cursor-default select-none">
-            <div class="flex items-center gap-2">
+        <div class="bg-green-500/10 border-b border-green-500/30 px-3 py-2 flex justify-between items-center cursor-grab select-none">
+             <div class="flex items-center gap-2">
                 <span class="text-[10px] font-mono text-green-500 uppercase tracking-widest opacity-70">System_Log</span>
             </div>
 
@@ -142,7 +142,7 @@
             </div>
         </div>
 
-        <div id="matrix-console-output" class="h-48 p-3 overflow-y-auto font-mono text-[11px] leading-tight transition-all duration-300">
+        <div id="matrix-console-output" class="h-48 p-3 overflow-y-auto font-mono text-[11px] leading-tight">
             <p class="text-green-500/40">// Terminal link established...</p>
         </div>
     </div>

src/assets/css/style.css

@@ -730,3 +730,11 @@ a:hover {
     background-size: 100% 2px, 3px 100%;
     pointer-events: none;
 }
+.cursor-grab:active {
+    cursor: grabbing;
+}
+
+/* Prevents the terminal text from getting highlighted while you move the window */
+#matrix-console-container.is-dragging {
+    user-select: none;
+}

src/assets/js/script.js

@@ -358,6 +358,51 @@ function getRank(lvl) {
 const consoleContainer = document.getElementById('matrix-console-container');
 const consoleOutput = document.getElementById('matrix-console-output');
 
+const dragContainer = document.getElementById('matrix-console-container');
+const dragHeader = dragContainer.querySelector('.bg-green-500\\/10'); // Selects the header bar
+
+let isDragging = false;
+let offsetLeft = 0;
+let offsetTop = 0;
+
+dragHeader.addEventListener('mousedown', (e) => {
+    // Prevent dragging when clicking the minimize/close buttons
+    if (e.target.tagName === 'BUTTON') return;
+
+    isDragging = true;
+
+    // Calculate where the mouse is relative to the top-left of the console
+    const rect = dragContainer.getBoundingClientRect();
+    offsetLeft = e.clientX - rect.left;
+    offsetTop = e.clientY - rect.top;
+
+    // Change cursor to indicate moving
+    dragHeader.style.cursor = 'grabbing';
+});
+
+document.addEventListener('mousemove', (e) => {
+    if (!isDragging) return;
+
+    // Calculate new position
+    let x = e.clientX - offsetLeft;
+    let y = e.clientY - offsetTop;
+
+    // Boundary Check (Optional: keeps it inside the screen)
+    x = Math.max(0, Math.min(x, window.innerWidth - dragContainer.offsetWidth));
+    y = Math.max(0, Math.min(y, window.innerHeight - dragContainer.offsetHeight));
+
+    // Apply position and remove Tailwind's 'bottom' and 'right' so they don't fight the 'top'/'left'
+    dragContainer.style.bottom = 'auto';
+    dragContainer.style.right = 'auto';
+    dragContainer.style.left = `${x}px`;
+    dragContainer.style.top = `${y}px`;
+});
+
+document.addEventListener('mouseup', () => {
+    isDragging = false;
+    dragHeader.style.cursor = 'grab';
+});
+
 function minimizeConsole() {
     // Toggles the height of the output area
     if (consoleOutput.style.display === 'none') {