131 lines
5.9 KiB
JavaScript
131 lines
5.9 KiB
JavaScript
/**
|
|
* Example FurryPlace Plugin - Custom Button
|
|
*
|
|
* This demonstrates how to use the FurryPlace SDK to add custom buttons
|
|
* to the UI. This plugin adds a "Help" button that opens a dialog.
|
|
*
|
|
* To use this plugin, add it to your HTML:
|
|
* <script src="/plugins/example-button.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 button with SVG icon
|
|
function registerHelpButton() {
|
|
window.FurryPlaceSDK.registerButton({
|
|
id: 'example-help',
|
|
title: 'Help & Documentation',
|
|
position: 'after-leaderboard',
|
|
icon: `
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor" class="size-5">
|
|
<path d="M478-240q21 0 35.5-14.5T528-290q0-21-14.5-35.5T478-340q-21 0-35.5 14.5T428-290q0 21 14.5 35.5T478-240Zm-36-154h74q0-33 7.5-52t42.5-52q26-26 41-49.5t15-56.5q0-56-41-86t-97-30q-57 0-92.5 30T342-618l66 26q5-18 22.5-39t53.5-21q32 0 48 17.5t16 38.5q0 20-12 37.5T506-526q-44 39-54 59t-10 73Zm38 314q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/>
|
|
</svg>
|
|
`,
|
|
onClick: (context, event) => {
|
|
alert('Help button clicked!\n\nSDK Version: ' + context.sdk.version);
|
|
console.log('Context:', context);
|
|
}
|
|
});
|
|
}
|
|
|
|
// Example 2: Button with custom styling
|
|
function registerDebugButton() {
|
|
window.FurryPlaceSDK.registerButton({
|
|
id: 'example-debug',
|
|
title: 'Debug Info',
|
|
position: 'bottom',
|
|
className: 'btn btn-square btn-accent shadow-md', // Custom styling
|
|
icon: `
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor" class="size-5">
|
|
<path d="M440-280h80v-160h-80v160Zm40-240q17 0 28.5-11.5T520-560q0-17-11.5-28.5T480-600q-17 0-28.5 11.5T440-560q0 17 11.5 28.5T480-520Zm0 440q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/>
|
|
</svg>
|
|
`,
|
|
onClick: () => {
|
|
const info = {
|
|
buttons: window.FurryPlaceSDK.getButtons(),
|
|
userAgent: navigator.userAgent,
|
|
viewport: {
|
|
width: window.innerWidth,
|
|
height: window.innerHeight
|
|
},
|
|
timestamp: new Date().toISOString()
|
|
};
|
|
|
|
console.log('Debug Info:', info);
|
|
alert('Debug info logged to console');
|
|
}
|
|
});
|
|
}
|
|
|
|
// Example 3: Conditional button (only shows when user is logged in)
|
|
function registerConditionalButton() {
|
|
window.FurryPlaceSDK.registerButton({
|
|
id: 'example-conditional',
|
|
title: 'Premium Feature',
|
|
position: 'before-leaderboard',
|
|
icon: `
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor" class="size-5">
|
|
<path d="m233-80 65-281L80-550l288-25 112-265 112 265 288 25-218 189 65 281-247-149L233-80Z"/>
|
|
</svg>
|
|
`,
|
|
onClick: () => {
|
|
alert('This is a premium feature!');
|
|
},
|
|
// This condition is just an example - in a real plugin you'd check actual user state
|
|
condition: (context) => {
|
|
// For now, always show it (change this to check real user state)
|
|
return true;
|
|
}
|
|
});
|
|
}
|
|
|
|
// Example 4: Button that opens an external link
|
|
function registerDiscordButton() {
|
|
window.FurryPlaceSDK.registerButton({
|
|
id: 'example-discord',
|
|
title: 'Join our Discord',
|
|
position: 'top',
|
|
icon: `
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5">
|
|
<path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z"/>
|
|
</svg>
|
|
`,
|
|
onClick: () => {
|
|
window.open('https://discord.gg/ZRC4DnP9Z2', '_blank');
|
|
}
|
|
});
|
|
}
|
|
|
|
// Initialize plugin
|
|
waitForSDK(() => {
|
|
if (EXAMPLE_DISABLED) {
|
|
console.log('[Example Plugin] Disabled - set EXAMPLE_DISABLED to false to enable');
|
|
return;
|
|
}
|
|
|
|
console.log('[Example Plugin] Initializing...');
|
|
|
|
// Register all example buttons
|
|
registerHelpButton();
|
|
registerDebugButton();
|
|
registerConditionalButton();
|
|
registerDiscordButton();
|
|
|
|
console.log('[Example Plugin] Loaded successfully!');
|
|
console.log('[Example Plugin] Registered buttons:', window.FurryPlaceSDK.getButtons());
|
|
});
|
|
})();
|