Merge pull request #19 from mordachai/soundfx

Soundfx

Author: mordachai

scripts/apps/drawing-sheet.js

@@ -1,5 +1,6 @@
 import { MODULE_ID, PIN_COLORS } from "../config.js";
 import { collaborativeUpdate } from "../utils/socket-handler.js";
+import { applyTapeEffectToSound } from "../utils/audio-utils.js";
 import { 
   startConnectionAnimation, 
   stopConnectionAnimation, 
@@ -67,6 +68,7 @@ export class CustomDrawingSheet extends DrawingConfig {
     context.connections = customData.connections;
     context.font = customData.font;
     context.fontSize = customData.fontSize;
+    context.audioEffectEnabled = customData.audioEffectEnabled;
 
     // Enrich the linked object for display
     context.enrichedLinkedObject = context.linkedObject ? await TextEditor.enrichHTML(context.linkedObject, { async: true }) : "";
@@ -111,6 +113,7 @@ export class CustomDrawingSheet extends DrawingConfig {
       noteType: noteType,
       text: this.document.flags[MODULE_ID]?.text || "Default Text",
       audioPath: this.document.flags[MODULE_ID]?.audioPath || "",
+      audioEffectEnabled: this.document.flags[MODULE_ID]?.audioEffectEnabled !== false, // Default to true
       linkedObject: this.document.flags[MODULE_ID]?.linkedObject || "",
       image: this.document.flags[MODULE_ID]?.image || (noteType === "handout" ? "modules/investigation-board/assets/newhandout.webp" : "modules/investigation-board/assets/placeholder.webp"),
       identityName: this.document.flags[MODULE_ID]?.identityName || "",
@@ -230,27 +233,38 @@ export class CustomDrawingSheet extends DrawingConfig {
           this.previewSound.stop();
           this.previewSound = null;
           previewAudioBtn.innerHTML = '<i class="fas fa-play"></i>';
+          previewAudioBtn.title = "Preview Audio";
           return;
         }
 
         const audioPath = this.element.querySelector("input[name='audioPath']")?.value;
         if (audioPath) {
           this.previewSound = await game.audio.play(audioPath, { volume: 0.8 });
+          
+          // Apply tape effect if enabled in the form
+          const effectEnabled = this.element.querySelector("input[name='audioEffectEnabled']")?.checked;
+          if (effectEnabled && this.previewSound) {
+            applyTapeEffectToSound(this.previewSound);
+          }
+
           previewAudioBtn.innerHTML = '<i class="fas fa-stop"></i>';
+          previewAudioBtn.title = "Stop Preview";
 
           // Reset button when sound ends
           const sound = this.previewSound;
           setTimeout(() => {
             if (this.previewSound === sound && !sound.playing) {
                previewAudioBtn.innerHTML = '<i class="fas fa-play"></i>';
+               previewAudioBtn.title = "Preview Audio";
             }
           }, 100); // Small delay to let it start
 
           // Monitor for end
           const checkEnd = setInterval(() => {
             if (!this.previewSound || this.previewSound !== sound || !sound.playing) {
               if (this.previewSound === sound) {
-                previewAudioBtn.innerHTML = '<i class="fas fa-play"></i> Preview Audio';
+                previewAudioBtn.innerHTML = '<i class="fas fa-play"></i>';
+                previewAudioBtn.title = "Preview Audio";
                 this.previewSound = null;
               }
               clearInterval(checkEnd);
@@ -389,6 +403,10 @@ export class CustomDrawingSheet extends DrawingConfig {
           updates[`flags.${MODULE_ID}.audioPath`] = data.audioPath;
         }
 
+        if (noteType === "media") {
+          updates[`flags.${MODULE_ID}.audioEffectEnabled`] = !!data.audioEffectEnabled;
+        }
+
         if (data.linkedObject !== undefined) {
           updates[`flags.${MODULE_ID}.linkedObject`] = data.linkedObject;
         }

scripts/apps/note-previewer.js

@@ -1,5 +1,6 @@
 import { MODULE_ID, SOCKET_NAME } from "../config.js";
 import { socket, activeGlobalSounds } from "../utils/socket-handler.js";
+import { applyTapeEffectToElement, applyTapeEffectToSound } from "../utils/audio-utils.js";
 
 // v13 namespaced imports
 const ApplicationV2 = foundry.applications.api.ApplicationV2;
@@ -92,6 +93,12 @@ export class NotePreviewer extends HandlebarsApplicationMixin(ApplicationV2) {
     const cassette = html.querySelector(".cassette-wrapper");
 
     if (localAudio && cassette) {
+      // Apply tape effect if enabled
+      const noteData = this.document.flags[MODULE_ID];
+      if (noteData?.audioEffectEnabled !== false) {
+        this.tapeEffect = applyTapeEffectToElement(localAudio);
+      }
+
       localAudio.addEventListener("play", () => {
         cassette.classList.add("playing");
       });
@@ -134,6 +141,9 @@ export class NotePreviewer extends HandlebarsApplicationMixin(ApplicationV2) {
         const icon = playGlobalBtn.querySelector("i");
         const span = playGlobalBtn.querySelector("span");
 
+        const noteData = this.document.flags[MODULE_ID];
+        const audioEffectEnabled = noteData?.audioEffectEnabled !== false;
+
         if (this.globalSoundActive) {
           socket.emit(SOCKET_NAME, { action: "stopAudio", audioPath: audioPath });
           const localGlobal = activeGlobalSounds.get(audioPath);
@@ -149,11 +159,20 @@ export class NotePreviewer extends HandlebarsApplicationMixin(ApplicationV2) {
           return;
         }
 
-        socket.emit(SOCKET_NAME, { action: "playAudio", audioPath: audioPath });
+        socket.emit(SOCKET_NAME, { 
+            action: "playAudio", 
+            audioPath: audioPath,
+            applyEffect: audioEffectEnabled
+        });
 
         const sound = await game.audio.play(audioPath, { volume: 0.8 });
         if (sound) {
           activeGlobalSounds.set(audioPath, sound);
+          
+          if (audioEffectEnabled) {
+            applyTapeEffectToSound(sound);
+          }
+
           this.globalSoundActive = true;
           icon.className = "fas fa-stop";
           span.innerText = "Stop for All";
@@ -224,6 +243,10 @@ export class NotePreviewer extends HandlebarsApplicationMixin(ApplicationV2) {
   }
 
   async _onClose(options) {
+    if (this.tapeEffect) {
+      this.tapeEffect.disconnect();
+      this.tapeEffect = null;
+    }
     if (this.audioPollInterval) {
       clearInterval(this.audioPollInterval);
       this.audioPollInterval = null;

scripts/apps/setup-warning.js

@@ -0,0 +1,76 @@
+import { MODULE_ID } from "../config.js";
+
+const { ApplicationV2, HandlebarsApplicationMixin } = foundry.applications.api;
+
+export class SetupWarningDialog extends HandlebarsApplicationMixin(ApplicationV2) {
+  static DEFAULT_OPTIONS = {
+    id: "ib-setup-warning",
+    tag: "div",
+    classes: ["ib-setup-warning-app"],
+    window: {
+      title: "Investigation Board: Setup Recommended",
+      resizable: false,
+      minimizable: false,
+    },
+    position: {
+      width: 500,
+      height: "auto"
+    }
+  };
+
+  static PARTS = {
+    content: {
+      template: "modules/investigation-board/templates/setup-warning.html"
+    }
+  };
+
+  async _prepareContext(options) {
+    const users = game.users.filter(u => !u.isGM);
+    const playerRoles = [...new Set(users.map(u => u.role))];
+    if (playerRoles.length === 0) playerRoles.push(1);
+
+    const drawingPerm = playerRoles.every(role => game.permissions.DRAWING_CREATE.includes(role));
+    const browsePerm = playerRoles.every(role => game.permissions.FILES_BROWSE.includes(role));
+    const uploadPerm = playerRoles.every(role => game.permissions.FILES_UPLOAD.includes(role));
+
+    const roleNames = {
+        1: "Player",
+        2: "Trusted Player",
+        3: "Assistant GM"
+    };
+
+    const missingUsers = users.map(u => {
+        const canDraw = game.permissions.DRAWING_CREATE.includes(u.role);
+        const canBrowse = game.permissions.FILES_BROWSE.includes(u.role);
+        const canUpload = game.permissions.FILES_UPLOAD.includes(u.role);
+
+        return {
+            name: u.name,
+            roleName: roleNames[u.role] || "Unknown",
+            canDraw,
+            canBrowse,
+            canUpload
+        };
+    });
+
+    return {
+      drawingPerm,
+      browsePerm,
+      uploadPerm,
+      missingUsers
+    };
+  }
+
+  _onRender(context, options) {
+    const html = this.element;
+    
+    html.querySelector('[data-action="ok"]')?.addEventListener("click", () => {
+      this.close();
+    });
+
+    html.querySelector('[data-action="disable"]')?.addEventListener("click", async () => {
+      await game.settings.set(MODULE_ID, "showSetupWarning", false);
+      this.close();
+    });
+  }
+}

scripts/canvas/custom-drawing.js

@@ -730,13 +730,48 @@ export class CustomDrawing extends Drawing {
         const texture = await PIXI.Assets.load(imagePath);
         if (texture && this.photoImageSprite) {
           this.photoImageSprite.texture = texture;
-          this.photoImageSprite.width = fullWidth * 0.9;
-          this.photoImageSprite.height = fullHeight * 0.9;
-          this.photoImageSprite.position.set(fullWidth * 0.05, fullHeight * 0.05);
 
-          // Ensure mask is disabled for futuristic mode
-          this.photoImageSprite.mask = null;
-          if (this.photoMask) this.photoMask.visible = false;
+          const frameWidth = fullWidth * 0.9;
+          const frameHeight = fullHeight * 0.9;
+          const frameX = fullWidth * 0.05;
+          const frameY = fullHeight * 0.05;
+
+          // Use center-top positioning logic to avoid stretching
+          const textureRatio = texture.width / texture.height;
+          const frameRatio = frameWidth / frameHeight;
+
+          let spriteWidth, spriteHeight, offsetX, offsetY;
+
+          if (textureRatio > frameRatio) {
+            // Case 1: Image is wider than frame - Fit by height, center horizontally
+            spriteHeight = frameHeight;
+            spriteWidth = frameHeight * textureRatio;
+            offsetX = (frameWidth - spriteWidth) / 2;
+            offsetY = 0;
+          } else {
+            // Case 2: Image is taller than frame - Fit by width, top aligned
+            spriteWidth = frameWidth;
+            spriteHeight = frameWidth / textureRatio;
+            offsetX = 0;
+            offsetY = 0;
+          }
+
+          this.photoImageSprite.width = spriteWidth;
+          this.photoImageSprite.height = spriteHeight;
+          this.photoImageSprite.position.set(frameX + offsetX, frameY + offsetY);
+
+          // Apply Mask to clip overflow in futuristic mode too
+          if (!this.photoMask) {
+            this.photoMask = new PIXI.Graphics();
+            this.addChild(this.photoMask);
+          }
+          this.photoMask.clear();
+          this.photoMask.beginFill(0xffffff);
+          this.photoMask.drawRect(frameX, frameY, frameWidth, frameHeight);
+          this.photoMask.endFill();
+          this.photoImageSprite.mask = this.photoMask;
+          this.photoMask.visible = true;
+          this.photoImageSprite.visible = true;
         }
       } catch (err) {
         console.error(`Failed to load user photo: ${noteData.image}`, err);

scripts/main.js

@@ -11,6 +11,7 @@ import {
   clearConnectionPreview
 } from "./canvas/connection-manager.js";
 import { initSocket, socket, collaborativeUpdate } from "./utils/socket-handler.js";
+import { SetupWarningDialog } from "./apps/setup-warning.js";
 import { 
   createNote, 
   createPhotoNoteFromActor, 
@@ -255,36 +256,16 @@ Hooks.once("ready", () => {
 
   // Show setup warning to GM if enabled
   if (game.user.isGM && game.settings.get(MODULE_ID, "showSetupWarning")) {
-    const drawingPerm = game.permissions.DRAWING_CREATE.includes(1); // PLAYER role
-    const filePerm = game.permissions.FILES_BROWSE.includes(1); // PLAYER role
+    const users = game.users.filter(u => !u.isGM);
+    const playerRoles = [...new Set(users.map(u => u.role))];
+    if (playerRoles.length === 0) playerRoles.push(1);
+
+    const drawingPerm = playerRoles.every(role => game.permissions.DRAWING_CREATE.includes(role));
+    const browsePerm = playerRoles.every(role => game.permissions.FILES_BROWSE.includes(role));
+    const uploadPerm = playerRoles.every(role => game.permissions.FILES_UPLOAD.includes(role));
 
-    if (!drawingPerm || !filePerm) {
-      const { DialogV2 } = foundry.applications.api;
-      new DialogV2({
-        window: { title: "Investigation Board: Setup Recommended" },
-        content: `
-          <p>To allow <strong>Players</strong> to fully use the Investigation Board, consider updating these World Permissions in <b>Game Settings >> User Management >> Configure Permissions</b>:</p>
-          <ul>
-            <li><strong>Use Drawing Tools</strong>: ${drawingPerm ? "✅ Enabled" : "❌ Disabled (Needed to create/manipulate notes and connections)"}</li>
-            <li><strong>Upload Files</strong>: ${filePerm ? "✅ Enabled" : "❌ Disabled (Needed to create Photo and Handout notes with images)"}</li>
-          </ul>
-          <p style="color: #882222; font-style: italic;"><strong>Security Note:</strong> Enabling 'Upload Files' for players gives them access to your server's file system through the File Picker. Be careful with who you let access your files!</p>
-          <hr>
-        `,
-        buttons: [
-          {
-            action: "ok",
-            label: "Understood",
-            icon: "fas fa-check"
-          },
-          {
-            action: "disable",
-            label: "Don't show again",
-            icon: "fas fa-times",
-            callback: (event, button, dialog) => game.settings.set(MODULE_ID, "showSetupWarning", false)
-          }
-        ]
-      }).render(true);
+    if (!drawingPerm || !browsePerm || !uploadPerm) {
+      new SetupWarningDialog().render(true);
     }
   }
 });
@@ -295,11 +276,30 @@ Hooks.on("createDrawing", (drawing, options, userId) => {
   const noteData = drawing.flags[MODULE_ID];
   if (!noteData) return;
 
+  // Determine who should see the sheet: either the direct userId or the original requester via socket
+  const requesterId = options.ibRequestingUser || userId;
+
   // If this is the user who created the note, open the edit dialog
-  if (userId === game.user.id && !options.skipAutoOpen) {
+  if (requesterId === game.user.id && !options.skipAutoOpen) {
     setTimeout(() => {
-      drawing.sheet.render(true);
-    }, 150);
+      // Calculate screen position to place dialog below the note
+      const drawingObject = canvas.drawings.get(drawing.id);
+      if (drawingObject) {
+        const bounds = drawingObject.getBounds();
+        // bounds are in screen coordinates (pixels)
+        const top = bounds.bottom + 20; // 20px padding below the note
+        const left = bounds.left + (bounds.width / 2) - 200; // Center horizontally (sheet width is 400)
+        
+        drawing.sheet.render(true, {
+          position: {
+            top: Math.max(0, top),
+            left: Math.max(0, left)
+          }
+        });
+      } else {
+        drawing.sheet.render(true);
+      }
+    }, 250);
   }
 
   // If we're in Investigation Board mode, refresh interactivity after the drawing is rendered
@@ -373,6 +373,11 @@ Hooks.on("updateDrawing", async (drawing, changes, options, userId) => {
   // If flags changed, refresh the drawing to update visuals on ALL clients
   if (flagsChanged && placeable) {
     await placeable.refresh();
+    
+    // Also re-render open NotePreviewer for this drawing
+    const appId = `note-preview-${drawing.id}`;
+    const app = foundry.applications.instances.get(appId);
+    if (app) app.render();
   }
 
   // Redraw connection lines when position OR connections change