better postiioning of lyrics

Author: zesameri

js/secrets.js

@@ -27,6 +27,155 @@ var isMobile = false;
 var mobileLineIndex = 0;
 var mobileLineHeight = 200;
 
+// Fixed positions for desktop lyrics (based on lyrics length)
+var fixedPositions = [];
+var usedFixedPositions = [];
+var isDesktop = true;
+
+function createFixedPositions() {
+  var width = $(window).width();
+  var height = $(window).height();
+  var margin = 100; // Increased margin for better spacing
+  
+  // Create a square grid based on lyrics length
+  var gridSize = Math.ceil(Math.sqrt(lyrics.length));
+  
+  // Calculate spacing to fit the grid on screen with proper margins
+  var availableWidth = width - (2 * margin);
+  var availableHeight = height - (2 * margin);
+  var spacingX = gridSize > 1 ? availableWidth / (gridSize - 1) : availableWidth / 2;
+  var spacingY = gridSize > 1 ? availableHeight / (gridSize - 1) : availableHeight / 2;
+  
+  fixedPositions = [];
+  
+  // Create grid positions
+  for (var r = 0; r < gridSize; r++) {
+    for (var c = 0; c < gridSize; c++) {
+      var x = margin + (c * spacingX);
+      var y = margin + (r * spacingY);
+      
+      // Ensure positions stay well within bounds
+      x = Math.max(margin + 50, Math.min(width - margin - 50, x));
+      y = Math.max(margin + 50, Math.min(height - margin - 50, y));
+      
+      // Calculate cell dimensions for font sizing
+      var cellWidth = Math.min(spacingX * 0.8, availableWidth / gridSize * 0.8);
+      var cellHeight = Math.min(spacingY * 0.8, availableHeight / gridSize * 0.8);
+      
+      fixedPositions.push({ 
+        x: x, 
+        y: y, 
+        row: r, 
+        col: c,
+        cellWidth: cellWidth,
+        cellHeight: cellHeight
+      });
+    }
+  }
+  
+  usedFixedPositions = [];
+}
+
+function calculateOptimalFontSize(text, cellWidth, cellHeight) {
+  // Estimate character width (rough approximation)
+  var avgCharWidth = 0.6; // Average character width as fraction of font size
+  var maxCharsPerLine = Math.floor(cellWidth / (avgCharWidth * 16)); // 16px base font
+  
+  // Calculate how many lines the text will need
+  var words = text.split(' ');
+  var lines = 1;
+  var currentLineLength = 0;
+  
+  for (var i = 0; i < words.length; i++) {
+    var wordLength = words[i].length;
+    if (currentLineLength + wordLength + 1 > maxCharsPerLine && currentLineLength > 0) {
+      lines++;
+      currentLineLength = wordLength;
+    } else {
+      currentLineLength += wordLength + (i > 0 ? 1 : 0);
+    }
+  }
+  
+  // Calculate font size based on available height and number of lines
+  var maxFontSize = Math.floor(cellHeight / lines * 0.8); // 0.8 for padding
+  var minFontSize = 12; // Minimum readable font size
+  var optimalFontSize = Math.max(minFontSize, Math.min(maxFontSize, 24)); // Cap at 24px
+  
+  return optimalFontSize;
+}
+
+function getFixedPosition() {
+  if (usedFixedPositions.length >= fixedPositions.length) {
+    // All positions used, reset
+    usedFixedPositions = [];
+  }
+  
+  // Get used rows and columns
+  var usedRows = usedFixedPositions.map(function(pos) { return pos.row; });
+  var usedCols = usedFixedPositions.map(function(pos) { return pos.col; });
+  
+  // Find positions that don't share a row or column with any used position
+  var availablePositions = fixedPositions.filter(function(pos) {
+    return !usedRows.includes(pos.row) && !usedCols.includes(pos.col);
+  });
+  
+  if (availablePositions.length === 0) {
+    // If no positions available with unique row/column, fall back to any unused position
+    var fallbackPositions = fixedPositions.filter(function(pos) {
+      return !usedFixedPositions.some(function(used) {
+        return used.x === pos.x && used.y === pos.y;
+      });
+    });
+    
+    if (fallbackPositions.length === 0) {
+      // All positions used, reset and return first position
+      usedFixedPositions = [];
+      return fixedPositions[0];
+    }
+    
+    var randomIndex = Math.floor(Math.random() * fallbackPositions.length);
+    var selectedPosition = fallbackPositions[randomIndex];
+    
+    // Add randomness to fallback positions too
+    var randomOffsetX = (Math.random() - 0.5) * 60; // -30 to +30
+    var randomOffsetY = (Math.random() - 0.5) * 40; // -20 to +20
+    
+    var randomizedPosition = {
+      x: selectedPosition.x + randomOffsetX,
+      y: selectedPosition.y + randomOffsetY,
+      row: selectedPosition.row,
+      col: selectedPosition.col,
+      cellWidth: selectedPosition.cellWidth,
+      cellHeight: selectedPosition.cellHeight
+    };
+    
+    usedFixedPositions.push(selectedPosition);
+    return randomizedPosition;
+  }
+  
+  // Randomly select from available positions that don't share row/column
+  var randomIndex = Math.floor(Math.random() * availablePositions.length);
+  var selectedPosition = availablePositions[randomIndex];
+  
+  // Add randomness to the position (±30px for x, ±20px for y)
+  var randomOffsetX = (Math.random() - 0.5) * 60; // -30 to +30
+  var randomOffsetY = (Math.random() - 0.5) * 40; // -20 to +20
+  
+  // Create a new position object with random offsets
+  var randomizedPosition = {
+    x: selectedPosition.x + randomOffsetX,
+    y: selectedPosition.y + randomOffsetY,
+    row: selectedPosition.row,
+    col: selectedPosition.col,
+    cellWidth: selectedPosition.cellWidth,
+    cellHeight: selectedPosition.cellHeight
+  };
+  
+  usedFixedPositions.push(selectedPosition);
+  
+  return randomizedPosition;
+}
+
 function getNextLyric() {
   if (currentLyricIndex >= lyrics.length) {
     // All lyrics have been shown, don't show any more
@@ -51,6 +200,7 @@ function clearAllLyrics() {
   pathIndex = 0;
   usedPositions = [];
   mobileLineIndex = 0;
+  usedFixedPositions = []; // Reset fixed positions
 }
 
 function detectMobile() {
@@ -59,8 +209,9 @@ function detectMobile() {
   var userAgentMatch = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
 
   isMobile = mediaQueryMatch || userAgentMatch;
+  isDesktop = !isMobile; // Update desktop flag
 
-  console.log('Mobile detection - Screen width:', screenWidth, 'Media query match:', mediaQueryMatch, 'User agent match:', userAgentMatch, 'isMobile:', isMobile);
+  console.log('Mobile detection - Screen width:', screenWidth, 'Media query match:', mediaQueryMatch, 'User agent match:', userAgentMatch, 'isMobile:', isMobile, 'isDesktop:', isDesktop);
 
   return isMobile;
 }
@@ -178,6 +329,15 @@ function generateSpiralPath() {
 }
 
 function getNextPosition() {
+  // Use fixed positions for desktop, spiral for mobile
+  if (isDesktop && !isMobile) {
+    if (fixedPositions.length === 0) {
+      createFixedPositions();
+    }
+    return getFixedPosition();
+  }
+  
+  // Mobile positioning (keep existing logic)
   if (pathPositions.length === 0) {
     pathPositions = generateSpiralPath();
   }
@@ -481,11 +641,18 @@ function toggleSVG(cell, two, shape) {
   } else {
     console.log('Using desktop positioning');
     position = getNextPosition();
+    
+    // Calculate optimal font size for this lyric
+    var fontSize = 16; // Default font size
+    if (position.cellWidth && position.cellHeight) {
+      fontSize = calculateOptimalFontSize(lyricData.text, position.cellWidth, position.cellHeight);
+    }
+    
     // Adjust position to ensure text stays within bounds
     position = adjustPositionForText(position, lyricData.text);
 
     var lyricLine = $(`
-      <div class="lyric-line" style="left: ${position.x}px; top: ${position.y}px;">
+      <div class="lyric-line" style="left: ${position.x}px; top: ${position.y}px; font-size: ${fontSize}px; max-width: ${position.cellWidth || 200}px; text-align: center;">
         ${lyricData.text}
       </div>
     `);