225 lines
8.4 KiB
JavaScript
225 lines
8.4 KiB
JavaScript
/**
|
|
* Example FurryPlace Plugin - User State Demo
|
|
*
|
|
* This demonstrates how to use the FurryPlace SDK to access user state
|
|
* including droplets, charges, level, and more.
|
|
*
|
|
* To use this plugin, add it to your HTML:
|
|
* <script src="/plugins/example-user-state.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: Button that shows user info (only visible when logged in)
|
|
function registerUserInfoButton() {
|
|
window.FurryPlaceSDK.registerButton({
|
|
id: 'user-info-display',
|
|
title: 'Show My Stats',
|
|
position: 'after-leaderboard',
|
|
icon: `
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor" class="size-5">
|
|
<path d="M480-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM160-160v-112q0-34 17.5-62.5T224-378q62-31 126-46.5T480-440q66 0 130 15.5T736-378q29 15 46.5 43.5T800-272v112H160Zm80-80h480v-32q0-11-5.5-20T700-306q-54-27-109-40.5T480-360q-56 0-111 13.5T260-306q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T560-640q0-33-23.5-56.5T480-720q-33 0-56.5 23.5T400-640q0 33 23.5 56.5T480-560Zm0-80Zm0 400Z"/>
|
|
</svg>
|
|
`,
|
|
onClick: async () => {
|
|
const user = await window.FurryPlaceSDK.getUser();
|
|
const charges = window.FurryPlaceSDK.getCharges();
|
|
|
|
const info = `
|
|
🎨 Player Stats
|
|
━━━━━━━━━━━━━━━━━━
|
|
👤 Name: ${user.name}
|
|
🏆 Level: ${user.level}
|
|
🎯 Pixels Painted: ${user.pixelsPainted}
|
|
💧 Droplets: ${user.droplets}
|
|
|
|
⚡ Paint Charges
|
|
━━━━━━━━━━━━━━━━━━
|
|
Current: ${charges.current}/${charges.max}
|
|
Percentage: ${charges.percentage.toFixed(1)}%
|
|
Can Paint: ${window.FurryPlaceSDK.hasChargesToPaint() ? 'Yes ✅' : 'No ❌'}
|
|
|
|
🏰 Alliance
|
|
━━━━━━━━━━━━━━━━━━
|
|
In Alliance: ${window.FurryPlaceSDK.isInAlliance() ? 'Yes' : 'No'}
|
|
${user.allianceId ? `Alliance ID: ${user.allianceId}\nRole: ${user.allianceRole}` : ''}
|
|
`.trim();
|
|
|
|
alert(info);
|
|
console.log('Full user data:', user);
|
|
},
|
|
condition: (context) => context.user?.isLoggedIn
|
|
});
|
|
}
|
|
|
|
// Example 2: Droplet counter button
|
|
function registerDropletCounter() {
|
|
window.FurryPlaceSDK.registerButton({
|
|
id: 'droplet-counter',
|
|
title: 'View Droplets',
|
|
position: 'before-leaderboard',
|
|
icon: `
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor" class="size-5">
|
|
<path d="M480-80q-137 0-228.5-94T160-408q0-100 79.5-217.5T480-880q161 137 240.5 254.5T800-408q0 140-91.5 234T480-80Zm0-80q104 0 172-70.5T720-408q0-73-60.5-165T480-774Q361-665 300.5-573T240-408q0 107 68 177.5T480-160Zm0-320Z"/>
|
|
</svg>
|
|
`,
|
|
onClick: () => {
|
|
const droplets = window.FurryPlaceSDK.getDroplets();
|
|
alert(`💧 You have ${droplets} droplets!`);
|
|
},
|
|
condition: (context) => context.user?.isLoggedIn
|
|
});
|
|
}
|
|
|
|
// Example 3: Charge status indicator
|
|
function registerChargeStatus() {
|
|
window.FurryPlaceSDK.registerButton({
|
|
id: 'charge-status',
|
|
title: 'Paint Charge Status',
|
|
position: 'bottom',
|
|
icon: `
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor" class="size-5">
|
|
<path d="M280-360q-100 0-170-70T40-600q0-100 70-170t170-70h400q100 0 170 70t70 170q0 100-70 170t-170 70H280Zm0-80h400q66 0 113-47t47-113q0-66-47-113t-113-47H280q-66 0-113 47t-47 113q0 66 47 113t113 47Zm400-40q42 0 71-29t29-71q0-42-29-71t-71-29q-42 0-71 29t-29 71q0 42 29 71t71 29ZM480-600Z"/>
|
|
</svg>
|
|
`,
|
|
onClick: () => {
|
|
const charges = window.FurryPlaceSDK.getCharges();
|
|
const canPaint = window.FurryPlaceSDK.hasChargesToPaint();
|
|
|
|
const statusMsg = `
|
|
⚡ Paint Charges Status
|
|
━━━━━━━━━━━━━━━━━━
|
|
Current: ${charges.current}/${charges.max}
|
|
Filled: ${charges.percentage.toFixed(1)}%
|
|
Cooldown: ${charges.cooldownMs}ms
|
|
Status: ${canPaint ? '✅ Ready to paint!' : '❌ Recharging...'}
|
|
`.trim();
|
|
|
|
alert(statusMsg);
|
|
},
|
|
condition: (context) => context.user?.isLoggedIn
|
|
});
|
|
}
|
|
|
|
// Example 4: Level display button
|
|
function registerLevelDisplay() {
|
|
window.FurryPlaceSDK.registerButton({
|
|
id: 'level-display',
|
|
title: 'View Level Progress',
|
|
position: 'top',
|
|
icon: `
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor" class="size-5">
|
|
<path d="m354-287 126-76 126 77-33-144 111-96-146-13-58-136-58 135-146 13 111 97-33 143ZM233-120l65-281L80-590l288-25 112-265 112 265 288 25-218 189 65 281-247-149-247 149Zm247-350Z"/>
|
|
</svg>
|
|
`,
|
|
onClick: () => {
|
|
const level = window.FurryPlaceSDK.getLevel();
|
|
const pixelsPainted = window.FurryPlaceSDK.getPixelsPainted();
|
|
|
|
// Calculate next level (based on formula: level = floor(sqrt(pixels/100)) + 1)
|
|
const nextLevel = level + 1;
|
|
const pixelsForNextLevel = Math.pow(nextLevel - 1, 2) * 100;
|
|
const pixelsNeeded = pixelsForNextLevel - pixelsPainted;
|
|
|
|
const progress = `
|
|
🏆 Level Progress
|
|
━━━━━━━━━━━━━━━━━━
|
|
Current Level: ${level}
|
|
Pixels Painted: ${pixelsPainted}
|
|
Next Level: ${nextLevel}
|
|
Pixels Needed: ${pixelsNeeded > 0 ? pixelsNeeded : 0}
|
|
`.trim();
|
|
|
|
alert(progress);
|
|
},
|
|
condition: (context) => context.user?.isLoggedIn
|
|
});
|
|
}
|
|
|
|
// Example 5: Login status toggle
|
|
function registerLoginStatus() {
|
|
window.FurryPlaceSDK.registerButton({
|
|
id: 'login-status',
|
|
title: 'Login Required',
|
|
position: 'bottom',
|
|
className: 'btn btn-square btn-warning shadow-md',
|
|
icon: `
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor" class="size-5">
|
|
<path d="M480-120v-80h280v-560H480v-80h280q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H480Zm-80-160-55-58 102-102H120v-80h327L345-622l55-58 200 200-200 200Z"/>
|
|
</svg>
|
|
`,
|
|
onClick: () => {
|
|
alert('Please log in to access FurryPlace features!');
|
|
},
|
|
condition: (context) => !context.user?.isLoggedIn
|
|
});
|
|
}
|
|
|
|
// Example 6: Refresh user data button
|
|
function registerRefreshButton() {
|
|
window.FurryPlaceSDK.registerButton({
|
|
id: 'refresh-user-data',
|
|
title: 'Refresh User Data',
|
|
position: 'after-leaderboard',
|
|
icon: `
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor" class="size-5">
|
|
<path d="M480-160q-134 0-227-93t-93-227q0-134 93-227t227-93q69 0 132 28.5T720-690v-110h80v280H520v-80h168q-32-56-87.5-88T480-720q-100 0-170 70t-70 170q0 100 70 170t170 70q77 0 139-44t87-116h84q-28 106-114 173t-196 67Z"/>
|
|
</svg>
|
|
`,
|
|
onClick: async () => {
|
|
const user = await window.FurryPlaceSDK.refreshUser();
|
|
if (user) {
|
|
alert(`✅ User data refreshed!\n\nDroplets: ${user.droplets}\nCharges: ${user.charges.count}/${user.charges.max}`);
|
|
}
|
|
},
|
|
condition: (context) => context.user?.isLoggedIn
|
|
});
|
|
}
|
|
|
|
// Initialize plugin
|
|
waitForSDK(() => {
|
|
if (EXAMPLE_DISABLED) {
|
|
console.log('[User State Plugin] Disabled - set EXAMPLE_DISABLED to false to enable');
|
|
return;
|
|
}
|
|
|
|
console.log('[User State Plugin] Initializing...');
|
|
|
|
// Register all example buttons
|
|
registerUserInfoButton();
|
|
registerDropletCounter();
|
|
registerChargeStatus();
|
|
registerLevelDisplay();
|
|
registerLoginStatus();
|
|
registerRefreshButton();
|
|
|
|
console.log('[User State Plugin] Loaded successfully!');
|
|
|
|
// Log initial user state
|
|
setTimeout(async () => {
|
|
const isLoggedIn = window.FurryPlaceSDK.isLoggedIn();
|
|
console.log('[User State Plugin] User logged in:', isLoggedIn);
|
|
|
|
if (isLoggedIn) {
|
|
console.log('[User State Plugin] Droplets:', window.FurryPlaceSDK.getDroplets());
|
|
console.log('[User State Plugin] Charges:', window.FurryPlaceSDK.getCharges());
|
|
console.log('[User State Plugin] Level:', window.FurryPlaceSDK.getLevel());
|
|
console.log('[User State Plugin] Can paint:', window.FurryPlaceSDK.hasChargesToPaint());
|
|
}
|
|
}, 1000);
|
|
});
|
|
})();
|