267 lines
8.9 KiB
JavaScript
267 lines
8.9 KiB
JavaScript
/**
|
|
* Example FurryPlace Plugin - Info Modal Customization
|
|
*
|
|
* This demonstrates how to add custom sections to the info modal
|
|
* (the one that shows rules, YouTube video, etc.)
|
|
*
|
|
* To use this plugin, add it to your HTML:
|
|
* <script src="/plugins/example-info-modal.js"></script>
|
|
*/
|
|
|
|
(function() {
|
|
'use strict';
|
|
|
|
// Set this to true to disable this example plugin (for reference only)
|
|
const EXAMPLE_DISABLED = true;
|
|
|
|
// Wait for SDK to be available
|
|
function waitForSDK(callback) {
|
|
if (window.FurryPlaceSDK) {
|
|
callback();
|
|
} else {
|
|
setTimeout(() => waitForSDK(callback), 100);
|
|
}
|
|
}
|
|
|
|
// Example 1: Simple text section
|
|
function addWelcomeSection() {
|
|
window.FurryPlaceSDK.addInfoSection({
|
|
id: 'custom-welcome',
|
|
title: '👋 Welcome!',
|
|
position: 'top',
|
|
content: `
|
|
<p class="text-sm">
|
|
Welcome to our custom FurryPlace server! This is a demonstration of how plugins
|
|
can add custom content to the info modal.
|
|
</p>
|
|
`
|
|
});
|
|
}
|
|
|
|
// Example 2: Section with interactive content
|
|
function addStatsSection() {
|
|
window.FurryPlaceSDK.addInfoSection({
|
|
id: 'server-stats',
|
|
title: '📊 Server Statistics',
|
|
position: 'after-video',
|
|
content: () => {
|
|
const div = document.createElement('div');
|
|
div.className = 'text-sm space-y-2';
|
|
|
|
const stats = [
|
|
{ label: 'Total Players', value: '10,000+' },
|
|
{ label: 'Pixels Painted', value: '5,000,000+' },
|
|
{ label: 'Active Alliances', value: '250' }
|
|
];
|
|
|
|
stats.forEach(stat => {
|
|
const statDiv = document.createElement('div');
|
|
statDiv.className = 'flex justify-between items-center p-2 bg-base-200 rounded';
|
|
statDiv.innerHTML = `
|
|
<span class="font-medium">${stat.label}:</span>
|
|
<span class="text-primary font-bold">${stat.value}</span>
|
|
`;
|
|
div.appendChild(statDiv);
|
|
});
|
|
|
|
return div;
|
|
}
|
|
});
|
|
}
|
|
|
|
// Example 3: Custom links section
|
|
function addLinksSection() {
|
|
window.FurryPlaceSDK.addInfoSection({
|
|
id: 'custom-links',
|
|
title: '🔗 Useful Links',
|
|
position: 'bottom',
|
|
content: `
|
|
<div class="flex flex-wrap gap-2">
|
|
<a href="https://github.com/yourserver/wiki" target="_blank" class="btn btn-sm btn-outline">
|
|
📚 Wiki
|
|
</a>
|
|
<a href="https://discord.gg/yourserver" target="_blank" class="btn btn-sm btn-outline">
|
|
💬 Discord
|
|
</a>
|
|
<a href="https://twitter.com/yourserver" target="_blank" class="btn btn-sm btn-outline">
|
|
🐦 Twitter
|
|
</a>
|
|
</div>
|
|
`
|
|
});
|
|
}
|
|
|
|
// Example 4: Dynamic content with user state
|
|
function addUserInfoSection() {
|
|
window.FurryPlaceSDK.addInfoSection({
|
|
id: 'user-quick-info',
|
|
title: '👤 Your Info',
|
|
position: 'after-video',
|
|
content: () => {
|
|
const div = document.createElement('div');
|
|
div.className = 'text-sm';
|
|
|
|
// Check if user is logged in
|
|
if (!window.FurryPlaceSDK.isLoggedIn()) {
|
|
div.innerHTML = '<p class="text-warning">Please log in to see your stats</p>';
|
|
return div;
|
|
}
|
|
|
|
const droplets = window.FurryPlaceSDK.getDroplets();
|
|
const level = window.FurryPlaceSDK.getLevel();
|
|
const charges = window.FurryPlaceSDK.getCharges();
|
|
|
|
div.innerHTML = `
|
|
<div class="grid grid-cols-2 gap-2">
|
|
<div class="bg-base-200 p-2 rounded">
|
|
<div class="text-xs opacity-70">Level</div>
|
|
<div class="text-lg font-bold text-primary">${level}</div>
|
|
</div>
|
|
<div class="bg-base-200 p-2 rounded">
|
|
<div class="text-xs opacity-70">Droplets</div>
|
|
<div class="text-lg font-bold text-primary">${droplets}</div>
|
|
</div>
|
|
<div class="bg-base-200 p-2 rounded col-span-2">
|
|
<div class="text-xs opacity-70">Paint Charges</div>
|
|
<div class="text-lg font-bold text-primary">${charges.current}/${charges.max}</div>
|
|
<div class="w-full bg-base-300 rounded-full h-1.5 mt-1">
|
|
<div class="bg-primary h-1.5 rounded-full" style="width: ${charges.percentage}%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
return div;
|
|
}
|
|
});
|
|
}
|
|
|
|
// Example 5: Announcement section
|
|
function addAnnouncementSection() {
|
|
window.FurryPlaceSDK.addInfoSection({
|
|
id: 'announcements',
|
|
title: '📢 Announcements',
|
|
position: 'top',
|
|
className: 'bg-primary/10 p-4 rounded-lg',
|
|
content: `
|
|
<div class="text-sm space-y-2">
|
|
<div class="alert alert-info py-2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-5 h-5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
<span><strong>New Event:</strong> Double droplets weekend starts Friday!</span>
|
|
</div>
|
|
<div class="alert alert-success py-2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-5 h-5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
<span>Server maintenance completed successfully</span>
|
|
</div>
|
|
</div>
|
|
`
|
|
});
|
|
}
|
|
|
|
// Example 6: Tips & Tricks section
|
|
function addTipsSection() {
|
|
window.FurryPlaceSDK.addInfoSection({
|
|
id: 'tips-tricks',
|
|
title: '💡 Tips & Tricks',
|
|
position: 'bottom',
|
|
content: `
|
|
<ul class="text-sm list-disc list-inside space-y-1">
|
|
<li>Join an alliance to collaborate with other players</li>
|
|
<li>Paint in your flag's region for 10% charge discount</li>
|
|
<li>Level up to increase your max paint charges</li>
|
|
<li>Use keyboard shortcuts for faster painting</li>
|
|
</ul>
|
|
`
|
|
});
|
|
}
|
|
|
|
// Example 7: Changelog section
|
|
function addChangelogSection() {
|
|
window.FurryPlaceSDK.addInfoSection({
|
|
id: 'changelog',
|
|
title: '📝 Recent Updates',
|
|
position: 'bottom',
|
|
content: `
|
|
<div class="text-sm">
|
|
<div class="space-y-2">
|
|
<details class="collapse collapse-arrow bg-base-200">
|
|
<summary class="collapse-title text-sm font-medium">v2.0.0 - Latest</summary>
|
|
<div class="collapse-content text-xs">
|
|
<ul class="list-disc list-inside mt-2">
|
|
<li>Added plugin system</li>
|
|
<li>Improved performance</li>
|
|
<li>Bug fixes</li>
|
|
</ul>
|
|
</div>
|
|
</details>
|
|
<details class="collapse collapse-arrow bg-base-200">
|
|
<summary class="collapse-title text-sm font-medium">v1.9.0</summary>
|
|
<div class="collapse-content text-xs">
|
|
<ul class="list-disc list-inside mt-2">
|
|
<li>Alliance system improvements</li>
|
|
<li>New color palette</li>
|
|
</ul>
|
|
</div>
|
|
</details>
|
|
</div>
|
|
</div>
|
|
`
|
|
});
|
|
}
|
|
|
|
// Example 8: Embed section with custom styling
|
|
function addFeaturedArtSection() {
|
|
window.FurryPlaceSDK.addInfoSection({
|
|
id: 'featured-art',
|
|
title: '🎨 Featured Artwork',
|
|
position: 'after-video',
|
|
content: `
|
|
<div class="text-sm">
|
|
<div class="bg-base-200 rounded-lg p-3">
|
|
<p class="mb-2">Check out this amazing artwork created by our community!</p>
|
|
<div class="flex gap-2 overflow-x-auto">
|
|
<div class="bg-base-300 w-20 h-20 rounded flex-shrink-0 flex items-center justify-center">
|
|
🖼️
|
|
</div>
|
|
<div class="bg-base-300 w-20 h-20 rounded flex-shrink-0 flex items-center justify-center">
|
|
🎭
|
|
</div>
|
|
<div class="bg-base-300 w-20 h-20 rounded flex-shrink-0 flex items-center justify-center">
|
|
🌈
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`
|
|
});
|
|
}
|
|
|
|
// Initialize plugin
|
|
waitForSDK(() => {
|
|
if (EXAMPLE_DISABLED) {
|
|
console.log('[Info Modal Plugin] Disabled - set EXAMPLE_DISABLED to false to enable');
|
|
return;
|
|
}
|
|
|
|
console.log('[Info Modal Plugin] Initializing...');
|
|
|
|
// Register all example sections
|
|
// Comment out the ones you don't want to use
|
|
addWelcomeSection();
|
|
addAnnouncementSection();
|
|
addStatsSection();
|
|
addUserInfoSection();
|
|
addTipsSection();
|
|
addLinksSection();
|
|
addFeaturedArtSection();
|
|
addChangelogSection();
|
|
|
|
console.log('[Info Modal Plugin] Loaded successfully!');
|
|
console.log('[Info Modal Plugin] Registered sections:', window.FurryPlaceSDK.getInfoSections());
|
|
});
|
|
})();
|