watercooler 0.0.3 → 0.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "watercooler",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "A beautiful 3D visualization of your mailbox messages as a village of coworkers",
   "type": "module",
   "main": "server.ts",

package/public/app.js

@@ -47,6 +47,13 @@ function init() {
     controls.maxPolarAngle = Math.PI / 2 - 0.1;
     controls.minDistance = 20;
     controls.maxDistance = 80;
+    controls.enableZoom = true;
+    controls.zoomSpeed = 0.8;
+    controls.enablePan = false; // Disable pan on touch for better mobile UX
+    controls.touches = {
+        ONE: THREE.TOUCH.ROTATE,
+        TWO: THREE.TOUCH.DOLLY_PAN
+    };
     
     // Lighting
     const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
@@ -90,6 +97,18 @@ function init() {
     mouse = new THREE.Vector2();
     renderer.domElement.addEventListener('click', onHouseClick);
     
+    // Add touch support for mobile
+    renderer.domElement.addEventListener('touchstart', onHouseTouchStart, { passive: false });
+    renderer.domElement.addEventListener('touchend', onHouseTouchEnd, { passive: false });
+    
+    // Disable context menu on mobile for better UX
+    renderer.domElement.addEventListener('contextmenu', (e) => e.preventDefault());
+    
+    // Handle orientation change
+    window.addEventListener('orientationchange', () => {
+        setTimeout(onWindowResize, 100);
+    });
+    
     animate();
 }
 
@@ -354,9 +373,21 @@ function animate() {
 }
 
 function onWindowResize() {
-    camera.aspect = window.innerWidth / window.innerHeight;
+    const width = window.innerWidth;
+    const height = window.innerHeight;
+    camera.aspect = width / height;
     camera.updateProjectionMatrix();
-    renderer.setSize(window.innerWidth, window.innerHeight);
+    renderer.setSize(width, height);
+    
+    // Adjust camera position for better mobile view
+    if (width < 768) {
+        // On mobile, position camera slightly higher and further back
+        camera.position.y = Math.max(camera.position.y, 35);
+        camera.position.z = Math.max(camera.position.z, 45);
+        controls.minDistance = 30; // Prevent zooming too close on mobile
+    } else {
+        controls.minDistance = 20;
+    }
 }
 
 // API and UI Functions
@@ -396,7 +427,10 @@ window.toggleSendPanel = function() {
 
 window.toggleMessagesPanel = function() {
     const panel = document.getElementById('messages-panel');
+    const btn = document.getElementById('toggle-messages-btn');
     panel.classList.toggle('open');
+    btn.style.opacity = panel.classList.contains('open') ? '0' : '1';
+    btn.style.pointerEvents = panel.classList.contains('open') ? 'none' : 'auto';
 };
 
 function updateUI() {
@@ -529,9 +563,47 @@ async function sendMessage() {
 
 // House click handler
 function onHouseClick(event) {
-    // Calculate mouse position
-    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
-    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
+    handleHouseInteraction(event.clientX, event.clientY);
+}
+
+// Touch handlers for mobile
+let touchStartX = 0;
+let touchStartY = 0;
+
+function onHouseTouchStart(event) {
+    if (event.touches.length === 1) {
+        touchStartX = event.touches[0].clientX;
+        touchStartY = event.touches[0].clientY;
+    }
+}
+
+function onHouseTouchEnd(event) {
+    if (event.changedTouches.length === 1) {
+        const touchEndX = event.changedTouches[0].clientX;
+        const touchEndY = event.changedTouches[0].clientY;
+        
+        // Check if touch moved significantly (if so, it's a drag/pan, not a tap)
+        const moveDistance = Math.sqrt(
+            Math.pow(touchEndX - touchStartX, 2) + 
+            Math.pow(touchEndY - touchStartY, 2)
+        );
+        
+        // Only trigger if touch didn't move much (tap vs swipe)
+        if (moveDistance < 20) {
+            handleHouseInteraction(touchEndX, touchEndY);
+        }
+    }
+}
+
+// Common house interaction handler
+function handleHouseInteraction(clientX, clientY) {
+    // Calculate normalized device coordinates
+    const rect = renderer.domElement.getBoundingClientRect();
+    const x = ((clientX - rect.left) / rect.width) * 2 - 1;
+    const y = -((clientY - rect.top) / rect.height) * 2 + 1;
+    
+    mouse.x = x;
+    mouse.y = y;
     
     raycaster.setFromCamera(mouse, camera);
     

package/public/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
     <title>Watercooler</title>
     <style>
         * { 
@@ -320,7 +320,7 @@
             font-size: 0.9rem;
             font-weight: 600;
             cursor: pointer;
-            z-index: 99;
+            z-index: 101;
             transition: all 0.3s ease;
             box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
         }
@@ -382,6 +382,239 @@
             border-radius: 3px;
         }
         
+        /* Mobile responsive styles */
+        @media (max-width: 768px) {
+            /* Send panel - full width at bottom */
+            .send-panel {
+                top: auto;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                width: 100%;
+                max-width: 100%;
+                border-radius: 16px 16px 0 0;
+                border-bottom: none;
+                border-left: none;
+                border-right: none;
+                box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
+            }
+            
+            .send-panel.collapsed {
+                width: 100%;
+                min-width: 100%;
+                transform: translateY(calc(100% - 75px));
+            }
+            
+            .send-header {
+                padding: 14px 20px;
+                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+            }
+            
+            .send-header h2 {
+                font-size: 1rem;
+            }
+            
+            .collapse-btn {
+                font-size: 1.4rem;
+                padding: 8px 16px;
+            }
+            
+            .send-form {
+                padding: 20px;
+                max-height: 50vh;
+                overflow-y: auto;
+            }
+            
+            .recipient-select, .message-input, .send-btn {
+                font-size: 16px; /* Prevents zoom on iOS */
+                padding: 14px 16px;
+                margin-bottom: 12px;
+            }
+            
+            .message-input {
+                min-height: 80px;
+            }
+            
+            /* Messages panel - nearly full screen on mobile */
+            .messages-panel {
+                top: auto;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                width: 100%;
+                max-width: 100%;
+                max-height: 90vh;
+                height: 90vh;
+                border-radius: 16px 16px 0 0;
+                transform: translateY(100%);
+                transition: transform 0.3s ease;
+                display: flex;
+                flex-direction: column;
+            }
+            
+            .messages-panel.open {
+                right: 0;
+                transform: translateY(0);
+            }
+            
+            .messages-header {
+                padding: 20px 24px;
+                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+                flex-shrink: 0;
+            }
+            
+            .messages-header h2 {
+                font-size: 1.2rem;
+            }
+            
+            .close-btn {
+                font-size: 1.8rem;
+                padding: 8px;
+            }
+            
+            .messages-container {
+                padding: 20px;
+                flex: 1;
+                max-height: calc(90vh - 80px);
+            }
+            
+            .message-card {
+                padding: 16px 16px 16px 24px;
+                margin-bottom: 12px;
+            }
+            
+            .message-sender {
+                font-size: 0.9rem;
+            }
+            
+            .message-time {
+                font-size: 0.75rem;
+            }
+            
+            .message-text {
+                font-size: 0.9rem;
+            }
+            
+            /* Toggle messages button - repositioned */
+            .toggle-messages-btn {
+                top: 20px;
+                right: 20px;
+                padding: 14px 18px;
+                font-size: 1rem;
+                border-radius: 30px;
+                z-index: 101;
+            }
+            
+            /* Toast notification - centered */
+            .toast {
+                left: 20px;
+                right: 20px;
+                bottom: auto;
+                top: 50%;
+                transform: translateY(-50%) translateY(20px);
+                text-align: center;
+                padding: 16px 24px;
+                font-size: 1rem;
+            }
+            
+            .toast.show {
+                transform: translateY(-50%) translateY(0);
+            }
+            
+            /* House dialog - full screen on mobile */
+            .house-dialog-content {
+                width: 100%;
+                max-width: 100%;
+                max-height: 95vh;
+                height: 95vh;
+                border-radius: 16px 16px 0 0;
+                margin: 0;
+                position: fixed;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                display: flex;
+                flex-direction: column;
+            }
+            
+            .house-dialog-header {
+                padding: 20px 24px;
+                flex-shrink: 0;
+            }
+            
+            .house-dialog-header h2 {
+                font-size: 1.2rem;
+            }
+            
+            .house-dialog-tabs {
+                padding: 0 12px;
+                flex-shrink: 0;
+            }
+            
+            .tab-btn {
+                padding: 16px 12px;
+                font-size: 0.9rem;
+            }
+            
+            .house-dialog-body {
+                padding: 20px;
+                max-height: calc(95vh - 140px);
+                flex: 1;
+                overflow-y: auto;
+            }
+            
+            .house-dialog-body .message-card {
+                padding: 16px 16px 16px 24px;
+            }
+            
+            /* Empty state */
+            .empty-state {
+                padding: 60px 20px;
+            }
+            
+            .empty-state p {
+                font-size: 1rem;
+            }
+        }
+        
+        /* Extra small screens */
+        @media (max-width: 480px) {
+            .send-panel.collapsed {
+                transform: translateY(calc(100% - 70px));
+            }
+            
+            .send-header {
+                padding: 12px 16px;
+            }
+            
+            .send-header h2 {
+                font-size: 0.9rem;
+            }
+            
+            .send-form {
+                padding: 16px;
+            }
+            
+            .recipient-select, .message-input, .send-btn {
+                font-size: 16px;
+                padding: 12px 14px;
+            }
+            
+            .toggle-messages-btn {
+                padding: 12px 16px;
+                font-size: 0.9rem;
+            }
+            
+            .messages-panel {
+                max-height: 75vh;
+            }
+            
+            .tab-btn {
+                font-size: 0.8rem;
+                padding: 12px 8px;
+            }
+        }
+        
         /* House Dialog */
         .house-dialog {
             display: none;
@@ -392,7 +625,7 @@
             bottom: 0;
             background: rgba(0, 0, 0, 0.7);
             z-index: 300;
-            align-items: center;
+            align-items: flex-end;
             justify-content: center;
         }
         
@@ -400,15 +633,43 @@
             display: flex;
         }
         
+        /* Desktop override for house dialog */
+        @media (min-width: 769px) {
+            .house-dialog {
+                align-items: center;
+            }
+            
+            .house-dialog-content {
+                position: relative;
+                bottom: auto;
+                left: auto;
+                right: auto;
+                border-radius: 20px;
+            }
+        }
+        
+        /* Desktop house dialog styles */
+        @media (min-width: 769px) {
+            .house-dialog-content {
+                background: rgba(255, 255, 255, 0.15);
+                backdrop-filter: blur(20px);
+                border-radius: 20px;
+                border: 1px solid rgba(255, 255, 255, 0.2);
+                box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+                width: 500px;
+                max-width: 90%;
+                max-height: 80vh;
+                display: flex;
+                flex-direction: column;
+            }
+        }
+        
+        /* Base house dialog styles (shared) */
         .house-dialog-content {
             background: rgba(255, 255, 255, 0.15);
             backdrop-filter: blur(20px);
-            border-radius: 20px;
             border: 1px solid rgba(255, 255, 255, 0.2);
             box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
-            width: 500px;
-            max-width: 90%;
-            max-height: 80vh;
             display: flex;
             flex-direction: column;
         }

package/server.ts

@@ -7,13 +7,14 @@ const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
 const app = express();
-const PORT = process.env.PORT || 3000;
 
 // Parse CLI args
 const args = process.argv.slice(2);
 let user: string | null = null;
 let mailboxPath: string | null = null;
 let coworkerPath: string | null = null;
+let port: number = parseInt(process.env.PORT || '3000', 10);
+let host: string = process.env.HOST || '0.0.0.0';
 
 for (let i = 0; i < args.length; i++) {
   if (args[i] === '--user' || args[i] === '-u') {
@@ -22,11 +23,16 @@ for (let i = 0; i < args.length; i++) {
     mailboxPath = args[++i];
   } else if (args[i] === '--coworkers' || args[i] === '-c') {
     coworkerPath = args[++i];
+  } else if (args[i] === '--port' || args[i] === '-p') {
+    const p = parseInt(args[++i], 10);
+    if (!isNaN(p)) port = p;
+  } else if (args[i] === '--host' || args[i] === '-h') {
+    host = args[++i];
   }
 }
 
 if (!user || !mailboxPath) {
-  console.error('Usage: watercooler --user <name> --mailbox <path> [--coworkers <path>]');
+  console.error('Usage: watercooler --user <name> --mailbox <path> [--coworkers <path>] [--port <number>] [--host <address>]');
   process.exit(1);
 }
 
@@ -35,7 +41,7 @@ console.log(`   Mailbox: ${mailboxPath}`);
 if (coworkerPath) {
   console.log(`   Coworker DB: ${coworkerPath}`);
 }
-console.log(`   URL: http://localhost:${PORT}`);
+console.log(`   URL: http://${host}:${port}`);
 
 // Databases
 let db: Database.Database | null = null;
@@ -230,6 +236,6 @@ app.get('/api/config', (req, res) => {
   res.json({ user, mailbox: mailboxPath, coworker: coworkerPath });
 });
 
-app.listen(PORT, () => {
+app.listen(port, host, () => {
   console.log('\n✅ Watercooler running!');
 });