mirror of
https://github.com/AeThex-Corporation/AeThex-OS.git
synced 2026-04-20 23:17:20 +00:00
b3c308b2c8
- ModuleManager: Central tracking for installed marketplace modules - DataAnalyzerWidget: Real-time CPU/RAM/Battery/Storage widget (unlocked by Data Analyzer module) - BottomNavBar: Navigation bar for Projects/Chat/Marketplace/Settings - RootShell: Real root command execution utility - TerminalActivity: Full root shell with neofetch, sysinfo, real Linux commands - Terminal Pro module: Adds aliases (ll, la, h), command history - ArcadeActivity + SnakeGame: Pixel Arcade module unlocks retro games - fade_in/fade_out animations for smooth transitions
406 lines
17 KiB
TypeScript
406 lines
17 KiB
TypeScript
import { Badge } from "@/components/ui/badge";
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Globe, Code2, Rocket, ExternalLink, CheckCircle2, AlertTriangle, Package } from "lucide-react";
|
|
import { CodeBlock } from "@/components/dev-platform/ui/CodeBlock";
|
|
|
|
export default function SpatialIntegration() {
|
|
return (
|
|
<div className="space-y-12">
|
|
<section id="overview" className="space-y-4">
|
|
<Badge className="bg-cyan-500/20 text-cyan-100 uppercase tracking-wide">
|
|
<Globe className="mr-2 h-3 w-3" />
|
|
Spatial Integration
|
|
</Badge>
|
|
<h2 className="text-3xl font-semibold text-white">
|
|
Build Spatial Experiences with AeThex
|
|
</h2>
|
|
<p className="text-gray-400 text-lg leading-relaxed">
|
|
Create immersive 3D spaces for Spatial's web-based metaverse platform. Use AeThex's unified API
|
|
with Spatial's visual editor, TypeScript SDK, and multi-device support (VR, Desktop, Mobile).
|
|
</p>
|
|
</section>
|
|
|
|
{/* Quick Stats */}
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<Card className="bg-cyan-950/20 border-cyan-500/20">
|
|
<CardContent className="pt-6">
|
|
<div className="text-3xl font-bold text-cyan-300">5M+</div>
|
|
<div className="text-sm text-gray-400">Monthly Visitors</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="bg-cyan-950/20 border-cyan-500/20">
|
|
<CardContent className="pt-6">
|
|
<div className="text-3xl font-bold text-cyan-300">100K+</div>
|
|
<div className="text-sm text-gray-400">Created Spaces</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="bg-cyan-950/20 border-cyan-500/20">
|
|
<CardContent className="pt-6">
|
|
<div className="text-3xl font-bold text-cyan-300">No Install</div>
|
|
<div className="text-sm text-gray-400">Browser-Based</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Features */}
|
|
<section id="features" className="space-y-6">
|
|
<h3 className="text-2xl font-semibold text-white">What You Can Build</h3>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<Card className="bg-slate-900/50 border-cyan-500/20">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2 text-cyan-300">
|
|
<CheckCircle2 className="h-5 w-5" />
|
|
Web3 Virtual Events
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="text-gray-400">
|
|
Host conferences, exhibitions, and networking events with AeThex authentication and NFT-gated access
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="bg-slate-900/50 border-cyan-500/20">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2 text-cyan-300">
|
|
<CheckCircle2 className="h-5 w-5" />
|
|
Cross-Device Experiences
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="text-gray-400">
|
|
Build once, deploy everywhere - Spatial runs on Quest, desktop browsers, and mobile devices
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="bg-slate-900/50 border-cyan-500/20">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2 text-cyan-300">
|
|
<CheckCircle2 className="h-5 w-5" />
|
|
Interactive 3D Content
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="text-gray-400">
|
|
Sync 3D models, animations, and interactive objects with AeThex backend for dynamic content updates
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="bg-slate-900/50 border-cyan-500/20">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2 text-cyan-300">
|
|
<CheckCircle2 className="h-5 w-5" />
|
|
Analytics & Engagement
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="text-gray-400">
|
|
Track visitor behavior, space engagement metrics, and cross-platform user journeys via AeThex analytics
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Quick Start */}
|
|
<section id="quick-start" className="space-y-6">
|
|
<h3 className="text-2xl font-semibold text-white flex items-center gap-2">
|
|
<Rocket className="h-6 w-6 text-cyan-400" />
|
|
Quick Start Guide
|
|
</h3>
|
|
|
|
<Card className="bg-slate-900/50 border-cyan-500/20">
|
|
<CardHeader>
|
|
<CardTitle>1. Install AeThex Spatial SDK</CardTitle>
|
|
<CardDescription>Add AeThex scripting components to your Spatial space</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<p className="text-gray-300">
|
|
In Spatial Studio, go to <strong>Scripts</strong> → <strong>Add Package</strong> → Search for <code className="bg-cyan-950/50 px-2 py-1 rounded text-cyan-300">@aethex/spatial-sdk</code>
|
|
</p>
|
|
<CodeBlock
|
|
code={`// Or install via npm for custom scripting
|
|
npm install @aethex/spatial-sdk
|
|
|
|
// Import in your Spatial TypeScript scripts
|
|
import { AeThexClient } from '@aethex/spatial-sdk';`}
|
|
language="bash"
|
|
showLineNumbers={false}
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="bg-slate-900/50 border-cyan-500/20">
|
|
<CardHeader>
|
|
<CardTitle>2. Initialize AeThex in Your Space</CardTitle>
|
|
<CardDescription>Configure API credentials in Spatial Studio</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<CodeBlock
|
|
code={`import { AeThexClient } from '@aethex/spatial-sdk';
|
|
|
|
// Initialize AeThex client in your space script
|
|
const aethex = new AeThexClient({
|
|
apiKey: 'your_api_key_here',
|
|
environment: 'production'
|
|
});
|
|
|
|
// Listen for player join events
|
|
space.onUserJoined.subscribe((user) => {
|
|
console.log(\`User \${user.username} joined\`);
|
|
|
|
// Fetch user profile from AeThex
|
|
aethex.users.get(user.id).then(profile => {
|
|
console.log('AeThex Profile:', profile);
|
|
});
|
|
});
|
|
|
|
// Example: Update player stats when they interact
|
|
space.onInteract.subscribe((event) => {
|
|
aethex.achievements.unlock(event.user.id, 'spatial-explorer');
|
|
});`}
|
|
language="typescript"
|
|
showLineNumbers={true}
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="bg-slate-900/50 border-cyan-500/20">
|
|
<CardHeader>
|
|
<CardTitle>3. Build Interactive Features</CardTitle>
|
|
<CardDescription>Create cross-platform leaderboards and achievements</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<CodeBlock
|
|
code={`import { AeThexClient } from '@aethex/spatial-sdk';
|
|
|
|
const aethex = new AeThexClient({ apiKey: process.env.AETHEX_API_KEY });
|
|
|
|
// Create a leaderboard that syncs across Spatial, Roblox, VRChat
|
|
async function updateLeaderboard(userId: string, score: number) {
|
|
await aethex.leaderboards.updateScore('global-leaderboard', {
|
|
userId: userId,
|
|
score: score,
|
|
metadata: {
|
|
platform: 'spatial',
|
|
timestamp: Date.now()
|
|
}
|
|
});
|
|
|
|
// Fetch top 10 players across all platforms
|
|
const topPlayers = await aethex.leaderboards.getTop('global-leaderboard', {
|
|
limit: 10,
|
|
platform: 'all'
|
|
});
|
|
|
|
return topPlayers;
|
|
}
|
|
|
|
// Example: Score points when player collects item
|
|
space.onItemCollected.subscribe(async (event) => {
|
|
const newScore = await updateLeaderboard(event.user.id, 100);
|
|
console.log('New leaderboard:', newScore);
|
|
});`}
|
|
language="typescript"
|
|
showLineNumbers={true}
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
</section>
|
|
|
|
{/* Authentication Flow */}
|
|
<section id="authentication" className="space-y-6">
|
|
<h3 className="text-2xl font-semibold text-white">Player Authentication</h3>
|
|
<p className="text-gray-400">
|
|
Link Spatial visitors to AeThex Passport for cross-platform identity and progression.
|
|
</p>
|
|
|
|
<Card className="bg-slate-900/50 border-cyan-500/20">
|
|
<CardHeader>
|
|
<CardTitle>OAuth Integration</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<p className="text-gray-300">
|
|
Spatial supports web-based OAuth flows, making authentication seamless for browser users.
|
|
</p>
|
|
|
|
<div className="space-y-4">
|
|
<div className="flex gap-4 items-start">
|
|
<div className="w-8 h-8 rounded-full bg-cyan-500/20 flex items-center justify-center text-cyan-300 font-bold flex-shrink-0">1</div>
|
|
<div>
|
|
<h4 className="text-white font-semibold mb-1">User Enters Space</h4>
|
|
<p className="text-gray-400 text-sm">Spatial script detects new visitor via onUserJoined event</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-4 items-start">
|
|
<div className="w-8 h-8 rounded-full bg-cyan-500/20 flex items-center justify-center text-cyan-300 font-bold flex-shrink-0">2</div>
|
|
<div>
|
|
<h4 className="text-white font-semibold mb-1">Prompt Authentication</h4>
|
|
<p className="text-gray-400 text-sm">Display 3D UI panel with "Link AeThex Account" button</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-4 items-start">
|
|
<div className="w-8 h-8 rounded-full bg-cyan-500/20 flex items-center justify-center text-cyan-300 font-bold flex-shrink-0">3</div>
|
|
<div>
|
|
<h4 className="text-white font-semibold mb-1">OAuth Redirect</h4>
|
|
<p className="text-gray-400 text-sm">Opens <code className="bg-cyan-950/50 px-1 rounded">aethex.dev/oauth/spatial</code> in browser overlay</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-4 items-start">
|
|
<div className="w-8 h-8 rounded-full bg-cyan-500/20 flex items-center justify-center text-cyan-300 font-bold flex-shrink-0">4</div>
|
|
<div>
|
|
<h4 className="text-white font-semibold mb-1">Callback Webhook</h4>
|
|
<p className="text-gray-400 text-sm">Spatial receives auth token, stores in user session, unlocks cross-platform features</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<CodeBlock
|
|
code={`// Spatial OAuth authentication
|
|
import { AeThexClient } from '@aethex/spatial-sdk';
|
|
|
|
const aethex = new AeThexClient({ apiKey: process.env.AETHEX_API_KEY });
|
|
|
|
// When user clicks "Link Account" button
|
|
async function initiateAuth(spatialUserId: string) {
|
|
const authUrl = await aethex.auth.generateOAuthUrl({
|
|
platform: 'spatial',
|
|
userId: spatialUserId,
|
|
redirectUri: 'https://spatial.io/spaces/your-space-id'
|
|
});
|
|
|
|
// Open OAuth flow in browser overlay
|
|
space.openURL(authUrl);
|
|
}
|
|
|
|
// Handle OAuth callback
|
|
space.onOAuthCallback.subscribe(async (token) => {
|
|
const linkedUser = await aethex.auth.verifyToken(token);
|
|
console.log('User linked:', linkedUser);
|
|
|
|
// Now you can access cross-platform data
|
|
const achievements = await aethex.achievements.list(linkedUser.id);
|
|
displayAchievements(achievements);
|
|
});`}
|
|
language="typescript"
|
|
showLineNumbers={true}
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
</section>
|
|
|
|
{/* Best Practices */}
|
|
<section id="best-practices" className="space-y-6">
|
|
<h3 className="text-2xl font-semibold text-white flex items-center gap-2">
|
|
<AlertTriangle className="h-6 w-6 text-yellow-400" />
|
|
Best Practices & Limitations
|
|
</h3>
|
|
|
|
<div className="space-y-4">
|
|
<Card className="bg-yellow-950/20 border-yellow-500/20">
|
|
<CardHeader>
|
|
<CardTitle className="text-yellow-300">Spatial Limitations</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3 text-gray-300">
|
|
<p>• <strong>Browser-based performance:</strong> Keep API calls under 50/minute to avoid throttling</p>
|
|
<p>• <strong>Asset size limits:</strong> 3D models max 50MB, optimize for web delivery</p>
|
|
<p>• <strong>Script execution:</strong> Spatial runs TypeScript in sandbox, no native code</p>
|
|
<p>• <strong>Concurrent users:</strong> Max 50 users per space instance, scale with multiple instances</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="bg-green-950/20 border-green-500/20">
|
|
<CardHeader>
|
|
<CardTitle className="text-green-300">Performance Optimization</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3 text-gray-300">
|
|
<p>• <strong>Cache API responses:</strong> Store frequently accessed data in space variables</p>
|
|
<p>• <strong>Lazy load content:</strong> Only fetch 3D assets when user approaches interactive zones</p>
|
|
<p>• <strong>Use CDN URLs:</strong> Host large assets on AeThex CDN for faster loading</p>
|
|
<p>• <strong>Mobile optimization:</strong> Test on mobile devices, reduce draw calls for iOS/Android</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Resources */}
|
|
<section id="resources" className="space-y-6">
|
|
<h3 className="text-2xl font-semibold text-white flex items-center gap-2">
|
|
<Package className="h-6 w-6 text-cyan-400" />
|
|
Resources & Examples
|
|
</h3>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<Card className="bg-slate-900/50 border-cyan-500/20">
|
|
<CardHeader>
|
|
<CardTitle className="text-lg">Example Spaces</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3">
|
|
<Button variant="outline" className="w-full justify-between" asChild>
|
|
<a href="https://spatial.io/@aethex/gallery" target="_blank" rel="noopener noreferrer">
|
|
AeThex Virtual Gallery
|
|
<ExternalLink className="h-4 w-4" />
|
|
</a>
|
|
</Button>
|
|
<Button variant="outline" className="w-full justify-between" asChild>
|
|
<a href="https://spatial.io/@aethex/leaderboard" target="_blank" rel="noopener noreferrer">
|
|
Cross-Platform Leaderboard
|
|
<ExternalLink className="h-4 w-4" />
|
|
</a>
|
|
</Button>
|
|
<Button variant="outline" className="w-full justify-between" asChild>
|
|
<a href="https://github.com/aethex-corp/spatial-starter" target="_blank" rel="noopener noreferrer">
|
|
Starter Template
|
|
<ExternalLink className="h-4 w-4" />
|
|
</a>
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="bg-slate-900/50 border-cyan-500/20">
|
|
<CardHeader>
|
|
<CardTitle className="text-lg">Documentation</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3">
|
|
<Button variant="outline" className="w-full justify-between" asChild>
|
|
<a href="/dev-platform/api-reference" target="_blank">
|
|
AeThex API Reference
|
|
<Code2 className="h-4 w-4" />
|
|
</a>
|
|
</Button>
|
|
<Button variant="outline" className="w-full justify-between" asChild>
|
|
<a href="https://docs.spatial.io" target="_blank" rel="noopener noreferrer">
|
|
Spatial Developer Docs
|
|
<ExternalLink className="h-4 w-4" />
|
|
</a>
|
|
</Button>
|
|
<Button variant="outline" className="w-full justify-between" asChild>
|
|
<a href="/community" target="_blank">
|
|
Join Discord Community
|
|
<ExternalLink className="h-4 w-4" />
|
|
</a>
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Next Steps */}
|
|
<Card className="bg-gradient-to-r from-cyan-950/50 to-blue-950/50 border-cyan-500/30">
|
|
<CardContent className="p-8 space-y-4">
|
|
<h3 className="text-2xl font-semibold text-white">Ready to Build?</h3>
|
|
<p className="text-gray-300">
|
|
Create immersive web3 experiences with Spatial and AeThex. Deploy to browsers, VR headsets,
|
|
and mobile devices with one unified API.
|
|
</p>
|
|
<div className="flex gap-4">
|
|
<Button className="bg-cyan-600 hover:bg-cyan-700" asChild>
|
|
<a href="/dev-platform/dashboard">Get API Key</a>
|
|
</Button>
|
|
<Button variant="outline" asChild>
|
|
<a href="/dev-platform/quick-start">View Quick Start</a>
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|