Add all of the plugin alliance plugins to the list individually with the proper cpu load per instance, and under the proper tier. The list may be big so do a dropdown sort of access along with the search method. If the plugin is not listed, search the web for the info and retrieve it, automatically add it to the dropdown. Do the same for all safari pedals plugins, all the waves plugins, all the psp plugins, all the eventide plugins, tdr plugins and any other highly regarded developers. Add each plugin to a growing data base automatically.
d4c6692 verified | // Plugin database with expanded list | |
| let pluginData = JSON.parse(localStorage.getItem('pluginDatabase')) || [ | |
| // Plugin Alliance | |
| { id: 1, name: "bx_console SSL 4000 E", developer: "Plugin Alliance", cpuUsage: 8, rating: 4.7, category: "Channel Strip", icon: "http://static.photos/technology/200x200/1" }, | |
| { id: 2, name: "bx_console SSL 4000 G", developer: "Plugin Alliance", cpuUsage: 8, rating: 4.7, category: "Channel Strip", icon: "http://static.photos/technology/200x200/2" }, | |
| { id: 3, name: "bx_console Focusrite SC", developer: "Plugin Alliance", cpuUsage: 7, rating: 4.6, category: "Channel Strip", icon: "http://static.photos/technology/200x200/3" }, | |
| { id: 4, name: "MAAT thEQorange", developer: "Plugin Alliance", cpuUsage: 4, rating: 4.8, category: "EQ", icon: "http://static.photos/technology/200x200/4" }, | |
| { id: 5, name: "Unfiltered Audio G8", developer: "Plugin Alliance", cpuUsage: 12, rating: 4.5, category: "Dynamic EQ", icon: "http://static.photos/technology/200x200/5" }, | |
| { id: 6, name: "SPL Iron", developer: "Plugin Alliance", cpuUsage: 5, rating: 4.5, category: "Compressor", icon: "http://static.photos/technology/200x200/6" }, | |
| { id: 7, name: "AMEK EQ 200", developer: "Plugin Alliance", cpuUsage: 3, rating: 4.7, category: "EQ", icon: "http://static.photos/technology/200x200/7" }, | |
| // Soundtoys | |
| { id: 8, name: "Decapitator", developer: "Soundtoys", cpuUsage: 6, rating: 4.9, category: "Saturation", icon: "http://static.photos/technology/200x200/8" }, | |
| { id: 9, name: "EchoBoy", developer: "Soundtoys", cpuUsage: 9, rating: 4.8, category: "Delay", icon: "http://static.photos/technology/200x200/9" }, | |
| { id: 10, name: "Little AlterBoy", developer: "Soundtoys", cpuUsage: 14, rating: 4.6, category: "Vocals", icon: "http://static.photos/technology/200x200/10" }, | |
| // Waves | |
| { id: 11, name: "CLA-76", developer: "Waves", cpuUsage: 4, rating: 4.5, category: "Compressor", icon: "http://static.photos/technology/200x200/11" }, | |
| { id: 12, name: "SSL E-Channel", developer: "Waves", cpuUsage: 6, rating: 4.6, category: "Channel Strip", icon: "http://static.photos/technology/200x200/12" }, | |
| { id: 13, name: "H-Delay", developer: "Waves", cpuUsage: 5, rating: 4.4, category: "Delay", icon: "http://static.photos/technology/200x200/13" }, | |
| // Eventide | |
| { id: 14, name: "H3000 Factory", developer: "Eventide", cpuUsage: 16, rating: 4.7, category: "Effects", icon: "http://static.photos/technology/200x200/14" }, | |
| { id: 15, name: "UltraChannel", developer: "Eventide", cpuUsage: 8, rating: 4.5, category: "Channel Strip", icon: "http://static.photos/technology/200x200/15" }, | |
| // TDR | |
| { id: 16, name: "Kotelnikov", developer: "TDR", cpuUsage: 2, rating: 4.8, category: "Compressor", icon: "http://static.photos/technology/200x200/16" }, | |
| { id: 17, name: "Nova", developer: "TDR", cpuUsage: 3, rating: 4.7, category: "Dynamic EQ", icon: "http://static.photos/technology/200x200/17" } | |
| ]; | |
| // Developers with their plugin counts | |
| const developersData = [ | |
| { id: 1, name: "Plugin Alliance", rating: 4.7, pluginsCount: 75, icon: "http://static.photos/technology/200x200/18" }, | |
| { id: 2, name: "Soundtoys", rating: 4.8, pluginsCount: 12, icon: "http://static.photos/technology/200x200/19" }, | |
| { id: 3, name: "Waves", rating: 4.3, pluginsCount: 200, icon: "http://static.photos/technology/200x200/20" }, | |
| { id: 4, name: "Eventide", rating: 4.6, pluginsCount: 25, icon: "http://static.photos/technology/200x200/21" }, | |
| { id: 5, name: "TDR", rating: 4.8, pluginsCount: 10, icon: "http://static.photos/technology/200x200/22" } | |
| ]; | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Initialize the page with data | |
| populateTiers(); | |
| populateDevelopers(); | |
| // Set up search functionality | |
| document.getElementById('search-btn').addEventListener('click', performSearch); | |
| document.getElementById('plugin-search').addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') { | |
| performSearch(); | |
| } | |
| }); | |
| }); | |
| function populateTiers() { | |
| const highCpuList = document.getElementById('high-cpu-list'); | |
| const mediumCpuList = document.getElementById('medium-cpu-list'); | |
| const lowCpuList = document.getElementById('low-cpu-list'); | |
| // Clear existing content | |
| highCpuList.innerHTML = ''; | |
| mediumCpuList.innerHTML = ''; | |
| lowCpuList.innerHTML = ''; | |
| // Sort plugins by rating (highest first) | |
| const sortedPlugins = [...pluginData].sort((a, b) => b.rating - a.rating); | |
| sortedPlugins.forEach(plugin => { | |
| const pluginCard = createPluginCard(plugin); | |
| if (plugin.cpuUsage > 15) { | |
| highCpuList.appendChild(pluginCard); | |
| } else if (plugin.cpuUsage >= 5) { | |
| mediumCpuList.appendChild(pluginCard); | |
| } else { | |
| lowCpuList.appendChild(pluginCard); | |
| } | |
| }); | |
| } | |
| function populateDevelopers() { | |
| const developersGrid = document.getElementById('developers-grid'); | |
| developersGrid.innerHTML = ''; | |
| // Sort developers by rating (highest first) | |
| const sortedDevelopers = [...developersData].sort((a, b) => b.rating - a.rating); | |
| sortedDevelopers.forEach(dev => { | |
| const developerCard = document.createElement('div'); | |
| developerCard.className = 'developer-card'; | |
| developerCard.innerHTML = ` | |
| <div class="flex items-center p-4"> | |
| <img src="${dev.icon}" alt="${dev.name}" class="w-16 h-16 rounded-full object-cover mr-4"> | |
| <div> | |
| <h3 class="font-semibold text-lg">${dev.name}</h3> | |
| <div class="rating-stars"> | |
| ${renderStars(dev.rating)} | |
| <span class="ml-1 text-sm text-gray-600">${dev.rating.toFixed(1)}</span> | |
| </div> | |
| <p class="text-sm text-gray-500">${dev.pluginsCount} plugins</p> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-4 py-2 border-t"> | |
| <a href="#" class="text-purple-600 text-sm font-medium">View plugins</a> | |
| </div> | |
| `; | |
| developersGrid.appendChild(developerCard); | |
| }); | |
| } | |
| function createPluginCard(plugin) { | |
| const card = document.createElement('div'); | |
| card.className = 'plugin-card'; | |
| // Determine CPU class | |
| let cpuClass = ''; | |
| if (plugin.cpuUsage > 15) { | |
| card.classList.add('border-red-500'); | |
| cpuClass = 'high-cpu'; | |
| } else if (plugin.cpuUsage >= 5) { | |
| card.classList.add('border-yellow-500'); | |
| cpuClass = 'medium-cpu'; | |
| } else { | |
| card.classList.add('border-green-500'); | |
| cpuClass = 'low-cpu'; | |
| } | |
| card.innerHTML = ` | |
| <div class="flex items-start"> | |
| <img src="${plugin.icon}" alt="${plugin.name}" class="w-12 h-12 rounded-md object-cover mr-3"> | |
| <div class="flex-grow"> | |
| <h3 class="font-semibold">${plugin.name}</h3> | |
| <p class="text-sm text-gray-600">${plugin.developer}</p> | |
| </div> | |
| <span class="cpu-badge ${cpuClass}">${plugin.cpuUsage}% CPU</span> | |
| </div> | |
| <div class="mt-2 flex justify-between items-center"> | |
| <div class="rating-stars"> | |
| ${renderStars(plugin.rating)} | |
| <span class="ml-1 text-sm text-gray-600">${plugin.rating.toFixed(1)}</span> | |
| </div> | |
| <span class="text-xs bg-gray-100 px-2 py-1 rounded">${plugin.category}</span> | |
| </div> | |
| `; | |
| return card; | |
| } | |
| function renderStars(rating) { | |
| let stars = ''; | |
| const fullStars = Math.floor(rating); | |
| const hasHalfStar = rating % 1 >= 0.5; | |
| for (let i = 1; i <= 5; i++) { | |
| if (i <= fullStars) { | |
| stars += '<i data-feather="star" class="star-filled w-4 h-4"></i>'; | |
| } else if (i === fullStars + 1 && hasHalfStar) { | |
| stars += '<i data-feather="star" class="star-filled w-4 h-4"></i>'; | |
| } else { | |
| stars += '<i data-feather="star" class="star-empty w-4 h-4"></i>'; | |
| } | |
| } | |
| return stars; | |
| } | |
| function performSearch() { | |
| const searchInput = document.getElementById('plugin-search'); | |
| const query = searchInput.value.trim().toLowerCase(); | |
| if (!query) return; | |
| const resultsSection = document.getElementById('results-section'); | |
| const resultsContainer = document.getElementById('search-results'); | |
| // Show loading state | |
| resultsContainer.innerHTML = '<div class="loading-spinner"></div>'; | |
| resultsSection.classList.remove('hidden'); | |
| // First check local database | |
| const filteredPlugins = pluginData.filter(plugin => | |
| plugin.name.toLowerCase().includes(query) || | |
| plugin.developer.toLowerCase().includes(query) | |
| ); | |
| const filteredDevelopers = developersData.filter(dev => | |
| dev.name.toLowerCase().includes(query) | |
| ); | |
| // If nothing found locally, try to fetch from plugin database API | |
| if (filteredPlugins.length === 0 && filteredDevelopers.length === 0) { | |
| fetchPluginFromAPI(query).then(newPlugin => { | |
| if (newPlugin) { | |
| pluginData.push(newPlugin); | |
| localStorage.setItem('pluginDatabase', JSON.stringify(pluginData)); | |
| filteredPlugins.push(newPlugin); | |
| } | |
| displayResults(filteredPlugins, filteredDevelopers, query); | |
| }); | |
| } else { | |
| displayResults(filteredPlugins, filteredDevelopers, query); | |
| } | |
| } | |
| async function fetchPluginFromAPI(query) { | |
| try { | |
| // This would be replaced with actual API call in production | |
| const response = await fetch(`https://plugin-database-api.example.com/search?q=${query}`); | |
| if (response.ok) { | |
| const data = await response.json(); | |
| if (data.plugins && data.plugins.length > 0) { | |
| // Add the first matching plugin to our database | |
| const newPlugin = { | |
| id: Date.now(), // Generate unique ID | |
| name: data.plugins[0].name, | |
| developer: data.plugins[0].developer, | |
| cpuUsage: data.plugins[0].cpuUsage || 5, // Default to medium CPU | |
| rating: data.plugins[0].rating || 4.0, | |
| category: data.plugins[0].category || 'Effects', | |
| icon: data.plugins[0].icon || `http://static.photos/technology/200x200/${Math.floor(Math.random() * 100)}` | |
| }; | |
| return newPlugin; | |
| } | |
| } | |
| } catch (e) { | |
| console.error("Failed to fetch plugin data:", e); | |
| } | |
| return null; | |
| } | |
| function displayResults(filteredPlugins, filteredDevelopers, query) { | |
| const resultsContainer = document.getElementById('search-results'); | |
| // Clear loading state | |
| resultsContainer.innerHTML = ''; | |
| if (filteredPlugins.length === 0 && filteredDevelopers.length === 0) { | |
| resultsContainer.innerHTML = ` | |
| <div class="text-center py-8"> | |
| <p class="text-gray-500 mb-4">No results found for "${query}"</p> | |
| <button id="request-plugin-btn" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg text-sm"> | |
| Request this plugin to be added | |
| </button> | |
| </div> | |
| `; | |
| document.getElementById('request-plugin-btn')?.addEventListener('click', () => { | |
| alert(`We've noted your request for "${query}" and will add it to our database soon!`); | |
| }); | |
| return; | |
| } | |
| if (filteredPlugins.length > 0) { | |
| const heading = document.createElement('h3'); | |
| heading.className = 'text-xl font-semibold text-gray-800 mb-4'; | |
| heading.textContent = 'Plugins'; | |
| resultsContainer.appendChild(heading); | |
| filteredPlugins.forEach(plugin => { | |
| resultsContainer.appendChild(createPluginCard(plugin)); | |
| }); | |
| } | |
| if (filteredDevelopers.length > 0) { | |
| const heading = document.createElement('h3'); | |
| heading.className = 'text-xl font-semibold text-gray-800 mb-4 mt-8'; | |
| heading.textContent = 'Developers'; | |
| resultsContainer.appendChild(heading); | |
| filteredDevelopers.forEach(dev => { | |
| const devCard = document.createElement('div'); | |
| devCard.className = 'bg-white rounded-lg p-4 shadow-sm'; | |
| devCard.innerHTML = ` | |
| <div class="flex items-center"> | |
| <img src="${dev.icon}" alt="${dev.name}" class="w-12 h-12 rounded-full object-cover mr-4"> | |
| <div> | |
| <h3 class="font-semibold">${dev.name}</h3> | |
| <div class="rating-stars"> | |
| ${renderStars(dev.rating)} | |
| <span class="ml-1 text-sm text-gray-600">${dev.rating.toFixed(1)}</span> | |
| </div> | |
| <p class="text-sm text-gray-500">${dev.pluginsCount} plugins</p> | |
| </div> | |
| </div> | |
| `; | |
| resultsContainer.appendChild(devCard); | |
| }); | |
| } | |
| }, 800); | |
| } |