✨ Major Features Added: - Complete magical theming and rebranding from LifeRPG to The Wizard's Grimoire - Production-grade React frontend with Tailwind CSS v4 and magical aesthetics - Comprehensive analytics dashboard with Recharts integration (ScryingPortal) - Push notifications system with PWA service worker support - Drag & drop functionality using @dnd-kit for habit reordering - Social features with friends system and leaderboards - Performance optimization tools and monitoring - Mobile app enhancement with PWA installation support 🏗️ Technical Infrastructure: - Advanced service worker with offline support and background sync - Zustand state management for scalable application state - Production-ready UI component system with enhanced Button, Card, Input - Progressive Web App (PWA) with manifest and app installation - FastAPI backend with comprehensive API endpoints - Docker containerization and CI/CD pipeline setup 📱 Progressive Web App Features: - Offline functionality with intelligent caching - Push notification support for habit reminders - App installation on mobile and desktop platforms - Background sync for offline data management - Performance monitoring and optimization tools 🎨 User Experience: - Magical wizard/grimoire theming throughout application - Responsive design optimized for all device sizes - Drag & drop habit management with smooth animations - Interactive analytics with multiple chart types - Social connectivity with friends and competitive features - Comprehensive notification and performance settings 🔧 Developer Experience: - Modern development stack with Vite and React - Comprehensive testing setup and CI/CD pipelines - Code quality tools with pre-commit hooks - Docker development environment - Detailed documentation and implementation guides This represents a complete transformation from prototype to production-ready application with enterprise-grade features and magical user experience.
4.3 KiB
4.3 KiB
LifeRPG Plugin SDK
This SDK allows you to create plugins for the LifeRPG application using AssemblyScript, which compiles to WebAssembly.
Getting Started
Prerequisites
- Node.js 18 or later
- npm or yarn
Installation
npm install @liferpg/plugin-sdk
Creating a Simple Plugin
- Create a new directory for your plugin:
mkdir my-liferpg-plugin
cd my-liferpg-plugin
- Initialize a new npm project:
npm init -y
- Install the LifeRPG Plugin SDK:
npm install @liferpg/plugin-sdk
- Create an
assemblydirectory and add your plugin code:
mkdir assembly
- Create a file
assembly/index.tswith the following content:
import { PluginContext, API } from "@liferpg/plugin-sdk";
// Export the initialize function
export function initialize(context: PluginContext): void {
// Log a message
context.log("My plugin initialized!");
// Register a dashboard widget
context.api.registerDashboardWidget(
"my-widget",
"My Custom Widget",
"<div>Hello from my plugin!</div>"
);
}
- Add a build script to your
package.json:
{
"scripts": {
"build": "asc assembly/index.ts --target release"
}
}
- Build your plugin:
npm run build
This will create a .wasm file in the build directory.
Plugin API Reference
PluginContext
The PluginContext is passed to your plugin's initialize function and provides access to the LifeRPG API.
Methods
log(message: string): void- Log a message to the console
API
The API object provides access to LifeRPG data and functionality.
Habits
getHabits(): Habit[]- Get all habitscompleteHabit(habitId: i32): boolean- Complete a habit
Projects
getProjects(): Project[]- Get all projects
UI
registerDashboardWidget(id: string, title: string, html: string): boolean- Register a dashboard widgetregisterMenuItem(id: string, title: string, path: string): boolean- Register a menu item
Storage
getStorage(key: string): string- Get a value from plugin storagesetStorage(key: string, value: string): boolean- Store a value in plugin storage
Example Plugins
Pomodoro Timer
import { PluginContext, API } from "@liferpg/plugin-sdk";
export function initialize(context: PluginContext): void {
context.log("Pomodoro plugin initialized");
// Register a dashboard widget with a Pomodoro timer
context.api.registerDashboardWidget(
"pomodoro-timer",
"Pomodoro Timer",
`
<div class="pomodoro-timer">
<div class="timer">25:00</div>
<button class="start-button">Start</button>
<button class="reset-button">Reset</button>
</div>
<script>
// Timer implementation would go here
// This script will run in a sandbox
</script>
`
);
}
GitHub Integration
import { PluginContext, API } from "@liferpg/plugin-sdk";
export function initialize(context: PluginContext): void {
context.log("GitHub plugin initialized");
// Register a dashboard widget showing GitHub stats
context.api.registerDashboardWidget(
"github-stats",
"GitHub Activity",
`
<div class="github-stats">
<h3>Recent Commits</h3>
<div class="commits-list">
Loading commits...
</div>
</div>
`
);
// Register a settings page for GitHub authentication
context.api.registerMenuItem(
"github-settings",
"GitHub Integration",
"/settings/github"
);
}
Building and Packaging
To build your plugin for distribution:
npm run build
This will generate a WebAssembly binary that can be uploaded to LifeRPG.
Plugin Manifest
Each plugin must provide a manifest (automatically generated during build):
{
"id": "com.example.myplugin",
"name": "My Plugin",
"version": "1.0.0",
"author": "Your Name",
"description": "A custom plugin for LifeRPG",
"targetApiVersion": "1.0",
"minAppVersion": "1.0.0",
"permissions": [
"habits:read",
"ui:dashboard"
],
"extensionPoints": [
"dashboard.widget"
],
"entryPoint": "initialize"
}
Security Considerations
Plugins run in a sandboxed WebAssembly environment with the following restrictions:
- Limited memory allocation
- No direct DOM access
- Controlled API access based on permissions
- Storage quotas
License
MIT