AeThex-Corporation/aethex-forge
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'feat/database-migration-and-dev-platform'

Browse source
This commit is contained in:
MrPiglr 2026-01-11 00:28:21 +00:00 committed by GitHub
commit f9ef7e0298
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
16 changed files with 5572 additions and 361 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
client/App.tsx
View file

@ -44,6 +44,15 @@ import DocsApiReference from "./pages/docs/DocsApiReference";
import DocsCli from "./pages/docs/DocsCli";
import DocsExamples from "./pages/docs/DocsExamples";
import DocsIntegrations from "./pages/docs/DocsIntegrations";
import VRChatIntegration from "./pages/docs/integrations/VRChat";
import RecRoomIntegration from "./pages/docs/integrations/RecRoom";
import SpatialIntegration from "./pages/docs/integrations/Spatial";
import DecentralandIntegration from "./pages/docs/integrations/Decentraland";
import TheSandboxIntegration from "./pages/docs/integrations/TheSandbox";
import GodotIntegration from "./pages/docs/integrations/Godot";
import GameMakerIntegration from "./pages/docs/integrations/GameMaker";
import GameJoltIntegration from "./pages/docs/integrations/GameJolt";
import ItchIoIntegration from "./pages/docs/integrations/ItchIo";
import DocsCurriculum from "./pages/docs/DocsCurriculum";
import DocsCurriculumEthos from "./pages/docs/DocsCurriculumEthos";
import EthosGuild from "./pages/community/EthosGuild";
@ -364,9 +373,8 @@ const App = () => (
/>
<Route path="/research" element={<ResearchLabs />} />
{/* Labs redirects to aethex.studio (Skunkworks R&D) */}
<Route path="/labs" element={<ExternalRedirect to="https://aethex.studio" />} />
<Route path="/labs/*" element={<ExternalRedirect to="https://aethex.studio" />} />
{/* Labs page with auto-redirect to aethex.studio (Skunkworks R&D) */}
<Route path="/labs" element={<Labs />} />
{/* GameForge Management routes stay local on aethex.dev (Axiom Model - Write/Control) */}
<Route
@ -386,13 +394,11 @@ const App = () => (
}
/>
{/* GameForge public routes redirect to aethex.foundation/gameforge (Axiom Model - Read-Only Showcase) */}
<Route path="/gameforge" element={<ExternalRedirect to="https://aethex.foundation/gameforge" />} />
<Route path="/gameforge/*" element={<ExternalRedirect to="https://aethex.foundation/gameforge" />} />
{/* GameForge public route with auto-redirect to aethex.foundation/gameforge (Axiom Model - Read-Only Showcase) */}
<Route path="/gameforge" element={<GameForge />} />
{/* Foundation redirects to aethex.foundation (Non-Profit Guardian - Axiom Model) */}
<Route path="/foundation" element={<ExternalRedirect to="https://aethex.foundation" />} />
<Route path="/foundation/*" element={<ExternalRedirect to="https://aethex.foundation" />} />
{/* Foundation page with auto-redirect to aethex.foundation (Non-Profit Guardian - Axiom Model) */}
<Route path="/foundation" element={<Foundation />} />
<Route path="/corp" element={<Corp />} />
<Route
@ -619,6 +625,42 @@ const App = () => (
path="integrations"
element={<DocsIntegrations />}
/>
<Route
path="integrations/vrchat"
element={<VRChatIntegration />}
/>
<Route
path="integrations/recroom"
element={<RecRoomIntegration />}
/>
<Route
path="integrations/spatial"
element={<SpatialIntegration />}
/>
<Route
path="integrations/decentraland"
element={<DecentralandIntegration />}
/>
<Route
path="integrations/thesandbox"
element={<TheSandboxIntegration />}
/>
<Route
path="integrations/godot"
element={<GodotIntegration />}
/>
<Route
path="integrations/gamemaker"
element={<GameMakerIntegration />}
/>
<Route
path="integrations/gamejolt"
element={<GameJoltIntegration />}
/>
<Route
path="integrations/itchio"
element={<ItchIoIntegration />}
/>
</Route>
<Route path="/tutorials" element={<Tutorials />} />
<Route path="/community/*" element={<Community />} />

160
client/pages/Foundation.tsx
View file

@ -15,6 +15,7 @@ import {
Sparkles,
Trophy,
Compass,
ExternalLink,
} from "lucide-react";
import { useNavigate } from "react-router-dom";
import { useEffect, useState, useRef } from "react";
@ -26,6 +27,8 @@ export default function Foundation() {
const { theme } = useArmTheme();
const armToast = useArmToast();
const [isLoading, setIsLoading] = useState(true);
const [showTldr, setShowTldr] = useState(false);
const [showExitModal, setShowExitModal] = useState(false);
const toastShownRef = useRef(false);
useEffect(() => {
@ -40,6 +43,18 @@ export default function Foundation() {
return () => clearTimeout(timer);
}, [armToast]);
// Exit intent detection
useEffect(() => {
const handleMouseLeave = (e: MouseEvent) => {
if (e.clientY <= 0 && !showExitModal) {
setShowExitModal(true);
}
};
document.addEventListener('mouseleave', handleMouseLeave);
return () => document.removeEventListener('mouseleave', handleMouseLeave);
}, [showExitModal]);
if (isLoading) {
return (
<LoadingScreen
@ -54,39 +69,99 @@ export default function Foundation() {
return (
<Layout>
<div className="min-h-screen bg-gradient-to-b from-black via-red-950/20 to-black py-8">
<div className="container mx-auto px-4 max-w-7xl space-y-12">
<div className="min-h-screen bg-gradient-to-b from-black via-red-950/20 to-black">
{/* Persistent Info Banner */}
<div className="bg-red-500/10 border-b border-red-400/30 py-3 sticky top-0 z-50 backdrop-blur-sm">
<div className="container mx-auto max-w-7xl px-4">
<div className="flex items-center justify-between gap-4 flex-wrap">
<div className="flex items-center gap-3">
<ExternalLink className="h-5 w-5 text-red-400" />
<p className="text-sm text-red-200">
Foundation is hosted at{" "}
<a href="https://aethex.foundation" className="underline font-semibold hover:text-red-300">
aethex.foundation
</a>
</p>
</div>
<Button
size="sm"
className="bg-red-400 text-black hover:bg-red-300"
onClick={() => window.location.href = 'https://aethex.foundation'}
>
<ExternalLink className="h-4 w-4 mr-2" />
Visit Foundation
</Button>
</div>
</div>
</div>
<div className="container mx-auto px-4 max-w-7xl space-y-20 py-16 lg:py-24">
{/* Hero Section */}
<div className="space-y-6 animate-slide-down">
<div className="space-y-2">
<Badge className="w-fit bg-red-600/50 text-red-100">
Non-Profit Guardian
<div className="text-center space-y-8 animate-slide-down">
<div className="flex justify-center mb-6">
<img
src="https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2Fc02cb1bf5056479bbb3ea4bd91f0d472?format=webp&width=800"
alt="Foundation Logo"
className="h-32 w-32 object-contain drop-shadow-[0_0_50px_rgba(239,68,68,0.5)]"
/>
</div>
<div className="space-y-6 max-w-5xl mx-auto">
<Badge className="border-red-400/50 bg-red-500/10 text-red-100 text-base px-4 py-1.5">
<Heart className="h-5 w-5 mr-2" />
501(c)(3) Non-Profit Organization
</Badge>
<h1 className="text-5xl md:text-7xl font-bold bg-gradient-to-r from-red-300 via-pink-300 to-red-300 bg-clip-text text-transparent">
<h1 className="text-5xl md:text-6xl lg:text-7xl font-black bg-gradient-to-r from-red-300 via-pink-300 to-red-300 bg-clip-text text-transparent">
AeThex Foundation
</h1>
<p className="text-xl md:text-2xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
Building community, empowering developers, and advancing game development through open-source innovation and mentorship.
</p>
{/* TL;DR Section */}
<div className="max-w-3xl mx-auto">
<button
onClick={() => setShowTldr(!showTldr)}
className="flex items-center gap-2 text-red-400 hover:text-red-300 transition-colors mx-auto"
>
<Zap className="h-5 w-5" />
<span className="font-semibold">{showTldr ? 'Hide' : 'Show'} Quick Summary</span>
<ArrowRight className={`h-4 w-4 transition-transform ${showTldr ? 'rotate-90' : ''}`} />
</button>
{showTldr && (
<div className="mt-4 p-6 bg-red-950/40 border border-red-400/30 rounded-lg text-left space-y-3 animate-slide-down">
<h3 className="text-lg font-bold text-red-300">TL;DR</h3>
<ul className="space-y-2 text-red-100/90">
<li className="flex gap-3"><span className="text-red-400">✦</span> <span>501(c)(3) non-profit focused on game development</span></li>
<li className="flex gap-3"><span className="text-red-400">✦</span> <span>GameForge flagship program (30-day sprints)</span></li>
<li className="flex gap-3"><span className="text-red-400">✦</span> <span>Open-source Axiom Protocol for game dev</span></li>
<li className="flex gap-3"><span className="text-red-400">✦</span> <span>Master-apprentice mentorship model</span></li>
<li className="flex gap-3"><span className="text-red-400">✦</span> <span>Community hub at aethex.foundation</span></li>
</ul>
</div>
)}
</div>
</div>
<p className="text-xl text-gray-300 max-w-2xl leading-relaxed">
The heart of our ecosystem. We believe in building community,
empowering developers, and advancing game development through
open-source innovation and mentorship.
</p>
<div className="flex flex-wrap gap-3">
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center pt-4">
<Button
onClick={() => navigate("/gameforge")}
className="bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700 h-12 text-base"
size="lg"
className="bg-gradient-to-r from-red-600 to-pink-600 hover:from-red-700 hover:to-pink-700 shadow-[0_0_40px_rgba(239,68,68,0.3)] h-14 px-8 text-lg"
onClick={() => window.location.href = 'https://aethex.foundation'}
>
<ExternalLink className="h-5 w-5 mr-2" />
Visit Foundation Platform
</Button>
<Button
size="lg"
className="bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700 h-14 px-8 text-lg"
onClick={() => window.location.href = 'https://aethex.foundation/gameforge'}
>
<Gamepad2 className="h-5 w-5 mr-2" />
Join GameForge
</Button>
<Button
onClick={() => navigate("/mentorship")}
variant="outline"
className="border-red-500/30 text-red-300 hover:bg-red-500/10 h-12 text-base"
>
<GraduationCap className="h-5 w-5 mr-2" />
Explore Programs
</Button>
</div>
</div>
@ -413,6 +488,45 @@ export default function Foundation() {
</Card>
</div>
</div>
{/* Exit Intent Modal */}
{showExitModal && (
<div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/80 backdrop-blur-sm animate-fade-in">
<div className="bg-gradient-to-br from-red-950 to-black border-2 border-red-400/50 rounded-xl p-8 max-w-lg mx-4 shadow-2xl shadow-red-500/20 animate-slide-up">
<div className="text-center space-y-6">
<div className="flex justify-center">
<div className="w-20 h-20 rounded-full bg-red-400/20 flex items-center justify-center">
<Heart className="h-10 w-10 text-red-400" />
</div>
</div>
<div className="space-y-3">
<h3 className="text-2xl font-black text-red-300">Join Our Community</h3>
<p className="text-red-100/80">
Be part of the AeThex Foundation 501(c)(3) - where developers learn, grow, and ship together.
</p>
</div>
<div className="flex flex-col sm:flex-row gap-3">
<Button
size="lg"
className="flex-1 bg-gradient-to-r from-red-600 to-pink-600 hover:from-red-700 hover:to-pink-700 h-12"
onClick={() => window.location.href = 'https://aethex.foundation'}
>
<ExternalLink className="h-5 w-5 mr-2" />
Visit Foundation
</Button>
<Button
size="lg"
variant="outline"
className="flex-1 border-red-400/50 text-red-300 hover:bg-red-500/10 h-12"
onClick={() => setShowExitModal(false)}
>
Keep Reading
</Button>
</div>
</div>
</div>
</div>
)}
</Layout>
);
}

652
client/pages/GameForge.tsx
View file

@ -10,6 +10,12 @@ import {
TrendingUp,
Rocket,
ArrowRight,
ExternalLink,
Zap,
Target,
Code,
Palette,
Music,
} from "lucide-react";
import { useNavigate } from "react-router-dom";
import { useEffect, useState, useRef } from "react";
@ -21,6 +27,8 @@ export default function GameForge() {
const { theme } = useArmTheme();
const armToast = useArmToast();
const [isLoading, setIsLoading] = useState(true);
const [showTldr, setShowTldr] = useState(false);
const [showExitModal, setShowExitModal] = useState(false);
const toastShownRef = useRef(false);
useEffect(() => {
@ -35,6 +43,18 @@ export default function GameForge() {
return () => clearTimeout(timer);
}, [armToast]);
// Exit intent detection
useEffect(() => {
const handleMouseLeave = (e: MouseEvent) => {
if (e.clientY <= 0 && !showExitModal) {
setShowExitModal(true);
}
};
document.addEventListener('mouseleave', handleMouseLeave);
return () => document.removeEventListener('mouseleave', handleMouseLeave);
}, [showExitModal]);
if (isLoading) {
return (
<LoadingScreen
@ -47,300 +67,281 @@ export default function GameForge() {
);
}
const monthlyReleases = [
{
month: "January 2025",
title: "Pixel Quest: Reckoning",
genre: "Action-Adventure",
team: "Green Squadron",
status: "Shipping Now",
highlights: "New combat system, 50 levels, multiplayer beta",
},
{
month: "February 2025",
title: "Logic Master Pro",
genre: "Puzzle",
team: "Logic Lab",
status: "Pre-Production",
highlights: "Daily challenges, leaderboards, cross-platform",
},
{
month: "March 2025",
title: "Mystic Realms: Awakening",
genre: "RPG",
team: "Adventure Wing",
status: "Development",
highlights: "Story driven, 100+ hours, procedural dungeons",
},
];
const pastReleases = [
{
title: "Battle Royale X",
genre: "Action",
releaseDate: "Dec 2024",
players: "50K+",
rating: 4.7,
},
{
title: "Casual Match",
genre: "Puzzle",
releaseDate: "Nov 2024",
players: "100K+",
rating: 4.5,
},
{
title: "Speedrun Challenge",
genre: "Action",
releaseDate: "Oct 2024",
players: "35K+",
rating: 4.8,
},
];
const productionStats = [
{ label: "Games Shipped", value: "15+" },
{ label: "Monthly Cycle", value: "32 days" },
{ label: "Total Players", value: "200K+" },
{ label: "Team Size", value: "25 devs" },
{ label: "Games Shipped", value: "15+", icon: Rocket },
{ label: "Active Players", value: "200K+", icon: Users },
{ label: "Team Members", value: "25", icon: Users },
{ label: "Avg Development", value: "32 days", icon: Calendar },
];
const features = [
{
icon: Zap,
title: "30-Day Production Cycle",
description: "Ship complete games from concept to live in under a month using proven development pipelines.",
gradient: "from-green-500 to-emerald-500"
},
{
icon: Users,
title: "Collaborative Teams",
description: "Work alongside designers, developers, artists, and musicians in cross-functional squads.",
gradient: "from-cyan-500 to-blue-500"
},
{
icon: Target,
title: "Real Portfolio Projects",
description: "Build your aethex.me passport with shipped games that prove your ability to execute.",
gradient: "from-purple-500 to-pink-500"
},
{
icon: TrendingUp,
title: "Proven Technology",
description: "Use cutting-edge tools and frameworks developed by AeThex Labs for rapid game development.",
gradient: "from-orange-500 to-red-500"
},
];
return (
<Layout>
<div className="relative min-h-screen bg-black text-white overflow-hidden">
{/* Background */}
<div className="pointer-events-none absolute inset-0 opacity-[0.12] [background-image:radial-gradient(circle_at_top,#22c55e_0,rgba(0,0,0,0.45)_55%,rgba(0,0,0,0.9)_100%)]" />
{/* Persistent Info Banner */}
<div className="bg-green-500/10 border-b border-green-400/30 py-3 sticky top-0 z-50 backdrop-blur-sm">
<div className="container mx-auto max-w-7xl px-4">
<div className="flex items-center justify-between gap-4 flex-wrap">
<div className="flex items-center gap-3">
<ExternalLink className="h-5 w-5 text-green-400" />
<p className="text-sm text-green-200">
GameForge is hosted at{" "}
<a href="https://aethex.foundation/gameforge" className="underline font-semibold hover:text-green-300">
aethex.foundation/gameforge
</a>
</p>
</div>
<Button
size="sm"
className="bg-green-400 text-black hover:bg-green-300"
onClick={() => window.location.href = 'https://aethex.foundation/gameforge'}
>
<ExternalLink className="h-4 w-4 mr-2" />
Visit Platform
</Button>
</div>
</div>
</div>
{/* Background Effects */}
<div className="pointer-events-none absolute inset-0 opacity-[0.15] [background-image:radial-gradient(circle_at_top,#22c55e_0,rgba(0,0,0,0.45)_55%,rgba(0,0,0,0.9)_100%)]" />
<div className="pointer-events-none absolute inset-0 bg-[linear-gradient(transparent_0,transparent_calc(100%-1px),rgba(34,197,94,0.05)_calc(100%-1px))] bg-[length:100%_32px]" />
<div className="pointer-events-none absolute inset-0 opacity-[0.08] [background-image:linear-gradient(90deg,rgba(34,197,94,0.1)_1px,transparent_1px),linear-gradient(0deg,rgba(34,197,94,0.1)_1px,transparent_1px)] [background-size:50px_50px] animate-pulse" />
<div className="pointer-events-none absolute top-20 left-10 w-72 h-72 bg-green-500/20 rounded-full blur-3xl animate-blob" />
<div className="pointer-events-none absolute bottom-20 right-10 w-72 h-72 bg-green-600/10 rounded-full blur-3xl animate-blob animation-delay-2000" />
<div className="pointer-events-none absolute top-20 left-10 w-96 h-96 bg-green-500/20 rounded-full blur-3xl animate-blob" />
<div className="pointer-events-none absolute bottom-20 right-10 w-96 h-96 bg-emerald-600/15 rounded-full blur-3xl animate-blob animation-delay-2000" />
<main className="relative z-10">
{/* Hero Section */}
<section className="py-16 lg:py-24">
<div className="container mx-auto max-w-6xl px-4">
<div className="mb-8 flex justify-center">
<img
src="https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2Fcd3534c1caa0497abfd44224040c6059?format=webp&width=800"
alt="GameForge Logo"
className="h-24 w-24 object-contain drop-shadow-lg"
/>
</div>
<Badge className="border-green-400/40 bg-green-500/10 text-green-300 shadow-[0_0_20px_rgba(34,197,94,0.2)] mb-6">
<Gamepad2 className="h-4 w-4 mr-2" />
GameForge Production
</Badge>
<section className="py-20 lg:py-32">
<div className="container mx-auto max-w-7xl px-4">
<div className="text-center space-y-8">
<div className="flex justify-center mb-6">
<img
src="https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2Fcd3534c1caa0497abfd44224040c6059?format=webp&width=800"
alt="GameForge Logo"
className="h-32 w-32 object-contain drop-shadow-[0_0_40px_rgba(34,197,94,0.5)]"
/>
</div>
<div className="space-y-6 mb-12">
<h1 className={`text-4xl lg:text-6xl font-black text-green-300 leading-tight ${theme.fontClass}`}>
Shipping Games Monthly
</h1>
<p className="text-xl text-green-100/70 max-w-3xl">
AeThex GameForge is our internal production studio that
demonstrates disciplined, efficient development. We ship a new
game every month using proprietary development pipelines and
tools from Labs, proving our technology's real-world impact
while maintaining controlled burn rates.
</p>
</div>
<div className="space-y-6 max-w-5xl mx-auto">
<Badge className="border-green-400/50 bg-green-500/10 text-green-300 text-base px-4 py-1.5">
<Gamepad2 className="h-5 w-5 mr-2" />
Foundation's Game Production Studio
</Badge>
<div className="flex flex-col sm:flex-row gap-4 flex-wrap">
<Button
className="bg-green-400 text-black hover:bg-green-300"
onClick={() => navigate("/gameforge/view-portfolio")}
>
View Recent Releases
<ArrowRight className="ml-2 h-4 w-4" />
</Button>
<Button
variant="outline"
className="border-green-400/40 text-green-300 hover:bg-green-500/10"
onClick={() => navigate("/gameforge/join-gameforge")}
>
Meet the Team
</Button>
<Button
variant="outline"
className="border-green-400/40 text-green-300 hover:bg-green-500/10"
onClick={() => navigate("/creators?arm=gameforge")}
>
Browse GameForge Creators
<ArrowRight className="ml-2 h-4 w-4" />
</Button>
<Button
variant="outline"
className="border-green-400/40 text-green-300 hover:bg-green-500/10"
onClick={() => navigate("/opportunities?arm=gameforge")}
>
Find GameDev Jobs
<ArrowRight className="ml-2 h-4 w-4" />
</Button>
<h1 className={`text-5xl md:text-6xl lg:text-7xl font-black text-green-300 leading-tight ${theme.fontClass}`}>
Ship Games Every Month
</h1>
<p className="text-xl md:text-2xl text-green-100/80 max-w-3xl mx-auto leading-relaxed">
AeThex GameForge is a master-apprentice mentorship program where teams of 5 developers ship real games in 30-day sprints.
</p>
{/* TL;DR Section */}
<div className="max-w-3xl mx-auto">
<button
onClick={() => setShowTldr(!showTldr)}
className="flex items-center gap-2 text-green-400 hover:text-green-300 transition-colors mx-auto"
>
<Zap className="h-5 w-5" />
<span className="font-semibold">{showTldr ? 'Hide' : 'Show'} Quick Summary</span>
<ArrowRight className={`h-4 w-4 transition-transform ${showTldr ? 'rotate-90' : ''}`} />
</button>
{showTldr && (
<div className="mt-4 p-6 bg-green-950/40 border border-green-400/30 rounded-lg text-left space-y-3 animate-slide-down">
<h3 className="text-lg font-bold text-green-300">TL;DR</h3>
<ul className="space-y-2 text-green-100/90">
<li className="flex gap-3"><span className="text-green-400">✦</span> <span>30-day game development sprints</span></li>
<li className="flex gap-3"><span className="text-green-400">✦</span> <span>5-person teams (1 mentor + 4 developers)</span></li>
<li className="flex gap-3"><span className="text-green-400">✦</span> <span>Ship real games to aethex.fun</span></li>
<li className="flex gap-3"><span className="text-green-400">✦</span> <span>Build your portfolio on aethex.me passport</span></li>
<li className="flex gap-3"><span className="text-green-400">✦</span> <span>Part of AeThex Foundation (501c3 non-profit)</span></li>
</ul>
</div>
)}
</div>
</div>
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center pt-4">
<Button
size="lg"
className="bg-green-400 text-black hover:bg-green-300 shadow-[0_0_40px_rgba(34,197,94,0.3)] h-14 px-8 text-lg"
onClick={() => window.location.href = 'https://aethex.foundation/gameforge'}
>
<ExternalLink className="mr-2 h-5 w-5" />
Visit GameForge Platform
</Button>
<Button
size="lg"
variant="outline"
className="border-green-400/50 text-green-300 hover:bg-green-500/10 h-14 px-8 text-lg"
onClick={() => window.location.href = 'https://aethex.foundation'}
>
About Foundation
</Button>
</div>
</div>
</div>
</section>
{/* Production Stats */}
<section className="py-12 border-t border-green-400/10 bg-black/40">
<div className="container mx-auto max-w-6xl px-4">
<div className="grid md:grid-cols-4 gap-6">
{productionStats.map((stat, idx) => (
<Card
key={idx}
className="bg-green-950/30 border-green-400/40"
>
<CardContent className="pt-6 text-center">
<p className="text-3xl font-black text-green-400 mb-2">
{/* Stats Section */}
<section className="py-16 border-y border-green-400/10 bg-black/40 backdrop-blur-sm">
<div className="container mx-auto max-w-7xl px-4">
<div className="grid grid-cols-2 md:grid-cols-4 gap-6">
{productionStats.map((stat, idx) => {
const Icon = stat.icon;
return (
<div
key={idx}
className="text-center space-y-3 p-6 rounded-lg bg-green-950/30 border border-green-400/20 hover:border-green-400/40 transition-all hover:scale-105"
>
<Icon className="h-8 w-8 text-green-400 mx-auto" />
<p className="text-4xl md:text-5xl font-black text-green-400">
{stat.value}
</p>
<p className="text-sm text-green-200/70">{stat.label}</p>
</CardContent>
</Card>
))}
</div>
);
})}
</div>
</div>
</section>
{/* Upcoming Releases */}
<section className="py-16">
{/* Features Grid */}
<section className="py-20 lg:py-28">
<div className="container mx-auto max-w-7xl px-4">
<div className="text-center mb-16">
<h2 className="text-4xl md:text-5xl font-black text-green-300 mb-4">
Why Join GameForge?
</h2>
<p className="text-xl text-green-100/70 max-w-3xl mx-auto">
The fastest way to build a real game development portfolio and prove you can ship.
</p>
</div>
<div className="grid md:grid-cols-2 gap-8">
{features.map((feature, idx) => {
const Icon = feature.icon;
return (
<Card
key={idx}
className="bg-green-950/20 border-green-400/30 hover:border-green-400/60 transition-all hover:scale-105 group"
>
<CardHeader>
<div className={`w-14 h-14 rounded-xl bg-gradient-to-r ${feature.gradient} flex items-center justify-center mb-4 group-hover:scale-110 transition-transform`}>
<Icon className="h-7 w-7 text-white" />
</div>
<CardTitle className="text-2xl text-green-300">
{feature.title}
</CardTitle>
</CardHeader>
<CardContent>
<p className="text-green-200/80 leading-relaxed">
{feature.description}
</p>
</CardContent>
</Card>
);
})}
</div>
</div>
</section>
{/* How It Works */}
<section className="py-20 lg:py-28 border-t border-green-400/10 bg-black/40">
<div className="container mx-auto max-w-6xl px-4">
<h2 className="text-3xl font-bold text-green-300 mb-12 flex items-center gap-2">
<Calendar className="h-8 w-8" />
Upcoming Releases
</h2>
<div className="text-center mb-16">
<h2 className="text-4xl md:text-5xl font-black text-green-300 mb-4">
The 30-Day Sprint
</h2>
<p className="text-xl text-green-100/70">
From concept to shipped game in one month
</p>
</div>
<div className="space-y-6">
{monthlyReleases.map((release, idx) => (
<Card
key={idx}
className="bg-green-950/20 border-green-400/30 hover:border-green-400/60 transition-all"
>
<CardContent className="pt-6">
<div className="grid md:grid-cols-2 gap-6">
<div>
<Badge className="bg-green-500/20 text-green-300 border border-green-400/40 mb-3">
{release.month}
</Badge>
<h3 className="text-xl font-bold text-green-300 mb-2">
{release.title}
</h3>
<p className="text-sm text-green-200/70 mb-3">
{release.genre}
</p>
<div className="flex items-center gap-2">
<Users className="h-4 w-4 text-green-400" />
<span className="text-sm text-green-200/70">
{release.team}
</span>
</div>
</div>
<div>
<Badge className="bg-green-500/30 text-green-200 border border-green-400/60 mb-3">
{release.status}
</Badge>
<p className="text-sm text-green-200/80">
{release.highlights}
</p>
</div>
</div>
</CardContent>
</Card>
))}
</div>
</div>
</section>
{/* Past Releases */}
<section className="py-16 border-t border-green-400/10 bg-black/40">
<div className="container mx-auto max-w-6xl px-4">
<h2 className="text-3xl font-bold text-green-300 mb-12">
Shipped This Year
</h2>
<div className="grid md:grid-cols-3 gap-6">
{pastReleases.map((game, idx) => (
<Card
key={idx}
className="bg-green-950/20 border-green-400/30"
>
<CardContent className="pt-6 space-y-4">
<div>
<h3 className="text-lg font-bold text-green-300 mb-1">
{game.title}
</h3>
<Badge className="bg-green-500/20 text-green-300 border border-green-400/40 text-xs">
{game.genre}
</Badge>
</div>
<div className="space-y-2 text-sm text-green-200/70">
<p>Released: {game.releaseDate}</p>
<p>{game.players} active players</p>
<div className="flex items-center gap-2">
<span>⭐ {game.rating}/5</span>
</div>
</div>
</CardContent>
</Card>
))}
</div>
</div>
</section>
{/* Production Process */}
<section className="py-16">
<div className="container mx-auto max-w-6xl px-4">
<h2 className="text-3xl font-bold text-green-300 mb-12">
Our Process
</h2>
<div className="space-y-4">
{[
{
phase: "Ideation",
duration: "1 week",
description: "Brainstorm and validate game concepts",
week: "Week 1",
title: "Ideation & Prototyping",
description: "Define game concept, create GDD, build playable prototype",
tasks: ["Team formation", "Concept validation", "Core mechanics test"]
},
{
phase: "Prototyping",
duration: "1 week",
description:
"Build playable prototype to test core mechanics",
week: "Week 2",
title: "Development Sprint",
description: "Parallel production: code, art, sound, narrative",
tasks: ["Feature implementation", "Asset creation", "Level design"]
},
{
phase: "Development",
duration: "3 weeks",
description:
"Full production with parallel art, code, and design",
week: "Week 3",
title: "Polish & Integration",
description: "Integrate assets, refine gameplay, balance mechanics",
tasks: ["Bug fixing", "Playtesting", "Performance optimization"]
},
{
phase: "Polish & QA",
duration: "1 week",
description: "Bug fixes, optimization, and player testing",
week: "Week 4",
title: "QA & Launch",
description: "Final testing, deployment, and post-launch monitoring",
tasks: ["Final QA", "Ship to aethex.fun", "Community showcase"]
},
{
phase: "Launch",
duration: "1 day",
description:
"Ship to production and monitor for first 24 hours",
},
].map((item, idx) => (
].map((phase, idx) => (
<Card
key={idx}
className="bg-green-950/20 border-green-400/30"
className="bg-green-950/20 border-green-400/30 hover:border-green-400/50 transition-all"
>
<CardContent className="pt-6">
<div className="flex items-center gap-6">
<div className="h-12 w-12 rounded-lg bg-gradient-to-r from-green-500 to-emerald-500 flex items-center justify-center text-white font-bold flex-shrink-0">
{idx + 1}
<CardContent className="p-8">
<div className="flex gap-6 items-start">
<div className="flex-shrink-0">
<div className="h-16 w-16 rounded-xl bg-gradient-to-br from-green-500 to-emerald-500 flex items-center justify-center text-2xl font-black text-white shadow-lg">
{idx + 1}
</div>
</div>
<div className="flex-1">
<h3 className="font-bold text-green-300 mb-1">
{item.phase}
</h3>
<p className="text-sm text-green-200/70">
{item.description}
</p>
<div className="flex-1 space-y-3">
<div>
<Badge className="bg-green-500/20 text-green-300 border border-green-400/40 mb-2">
{phase.week}
</Badge>
<h3 className="text-2xl font-bold text-green-300 mb-2">
{phase.title}
</h3>
<p className="text-green-200/80 text-lg">
{phase.description}
</p>
</div>
<div className="flex flex-wrap gap-2">
{phase.tasks.map((task, taskIdx) => (
<Badge key={taskIdx} variant="outline" className="border-green-400/30 text-green-300 text-sm">
{task}
</Badge>
))}
</div>
</div>
<Badge className="bg-green-500/20 text-green-300 border border-green-400/40">
{item.duration}
</Badge>
</div>
</CardContent>
</Card>
@ -349,27 +350,134 @@ export default function GameForge() {
</div>
</section>
{/* Team CTA */}
<section className="py-16 border-t border-green-400/10">
<div className="container mx-auto max-w-4xl px-4 text-center">
<h2 className="text-3xl font-bold text-green-300 mb-4">
Part of Our Shipping Culture
</h2>
<p className="text-lg text-green-100/80 mb-8">
Our team represents the best of game development talent. Meet
the people who make monthly shipping possible.
</p>
<Button
className="bg-green-400 text-black shadow-[0_0_30px_rgba(34,197,94,0.35)] hover:bg-green-300"
onClick={() => navigate("/gameforge/join-gameforge")}
>
Meet the Team
<ArrowRight className="ml-2 h-4 w-4" />
</Button>
{/* Team Roles */}
<section className="py-20 lg:py-28">
<div className="container mx-auto max-w-7xl px-4">
<div className="text-center mb-16">
<h2 className="text-4xl md:text-5xl font-black text-green-300 mb-4">
Squad Structure
</h2>
<p className="text-xl text-green-100/70">
Every team has 5 members with specialized roles
</p>
</div>
<div className="grid sm:grid-cols-2 lg:grid-cols-5 gap-6">
{[
{ role: "Forge Master", icon: Target, description: "Mentor & Lead", color: "from-green-500 to-emerald-500" },
{ role: "Scripter", icon: Code, description: "Programming", color: "from-blue-500 to-cyan-500" },
{ role: "Builder", icon: Palette, description: "Art & Design", color: "from-purple-500 to-pink-500" },
{ role: "Sound Designer", icon: Music, description: "Audio & Music", color: "from-orange-500 to-red-500" },
{ role: "Narrative", icon: Users, description: "Story & UX", color: "from-yellow-500 to-amber-500" },
].map((member, idx) => {
const Icon = member.icon;
return (
<Card
key={idx}
className="bg-green-950/20 border-green-400/30 hover:border-green-400/60 transition-all hover:scale-105 text-center"
>
<CardContent className="pt-8 pb-6 space-y-4">
<div className={`w-16 h-16 rounded-xl bg-gradient-to-r ${member.color} flex items-center justify-center mx-auto shadow-lg`}>
<Icon className="h-8 w-8 text-white" />
</div>
<div>
<h3 className="text-lg font-bold text-green-300 mb-1">
{member.role}
</h3>
<p className="text-sm text-green-200/70">
{member.description}
</p>
</div>
</CardContent>
</Card>
);
})}
</div>
</div>
</section>
{/* CTA Section */}
<section className="py-20 lg:py-32 border-t border-green-400/10">
<div className="container mx-auto max-w-5xl px-4">
<Card className="bg-gradient-to-r from-green-600/20 via-emerald-600/10 to-green-600/20 border-green-500/50 overflow-hidden relative">
<div className="absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(34,197,94,0.1)_0%,transparent_70%)]" />
<CardContent className="p-12 lg:p-16 text-center space-y-8 relative z-10">
<div className="space-y-4">
<h2 className="text-4xl md:text-5xl font-black text-white">
Ready to Ship Your First Game?
</h2>
<p className="text-xl text-green-100 max-w-2xl mx-auto">
Join the next GameForge cohort and build your portfolio with real, shipped games.
</p>
</div>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Button
size="lg"
className="bg-green-400 text-black hover:bg-green-300 shadow-[0_0_40px_rgba(34,197,94,0.4)] h-14 px-8 text-lg"
onClick={() => window.location.href = 'https://aethex.foundation/gameforge'}
>
<Rocket className="mr-2 h-5 w-5" />
Join GameForge Now
</Button>
<Button
size="lg"
variant="outline"
className="border-green-400/50 text-green-300 hover:bg-green-500/10 h-14 px-8 text-lg"
onClick={() => window.location.href = 'https://aethex.foundation'}
>
Learn About Foundation
</Button>
</div>
<p className="text-sm text-green-300/60 pt-4">
Part of the AeThex Foundation 501(c)(3) non-profit
</p>
</CardContent>
</Card>
</div>
</section>
</main>
</div>
{/* Exit Intent Modal */}
{showExitModal && (
<div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/80 backdrop-blur-sm animate-fade-in">
<div className="bg-gradient-to-br from-green-950 to-black border-2 border-green-400/50 rounded-xl p-8 max-w-lg mx-4 shadow-2xl shadow-green-500/20 animate-slide-up">
<div className="text-center space-y-6">
<div className="flex justify-center">
<div className="w-20 h-20 rounded-full bg-green-400/20 flex items-center justify-center">
<Rocket className="h-10 w-10 text-green-400" />
</div>
</div>
<div className="space-y-3">
<h3 className="text-2xl font-black text-green-300">Ready to Ship Games?</h3>
<p className="text-green-100/80">
Join GameForge and start building your portfolio with real, shipped games in 30-day sprints.
</p>
</div>
<div className="flex flex-col sm:flex-row gap-3">
<Button
size="lg"
className="flex-1 bg-green-400 text-black hover:bg-green-300 h-12"
onClick={() => window.location.href = 'https://aethex.foundation/gameforge'}
>
<ExternalLink className="h-5 w-5 mr-2" />
Visit GameForge
</Button>
<Button
size="lg"
variant="outline"
className="flex-1 border-green-400/50 text-green-300 hover:bg-green-500/10 h-12"
onClick={() => setShowExitModal(false)}
>
Keep Reading
</Button>
</div>
</div>
</div>
</div>
)}
</Layout>
);
}

409
client/pages/GameForge_old.tsx Normal file
View file

@ -0,0 +1,409 @@
import Layout from "@/components/Layout";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { useArmTheme } from "@/contexts/ArmThemeContext";
import {
Gamepad2,
Calendar,
Users,
TrendingUp,
Rocket,
ArrowRight,
ExternalLink,
} from "lucide-react";
import { useNavigate } from "react-router-dom";
import { useEffect, useState, useRef } from "react";
import LoadingScreen from "@/components/LoadingScreen";
import { useArmToast } from "@/hooks/use-arm-toast";
export default function GameForge() {
const navigate = useNavigate();
const { theme } = useArmTheme();
const armToast = useArmToast();
const [isLoading, setIsLoading] = useState(true);
const toastShownRef = useRef(false);
useEffect(() => {
const timer = setTimeout(() => {
setIsLoading(false);
if (!toastShownRef.current) {
armToast.system("GameForge engine initialized");
toastShownRef.current = true;
}
}, 900);
return () => clearTimeout(timer);
}, [armToast]);
if (isLoading) {
return (
<LoadingScreen
message="Booting GameForge Engine..."
showProgress={true}
duration={900}
accentColor="from-green-500 to-green-400"
armLogo="https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2Fcd3534c1caa0497abfd44224040c6059?format=webp&width=800"
/>
);
}
const monthlyReleases = [
{
month: "January 2025",
title: "Pixel Quest: Reckoning",
genre: "Action-Adventure",
team: "Green Squadron",
status: "Shipping Now",
highlights: "New combat system, 50 levels, multiplayer beta",
},
{
month: "February 2025",
title: "Logic Master Pro",
genre: "Puzzle",
team: "Logic Lab",
status: "Pre-Production",
highlights: "Daily challenges, leaderboards, cross-platform",
},
{
month: "March 2025",
title: "Mystic Realms: Awakening",
genre: "RPG",
team: "Adventure Wing",
status: "Development",
highlights: "Story driven, 100+ hours, procedural dungeons",
},
];
const pastReleases = [
{
title: "Battle Royale X",
genre: "Action",
releaseDate: "Dec 2024",
players: "50K+",
rating: 4.7,
},
{
title: "Casual Match",
genre: "Puzzle",
releaseDate: "Nov 2024",
players: "100K+",
rating: 4.5,
},
{
title: "Speedrun Challenge",
genre: "Action",
releaseDate: "Oct 2024",
players: "35K+",
rating: 4.8,
},
];
const productionStats = [
{ label: "Games Shipped", value: "15+" },
{ label: "Monthly Cycle", value: "32 days" },
{ label: "Total Players", value: "200K+" },
{ label: "Team Size", value: "25 devs" },
];
return (
<Layout>
<div className="relative min-h-screen bg-black text-white overflow-hidden">
{/* Informational Banner */}
<div className="bg-green-500/10 border-b border-green-400/30 py-3">
<div className="container mx-auto max-w-6xl px-4">
<div className="flex items-center justify-between gap-4 flex-wrap">
<div className="flex items-center gap-3">
<ExternalLink className="h-5 w-5 text-green-400" />
<p className="text-sm text-green-200">
This is an <strong>informational page</strong>. GameForge is hosted at{" "}
<a href="https://aethex.foundation/gameforge" className="underline font-semibold hover:text-green-300">
aethex.foundation/gameforge
</a>
</p>
</div>
<Button
size="sm"
className="bg-green-400 text-black hover:bg-green-300"
onClick={() => window.location.href = 'https://aethex.foundation/gameforge'}
>
<ExternalLink className="h-4 w-4 mr-2" />
Go to Platform
</Button>
</div>
</div>
</div>
{/* Background */}
<div className="pointer-events-none absolute inset-0 opacity-[0.12] [background-image:radial-gradient(circle_at_top,#22c55e_0,rgba(0,0,0,0.45)_55%,rgba(0,0,0,0.9)_100%)]" />
<div className="pointer-events-none absolute inset-0 bg-[linear-gradient(transparent_0,transparent_calc(100%-1px),rgba(34,197,94,0.05)_calc(100%-1px))] bg-[length:100%_32px]" />
<div className="pointer-events-none absolute inset-0 opacity-[0.08] [background-image:linear-gradient(90deg,rgba(34,197,94,0.1)_1px,transparent_1px),linear-gradient(0deg,rgba(34,197,94,0.1)_1px,transparent_1px)] [background-size:50px_50px] animate-pulse" />
<div className="pointer-events-none absolute top-20 left-10 w-72 h-72 bg-green-500/20 rounded-full blur-3xl animate-blob" />
<div className="pointer-events-none absolute bottom-20 right-10 w-72 h-72 bg-green-600/10 rounded-full blur-3xl animate-blob animation-delay-2000" />
<main className="relative z-10">
{/* Hero Section */}
<section className="py-16 lg:py-24">
<div className="container mx-auto max-w-6xl px-4">
<div className="mb-8 flex justify-center">
<img
src="https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2Fcd3534c1caa0497abfd44224040c6059?format=webp&width=800"
alt="GameForge Logo"
className="h-24 w-24 object-contain drop-shadow-lg"
/>
</div>
<Badge className="border-green-400/40 bg-green-500/10 text-green-300 shadow-[0_0_20px_rgba(34,197,94,0.2)] mb-6">
<Gamepad2 className="h-4 w-4 mr-2" />
GameForge Production
</Badge>
<div className="space-y-6 mb-12">
<h1 className={`text-4xl md:text-5xl lg:text-6xl font-black text-green-300 leading-tight ${theme.fontClass}`}>
Shipping Games Monthly
</h1>
<p className="text-xl text-green-100/70 max-w-3xl">
AeThex GameForge is our internal production studio that
demonstrates disciplined, efficient development. We ship a new
game every month using proprietary development pipelines and
tools from Labs, proving our technology's real-world impact
while maintaining controlled burn rates.
</p>
<div className="flex items-center gap-3 p-4 bg-green-500/10 border border-green-400/30 rounded-lg">
<ExternalLink className="h-5 w-5 text-green-400" />
<p className="text-sm text-green-200">
<strong>GameForge is hosted at aethex.foundation</strong> as part of the non-profit Foundation entity.
This page provides an overview—visit the platform for full access.
</p>
</div>
</div>
<div className="flex flex-col sm:flex-row gap-4 flex-wrap">
<Button
className="bg-green-400 text-black hover:bg-green-300 shadow-lg"
onClick={() => window.location.href = 'https://aethex.foundation/gameforge'}
>
<ExternalLink className="mr-2 h-5 w-5" />
Visit GameForge Platform
<ArrowRight className="ml-2 h-4 w-4" />
</Button>
<Button
variant="outline"
className="border-green-400/40 text-green-300 hover:bg-green-500/10"
onClick={() => navigate("/gameforge/join-gameforge")}
>
Meet the Team
</Button>
<Button
variant="outline"
className="border-green-400/40 text-green-300 hover:bg-green-500/10"
onClick={() => navigate("/creators?arm=gameforge")}
>
Browse GameForge Creators
<ArrowRight className="ml-2 h-4 w-4" />
</Button>
<Button
variant="outline"
className="border-green-400/40 text-green-300 hover:bg-green-500/10"
onClick={() => navigate("/opportunities?arm=gameforge")}
>
Find GameDev Jobs
<ArrowRight className="ml-2 h-4 w-4" />
</Button>
</div>
</div>
</section>
{/* Production Stats */}
<section className="py-12 border-t border-green-400/10 bg-black/40">
<div className="container mx-auto max-w-6xl px-4">
<div className="grid grid-cols-2 md:grid-cols-4 gap-6">
{productionStats.map((stat, idx) => (
<Card
key={idx}
className="bg-green-950/30 border-green-400/40"
>
<CardContent className="pt-6 text-center">
<p className="text-3xl font-black text-green-400 mb-2">
{stat.value}
</p>
<p className="text-sm text-green-200/70">{stat.label}</p>
</CardContent>
</Card>
))}
</div>
</div>
</section>
{/* Upcoming Releases */}
<section className="py-16">
<div className="container mx-auto max-w-6xl px-4">
<h2 className="text-3xl font-bold text-green-300 mb-12 flex items-center gap-2">
<Calendar className="h-8 w-8" />
Upcoming Releases
</h2>
<div className="space-y-6">
{monthlyReleases.map((release, idx) => (
<Card
key={idx}
className="bg-green-950/20 border-green-400/30 hover:border-green-400/60 transition-all"
>
<CardContent className="pt-6">
<div className="grid md:grid-cols-2 gap-6">
<div>
<Badge className="bg-green-500/20 text-green-300 border border-green-400/40 mb-3">
{release.month}
</Badge>
<h3 className="text-xl font-bold text-green-300 mb-2">
{release.title}
</h3>
<p className="text-sm text-green-200/70 mb-3">
{release.genre}
</p>
<div className="flex items-center gap-2">
<Users className="h-4 w-4 text-green-400" />
<span className="text-sm text-green-200/70">
{release.team}
</span>
</div>
</div>
<div>
<Badge className="bg-green-500/30 text-green-200 border border-green-400/60 mb-3">
{release.status}
</Badge>
<p className="text-sm text-green-200/80">
{release.highlights}
</p>
</div>
</div>
</CardContent>
</Card>
))}
</div>
</div>
</section>
{/* Past Releases */}
<section className="py-16 border-t border-green-400/10 bg-black/40">
<div className="container mx-auto max-w-6xl px-4">
<h2 className="text-3xl font-bold text-green-300 mb-12">
Shipped This Year
</h2>
<div className="grid md:grid-cols-3 gap-6">
{pastReleases.map((game, idx) => (
<Card
key={idx}
className="bg-green-950/20 border-green-400/30"
>
<CardContent className="pt-6 space-y-4">
<div>
<h3 className="text-lg font-bold text-green-300 mb-1">
{game.title}
</h3>
<Badge className="bg-green-500/20 text-green-300 border border-green-400/40 text-xs">
{game.genre}
</Badge>
</div>
<div className="space-y-2 text-sm text-green-200/70">
<p>Released: {game.releaseDate}</p>
<p>{game.players} active players</p>
<div className="flex items-center gap-2">
<span>⭐ {game.rating}/5</span>
</div>
</div>
</CardContent>
</Card>
))}
</div>
</div>
</section>
{/* Production Process */}
<section className="py-16">
<div className="container mx-auto max-w-6xl px-4">
<h2 className="text-3xl font-bold text-green-300 mb-12">
Our Process
</h2>
<div className="space-y-4">
{[
{
phase: "Ideation",
duration: "1 week",
description: "Brainstorm and validate game concepts",
},
{
phase: "Prototyping",
duration: "1 week",
description:
"Build playable prototype to test core mechanics",
},
{
phase: "Development",
duration: "3 weeks",
description:
"Full production with parallel art, code, and design",
},
{
phase: "Polish & QA",
duration: "1 week",
description: "Bug fixes, optimization, and player testing",
},
{
phase: "Launch",
duration: "1 day",
description:
"Ship to production and monitor for first 24 hours",
},
].map((item, idx) => (
<Card
key={idx}
className="bg-green-950/20 border-green-400/30"
>
<CardContent className="pt-6">
<div className="flex items-center gap-6">
<div className="h-12 w-12 rounded-lg bg-gradient-to-r from-green-500 to-emerald-500 flex items-center justify-center text-white font-bold flex-shrink-0">
{idx + 1}
</div>
<div className="flex-1">
<h3 className="font-bold text-green-300 mb-1">
{item.phase}
</h3>
<p className="text-sm text-green-200/70">
{item.description}
</p>
</div>
<Badge className="bg-green-500/20 text-green-300 border border-green-400/40">
{item.duration}
</Badge>
</div>
</CardContent>
</Card>
))}
</div>
</div>
</section>
{/* Team CTA */}
<section className="py-16 border-t border-green-400/10">
<div className="container mx-auto max-w-4xl px-4 text-center">
<h2 className="text-3xl font-bold text-green-300 mb-4">
Part of Our Shipping Culture
</h2>
<p className="text-lg text-green-100/80 mb-8">
Our team represents the best of game development talent. Meet
the people who make monthly shipping possible.
</p>
<Button
className="bg-green-400 text-black shadow-[0_0_30px_rgba(34,197,94,0.35)] hover:bg-green-300"
onClick={() => navigate("/gameforge/join-gameforge")}
>
Meet the Team
<ArrowRight className="ml-2 h-4 w-4" />
</Button>
</div>
</section>
</main>
</div>
</Layout>
);
}

4
client/pages/Index.tsx
View file

@ -85,7 +85,7 @@ const features = [
{
icon: Layers,
title: "Cross-Platform Integration Layer",
description: "One unified API to build across Roblox, Minecraft, Meta Horizon, Fortnite, Zepeto, and more—no more managing separate platform SDKs or gated gardens",
description: "One unified API to build across Roblox, VRChat, RecRoom, Spatial, Decentraland, The Sandbox, Minecraft, Meta Horizon, Fortnite, and Zepeto—no more managing separate platform SDKs or gated gardens",
},
{
icon: Code2,
@ -110,7 +110,7 @@ const features = [
{
icon: Rocket,
title: "Ship Everywhere, Fast",
description: "150+ cross-platform code examples, pre-built templates, OAuth integration, Supabase backend, and one-command deployment to every metaverse",
description: "150+ cross-platform code examples, pre-built templates for VRChat, RecRoom, Spatial, Decentraland, The Sandbox, Roblox, and more—OAuth integration, Supabase backend, and one-command deployment to every metaverse",
},
];

181
client/pages/Labs.tsx
View file

@ -23,6 +23,8 @@ export default function Labs() {
const { theme } = useArmTheme();
const armToast = useArmToast();
const [isLoading, setIsLoading] = useState(true);
const [showTldr, setShowTldr] = useState(false);
const [showExitModal, setShowExitModal] = useState(false);
const toastShownRef = useRef(false);
useEffect(() => {
@ -37,6 +39,18 @@ export default function Labs() {
return () => clearTimeout(timer);
}, [armToast]);
// Exit intent detection
useEffect(() => {
const handleMouseLeave = (e: MouseEvent) => {
if (e.clientY <= 0 && !showExitModal) {
setShowExitModal(true);
}
};
document.addEventListener('mouseleave', handleMouseLeave);
return () => document.removeEventListener('mouseleave', handleMouseLeave);
}, [showExitModal]);
if (isLoading) {
return (
<LoadingScreen
@ -112,6 +126,31 @@ export default function Labs() {
return (
<Layout>
<div className="relative min-h-screen bg-black text-white overflow-hidden">
{/* Persistent Info Banner */}
<div className="bg-yellow-500/10 border-b border-yellow-400/30 py-3 sticky top-0 z-50 backdrop-blur-sm">
<div className="container mx-auto max-w-7xl px-4">
<div className="flex items-center justify-between gap-4 flex-wrap">
<div className="flex items-center gap-3">
<ExternalLink className="h-5 w-5 text-yellow-400" />
<p className="text-sm text-yellow-200">
Labs is hosted at{" "}
<a href="https://aethex.studio" className="underline font-semibold hover:text-yellow-300">
aethex.studio
</a>
</p>
</div>
<Button
size="sm"
className="bg-yellow-400 text-black hover:bg-yellow-300"
onClick={() => window.location.href = 'https://aethex.studio'}
>
<ExternalLink className="h-4 w-4 mr-2" />
Visit Studio
</Button>
</div>
</div>
</div>
{/* Cyberpunk Background Effects */}
<div className="pointer-events-none absolute inset-0 opacity-[0.12] [background-image:radial-gradient(circle_at_top,#facc15_0,rgba(0,0,0,0.45)_55%,rgba(0,0,0,0.9)_100%)]" />
<div className="pointer-events-none absolute inset-0 bg-[linear-gradient(transparent_0,transparent_calc(100%-1px),rgba(250,204,21,0.05)_calc(100%-1px))] bg-[length:100%_32px]" />
@ -120,82 +159,75 @@ export default function Labs() {
<div className="pointer-events-none absolute bottom-20 right-10 w-96 h-96 bg-yellow-600/10 rounded-full mix-blend-multiply filter blur-3xl animate-pulse" />
<main className="relative z-10">
{/* Hero Section - L.A.B.S. Interface */}
<section className="relative overflow-hidden py-20 lg:py-28 border-b border-yellow-400/10">
<div className="container mx-auto max-w-6xl px-4 text-center">
<div className="mx-auto flex max-w-3xl flex-col items-center gap-8">
<div className="flex justify-center mb-4">
{/* Hero Section */}
<section className="relative overflow-hidden py-20 lg:py-32">
<div className="container mx-auto max-w-7xl px-4">
<div className="text-center space-y-8">
<div className="flex justify-center mb-6">
<img
src="https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2Fd93f7113d34347469e74421c3a3412e5?format=webp&width=800"
alt="Labs Logo"
className="h-24 w-24 object-contain drop-shadow-lg filter drop-shadow-[0_0_20px_rgba(251,191,36,0.4)]"
className="h-32 w-32 object-contain drop-shadow-[0_0_50px_rgba(251,191,36,0.6)]"
/>
</div>
<Badge className="border-yellow-400/40 bg-yellow-500/10 text-yellow-300 shadow-[0_0_20px_rgba(250,204,21,0.2)]">
<span className="mr-2 inline-flex h-2 w-2 animate-pulse rounded-full bg-yellow-300" />
Research & Development Uplink
</Badge>
<div className="space-y-6 max-w-5xl mx-auto">
<Badge className="border-yellow-400/50 bg-yellow-500/10 text-yellow-300 text-base px-4 py-1.5">
<Sparkles className="h-5 w-5 mr-2" />
Advanced Research & Development
</Badge>
<div>
<h1 className={`text-5xl lg:text-7xl font-black text-yellow-300 leading-tight mb-4 ${theme.fontClass}`}>
<h1 className={`text-5xl md:text-6xl lg:text-7xl font-black text-yellow-300 leading-tight ${theme.fontClass}`}>
The Innovation Engine
</h1>
<p className="text-lg text-yellow-100/90 mb-4">
Real-time window into the AeThex Labs mainframe.
Breakthrough R&D pushing the boundaries of what's possible.
<p className="text-xl md:text-2xl text-yellow-100/80 max-w-3xl mx-auto leading-relaxed">
Breakthrough R&D pushing the boundaries of what's possible in software, AI, games, and digital experiences.
</p>
{/* TL;DR Section */}
<div className="max-w-3xl mx-auto">
<button
onClick={() => setShowTldr(!showTldr)}
className="flex items-center gap-2 text-yellow-400 hover:text-yellow-300 transition-colors mx-auto"
>
<Zap className="h-5 w-5" />
<span className="font-semibold">{showTldr ? 'Hide' : 'Show'} Quick Summary</span>
<ArrowRight className={`h-4 w-4 transition-transform ${showTldr ? 'rotate-90' : ''}`} />
</button>
{showTldr && (
<div className="mt-4 p-6 bg-yellow-950/40 border border-yellow-400/30 rounded-lg text-left space-y-3 animate-slide-down">
<h3 className="text-lg font-bold text-yellow-300">TL;DR</h3>
<ul className="space-y-2 text-yellow-100/90">
<li className="flex gap-3"><span className="text-yellow-400">✦</span> <span>Cutting-edge R&D across AI, games, and web tech</span></li>
<li className="flex gap-3"><span className="text-yellow-400">✦</span> <span>PhD-level researchers and innovative engineers</span></li>
<li className="flex gap-3"><span className="text-yellow-400">✦</span> <span>Published research and open-source contributions</span></li>
<li className="flex gap-3"><span className="text-yellow-400">✦</span> <span>Technology powering GameForge and platform tools</span></li>
<li className="flex gap-3"><span className="text-yellow-400">✦</span> <span>Visit aethex.studio for research papers & demos</span></li>
</ul>
</div>
)}
</div>
</div>
<p className="text-xl text-yellow-100/80 max-w-3xl">
AeThex Labs is our dedicated R&D pillar, focused on
breakthrough technologies that create lasting competitive
advantage. Applied R&D pushing the boundaries of what's
possible in software, games, and digital experiences.
</p>
<div className="flex flex-col sm:flex-row gap-4">
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center pt-4">
<Button
className="bg-yellow-400 text-black hover:bg-yellow-300 shadow-[0_0_30px_rgba(250,204,21,0.35)]"
onClick={() => navigate("/labs/explore-research")}
size="lg"
className="bg-yellow-400 text-black hover:bg-yellow-300 shadow-[0_0_40px_rgba(250,204,21,0.4)] h-14 px-8 text-lg"
onClick={() => window.location.href = 'https://aethex.studio'}
>
<Microscope className="mr-2 h-5 w-5" />
Explore Research
<ArrowRight className="ml-2 h-4 w-4" />
<ExternalLink className="mr-2 h-5 w-5" />
Visit Labs Studio
</Button>
<Button
size="lg"
variant="outline"
className="border-yellow-400/40 text-yellow-300 hover:bg-yellow-500/10"
className="border-yellow-400/50 text-yellow-300 hover:bg-yellow-500/10 h-14 px-8 text-lg"
onClick={() => navigate("/careers")}
>
Join Our Team
Join Research Team
</Button>
</div>
{/* Creator Network CTAs */}
<div className="pt-8 border-t border-yellow-400/20 w-full">
<p className="text-sm text-yellow-200/70 mb-4">
Explore our creator community:
</p>
<div className="flex flex-col sm:flex-row gap-3 justify-center">
<Button
size="sm"
variant="outline"
className="border-yellow-400/30 text-yellow-300 hover:bg-yellow-500/10"
onClick={() => navigate("/creators?arm=labs")}
>
Browse Labs Creators
</Button>
<Button
size="sm"
variant="outline"
className="border-yellow-400/30 text-yellow-300 hover:bg-yellow-500/10"
onClick={() => navigate("/opportunities?arm=labs")}
>
View Labs Opportunities
</Button>
</div>
</div>
</div>
</div>
</section>
@ -416,6 +448,45 @@ export default function Labs() {
</section>
</main>
</div>
{/* Exit Intent Modal */}
{showExitModal && (
<div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/80 backdrop-blur-sm animate-fade-in">
<div className="bg-gradient-to-br from-yellow-950 to-black border-2 border-yellow-400/50 rounded-xl p-8 max-w-lg mx-4 shadow-2xl shadow-yellow-500/20 animate-slide-up">
<div className="text-center space-y-6">
<div className="flex justify-center">
<div className="w-20 h-20 rounded-full bg-yellow-400/20 flex items-center justify-center">
<Sparkles className="h-10 w-10 text-yellow-400" />
</div>
</div>
<div className="space-y-3">
<h3 className="text-2xl font-black text-yellow-300">Explore Labs Research</h3>
<p className="text-yellow-100/80">
Dive into cutting-edge research, technical papers, and innovation demos at AeThex Labs Studio.
</p>
</div>
<div className="flex flex-col sm:flex-row gap-3">
<Button
size="lg"
className="flex-1 bg-yellow-400 text-black hover:bg-yellow-300 h-12"
onClick={() => window.location.href = 'https://aethex.studio'}
>
<ExternalLink className="h-5 w-5 mr-2" />
Visit Labs Studio
</Button>
<Button
size="lg"
variant="outline"
className="flex-1 border-yellow-400/50 text-yellow-300 hover:bg-yellow-500/10 h-12"
onClick={() => setShowExitModal(false)}
>
Keep Reading
</Button>
</div>
</div>
</div>
</div>
)}
</Layout>
);
}

276
client/pages/docs/DocsIntegrations.tsx
View file

@ -28,6 +28,12 @@ import {
Palette,
AlertTriangle,
FileText,
Headset,
Gamepad2,
Boxes,
Globe,
Cuboid,
Box,
} from "lucide-react";
const connectorFields = [
@ -107,6 +113,276 @@ export default function DocsIntegrations() {
</p>
</section>
{/* Game Engines */}
<section id="engines" className="space-y-6">
<div className="flex items-center gap-3">
<Brush className="h-6 w-6 text-blue-300" />
<h3 className="text-2xl font-semibold text-white">
Game Engines
</h3>
</div>
<p className="text-gray-400">
Integrate AeThex into your game engine of choice with native SDKs and code examples.
</p>
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
<Card className="bg-gradient-to-br from-blue-950/50 to-indigo-950/50 border-blue-500/30 hover:border-blue-400/60 transition-colors">
<CardHeader>
<CardTitle className="flex items-center gap-3 text-white">
<Gamepad2 className="h-6 w-6 text-blue-400" />
Godot Engine
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<CardDescription className="text-gray-300">
Open-source MIT-licensed engine with GDScript and C# support
</CardDescription>
<div className="flex flex-wrap gap-2">
<Badge variant="secondary" className="bg-blue-500/20 text-blue-200">GDScript</Badge>
<Badge variant="secondary" className="bg-blue-500/20 text-blue-200">C#</Badge>
<Badge variant="secondary" className="bg-blue-500/20 text-blue-200">Open Source</Badge>
</div>
<Button variant="outline" className="w-full border-blue-400/50 text-blue-300 hover:bg-blue-500/10" asChild>
<Link to="/docs/integrations/godot">
View Documentation
<ArrowRight className="ml-2 h-4 w-4" />
</Link>
</Button>
</CardContent>
</Card>
<Card className="bg-gradient-to-br from-green-950/50 to-emerald-950/50 border-green-500/30 hover:border-green-400/60 transition-colors">
<CardHeader>
<CardTitle className="flex items-center gap-3 text-white">
<Gamepad2 className="h-6 w-6 text-green-400" />
GameMaker
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<CardDescription className="text-gray-300">
Powerful 2D engine with GML scripting for rapid game development
</CardDescription>
<div className="flex flex-wrap gap-2">
<Badge variant="secondary" className="bg-green-500/20 text-green-200">GML</Badge>
<Badge variant="secondary" className="bg-green-500/20 text-green-200">2D</Badge>
<Badge variant="secondary" className="bg-green-500/20 text-green-200">Multi-Platform</Badge>
</div>
<Button variant="outline" className="w-full border-green-400/50 text-green-300 hover:bg-green-500/10" asChild>
<Link to="/docs/integrations/gamemaker">
View Documentation
<ArrowRight className="ml-2 h-4 w-4" />
</Link>
</Button>
</CardContent>
</Card>
</div>
</section>
{/* Distribution Platforms */}
<section id="distribution" className="space-y-6">
<div className="flex items-center gap-3">
<Globe className="h-6 w-6 text-pink-300" />
<h3 className="text-2xl font-semibold text-white">
Distribution Platforms
</h3>
</div>
<p className="text-gray-400">
Publish your games on indie storefronts with AeThex backend integration for cloud saves and cross-platform features.
</p>
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
<Card className="bg-gradient-to-br from-purple-950/50 to-violet-950/50 border-purple-500/30 hover:border-purple-400/60 transition-colors">
<CardHeader>
<CardTitle className="flex items-center gap-3 text-white">
<Gamepad2 className="h-6 w-6 text-purple-400" />
GameJolt
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<CardDescription className="text-gray-300">
Community gaming platform with 10M+ players and trophy sync
</CardDescription>
<div className="flex flex-wrap gap-2">
<Badge variant="secondary" className="bg-purple-500/20 text-purple-200">Trophies</Badge>
<Badge variant="secondary" className="bg-purple-500/20 text-purple-200">10M Players</Badge>
<Badge variant="secondary" className="bg-purple-500/20 text-purple-200">Free</Badge>
</div>
<Button variant="outline" className="w-full border-purple-400/50 text-purple-300 hover:bg-purple-500/10" asChild>
<Link to="/docs/integrations/gamejolt">
View Documentation
<ArrowRight className="ml-2 h-4 w-4" />
</Link>
</Button>
</CardContent>
</Card>
<Card className="bg-gradient-to-br from-pink-950/50 to-rose-950/50 border-pink-500/30 hover:border-pink-400/60 transition-colors">
<CardHeader>
<CardTitle className="flex items-center gap-3 text-white">
<Gamepad2 className="h-6 w-6 text-pink-400" />
Itch.io
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<CardDescription className="text-gray-300">
Indie marketplace with 500K+ games and flexible pay-what-you-want pricing
</CardDescription>
<div className="flex flex-wrap gap-2">
<Badge variant="secondary" className="bg-pink-500/20 text-pink-200">PWYW</Badge>
<Badge variant="secondary" className="bg-pink-500/20 text-pink-200">500K Games</Badge>
<Badge variant="secondary" className="bg-pink-500/20 text-pink-200">HTML5</Badge>
</div>
<Button variant="outline" className="w-full border-pink-400/50 text-pink-300 hover:bg-pink-500/10" asChild>
<Link to="/docs/integrations/itchio">
View Documentation
<ArrowRight className="ml-2 h-4 w-4" />
</Link>
</Button>
</CardContent>
</Card>
</div>
</section>
{/* Platform Integrations */}
<section id="platforms" className="space-y-6">
<div className="flex items-center gap-3">
<Boxes className="h-6 w-6 text-indigo-300" />
<h3 className="text-2xl font-semibold text-white">
Social VR & Metaverse Platforms
</h3>
</div>
<p className="text-gray-400">
Deploy your games and apps across social VR and metaverse platforms using AeThex's unified API.
</p>
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
<Card className="bg-gradient-to-br from-purple-950/50 to-indigo-950/50 border-purple-500/30 hover:border-purple-400/60 transition-colors">
<CardHeader>
<CardTitle className="flex items-center gap-3 text-white">
<Headset className="h-6 w-6 text-purple-400" />
VRChat
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<CardDescription className="text-gray-300">
Build immersive VR worlds with Udon scripting and cross-platform authentication
</CardDescription>
<div className="flex flex-wrap gap-2">
<Badge variant="secondary" className="bg-purple-500/20 text-purple-200">Unity</Badge>
<Badge variant="secondary" className="bg-purple-500/20 text-purple-200">Udon C#</Badge>
<Badge variant="secondary" className="bg-purple-500/20 text-purple-200">VR</Badge>
</div>
<Button variant="outline" className="w-full border-purple-400/50 text-purple-300 hover:bg-purple-500/10" asChild>
<Link to="/docs/integrations/vrchat">
View Documentation
<ArrowRight className="ml-2 h-4 w-4" />
</Link>
</Button>
</CardContent>
</Card>
<Card className="bg-gradient-to-br from-blue-950/50 to-cyan-950/50 border-blue-500/30 hover:border-blue-400/60 transition-colors">
<CardHeader>
<CardTitle className="flex items-center gap-3 text-white">
<Gamepad2 className="h-6 w-6 text-blue-400" />
RecRoom
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<CardDescription className="text-gray-300">
Create social games using Circuits visual scripting for VR and mobile
</CardDescription>
<div className="flex flex-wrap gap-2">
<Badge variant="secondary" className="bg-blue-500/20 text-blue-200">Circuits</Badge>
<Badge variant="secondary" className="bg-blue-500/20 text-blue-200">VR + Mobile</Badge>
<Badge variant="secondary" className="bg-blue-500/20 text-blue-200">Social</Badge>
</div>
<Button variant="outline" className="w-full border-blue-400/50 text-blue-300 hover:bg-blue-500/10" asChild>
<Link to="/docs/integrations/recroom">
View Documentation
<ArrowRight className="ml-2 h-4 w-4" />
</Link>
</Button>
</CardContent>
</Card>
<Card className="bg-gradient-to-br from-cyan-950/50 to-blue-950/50 border-cyan-500/30 hover:border-cyan-400/60 transition-colors">
<CardHeader>
<CardTitle className="flex items-center gap-3 text-white">
<Globe className="h-6 w-6 text-cyan-400" />
Spatial
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<CardDescription className="text-gray-300">
Build browser-based 3D experiences for VR, desktop, and mobile devices
</CardDescription>
<div className="flex flex-wrap gap-2">
<Badge variant="secondary" className="bg-cyan-500/20 text-cyan-200">TypeScript</Badge>
<Badge variant="secondary" className="bg-cyan-500/20 text-cyan-200">Web3</Badge>
<Badge variant="secondary" className="bg-cyan-500/20 text-cyan-200">No Install</Badge>
</div>
<Button variant="outline" className="w-full border-cyan-400/50 text-cyan-300 hover:bg-cyan-500/10" asChild>
<Link to="/docs/integrations/spatial">
View Documentation
<ArrowRight className="ml-2 h-4 w-4" />
</Link>
</Button>
</CardContent>
</Card>
<Card className="bg-gradient-to-br from-red-950/50 to-orange-950/50 border-red-500/30 hover:border-red-400/60 transition-colors">
<CardHeader>
<CardTitle className="flex items-center gap-3 text-white">
<Cuboid className="h-6 w-6 text-red-400" />
Decentraland
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<CardDescription className="text-gray-300">
Create Ethereum-powered metaverse experiences with NFT integration
</CardDescription>
<div className="flex flex-wrap gap-2">
<Badge variant="secondary" className="bg-red-500/20 text-red-200">Ethereum</Badge>
<Badge variant="secondary" className="bg-red-500/20 text-red-200">LAND</Badge>
<Badge variant="secondary" className="bg-red-500/20 text-red-200">DAO</Badge>
</div>
<Button variant="outline" className="w-full border-red-400/50 text-red-300 hover:bg-red-500/10" asChild>
<Link to="/docs/integrations/decentraland">
View Documentation
<ArrowRight className="ml-2 h-4 w-4" />
</Link>
</Button>
</CardContent>
</Card>
<Card className="bg-gradient-to-br from-amber-950/50 to-yellow-950/50 border-amber-500/30 hover:border-amber-400/60 transition-colors">
<CardHeader>
<CardTitle className="flex items-center gap-3 text-white">
<Box className="h-6 w-6 text-amber-400" />
The Sandbox
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<CardDescription className="text-gray-300">
Build voxel games with visual editor and Polygon NFT rewards
</CardDescription>
<div className="flex flex-wrap gap-2">
<Badge variant="secondary" className="bg-amber-500/20 text-amber-200">Polygon</Badge>
<Badge variant="secondary" className="bg-amber-500/20 text-amber-200">Voxels</Badge>
<Badge variant="secondary" className="bg-amber-500/20 text-amber-200">NFTs</Badge>
</div>
<Button variant="outline" className="w-full border-amber-400/50 text-amber-300 hover:bg-amber-500/10" asChild>
<Link to="/docs/integrations/thesandbox">
View Documentation
<ArrowRight className="ml-2 h-4 w-4" />
</Link>
</Button>
</CardContent>
</Card>
</div>
</section>
<section id="architecture" className="grid gap-6 lg:grid-cols-2">
<Card className="bg-slate-900/60 border-slate-700">
<CardHeader>

467
client/pages/docs/integrations/Decentraland.tsx Normal file
View file

@ -0,0 +1,467 @@
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Cuboid, Code2, Rocket, ExternalLink, CheckCircle2, AlertTriangle, Package } from "lucide-react";
import { CodeBlock } from "@/components/dev-platform/ui/CodeBlock";
export default function DecentralandIntegration() {
return (
<div className="space-y-12">
<section id="overview" className="space-y-4">
<Badge className="bg-red-500/20 text-red-100 uppercase tracking-wide">
<Cuboid className="mr-2 h-3 w-3" />
Decentraland Integration
</Badge>
<h2 className="text-3xl font-semibold text-white">
Build in Decentraland with AeThex
</h2>
<p className="text-gray-400 text-lg leading-relaxed">
Create blockchain-based virtual experiences in Decentraland's Ethereum-powered metaverse. Integrate
AeThex APIs with LAND parcels, NFT wearables, and DAO governance for web3 gaming.
</p>
</section>
{/* Quick Stats */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<Card className="bg-red-950/20 border-red-500/20">
<CardContent className="pt-6">
<div className="text-3xl font-bold text-red-300">800K+</div>
<div className="text-sm text-gray-400">Registered Users</div>
</CardContent>
</Card>
<Card className="bg-red-950/20 border-red-500/20">
<CardContent className="pt-6">
<div className="text-3xl font-bold text-red-300">90K+</div>
<div className="text-sm text-gray-400">LAND Parcels</div>
</CardContent>
</Card>
<Card className="bg-red-950/20 border-red-500/20">
<CardContent className="pt-6">
<div className="text-3xl font-bold text-red-300">Ethereum</div>
<div className="text-sm text-gray-400">Blockchain</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-red-500/20">
<CardHeader>
<CardTitle className="flex items-center gap-2 text-red-300">
<CheckCircle2 className="h-5 w-5" />
NFT-Gated Experiences
</CardTitle>
</CardHeader>
<CardContent className="text-gray-400">
Verify wallet ownership via AeThex, grant access to exclusive LAND areas, and NFT-gated minigames
</CardContent>
</Card>
<Card className="bg-slate-900/50 border-red-500/20">
<CardHeader>
<CardTitle className="flex items-center gap-2 text-red-300">
<CheckCircle2 className="h-5 w-5" />
Cross-Chain Achievements
</CardTitle>
</CardHeader>
<CardContent className="text-gray-400">
Award achievements that sync across Decentraland, Polygon, and other EVM chains via AeThex
</CardContent>
</Card>
<Card className="bg-slate-900/50 border-red-500/20">
<CardHeader>
<CardTitle className="flex items-center gap-2 text-red-300">
<CheckCircle2 className="h-5 w-5" />
DAO Integration
</CardTitle>
</CardHeader>
<CardContent className="text-gray-400">
Connect Decentraland DAO voting with AeThex governance tools for multi-platform coordination
</CardContent>
</Card>
<Card className="bg-slate-900/50 border-red-500/20">
<CardHeader>
<CardTitle className="flex items-center gap-2 text-red-300">
<CheckCircle2 className="h-5 w-5" />
Smart Contract Events
</CardTitle>
</CardHeader>
<CardContent className="text-gray-400">
Listen to on-chain events (MANA transfers, wearable mints) and trigger in-world experiences via AeThex webhooks
</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-red-400" />
Quick Start Guide
</h3>
<Card className="bg-slate-900/50 border-red-500/20">
<CardHeader>
<CardTitle>1. Install Decentraland SDK + AeThex</CardTitle>
<CardDescription>Set up your LAND parcel with AeThex integration</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<CodeBlock
code={`# Install Decentraland CLI and create new scene
npm install -g decentraland
# Create new scene
dcl init
# Install AeThex SDK
npm install @aethex/decentraland-sdk ethers`}
language="bash"
showLineNumbers={false}
/>
</CardContent>
</Card>
<Card className="bg-slate-900/50 border-red-500/20">
<CardHeader>
<CardTitle>2. Initialize AeThex in Your Scene</CardTitle>
<CardDescription>Configure API and Web3 wallet integration</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<CodeBlock
code={`import { AeThexClient } from '@aethex/decentraland-sdk';
import { getUserAccount } from '@decentraland/EthereumController';
// Initialize AeThex with Web3 support
const aethex = new AeThexClient({
apiKey: 'your_api_key_here',
environment: 'production',
web3Provider: 'ethereum' // Auto-detects MetaMask/WalletConnect
});
// Example: Verify user owns specific NFT before granting access
async function checkNFTAccess() {
const userAddress = await getUserAccount();
// Check if user owns required NFT via AeThex
const hasAccess = await aethex.web3.verifyNFTOwnership({
walletAddress: userAddress,
contractAddress: '0x...',
tokenId: 1234,
chain: 'ethereum'
});
if (hasAccess) {
log('Access granted! Opening exclusive area...');
// Unlock special content
} else {
log('NFT required for access');
}
}
// Listen for player entering scene
export function onEnter() {
checkNFTAccess();
}`}
language="typescript"
showLineNumbers={true}
/>
</CardContent>
</Card>
<Card className="bg-slate-900/50 border-red-500/20">
<CardHeader>
<CardTitle>3. Build NFT-Gated Game</CardTitle>
<CardDescription>Create a treasure hunt with blockchain rewards</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<CodeBlock
code={`import { AeThexClient } from '@aethex/decentraland-sdk';
import { getUserAccount } from '@decentraland/EthereumController';
import * as ui from '@dcl/ui-scene-utils';
const aethex = new AeThexClient({ apiKey: process.env.AETHEX_API_KEY });
// Track player progress across sessions
class TreasureHunt {
private userAddress: string;
async init() {
this.userAddress = await getUserAccount();
await this.loadProgress();
}
async loadProgress() {
// Fetch player's treasure hunt progress from AeThex
const progress = await aethex.users.getData(this.userAddress, {
namespace: 'decentraland-treasure-hunt'
});
log(\`Treasures found: \${progress.treasuresFound || 0}/10\`);
return progress;
}
async collectTreasure(treasureId: number) {
// Update progress on AeThex backend
await aethex.users.updateData(this.userAddress, {
namespace: 'decentraland-treasure-hunt',
data: {
treasuresFound: treasureId,
lastCollected: Date.now()
}
});
// Award cross-platform achievement
await aethex.achievements.unlock(this.userAddress, 'treasure-hunter');
// Check if completed all treasures
if (treasureId === 10) {
this.awardNFTReward();
}
}
async awardNFTReward() {
// Mint reward NFT via AeThex smart contract integration
const receipt = await aethex.web3.mintNFT({
walletAddress: this.userAddress,
contractAddress: '0x...', // Your reward NFT contract
metadata: {
name: 'Treasure Hunter',
description: 'Completed AeThex Decentraland treasure hunt',
image: 'ipfs://...'
}
});
ui.displayAnnouncement('Reward NFT Minted! Check your wallet.', 5);
}
}
// Initialize treasure hunt
const hunt = new TreasureHunt();
executeTask(async () => {
await hunt.init();
});`}
language="typescript"
showLineNumbers={true}
/>
</CardContent>
</Card>
</section>
{/* Authentication Flow */}
<section id="authentication" className="space-y-6">
<h3 className="text-2xl font-semibold text-white">Web3 Wallet Authentication</h3>
<p className="text-gray-400">
Link Decentraland wallets to AeThex Passport for unified cross-chain identity.
</p>
<Card className="bg-slate-900/50 border-red-500/20">
<CardHeader>
<CardTitle>Wallet Signature Authentication</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<p className="text-gray-300">
AeThex uses EIP-4361 (Sign-In with Ethereum) for secure, gasless wallet authentication.
</p>
<div className="space-y-4">
<div className="flex gap-4 items-start">
<div className="w-8 h-8 rounded-full bg-red-500/20 flex items-center justify-center text-red-300 font-bold flex-shrink-0">1</div>
<div>
<h4 className="text-white font-semibold mb-1">Connect Wallet</h4>
<p className="text-gray-400 text-sm">Player connects MetaMask or WalletConnect in Decentraland</p>
</div>
</div>
<div className="flex gap-4 items-start">
<div className="w-8 h-8 rounded-full bg-red-500/20 flex items-center justify-center text-red-300 font-bold flex-shrink-0">2</div>
<div>
<h4 className="text-white font-semibold mb-1">Generate Sign-In Message</h4>
<p className="text-gray-400 text-sm">AeThex creates EIP-4361 message with nonce and expiration</p>
</div>
</div>
<div className="flex gap-4 items-start">
<div className="w-8 h-8 rounded-full bg-red-500/20 flex items-center justify-center text-red-300 font-bold flex-shrink-0">3</div>
<div>
<h4 className="text-white font-semibold mb-1">Request Signature</h4>
<p className="text-gray-400 text-sm">Player signs message in wallet (no gas fees)</p>
</div>
</div>
<div className="flex gap-4 items-start">
<div className="w-8 h-8 rounded-full bg-red-500/20 flex items-center justify-center text-red-300 font-bold flex-shrink-0">4</div>
<div>
<h4 className="text-white font-semibold mb-1">Verify & Link</h4>
<p className="text-gray-400 text-sm">AeThex verifies signature, links wallet to Passport, returns JWT</p>
</div>
</div>
</div>
<CodeBlock
code={`import { AeThexClient } from '@aethex/decentraland-sdk';
import { getUserAccount, signMessage } from '@decentraland/EthereumController';
const aethex = new AeThexClient({ apiKey: process.env.AETHEX_API_KEY });
async function authenticateWallet() {
try {
const walletAddress = await getUserAccount();
// Request Sign-In with Ethereum message from AeThex
const { message, nonce } = await aethex.auth.generateSignInMessage({
address: walletAddress,
chainId: 1, // Ethereum mainnet
platform: 'decentraland'
});
// Prompt user to sign message (no gas fees)
const signature = await signMessage(message);
// Verify signature and get auth token
const { token, passportId } = await aethex.auth.verifySignature({
address: walletAddress,
signature: signature,
nonce: nonce
});
log(\`Authenticated! Passport ID: \${passportId}\`);
// Store token for subsequent API calls
aethex.setAuthToken(token);
// Now you can access cross-platform features
const achievements = await aethex.achievements.list(passportId);
displayAchievements(achievements);
} catch (error) {
log('Authentication failed:', error);
}
}`}
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">Decentraland Limitations</CardTitle>
</CardHeader>
<CardContent className="space-y-3 text-gray-300">
<p>• <strong>LAND parcel limits:</strong> 20MB scene size, 10k triangles per parcel</p>
<p>• <strong>Gas costs:</strong> Minting NFTs requires ETH, use AeThex gasless relayer for UX</p>
<p>• <strong>Network latency:</strong> Ethereum confirmations take 15-30 seconds, show loading states</p>
<p>• <strong>Browser performance:</strong> Optimize 3D assets, Decentraland runs in WebGL</p>
</CardContent>
</Card>
<Card className="bg-green-950/20 border-green-500/20">
<CardHeader>
<CardTitle className="text-green-300">Web3 Optimization</CardTitle>
</CardHeader>
<CardContent className="space-y-3 text-gray-300">
<p>• <strong>Cache blockchain data:</strong> Store NFT ownership checks for 5-10 minutes</p>
<p>• <strong>Use Polygon for speed:</strong> Deploy NFTs on Polygon (2s confirmations) instead of Ethereum mainnet</p>
<p>• <strong>Gasless transactions:</strong> Use AeThex meta-transaction relayer for free UX</p>
<p>• <strong>IPFS for metadata:</strong> Store NFT metadata on IPFS, link via AeThex CDN</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-red-400" />
Resources & Examples
</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<Card className="bg-slate-900/50 border-red-500/20">
<CardHeader>
<CardTitle className="text-lg">Example Scenes</CardTitle>
</CardHeader>
<CardContent className="space-y-3">
<Button variant="outline" className="w-full justify-between" asChild>
<a href="https://play.decentraland.org/?position=-100,100" target="_blank" rel="noopener noreferrer">
AeThex Gallery (NFT Gate)
<ExternalLink className="h-4 w-4" />
</a>
</Button>
<Button variant="outline" className="w-full justify-between" asChild>
<a href="https://github.com/aethex-corp/dcl-treasure-hunt" target="_blank" rel="noopener noreferrer">
Treasure Hunt Template
<ExternalLink className="h-4 w-4" />
</a>
</Button>
<Button variant="outline" className="w-full justify-between" asChild>
<a href="https://github.com/aethex-corp/dcl-nft-rewards" target="_blank" rel="noopener noreferrer">
NFT Reward System
<ExternalLink className="h-4 w-4" />
</a>
</Button>
</CardContent>
</Card>
<Card className="bg-slate-900/50 border-red-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.decentraland.org" target="_blank" rel="noopener noreferrer">
Decentraland SDK 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-red-950/50 to-orange-950/50 border-red-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 blockchain-powered metaverse experiences with Decentraland and AeThex. Build NFT-gated
games, DAO governance tools, and cross-chain achievements.
</p>
<div className="flex gap-4">
<Button className="bg-red-600 hover:bg-red-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>
);
}

414
client/pages/docs/integrations/GameJolt.tsx Normal file
View file

@ -0,0 +1,414 @@
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Trophy, Code2, Rocket, ExternalLink, CheckCircle2, AlertTriangle, Package } from "lucide-react";
import { CodeBlock } from "@/components/dev-platform/ui/CodeBlock";
export default function GameJoltIntegration() {
return (
<div className="space-y-12">
<section id="overview" className="space-y-4">
<Badge className="bg-purple-500/20 text-purple-100 uppercase tracking-wide">
<Trophy className="mr-2 h-3 w-3" />
GameJolt Integration
</Badge>
<h2 className="text-3xl font-semibold text-white">
Publish on GameJolt with AeThex
</h2>
<p className="text-gray-400 text-lg leading-relaxed">
Distribute your indie games on GameJolt's 10M+ player platform. Integrate AeThex APIs with
GameJolt's trophies, leaderboards, and data storage for enhanced player engagement.
</p>
</section>
{/* Quick Stats */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<Card className="bg-purple-950/20 border-purple-500/20">
<CardContent className="pt-6">
<div className="text-3xl font-bold text-purple-300">10M+</div>
<div className="text-sm text-gray-400">Registered Players</div>
</CardContent>
</Card>
<Card className="bg-purple-950/20 border-purple-500/20">
<CardContent className="pt-6">
<div className="text-3xl font-bold text-purple-300">300K+</div>
<div className="text-sm text-gray-400">Published Games</div>
</CardContent>
</Card>
<Card className="bg-purple-950/20 border-purple-500/20">
<CardContent className="pt-6">
<div className="text-3xl font-bold text-purple-300">Free</div>
<div className="text-sm text-gray-400">No Publishing Fees</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-purple-500/20">
<CardHeader>
<CardTitle className="flex items-center gap-2 text-purple-300">
<CheckCircle2 className="h-5 w-5" />
Unified Achievement System
</CardTitle>
</CardHeader>
<CardContent className="text-gray-400">
Sync GameJolt trophies with AeThex achievements for cross-platform progression
</CardContent>
</Card>
<Card className="bg-slate-900/50 border-purple-500/20">
<CardHeader>
<CardTitle className="flex items-center gap-2 text-purple-300">
<CheckCircle2 className="h-5 w-5" />
Cross-Platform Leaderboards
</CardTitle>
</CardHeader>
<CardContent className="text-gray-400">
Combine GameJolt scores with Steam, itch.io, and web players via AeThex API
</CardContent>
</Card>
<Card className="bg-slate-900/50 border-purple-500/20">
<CardHeader>
<CardTitle className="flex items-center gap-2 text-purple-300">
<CheckCircle2 className="h-5 w-5" />
Player Analytics
</CardTitle>
</CardHeader>
<CardContent className="text-gray-400">
Track GameJolt player behavior and compare metrics across all distribution platforms
</CardContent>
</Card>
<Card className="bg-slate-900/50 border-purple-500/20">
<CardHeader>
<CardTitle className="flex items-center gap-2 text-purple-300">
<CheckCircle2 className="h-5 w-5" />
Community Features
</CardTitle>
</CardHeader>
<CardContent className="text-gray-400">
Integrate AeThex social features with GameJolt's forums, comments, and community tools
</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-purple-400" />
Quick Start Guide
</h3>
<Card className="bg-slate-900/50 border-purple-500/20">
<CardHeader>
<CardTitle>1. Set Up GameJolt Game</CardTitle>
<CardDescription>Create your game listing on GameJolt</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<ol className="space-y-2 text-gray-300">
<li className="flex gap-3">
<span className="text-purple-400 font-bold">1.</span>
<span>Create account at <a href="https://gamejolt.com" className="text-purple-400 hover:underline" target="_blank" rel="noopener noreferrer">gamejolt.com</a></span>
</li>
<li className="flex gap-3">
<span className="text-purple-400 font-bold">2.</span>
<span>Add your game via Dashboard → Add Game</span>
</li>
<li className="flex gap-3">
<span className="text-purple-400 font-bold">3.</span>
<span>Get your Game ID and Private Key from Game → Manage → Game API</span>
</li>
<li className="flex gap-3">
<span className="text-purple-400 font-bold">4.</span>
<span>Configure trophies and leaderboards in GameJolt dashboard</span>
</li>
</ol>
</CardContent>
</Card>
<Card className="bg-slate-900/50 border-purple-500/20">
<CardHeader>
<CardTitle>2. Install GameJolt + AeThex SDKs</CardTitle>
<CardDescription>Integrate both APIs for maximum functionality</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<CodeBlock
code={`// Install GameJolt API client (JavaScript/TypeScript)
npm install gamejolt-api
// Install AeThex SDK
npm install @aethex/sdk
// Initialize both clients
import { GameJolt } from 'gamejolt-api';
import { AeThexClient } from '@aethex/sdk';
const gamejolt = new GameJolt({
gameId: 'YOUR_GAMEJOLT_GAME_ID',
privateKey: 'YOUR_GAMEJOLT_PRIVATE_KEY'
});
const aethex = new AeThexClient({
apiKey: 'YOUR_AETHEX_API_KEY',
environment: 'production'
});
// Link GameJolt user to AeThex Passport
async function authenticatePlayer(gjUsername: string, gjUserToken: string) {
// Verify GameJolt user
const gjUser = await gamejolt.users.auth(gjUsername, gjUserToken);
if (gjUser.success) {
// Link to AeThex
const aethexAuth = await aethex.auth.linkExternalAccount({
platform: 'gamejolt',
externalId: gjUser.data.id,
username: gjUser.data.username
});
console.log('User linked across platforms!');
}
}`}
language="typescript"
showLineNumbers={true}
/>
</CardContent>
</Card>
<Card className="bg-slate-900/50 border-purple-500/20">
<CardHeader>
<CardTitle>3. Sync Trophies & Achievements</CardTitle>
<CardDescription>Award cross-platform achievements</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<CodeBlock
code={`// Sync GameJolt trophy with AeThex achievement
async function unlockAchievement(trophyId: number, playerId: string) {
try {
// Unlock on GameJolt
const gjResult = await gamejolt.trophies.addAchieved(
trophyId,
playerId
);
if (gjResult.success) {
console.log('GameJolt trophy unlocked!');
// Also unlock on AeThex for cross-platform tracking
await aethex.achievements.unlock(playerId, \`gamejolt-trophy-\${trophyId}\`, {
platform: 'gamejolt',
timestamp: Date.now()
});
console.log('Achievement synced to AeThex!');
}
} catch (error) {
console.error('Failed to unlock achievement:', error);
}
}
// Example: Unlock achievement when player beats level
async function onLevelComplete(level: number) {
if (level === 10) {
await unlockAchievement(12345, currentUser.id); // Trophy ID 12345
}
}`}
language="typescript"
showLineNumbers={true}
/>
</CardContent>
</Card>
</section>
{/* Leaderboard Integration */}
<section id="leaderboards" className="space-y-6">
<h3 className="text-2xl font-semibold text-white flex items-center gap-2">
<Code2 className="h-6 w-6 text-purple-400" />
Leaderboard Integration
</h3>
<Card className="bg-slate-900/50 border-purple-500/20">
<CardHeader>
<CardTitle>Cross-Platform Leaderboard Sync</CardTitle>
<CardDescription>Submit scores to both GameJolt and AeThex</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<CodeBlock
code={`// Submit score to both platforms simultaneously
async function submitScore(playerId: string, score: number) {
try {
// Submit to GameJolt
const gjResult = await gamejolt.scores.add(
score,
score + ' points',
playerId,
'12345' // GameJolt leaderboard table ID
);
// Submit to AeThex for cross-platform leaderboard
const aethexResult = await aethex.leaderboards.updateScore('global-leaderboard', {
userId: playerId,
score: score,
metadata: {
platform: 'gamejolt',
gameId: gamejolt.gameId,
timestamp: Date.now()
}
});
console.log('Score submitted to both platforms!');
return { success: true };
} catch (error) {
console.error('Score submission failed:', error);
return { success: false, error };
}
}
// Fetch combined leaderboard (GameJolt + other platforms)
async function getCombinedLeaderboard() {
// Get GameJolt scores
const gjScores = await gamejolt.scores.fetch('12345', 10);
// Get cross-platform scores from AeThex
const aethexScores = await aethex.leaderboards.getTop('global-leaderboard', {
limit: 10,
platform: 'all' // Include all platforms
});
// Merge and display both
return {
gamejolt: gjScores.data,
crossPlatform: aethexScores
};
}`}
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 & Tips
</h3>
<div className="space-y-4">
<Card className="bg-yellow-950/20 border-yellow-500/20">
<CardHeader>
<CardTitle className="text-yellow-300">GameJolt-Specific Considerations</CardTitle>
</CardHeader>
<CardContent className="space-y-3 text-gray-300">
<p>• <strong>API rate limits:</strong> GameJolt has no strict rate limits, but avoid spam</p>
<p>• <strong>User authentication:</strong> Requires username + user token (auto-provided in GameJolt client)</p>
<p>• <strong>Data storage:</strong> GameJolt offers 16MB per user, use for small saves</p>
<p>• <strong>Web builds:</strong> GameJolt client works great for browser-based HTML5 games</p>
</CardContent>
</Card>
<Card className="bg-green-950/20 border-green-500/20">
<CardHeader>
<CardTitle className="text-green-300">Publishing Strategy</CardTitle>
</CardHeader>
<CardContent className="space-y-3 text-gray-300">
<p>• <strong>Multi-platform release:</strong> Publish on GameJolt, itch.io, and Steam simultaneously</p>
<p>• <strong>Community engagement:</strong> Use GameJolt's forums and devlog features</p>
<p>• <strong>Game Jams:</strong> Participate in GameJolt jams for visibility</p>
<p>• <strong>AeThex analytics:</strong> Compare player behavior across all platforms</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-purple-400" />
Resources & Examples
</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<Card className="bg-slate-900/50 border-purple-500/20">
<CardHeader>
<CardTitle className="text-lg">Example Integrations</CardTitle>
</CardHeader>
<CardContent className="space-y-3">
<Button variant="outline" className="w-full justify-between" asChild>
<a href="https://github.com/aethex-corp/gamejolt-starter" target="_blank" rel="noopener noreferrer">
GameJolt + AeThex Template
<ExternalLink className="h-4 w-4" />
</a>
</Button>
<Button variant="outline" className="w-full justify-between" asChild>
<a href="https://github.com/aethex-corp/gamejolt-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://gamejolt.com/@aethex" target="_blank" rel="noopener noreferrer">
AeThex GameJolt Profile
<ExternalLink className="h-4 w-4" />
</a>
</Button>
</CardContent>
</Card>
<Card className="bg-slate-900/50 border-purple-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://gamejolt.com/game-api/doc" target="_blank" rel="noopener noreferrer">
GameJolt API 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-purple-950/50 to-pink-950/50 border-purple-500/30">
<CardContent className="p-8 space-y-4">
<h3 className="text-2xl font-semibold text-white">Ready to Publish?</h3>
<p className="text-gray-300">
Distribute your indie game on GameJolt with AeThex cross-platform features. Reach 10M+
players with unified achievements, leaderboards, and analytics.
</p>
<div className="flex gap-4">
<Button className="bg-purple-600 hover:bg-purple-700" asChild>
<a href="/dev-platform/dashboard">Get API Key</a>
</Button>
<Button variant="outline" asChild>
<a href="https://gamejolt.com/dashboard/developer/games/add" target="_blank">
Add Game on GameJolt
</a>
</Button>
</div>
</CardContent>
</Card>
</div>
);
}

484
client/pages/docs/integrations/GameMaker.tsx Normal file
View file

@ -0,0 +1,484 @@
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Gamepad, Code2, Rocket, ExternalLink, CheckCircle2, AlertTriangle, Package } from "lucide-react";
import { CodeBlock } from "@/components/dev-platform/ui/CodeBlock";
export default function GameMakerIntegration() {
return (
<div className="space-y-12">
<section id="overview" className="space-y-4">
<Badge className="bg-green-500/20 text-green-100 uppercase tracking-wide">
<Gamepad className="mr-2 h-3 w-3" />
GameMaker Integration
</Badge>
<h2 className="text-3xl font-semibold text-white">
Build with GameMaker + AeThex
</h2>
<p className="text-gray-400 text-lg leading-relaxed">
Integrate AeThex APIs with GameMaker Studio 2 for 2D game development. Use GML (GameMaker Language)
for backend integration, cloud saves, leaderboards, and cross-platform publishing.
</p>
</section>
{/* Quick Stats */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<Card className="bg-green-950/20 border-green-500/20">
<CardContent className="pt-6">
<div className="text-3xl font-bold text-green-300">1M+</div>
<div className="text-sm text-gray-400">Active Developers</div>
</CardContent>
</Card>
<Card className="bg-green-950/20 border-green-500/20">
<CardContent className="pt-6">
<div className="text-3xl font-bold text-green-300">2D Focus</div>
<div className="text-sm text-gray-400">Drag & Drop + GML</div>
</CardContent>
</Card>
<Card className="bg-green-950/20 border-green-500/20">
<CardContent className="pt-6">
<div className="text-3xl font-bold text-green-300">Multi-Export</div>
<div className="text-sm text-gray-400">PC, Mobile, Console, Web</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-green-500/20">
<CardHeader>
<CardTitle className="flex items-center gap-2 text-green-300">
<CheckCircle2 className="h-5 w-5" />
Cloud Save Integration
</CardTitle>
</CardHeader>
<CardContent className="text-gray-400">
Save player progress to AeThex backend, sync across Windows, Mac, Linux, iOS, Android builds
</CardContent>
</Card>
<Card className="bg-slate-900/50 border-green-500/20">
<CardHeader>
<CardTitle className="flex items-center gap-2 text-green-300">
<CheckCircle2 className="h-5 w-5" />
Online Leaderboards
</CardTitle>
</CardHeader>
<CardContent className="text-gray-400">
Global and friend leaderboards with daily/weekly/all-time filters via AeThex API
</CardContent>
</Card>
<Card className="bg-slate-900/50 border-green-500/20">
<CardHeader>
<CardTitle className="flex items-center gap-2 text-green-300">
<CheckCircle2 className="h-5 w-5" />
Player Authentication
</CardTitle>
</CardHeader>
<CardContent className="text-gray-400">
Email/password login, social auth (Google, Discord), and guest accounts with AeThex Passport
</CardContent>
</Card>
<Card className="bg-slate-900/50 border-green-500/20">
<CardHeader>
<CardTitle className="flex items-center gap-2 text-green-300">
<CheckCircle2 className="h-5 w-5" />
Analytics & Metrics
</CardTitle>
</CardHeader>
<CardContent className="text-gray-400">
Track player sessions, level completion rates, and custom events via AeThex telemetry
</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-green-400" />
Quick Start Guide
</h3>
<Card className="bg-slate-900/50 border-green-500/20">
<CardHeader>
<CardTitle>1. Import AeThex Extension</CardTitle>
<CardDescription>Add the AeThex GML scripts to your GameMaker project</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<p className="text-gray-300">
Download the <code className="bg-green-950/50 px-2 py-1 rounded text-green-300">AeThex.yymps</code> extension
package and import into GameMaker Studio 2.
</p>
<ol className="space-y-2 text-gray-300 text-sm">
<li>1. Download from <a href="https://github.com/aethex-corp/gamemaker-sdk" className="text-green-400 hover:underline" target="_blank" rel="noopener noreferrer">GitHub</a></li>
<li>2. In GameMaker: <strong>Tools → Import Local Package</strong></li>
<li>3. Select <code className="bg-green-950/50 px-1 rounded">AeThex.yymps</code> file</li>
<li>4. Import all scripts and objects</li>
</ol>
</CardContent>
</Card>
<Card className="bg-slate-900/50 border-green-500/20">
<CardHeader>
<CardTitle>2. Initialize AeThex (GML)</CardTitle>
<CardDescription>Set up the AeThex client in your game's create event</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<CodeBlock
code={`/// Create Event of obj_AeThexManager
// Initialize AeThex client
global.aethex_api_key = "your_api_key_here";
global.aethex_base_url = "https://api.aethex.dev/v1";
global.aethex_auth_token = "";
global.current_user = undefined;
// HTTP async IDs for tracking requests
global.http_auth_login = -1;
global.http_save_data = -1;
global.http_load_data = -1;
global.http_leaderboard = -1;
show_debug_message("AeThex Manager initialized");
/// User Event 0 - Login Function
// Usage: with(obj_AeThexManager) event_user(0);
var _email = argument0;
var _password = argument1;
var _url = global.aethex_base_url + "/auth/login";
var _headers = ds_map_create();
ds_map_add(_headers, "Content-Type", "application/json");
ds_map_add(_headers, "X-API-Key", global.aethex_api_key);
var _body = json_encode({
email: _email,
password: _password
});
global.http_auth_login = http_request(_url, "POST", _headers, _body);
ds_map_destroy(_headers);`}
language="gml"
showLineNumbers={true}
/>
</CardContent>
</Card>
<Card className="bg-slate-900/50 border-green-500/20">
<CardHeader>
<CardTitle>3. Handle HTTP Async Responses</CardTitle>
<CardDescription>Process API responses in the Async HTTP event</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<CodeBlock
code={`/// Async - HTTP Event of obj_AeThexManager
var _async_id = ds_map_find_value(async_load, "id");
var _status = ds_map_find_value(async_load, "status");
var _result = ds_map_find_value(async_load, "result");
// Login response
if (_async_id == global.http_auth_login) {
if (_status == 0 && _result != "") {
var _json = json_decode(_result);
var _data = _json[? "root"];
if (_data[? "success"]) {
global.aethex_auth_token = _data[? "token"];
global.current_user = _data[? "user"];
show_debug_message("Login successful: " + string(_data[? "user"][? "username"]));
// Transition to main menu
room_goto(rm_main_menu);
} else {
show_debug_message("Login failed: " + string(_data[? "error"]));
// Show error message to player
}
ds_map_destroy(_data);
ds_map_destroy(_json);
}
}
// Save data response
else if (_async_id == global.http_save_data) {
if (_status == 0) {
show_debug_message("Save successful!");
} else {
show_debug_message("Save failed");
}
}
// Load data response
else if (_async_id == global.http_load_data) {
if (_status == 0 && _result != "") {
var _json = json_decode(_result);
var _data = _json[? "root"][? "data"];
// Restore player stats
global.player_level = _data[? "level"];
global.player_gold = _data[? "gold"];
global.player_x = _data[? "position"][? "x"];
global.player_y = _data[? "position"][? "y"];
show_debug_message("Game loaded from cloud");
ds_map_destroy(_data);
ds_map_destroy(_json);
}
}`}
language="gml"
showLineNumbers={true}
/>
</CardContent>
</Card>
</section>
{/* Cloud Save System */}
<section id="cloud-saves" className="space-y-6">
<h3 className="text-2xl font-semibold text-white flex items-center gap-2">
<Code2 className="h-6 w-6 text-green-400" />
Cloud Save Implementation
</h3>
<Card className="bg-slate-900/50 border-green-500/20">
<CardHeader>
<CardTitle>Save Player Data</CardTitle>
<CardDescription>Upload save data to AeThex cloud storage</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<CodeBlock
code={`/// User Event 1 - Save Game Function
// Usage: with(obj_AeThexManager) { argument0 = save_data_map; event_user(1); }
var _save_data = argument0;
var _url = global.aethex_base_url + "/users/" + string(global.current_user[? "id"]) + "/data";
var _headers = ds_map_create();
ds_map_add(_headers, "Content-Type", "application/json");
ds_map_add(_headers, "X-API-Key", global.aethex_api_key);
ds_map_add(_headers, "Authorization", "Bearer " + global.aethex_auth_token);
var _body = json_encode({
namespace: "gamemaker-save",
data: _save_data
});
global.http_save_data = http_request(_url, "PUT", _headers, _body);
ds_map_destroy(_headers);
show_debug_message("Saving game to cloud...");
/// Example usage from player object
// Create save data
var _save = ds_map_create();
ds_map_add(_save, "level", global.player_level);
ds_map_add(_save, "gold", global.player_gold);
ds_map_add(_save, "hp", global.player_hp);
var _pos = ds_map_create();
ds_map_add(_pos, "x", x);
ds_map_add(_pos, "y", y);
ds_map_add(_save, "position", _pos);
var _inventory = ds_list_create();
for (var i = 0; i < ds_list_size(global.inventory); i++) {
ds_list_add(_inventory, global.inventory[| i]);
}
ds_map_add(_save, "inventory", _inventory);
// Save to cloud
with(obj_AeThexManager) {
argument0 = _save;
event_user(1);
}
ds_map_destroy(_pos);
ds_list_destroy(_inventory);
ds_map_destroy(_save);`}
language="gml"
showLineNumbers={true}
/>
</CardContent>
</Card>
<Card className="bg-slate-900/50 border-green-500/20">
<CardHeader>
<CardTitle>Leaderboard Integration</CardTitle>
<CardDescription>Submit scores and display global rankings</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<CodeBlock
code={`/// User Event 2 - Submit Score Function
// Usage: with(obj_AeThexManager) { argument0 = score; event_user(2); }
var _score = argument0;
var _url = global.aethex_base_url + "/leaderboards/global-score/update";
var _headers = ds_map_create();
ds_map_add(_headers, "Content-Type", "application/json");
ds_map_add(_headers, "X-API-Key", global.aethex_api_key);
ds_map_add(_headers, "Authorization", "Bearer " + global.aethex_auth_token);
var _body = json_encode({
userId: global.current_user[? "id"],
score: _score,
metadata: {
platform: "gamemaker",
timestamp: date_current_datetime()
}
});
http_request(_url, "POST", _headers, _body);
ds_map_destroy(_headers);
/// Draw Event - Display Leaderboard
// Fetch and render top 10 players
if (leaderboard_loaded) {
draw_set_color(c_white);
draw_set_font(fnt_leaderboard);
var _y_start = 100;
var _y_spacing = 40;
draw_text(100, 50, "GLOBAL LEADERBOARD");
for (var i = 0; i < ds_list_size(leaderboard_entries); i++) {
var _entry = leaderboard_entries[| i];
var _rank = _entry[? "rank"];
var _username = _entry[? "username"];
var _score = _entry[? "score"];
var _text = string(_rank) + ". " + _username + " - " + string(_score);
draw_text(100, _y_start + (i * _y_spacing), _text);
}
}`}
language="gml"
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 & Tips
</h3>
<div className="space-y-4">
<Card className="bg-yellow-950/20 border-yellow-500/20">
<CardHeader>
<CardTitle className="text-yellow-300">GameMaker-Specific Tips</CardTitle>
</CardHeader>
<CardContent className="space-y-3 text-gray-300">
<p>• <strong>Async HTTP events:</strong> All network requests are async, handle in Async - HTTP event</p>
<p>• <strong>DS maps for JSON:</strong> Use ds_map for JSON data structures, remember to destroy them</p>
<p>• <strong>Global variables:</strong> Store auth tokens in global scope for cross-room access</p>
<p>• <strong>Error handling:</strong> Check HTTP status codes (0 = success) before parsing responses</p>
</CardContent>
</Card>
<Card className="bg-green-950/20 border-green-500/20">
<CardHeader>
<CardTitle className="text-green-300">Performance Tips</CardTitle>
</CardHeader>
<CardContent className="space-y-3 text-gray-300">
<p>• <strong>Limit API calls:</strong> Cache leaderboard data, refresh every 30-60 seconds max</p>
<p>• <strong>Local save backup:</strong> Use ini_open() for offline fallback saves</p>
<p>• <strong>Batch operations:</strong> Group multiple save operations into single API call</p>
<p>• <strong>Loading states:</strong> Show "Connecting..." UI during API requests</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-green-400" />
Resources & Examples
</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<Card className="bg-slate-900/50 border-green-500/20">
<CardHeader>
<CardTitle className="text-lg">Example Projects</CardTitle>
</CardHeader>
<CardContent className="space-y-3">
<Button variant="outline" className="w-full justify-between" asChild>
<a href="https://github.com/aethex-corp/gamemaker-starter" target="_blank" rel="noopener noreferrer">
GameMaker Starter Template
<ExternalLink className="h-4 w-4" />
</a>
</Button>
<Button variant="outline" className="w-full justify-between" asChild>
<a href="https://github.com/aethex-corp/gamemaker-platformer-demo" target="_blank" rel="noopener noreferrer">
Platformer with Cloud Saves
<ExternalLink className="h-4 w-4" />
</a>
</Button>
<Button variant="outline" className="w-full justify-between" asChild>
<a href="https://github.com/aethex-corp/gamemaker-leaderboard" target="_blank" rel="noopener noreferrer">
Arcade Leaderboard Demo
<ExternalLink className="h-4 w-4" />
</a>
</Button>
</CardContent>
</Card>
<Card className="bg-slate-900/50 border-green-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://manual.yoyogames.com" target="_blank" rel="noopener noreferrer">
GameMaker Manual
<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-green-950/50 to-emerald-950/50 border-green-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 2D games with GameMaker Studio 2 and AeThex. Export to all platforms with
cloud saves, online leaderboards, and cross-platform progression.
</p>
<div className="flex gap-4">
<Button className="bg-green-600 hover:bg-green-700" asChild>
<a href="/dev-platform/dashboard">Get API Key</a>
</Button>
<Button variant="outline" asChild>
<a href="https://github.com/aethex-corp/gamemaker-sdk" target="_blank">
Download Extension
</a>
</Button>
</div>
</CardContent>
</Card>
</div>
);
}

547
client/pages/docs/integrations/Godot.tsx Normal file
View file

@ -0,0 +1,547 @@
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Zap, Code2, Rocket, ExternalLink, CheckCircle2, AlertTriangle, Package } from "lucide-react";
import { CodeBlock } from "@/components/dev-platform/ui/CodeBlock";
export default function GodotIntegration() {
return (
<div className="space-y-12">
<section id="overview" className="space-y-4">
<Badge className="bg-blue-500/20 text-blue-100 uppercase tracking-wide">
<Zap className="mr-2 h-3 w-3" />
Godot Engine Integration
</Badge>
<h2 className="text-3xl font-semibold text-white">
Build with Godot Engine + AeThex
</h2>
<p className="text-gray-400 text-lg leading-relaxed">
Integrate AeThex APIs with Godot 4's open-source game engine. Use GDScript or C# to build
cross-platform games with unified backend, authentication, leaderboards, and cloud saves.
</p>
</section>
{/* Quick Stats */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<Card className="bg-blue-950/20 border-blue-500/20">
<CardContent className="pt-6">
<div className="text-3xl font-bold text-blue-300">2M+</div>
<div className="text-sm text-gray-400">Active Developers</div>
</CardContent>
</Card>
<Card className="bg-blue-950/20 border-blue-500/20">
<CardContent className="pt-6">
<div className="text-3xl font-bold text-blue-300">Open Source</div>
<div className="text-sm text-gray-400">MIT Licensed</div>
</CardContent>
</Card>
<Card className="bg-blue-950/20 border-blue-500/20">
<CardContent className="pt-6">
<div className="text-3xl font-bold text-blue-300">2D + 3D</div>
<div className="text-sm text-gray-400">Multi-Platform Export</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-blue-500/20">
<CardHeader>
<CardTitle className="flex items-center gap-2 text-blue-300">
<CheckCircle2 className="h-5 w-5" />
Cloud Save System
</CardTitle>
</CardHeader>
<CardContent className="text-gray-400">
Save player progress to AeThex backend, sync across PC, mobile, web, and console builds
</CardContent>
</Card>
<Card className="bg-slate-900/50 border-blue-500/20">
<CardHeader>
<CardTitle className="flex items-center gap-2 text-blue-300">
<CheckCircle2 className="h-5 w-5" />
Multiplayer Backend
</CardTitle>
</CardHeader>
<CardContent className="text-gray-400">
Use AeThex REST APIs with Godot's HTTPRequest node for matchmaking, lobbies, and player data
</CardContent>
</Card>
<Card className="bg-slate-900/50 border-blue-500/20">
<CardHeader>
<CardTitle className="flex items-center gap-2 text-blue-300">
<CheckCircle2 className="h-5 w-5" />
Cross-Platform Auth
</CardTitle>
</CardHeader>
<CardContent className="text-gray-400">
Link Steam, Epic, or email accounts to AeThex Passport for unified player identity
</CardContent>
</Card>
<Card className="bg-slate-900/50 border-blue-500/20">
<CardHeader>
<CardTitle className="flex items-center gap-2 text-blue-300">
<CheckCircle2 className="h-5 w-5" />
Analytics & Events
</CardTitle>
</CardHeader>
<CardContent className="text-gray-400">
Track player behavior, session analytics, and custom events with AeThex telemetry API
</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-blue-400" />
Quick Start Guide
</h3>
<Card className="bg-slate-900/50 border-blue-500/20">
<CardHeader>
<CardTitle>1. Install AeThex Godot Plugin</CardTitle>
<CardDescription>Add the AeThex GDScript plugin to your project</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<p className="text-gray-300">
Download from the Godot Asset Library or install manually:
</p>
<CodeBlock
code={`# Clone the plugin into your project's addons folder
cd your-godot-project/
git clone https://github.com/aethex-corp/godot-sdk addons/aethex
# Or download manually
# https://github.com/aethex-corp/godot-sdk/releases/latest
# Enable in Project Settings → Plugins → AeThex SDK → Enable`}
language="bash"
showLineNumbers={false}
/>
</CardContent>
</Card>
<Card className="bg-slate-900/50 border-blue-500/20">
<CardHeader>
<CardTitle>2. Initialize AeThex Client (GDScript)</CardTitle>
<CardDescription>Create an autoload singleton for global AeThex access</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<CodeBlock
code={`# res://scripts/AeThexManager.gd
extends Node
var aethex_client: AeThexClient
func _ready():
# Initialize AeThex SDK
aethex_client = AeThexClient.new()
aethex_client.api_key = "your_api_key_here"
aethex_client.environment = AeThexClient.Environment.PRODUCTION
# Connect signals
aethex_client.connect("auth_success", self, "_on_auth_success")
aethex_client.connect("auth_failed", self, "_on_auth_failed")
add_child(aethex_client)
print("AeThex SDK initialized")
func authenticate_user(email: String, password: String):
aethex_client.auth.login(email, password)
func _on_auth_success(user_data: Dictionary):
print("User authenticated: ", user_data.username)
# Store user session
Global.current_user = user_data
func _on_auth_failed(error: String):
print("Auth failed: ", error)
# Show error to player`}
language="gdscript"
showLineNumbers={true}
/>
<p className="text-sm text-gray-400">
Add <code className="bg-blue-950/50 px-1 rounded">res://scripts/AeThexManager.gd</code> as an autoload
in Project Settings → Autoload → Name: "AeThex"
</p>
</CardContent>
</Card>
<Card className="bg-slate-900/50 border-blue-500/20">
<CardHeader>
<CardTitle>3. Build Cloud Save System</CardTitle>
<CardDescription>Save and load player progress with one function call</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<CodeBlock
code={`# res://scripts/SaveManager.gd
extends Node
# Save player progress to AeThex cloud
func save_game(player_data: Dictionary) -> void:
var result = await AeThex.aethex_client.users.update_data(
Global.current_user.id,
{
"level": player_data.level,
"gold": player_data.gold,
"inventory": player_data.inventory,
"position": {
"x": player_data.position.x,
"y": player_data.position.y
},
"timestamp": Time.get_unix_time_from_system()
}
)
if result.success:
print("Game saved to cloud!")
else:
print("Save failed: ", result.error)
# Load player progress from AeThex cloud
func load_game() -> Dictionary:
var result = await AeThex.aethex_client.users.get_data(
Global.current_user.id
)
if result.success:
print("Game loaded from cloud!")
return result.data
else:
print("Load failed, using default data")
return get_default_player_data()
func get_default_player_data() -> Dictionary:
return {
"level": 1,
"gold": 0,
"inventory": [],
"position": {"x": 0, "y": 0}
}
# Example: Auto-save every 5 minutes
func _ready():
var auto_save_timer = Timer.new()
auto_save_timer.wait_time = 300.0 # 5 minutes
auto_save_timer.autostart = true
auto_save_timer.connect("timeout", self, "auto_save")
add_child(auto_save_timer)
func auto_save():
save_game(Global.player_data)`}
language="gdscript"
showLineNumbers={true}
/>
</CardContent>
</Card>
</section>
{/* C# Examples */}
<section id="csharp-examples" className="space-y-6">
<h3 className="text-2xl font-semibold text-white flex items-center gap-2">
<Code2 className="h-6 w-6 text-blue-400" />
C# Integration (Godot 4 Mono)
</h3>
<Card className="bg-slate-900/50 border-blue-500/20">
<CardHeader>
<CardTitle>Leaderboard System (C#)</CardTitle>
<CardDescription>Display global leaderboards with real-time updates</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<CodeBlock
code={`using Godot;
using AeThex;
using System.Threading.Tasks;
public partial class Leaderboard : Control
{
private AeThexClient _aethex;
private ItemList _leaderboardList;
public override void _Ready()
{
_aethex = GetNode<AeThexClient>("/root/AeThex");
_leaderboardList = GetNode<ItemList>("LeaderboardList");
LoadLeaderboard();
}
private async void LoadLeaderboard()
{
try
{
var result = await _aethex.Leaderboards.GetTopAsync("global-score", new()
{
Limit = 100,
Platform = "all"
});
_leaderboardList.Clear();
foreach (var entry in result.Entries)
{
var text = $"{entry.Rank}. {entry.Username} - {entry.Score:N0} pts";
_leaderboardList.AddItem(text);
}
GD.Print($"Loaded {result.Entries.Count} leaderboard entries");
}
catch (System.Exception e)
{
GD.PrintErr($"Failed to load leaderboard: {e.Message}");
}
}
public async void SubmitScore(int score)
{
try
{
await _aethex.Leaderboards.UpdateScoreAsync("global-score", new()
{
UserId = GlobalData.CurrentUser.Id,
Score = score,
Metadata = new()
{
{ "platform", "godot" },
{ "version", ProjectSettings.GetSetting("application/config/version").AsString() }
}
});
GD.Print($"Score submitted: {score}");
LoadLeaderboard(); // Refresh
}
catch (System.Exception e)
{
GD.PrintErr($"Failed to submit score: {e.Message}");
}
}
}`}
language="csharp"
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">
Multiple authentication methods: Email/password, Steam, Epic Games, or anonymous.
</p>
<Card className="bg-slate-900/50 border-blue-500/20">
<CardHeader>
<CardTitle>Email + Password Login</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<CodeBlock
code={`# GDScript authentication example
extends Control
@onready var email_input = $VBoxContainer/EmailInput
@onready var password_input = $VBoxContainer/PasswordInput
@onready var login_button = $VBoxContainer/LoginButton
@onready var status_label = $VBoxContainer/StatusLabel
func _ready():
login_button.connect("pressed", self, "_on_login_pressed")
func _on_login_pressed():
var email = email_input.text
var password = password_input.text
if email.is_empty() or password.is_empty():
status_label.text = "Please enter email and password"
return
status_label.text = "Logging in..."
login_button.disabled = true
# Authenticate with AeThex
var result = await AeThex.aethex_client.auth.login(email, password)
if result.success:
status_label.text = "Login successful!"
Global.current_user = result.user
# Save auth token for future requests
AeThex.aethex_client.set_auth_token(result.token)
# Transition to main game
await get_tree().create_timer(1.0).timeout
get_tree().change_scene_to_file("res://scenes/MainMenu.tscn")
else:
status_label.text = "Login failed: " + result.error
login_button.disabled = false`}
language="gdscript"
showLineNumbers={true}
/>
</CardContent>
</Card>
<Card className="bg-slate-900/50 border-blue-500/20">
<CardHeader>
<CardTitle>Steam Authentication (PC Builds)</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<p className="text-gray-300">
Link Godot games on Steam with AeThex using the GodotSteam plugin.
</p>
<CodeBlock
code={`# Requires GodotSteam plugin: https://godotsteam.com
extends Node
func authenticate_with_steam():
if not Steam.isSteamRunning():
print("Steam not running")
return
# Get Steam session ticket
var ticket_result = Steam.getAuthSessionTicket()
var ticket = ticket_result["ticket"]
# Send to AeThex for verification
var result = await AeThex.aethex_client.auth.login_steam({
"ticket": ticket,
"steam_id": Steam.getSteamID()
})
if result.success:
print("Steam auth successful!")
Global.current_user = result.user`}
language="gdscript"
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 & Tips
</h3>
<div className="space-y-4">
<Card className="bg-yellow-950/20 border-yellow-500/20">
<CardHeader>
<CardTitle className="text-yellow-300">Godot-Specific Considerations</CardTitle>
</CardHeader>
<CardContent className="space-y-3 text-gray-300">
<p>• <strong>Use await for async calls:</strong> Godot 4's await keyword makes HTTP requests clean</p>
<p>• <strong>HTTPRequest node:</strong> For manual API calls, use Godot's built-in HTTPRequest</p>
<p>• <strong>Export variables:</strong> Store API keys in environment variables, not in scenes</p>
<p>• <strong>Signal-based flow:</strong> Connect AeThex signals for auth success/failure</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 user data locally, sync periodically</p>
<p>• <strong>Batch requests:</strong> Group multiple API calls when possible</p>
<p>• <strong>Background threads:</strong> Use Thread or WorkerThreadPool for heavy API work</p>
<p>• <strong>Offline mode:</strong> Implement local fallback when API is unreachable</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-blue-400" />
Resources & Examples
</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<Card className="bg-slate-900/50 border-blue-500/20">
<CardHeader>
<CardTitle className="text-lg">Example Projects</CardTitle>
</CardHeader>
<CardContent className="space-y-3">
<Button variant="outline" className="w-full justify-between" asChild>
<a href="https://github.com/aethex-corp/godot-starter" target="_blank" rel="noopener noreferrer">
Godot + AeThex Starter
<ExternalLink className="h-4 w-4" />
</a>
</Button>
<Button variant="outline" className="w-full justify-between" asChild>
<a href="https://github.com/aethex-corp/godot-multiplayer-demo" target="_blank" rel="noopener noreferrer">
Multiplayer Demo
<ExternalLink className="h-4 w-4" />
</a>
</Button>
<Button variant="outline" className="w-full justify-between" asChild>
<a href="https://github.com/aethex-corp/godot-leaderboard" target="_blank" rel="noopener noreferrer">
Leaderboard System
<ExternalLink className="h-4 w-4" />
</a>
</Button>
</CardContent>
</Card>
<Card className="bg-slate-900/50 border-blue-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.godotengine.org" target="_blank" rel="noopener noreferrer">
Godot Engine 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-blue-950/50 to-indigo-950/50 border-blue-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 cross-platform games with Godot Engine and AeThex. Export to PC, mobile, web,
and console with unified cloud saves, leaderboards, and authentication.
</p>
<div className="flex gap-4">
<Button className="bg-blue-600 hover:bg-blue-700" asChild>
<a href="/dev-platform/dashboard">Get API Key</a>
</Button>
<Button variant="outline" asChild>
<a href="https://github.com/aethex-corp/godot-sdk" target="_blank">
Download SDK
</a>
</Button>
</div>
</CardContent>
</Card>
</div>
);
}

558
client/pages/docs/integrations/ItchIo.tsx Normal file
View file

@ -0,0 +1,558 @@
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Heart, Code2, Rocket, ExternalLink, CheckCircle2, AlertTriangle, Package } from "lucide-react";
import { CodeBlock } from "@/components/dev-platform/ui/CodeBlock";
export default function ItchIoIntegration() {
return (
<div className="space-y-12">
<section id="overview" className="space-y-4">
<Badge className="bg-pink-500/20 text-pink-100 uppercase tracking-wide">
<Heart className="mr-2 h-3 w-3" />
Itch.io Integration
</Badge>
<h2 className="text-3xl font-semibold text-white">
Publish on Itch.io with AeThex
</h2>
<p className="text-gray-400 text-lg leading-relaxed">
Distribute your indie games on itch.io, the world's largest indie game marketplace. Integrate
AeThex APIs for cloud saves, achievements, analytics, and cross-platform player progression.
</p>
</section>
{/* Quick Stats */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<Card className="bg-pink-950/20 border-pink-500/20">
<CardContent className="pt-6">
<div className="text-3xl font-bold text-pink-300">1M+</div>
<div className="text-sm text-gray-400">Creators</div>
</CardContent>
</Card>
<Card className="bg-pink-950/20 border-pink-500/20">
<CardContent className="pt-6">
<div className="text-3xl font-bold text-pink-300">500K+</div>
<div className="text-sm text-gray-400">Published Games</div>
</CardContent>
</Card>
<Card className="bg-pink-950/20 border-pink-500/20">
<CardContent className="pt-6">
<div className="text-3xl font-bold text-pink-300">Pay What You Want</div>
<div className="text-sm text-gray-400">Flexible Pricing</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-pink-500/20">
<CardHeader>
<CardTitle className="flex items-center gap-2 text-pink-300">
<CheckCircle2 className="h-5 w-5" />
Cloud Save Sync
</CardTitle>
</CardHeader>
<CardContent className="text-gray-400">
Save player progress to AeThex backend, accessible across itch.io app and browser builds
</CardContent>
</Card>
<Card className="bg-slate-900/50 border-pink-500/20">
<CardHeader>
<CardTitle className="flex items-center gap-2 text-pink-300">
<CheckCircle2 className="h-5 w-5" />
Cross-Store Leaderboards
</CardTitle>
</CardHeader>
<CardContent className="text-gray-400">
Combine itch.io players with Steam, Epic, and GameJolt users in unified leaderboards
</CardContent>
</Card>
<Card className="bg-slate-900/50 border-pink-500/20">
<CardHeader>
<CardTitle className="flex items-center gap-2 text-pink-300">
<CheckCircle2 className="h-5 w-5" />
Player Analytics
</CardTitle>
</CardHeader>
<CardContent className="text-gray-400">
Track itch.io player behavior, demographics, and compare with other distribution platforms
</CardContent>
</Card>
<Card className="bg-slate-900/50 border-pink-500/20">
<CardHeader>
<CardTitle className="flex items-center gap-2 text-pink-300">
<CheckCircle2 className="h-5 w-5" />
Web Game Backend
</CardTitle>
</CardHeader>
<CardContent className="text-gray-400">
Perfect for HTML5/WebGL games on itch.io - use AeThex REST APIs directly from browser
</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-pink-400" />
Quick Start Guide
</h3>
<Card className="bg-slate-900/50 border-pink-500/20">
<CardHeader>
<CardTitle>1. Publish Your Game on Itch.io</CardTitle>
<CardDescription>Create your game page and upload builds</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<ol className="space-y-2 text-gray-300">
<li className="flex gap-3">
<span className="text-pink-400 font-bold">1.</span>
<span>Create account at <a href="https://itch.io" className="text-pink-400 hover:underline" target="_blank" rel="noopener noreferrer">itch.io</a></span>
</li>
<li className="flex gap-3">
<span className="text-pink-400 font-bold">2.</span>
<span>Upload your game via Dashboard → Upload new project</span>
</li>
<li className="flex gap-3">
<span className="text-pink-400 font-bold">3.</span>
<span>Configure pricing (free, paid, or pay-what-you-want)</span>
</li>
<li className="flex gap-3">
<span className="text-pink-400 font-bold">4.</span>
<span>Set up API access in your game code (no itch.io API key needed for basic features)</span>
</li>
</ol>
</CardContent>
</Card>
<Card className="bg-slate-900/50 border-pink-500/20">
<CardHeader>
<CardTitle>2. Initialize AeThex for Web Games</CardTitle>
<CardDescription>Perfect for HTML5/WebGL builds on itch.io</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<CodeBlock
code={`// For HTML5/JavaScript games on itch.io
// Install via CDN or npm
<script src="https://cdn.aethex.dev/sdk/v1/aethex.min.js"></script>
// Or via npm for bundled projects
import { AeThexClient } from '@aethex/sdk';
// Initialize client
const aethex = new AeThexClient({
apiKey: 'YOUR_AETHEX_API_KEY',
environment: 'production'
});
// Authenticate player (email/password or guest)
async function authenticatePlayer() {
try {
// Check if user has existing session
const savedToken = localStorage.getItem('aethex_token');
if (savedToken) {
aethex.setAuthToken(savedToken);
console.log('Restored session');
return;
}
// Otherwise, create guest account
const result = await aethex.auth.createGuest({
platform: 'itchio',
deviceId: generateDeviceId()
});
localStorage.setItem('aethex_token', result.token);
console.log('Guest account created:', result.userId);
} catch (error) {
console.error('Auth failed:', error);
}
}
function generateDeviceId() {
// Create stable device ID for itch.io app or browser
const storedId = localStorage.getItem('device_id');
if (storedId) return storedId;
const newId = 'itchio_' + Math.random().toString(36).substring(2);
localStorage.setItem('device_id', newId);
return newId;
}
// Call on game start
authenticatePlayer();`}
language="javascript"
showLineNumbers={true}
/>
</CardContent>
</Card>
<Card className="bg-slate-900/50 border-pink-500/20">
<CardHeader>
<CardTitle>3. Implement Cloud Saves</CardTitle>
<CardDescription>Save player progress across sessions and devices</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<CodeBlock
code={`// Cloud save implementation for itch.io games
class SaveManager {
constructor(aethexClient) {
this.aethex = aethexClient;
this.userId = null;
}
async init() {
const user = await this.aethex.auth.getCurrentUser();
this.userId = user.id;
}
// Save game state to AeThex cloud
async saveGame(gameState) {
try {
await this.aethex.users.updateData(this.userId, {
namespace: 'itchio-game-save',
data: {
level: gameState.level,
score: gameState.score,
inventory: gameState.inventory,
progress: gameState.progress,
timestamp: Date.now()
}
});
console.log('Game saved to cloud!');
this.showNotification('Game Saved');
} catch (error) {
console.error('Save failed:', error);
this.showNotification('Save failed - will retry');
}
}
// Load game state from AeThex cloud
async loadGame() {
try {
const result = await this.aethex.users.getData(this.userId, {
namespace: 'itchio-game-save'
});
if (result.data) {
console.log('Game loaded from cloud');
return result.data;
} else {
console.log('No save found, starting new game');
return this.getDefaultGameState();
}
} catch (error) {
console.error('Load failed:', error);
return this.getDefaultGameState();
}
}
getDefaultGameState() {
return {
level: 1,
score: 0,
inventory: [],
progress: 0
};
}
// Auto-save every 2 minutes
enableAutoSave(getGameState) {
setInterval(() => {
const state = getGameState();
this.saveGame(state);
}, 120000); // 2 minutes
}
showNotification(message) {
// Show in-game notification
console.log('NOTIFICATION:', message);
}
}
// Usage
const saveManager = new SaveManager(aethex);
await saveManager.init();
// Load game on start
const gameState = await saveManager.loadGame();
// Enable auto-save
saveManager.enableAutoSave(() => ({
level: currentLevel,
score: playerScore,
inventory: playerInventory,
progress: gameProgress
}));
// Manual save button
document.getElementById('save-button').addEventListener('click', async () => {
await saveManager.saveGame({
level: currentLevel,
score: playerScore,
inventory: playerInventory,
progress: gameProgress
});
});`}
language="javascript"
showLineNumbers={true}
/>
</CardContent>
</Card>
</section>
{/* Itch.io App Integration */}
<section id="itchio-app" className="space-y-6">
<h3 className="text-2xl font-semibold text-white flex items-center gap-2">
<Code2 className="h-6 w-6 text-pink-400" />
Itch.io App Integration
</h3>
<Card className="bg-slate-900/50 border-pink-500/20">
<CardHeader>
<CardTitle>Detect Itch.io App Environment</CardTitle>
<CardDescription>Optimize for browser vs desktop app</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<CodeBlock
code={`// Detect if game is running in itch.io desktop app
function isItchApp() {
// Itch.io app exposes window.Itch object
return typeof window.Itch !== 'undefined';
}
// Adjust save strategy based on environment
async function configureSaveStrategy() {
if (isItchApp()) {
console.log('Running in itch.io app - using cloud + local saves');
// Use both local and cloud saves for redundancy
await enableCloudSaves();
await enableLocalSaves();
// Access itch.io app features
if (window.Itch) {
// Get app version
console.log('Itch app version:', window.Itch.VERSION);
// Trigger app features (if available)
// Note: Limited itch.io app API
}
} else {
console.log('Running in browser - cloud saves only');
await enableCloudSaves();
}
}
async function enableCloudSaves() {
// AeThex cloud saves work everywhere
console.log('Cloud saves enabled via AeThex');
}
async function enableLocalSaves() {
// Local saves for itch.io app using localStorage
console.log('Local saves enabled for app');
}
configureSaveStrategy();`}
language="javascript"
showLineNumbers={true}
/>
</CardContent>
</Card>
<Card className="bg-slate-900/50 border-pink-500/20">
<CardHeader>
<CardTitle>Cross-Platform Leaderboard</CardTitle>
<CardDescription>Share scores across itch.io and other stores</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<CodeBlock
code={`// Submit score to AeThex leaderboard
async function submitScore(score) {
try {
const result = await aethex.leaderboards.updateScore('global-leaderboard', {
userId: currentUser.id,
score: score,
metadata: {
platform: 'itchio',
timestamp: Date.now(),
gameVersion: '1.0.0'
}
});
console.log(\`Score submitted! Your rank: \${result.rank}\`);
return result;
} catch (error) {
console.error('Failed to submit score:', error);
}
}
// Display leaderboard with itch.io and other platforms
async function displayLeaderboard() {
const leaderboard = await aethex.leaderboards.getTop('global-leaderboard', {
limit: 100,
platform: 'all' // Include Steam, Epic, GameJolt, etc.
});
const container = document.getElementById('leaderboard');
container.innerHTML = '<h2>Global Leaderboard</h2>';
leaderboard.entries.forEach((entry, index) => {
const platformBadge = getPlatformBadge(entry.metadata.platform);
container.innerHTML += \`
<div class="leaderboard-entry">
<span class="rank">\${index + 1}</span>
<span class="username">\${entry.username}</span>
<span class="platform-badge">\${platformBadge}</span>
<span class="score">\${entry.score.toLocaleString()}</span>
</div>
\`;
});
}
function getPlatformBadge(platform) {
const badges = {
'itchio': '🎮 itch.io',
'steam': '🔷 Steam',
'gamejolt': '⚡ GameJolt',
'epic': '📦 Epic'
};
return badges[platform] || '🌐 Web';
}`}
language="javascript"
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 & Tips
</h3>
<div className="space-y-4">
<Card className="bg-yellow-950/20 border-yellow-500/20">
<CardHeader>
<CardTitle className="text-yellow-300">Itch.io-Specific Tips</CardTitle>
</CardHeader>
<CardContent className="space-y-3 text-gray-300">
<p>• <strong>HTML5 games:</strong> Itch.io has excellent HTML5 support, perfect for WebGL/Canvas games</p>
<p>• <strong>Pay-what-you-want:</strong> Offer free version with AeThex ads, paid removes ads</p>
<p>• <strong>Butler CLI:</strong> Use itch.io's butler tool for automated builds and updates</p>
<p>• <strong>Browser compatibility:</strong> Test in Chrome, Firefox, Safari for web builds</p>
</CardContent>
</Card>
<Card className="bg-green-950/20 border-green-500/20">
<CardHeader>
<CardTitle className="text-green-300">Monetization Strategy</CardTitle>
</CardHeader>
<CardContent className="space-y-3 text-gray-300">
<p>• <strong>Flexible pricing:</strong> Let players pay what they want ($0-$20 recommended)</p>
<p>• <strong>Revenue share:</strong> Itch.io takes 0-30% (you choose), AeThex tracks sales analytics</p>
<p>• <strong>Bundle sales:</strong> Participate in itch.io bundles for discoverability</p>
<p>• <strong>Patreon integration:</strong> Link Patreon supporters to exclusive AeThex features</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-pink-400" />
Resources & Examples
</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<Card className="bg-slate-900/50 border-pink-500/20">
<CardHeader>
<CardTitle className="text-lg">Example Games</CardTitle>
</CardHeader>
<CardContent className="space-y-3">
<Button variant="outline" className="w-full justify-between" asChild>
<a href="https://aethex.itch.io/demo-game" target="_blank" rel="noopener noreferrer">
AeThex + Itch.io Demo
<ExternalLink className="h-4 w-4" />
</a>
</Button>
<Button variant="outline" className="w-full justify-between" asChild>
<a href="https://github.com/aethex-corp/itchio-html5-starter" target="_blank" rel="noopener noreferrer">
HTML5 Game Template
<ExternalLink className="h-4 w-4" />
</a>
</Button>
<Button variant="outline" className="w-full justify-between" asChild>
<a href="https://github.com/aethex-corp/itchio-cloud-saves" target="_blank" rel="noopener noreferrer">
Cloud Save Example
<ExternalLink className="h-4 w-4" />
</a>
</Button>
</CardContent>
</Card>
<Card className="bg-slate-900/50 border-pink-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://itch.io/docs/creators" target="_blank" rel="noopener noreferrer">
Itch.io Creator 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-pink-950/50 to-rose-950/50 border-pink-500/30">
<CardContent className="p-8 space-y-4">
<h3 className="text-2xl font-semibold text-white">Ready to Launch?</h3>
<p className="text-gray-300">
Publish your indie game on itch.io with AeThex backend features. Reach 500K+ games
marketplace with cloud saves, cross-platform leaderboards, and player analytics.
</p>
<div className="flex gap-4">
<Button className="bg-pink-600 hover:bg-pink-700" asChild>
<a href="/dev-platform/dashboard">Get API Key</a>
</Button>
<Button variant="outline" asChild>
<a href="https://itch.io/game/new" target="_blank">
Upload to Itch.io
</a>
</Button>
</div>
</CardContent>
</Card>
</div>
);
}

467
client/pages/docs/integrations/RecRoom.tsx Normal file
View file

@ -0,0 +1,467 @@
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Gamepad2, Code2, Rocket, ExternalLink, CheckCircle2, AlertTriangle, Package } from "lucide-react";
import { CodeBlock } from "@/components/dev-platform/ui/CodeBlock";
export default function RecRoomIntegration() {
return (
<div className="space-y-12">
<section id="overview" className="space-y-4">
<Badge className="bg-blue-500/20 text-blue-100 uppercase tracking-wide">
<Gamepad2 className="mr-2 h-3 w-3" />
RecRoom Integration
</Badge>
<h2 className="text-3xl font-semibold text-white">
Build RecRoom Experiences with AeThex
</h2>
<p className="text-gray-400 text-lg leading-relaxed">
Create cross-platform social games for RecRoom's 3M+ monthly active users. Use AeThex's unified API
with RecRoom Circuits for visual scripting, data persistence, and multi-platform deployment.
</p>
</section>
{/* Quick Stats */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<Card className="bg-blue-950/20 border-blue-500/20">
<CardContent className="pt-6">
<div className="text-3xl font-bold text-blue-300">3M+</div>
<div className="text-sm text-gray-400">Monthly Active Users</div>
</CardContent>
</Card>
<Card className="bg-blue-950/20 border-blue-500/20">
<CardContent className="pt-6">
<div className="text-3xl font-bold text-blue-300">12M+</div>
<div className="text-sm text-gray-400">Created Rooms</div>
</CardContent>
</Card>
<Card className="bg-blue-950/20 border-blue-500/20">
<CardContent className="pt-6">
<div className="text-3xl font-bold text-blue-300">VR + Mobile</div>
<div className="text-sm text-gray-400">Cross-Platform</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-blue-500/20">
<CardHeader>
<CardTitle className="flex items-center gap-2 text-blue-300">
<CheckCircle2 className="h-5 w-5" />
Persistent Game State
</CardTitle>
</CardHeader>
<CardContent className="text-gray-400">
Save player inventory, room configurations, and game progress that persists across VR and mobile sessions
</CardContent>
</Card>
<Card className="bg-slate-900/50 border-blue-500/20">
<CardHeader>
<CardTitle className="flex items-center gap-2 text-blue-300">
<CheckCircle2 className="h-5 w-5" />
Unified Leaderboards
</CardTitle>
</CardHeader>
<CardContent className="text-gray-400">
Track scores across RecRoom, Roblox, and web platforms with AeThex's cross-platform leaderboard API
</CardContent>
</Card>
<Card className="bg-slate-900/50 border-blue-500/20">
<CardHeader>
<CardTitle className="flex items-center gap-2 text-blue-300">
<CheckCircle2 className="h-5 w-5" />
Circuit Automation
</CardTitle>
</CardHeader>
<CardContent className="text-gray-400">
Connect RecRoom Circuits to AeThex webhooks for real-time events, triggers, and automated game logic
</CardContent>
</Card>
<Card className="bg-slate-900/50 border-blue-500/20">
<CardHeader>
<CardTitle className="flex items-center gap-2 text-blue-300">
<CheckCircle2 className="h-5 w-5" />
Social Features
</CardTitle>
</CardHeader>
<CardContent className="text-gray-400">
Link RecRoom profiles to AeThex Passport for friend lists, parties, and social features across platforms
</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-blue-400" />
Quick Start Guide
</h3>
<Card className="bg-slate-900/50 border-blue-500/20">
<CardHeader>
<CardTitle>1. Install AeThex Circuits Plugin</CardTitle>
<CardDescription>Add AeThex API chips to your RecRoom Circuits palette</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<p className="text-gray-300">
In RecRoom's Maker Pen, search for <code className="bg-blue-950/50 px-2 py-1 rounded text-blue-300">AeThex</code> in the
Circuits V2 palette to find pre-built API chips.
</p>
<div className="bg-blue-950/30 border border-blue-500/30 rounded-lg p-4 space-y-2">
<p className="text-sm text-blue-200 font-semibold">Available Chips:</p>
<ul className="space-y-1 text-sm text-gray-300">
<li>• <code className="text-blue-300">AeThex API Call</code> - Make HTTP requests to AeThex endpoints</li>
<li>• <code className="text-blue-300">AeThex Auth</code> - Authenticate RecRoom players</li>
<li>• <code className="text-blue-300">AeThex Save Data</code> - Persist player data</li>
<li>• <code className="text-blue-300">AeThex Leaderboard</code> - Fetch/update leaderboard scores</li>
</ul>
</div>
</CardContent>
</Card>
<Card className="bg-slate-900/50 border-blue-500/20">
<CardHeader>
<CardTitle>2. Configure API Credentials</CardTitle>
<CardDescription>Get your API key from the AeThex Developer Dashboard</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<ol className="space-y-3 text-gray-300">
<li className="flex gap-3">
<span className="text-blue-400 font-bold">1.</span>
<span>Visit <a href="/dev-platform/dashboard" className="text-blue-400 hover:underline">AeThex Developer Dashboard</a></span>
</li>
<li className="flex gap-3">
<span className="text-blue-400 font-bold">2.</span>
<span>Create new API key with <code className="bg-blue-950/50 px-1 rounded">recroom:read</code> and <code className="bg-blue-950/50 px-1 rounded">recroom:write</code> scopes</span>
</li>
<li className="flex gap-3">
<span className="text-blue-400 font-bold">3.</span>
<span>Copy API key to your RecRoom room's configuration chip</span>
</li>
</ol>
<div className="bg-yellow-950/20 border border-yellow-500/30 rounded-lg p-4">
<p className="text-sm text-yellow-200 flex items-start gap-2">
<AlertTriangle className="h-4 w-4 mt-0.5 flex-shrink-0" />
<span><strong>Security:</strong> Never display your API key in-room. Use the AeThex Config chip which stores credentials securely.</span>
</p>
</div>
</CardContent>
</Card>
<Card className="bg-slate-900/50 border-blue-500/20">
<CardHeader>
<CardTitle>3. Build Your First Circuit</CardTitle>
<CardDescription>Create a persistent leaderboard that syncs across platforms</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<p className="text-gray-300">
Connect the following chips in RecRoom Circuits V2:
</p>
<div className="bg-slate-950/50 border border-blue-500/20 rounded-lg p-4 space-y-3 font-mono text-sm">
<div className="flex items-center gap-2">
<div className="w-32 px-3 py-1 bg-green-950/50 border border-green-500/30 rounded text-green-300">Button</div>
<div className="text-gray-500">→</div>
<div className="w-32 px-3 py-1 bg-blue-950/50 border border-blue-500/30 rounded text-blue-300">AeThex Auth</div>
</div>
<div className="flex items-center gap-2">
<div className="w-32 px-3 py-1 bg-blue-950/50 border border-blue-500/30 rounded text-blue-300">AeThex Auth</div>
<div className="text-gray-500">→</div>
<div className="w-32 px-3 py-1 bg-purple-950/50 border border-purple-500/30 rounded text-purple-300">Player ID</div>
</div>
<div className="flex items-center gap-2">
<div className="w-32 px-3 py-1 bg-purple-950/50 border border-purple-500/30 rounded text-purple-300">Player ID</div>
<div className="text-gray-500">→</div>
<div className="w-32 px-3 py-1 bg-blue-950/50 border border-blue-500/30 rounded text-blue-300">Get Score</div>
</div>
<div className="flex items-center gap-2">
<div className="w-32 px-3 py-1 bg-blue-950/50 border border-blue-500/30 rounded text-blue-300">Get Score</div>
<div className="text-gray-500">→</div>
<div className="w-32 px-3 py-1 bg-yellow-950/50 border border-yellow-500/30 rounded text-yellow-300">Text Screen</div>
</div>
</div>
<p className="text-sm text-gray-400">
This circuit fetches a player's score from AeThex when they press a button, displaying it on a text screen.
Scores are shared across RecRoom, Roblox, VRChat, and web platforms.
</p>
</CardContent>
</Card>
</section>
{/* Code Examples */}
<section id="examples" className="space-y-6">
<h3 className="text-2xl font-semibold text-white flex items-center gap-2">
<Code2 className="h-6 w-6 text-blue-400" />
API Integration Examples
</h3>
<Card className="bg-slate-900/50 border-blue-500/20">
<CardHeader>
<CardTitle>Save Player Progress</CardTitle>
<CardDescription>Persist inventory and game state across sessions</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<CodeBlock
code={`// JavaScript (for webhook endpoints)
// RecRoom sends player data to your AeThex webhook
app.post('/api/recroom/save-progress', async (req, res) => {
const { playerId, inventory, level, checkpoint } = req.body;
// Save to AeThex backend
await aethex.users.update(playerId, {
recroom_inventory: inventory,
recroom_level: level,
recroom_checkpoint: checkpoint,
last_played_recroom: new Date().toISOString()
});
res.json({ success: true, saved_at: new Date() });
});
// Load player progress when they join
app.get('/api/recroom/load-progress/:playerId', async (req, res) => {
const { playerId } = req.params;
const userData = await aethex.users.get(playerId);
res.json({
inventory: userData.recroom_inventory || [],
level: userData.recroom_level || 1,
checkpoint: userData.recroom_checkpoint || 'start'
});
});`}
language="javascript"
showLineNumbers={true}
/>
</CardContent>
</Card>
<Card className="bg-slate-900/50 border-blue-500/20">
<CardHeader>
<CardTitle>Cross-Platform Leaderboard</CardTitle>
<CardDescription>Update scores that sync across RecRoom, Roblox, and web</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<CodeBlock
code={`// TypeScript endpoint for RecRoom Circuit webhook
import { AeThexClient } from '@aethex/sdk';
const aethex = new AeThexClient({
apiKey: process.env.AETHEX_API_KEY
});
// RecRoom Circuit triggers this when player scores
export async function updateScore(req, res) {
const { playerId, score, gameMode } = req.body;
try {
// Update player's score in AeThex leaderboard
await aethex.leaderboards.updateScore('global-leaderboard', {
userId: playerId,
score: score,
metadata: {
platform: 'recroom',
gameMode: gameMode,
timestamp: Date.now()
}
});
// Fetch updated leaderboard (top 10)
const leaderboard = await aethex.leaderboards.getTop('global-leaderboard', {
limit: 10,
platform: 'all' // Include scores from all platforms
});
res.json({
success: true,
playerRank: leaderboard.findIndex(entry => entry.userId === playerId) + 1,
topPlayers: leaderboard
});
} catch (error) {
res.status(500).json({ error: error.message });
}
}`}
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 RecRoom players to AeThex Passport for cross-platform identity.
</p>
<Card className="bg-slate-900/50 border-blue-500/20">
<CardHeader>
<CardTitle>3-Step Auth Flow</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<div className="space-y-4">
<div className="flex gap-4 items-start">
<div className="w-8 h-8 rounded-full bg-blue-500/20 flex items-center justify-center text-blue-300 font-bold flex-shrink-0">1</div>
<div>
<h4 className="text-white font-semibold mb-1">Player Enters Room</h4>
<p className="text-gray-400 text-sm">Use RecRoom Circuits to detect player join event</p>
</div>
</div>
<div className="flex gap-4 items-start">
<div className="w-8 h-8 rounded-full bg-blue-500/20 flex items-center justify-center text-blue-300 font-bold flex-shrink-0">2</div>
<div>
<h4 className="text-white font-semibold mb-1">Generate Auth Code</h4>
<p className="text-gray-400 text-sm">
AeThex API Call chip requests 6-digit code, displays it on a text board in-room
</p>
<code className="block mt-2 text-xs bg-blue-950/50 px-3 py-2 rounded text-blue-200">
POST /api/auth/generate-code<br/>
→ Returns: {`{ code: "ABC123", expires: "2026-01-10T21:00:00Z" }`}
</code>
</div>
</div>
<div className="flex gap-4 items-start">
<div className="w-8 h-8 rounded-full bg-blue-500/20 flex items-center justify-center text-blue-300 font-bold flex-shrink-0">3</div>
<div>
<h4 className="text-white font-semibold mb-1">Player Links Account</h4>
<p className="text-gray-400 text-sm">
Player visits <code className="bg-blue-950/50 px-1 rounded">aethex.dev/link</code>, enters code,
RecRoom receives webhook with Passport ID
</p>
</div>
</div>
</div>
</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">RecRoom Circuits Limitations</CardTitle>
</CardHeader>
<CardContent className="space-y-3 text-gray-300">
<p>• <strong>No native HTTP chips:</strong> Use AeThex middleware webhooks instead of direct API calls</p>
<p>• <strong>Response delays:</strong> Webhook roundtrips take 1-3 seconds, design UX accordingly</p>
<p>• <strong>Circuit complexity:</strong> Max 200 chips per room, optimize with cloud functions</p>
<p>• <strong>Mobile performance:</strong> Keep API payloads under 50KB for mobile players</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 results:</strong> Store API responses in room variables for 5-10 minutes</p>
<p>• <strong>Batch operations:</strong> Group multiple player updates into single API call</p>
<p>• <strong>Lazy loading:</strong> Only fetch data when players interact with features</p>
<p>• <strong>Offline mode:</strong> Implement fallback gameplay when webhooks fail</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-blue-400" />
Resources & Examples
</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<Card className="bg-slate-900/50 border-blue-500/20">
<CardHeader>
<CardTitle className="text-lg">Example Rooms</CardTitle>
</CardHeader>
<CardContent className="space-y-3">
<Button variant="outline" className="w-full justify-between" asChild>
<a href="https://rec.net/room/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://rec.net/room/aethex-inventory" target="_blank" rel="noopener noreferrer">
Persistent Inventory
<ExternalLink className="h-4 w-4" />
</a>
</Button>
<Button variant="outline" className="w-full justify-between" asChild>
<a href="https://rec.net/room/aethex-auth" target="_blank" rel="noopener noreferrer">
Authentication Demo
<ExternalLink className="h-4 w-4" />
</a>
</Button>
</CardContent>
</Card>
<Card className="bg-slate-900/50 border-blue-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://recroom.com/developer" target="_blank" rel="noopener noreferrer">
RecRoom 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-blue-950/50 to-cyan-950/50 border-blue-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">
Start building cross-platform social games with AeThex. Deploy to RecRoom, VRChat,
Roblox, and web simultaneously with one unified API.
</p>
<div className="flex gap-4">
<Button className="bg-blue-600 hover:bg-blue-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>
);
}

406
client/pages/docs/integrations/Spatial.tsx Normal file
View file

@ -0,0 +1,406 @@
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>
);
}

448
client/pages/docs/integrations/TheSandbox.tsx Normal file
View file

@ -0,0 +1,448 @@
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Box, Code2, Rocket, ExternalLink, CheckCircle2, AlertTriangle, Package } from "lucide-react";
import { CodeBlock } from "@/components/dev-platform/ui/CodeBlock";
export default function TheSandboxIntegration() {
return (
<div className="space-y-12">
<section id="overview" className="space-y-4">
<Badge className="bg-amber-500/20 text-amber-100 uppercase tracking-wide">
<Box className="mr-2 h-3 w-3" />
The Sandbox Integration
</Badge>
<h2 className="text-3xl font-semibold text-white">
Build in The Sandbox with AeThex
</h2>
<p className="text-gray-400 text-lg leading-relaxed">
Create voxel-based gaming experiences in The Sandbox metaverse. Integrate AeThex APIs with Game Maker,
VoxEdit assets, and LAND ownership for user-generated content at scale.
</p>
</section>
{/* Quick Stats */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<Card className="bg-amber-950/20 border-amber-500/20">
<CardContent className="pt-6">
<div className="text-3xl font-bold text-amber-300">2M+</div>
<div className="text-sm text-gray-400">Monthly Players</div>
</CardContent>
</Card>
<Card className="bg-amber-950/20 border-amber-500/20">
<CardContent className="pt-6">
<div className="text-3xl font-bold text-amber-300">166K+</div>
<div className="text-sm text-gray-400">LAND Owners</div>
</CardContent>
</Card>
<Card className="bg-amber-950/20 border-amber-500/20">
<CardContent className="pt-6">
<div className="text-3xl font-bold text-amber-300">Polygon</div>
<div className="text-sm text-gray-400">Blockchain</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-amber-500/20">
<CardHeader>
<CardTitle className="flex items-center gap-2 text-amber-300">
<CheckCircle2 className="h-5 w-5" />
Voxel Game Experiences
</CardTitle>
</CardHeader>
<CardContent className="text-gray-400">
Build games with Game Maker visual editor, sync player progress and rewards via AeThex backend
</CardContent>
</Card>
<Card className="bg-slate-900/50 border-amber-500/20">
<CardHeader>
<CardTitle className="flex items-center gap-2 text-amber-300">
<CheckCircle2 className="h-5 w-5" />
NFT Asset Marketplace
</CardTitle>
</CardHeader>
<CardContent className="text-gray-400">
Create VoxEdit assets, list on OpenSea, track ownership and sales via AeThex analytics
</CardContent>
</Card>
<Card className="bg-slate-900/50 border-amber-500/20">
<CardHeader>
<CardTitle className="flex items-center gap-2 text-amber-300">
<CheckCircle2 className="h-5 w-5" />
LAND Experiences
</CardTitle>
</CardHeader>
<CardContent className="text-gray-400">
Deploy games across multiple LAND parcels with unified player accounts via AeThex Passport
</CardContent>
</Card>
<Card className="bg-slate-900/50 border-amber-500/20">
<CardHeader>
<CardTitle className="flex items-center gap-2 text-amber-300">
<CheckCircle2 className="h-5 w-5" />
Cross-Platform Rewards
</CardTitle>
</CardHeader>
<CardContent className="text-gray-400">
Award achievements in The Sandbox that unlock rewards in Roblox, Minecraft, and web platforms
</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-amber-400" />
Quick Start Guide
</h3>
<Card className="bg-slate-900/50 border-amber-500/20">
<CardHeader>
<CardTitle>1. Install Game Maker + AeThex Plugin</CardTitle>
<CardDescription>Add AeThex SDK to your Sandbox experience</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<p className="text-gray-300">
Download The Sandbox Game Maker from <a href="https://www.sandbox.game/en/create/game-maker/" className="text-amber-400 hover:underline" target="_blank" rel="noopener noreferrer">sandbox.game</a>,
then install the AeThex plugin from the Asset Library.
</p>
<div className="bg-amber-950/30 border border-amber-500/30 rounded-lg p-4 space-y-2">
<p className="text-sm text-amber-200 font-semibold">Plugin Features:</p>
<ul className="space-y-1 text-sm text-gray-300">
<li>• <code className="text-amber-300">AeThex API Block</code> - Make HTTP requests to AeThex endpoints</li>
<li>• <code className="text-amber-300">Player Auth Block</code> - Link wallet to AeThex Passport</li>
<li>• <code className="text-amber-300">Achievement Block</code> - Award cross-platform achievements</li>
<li>• <code className="text-amber-300">Leaderboard Block</code> - Display global leaderboards</li>
</ul>
</div>
</CardContent>
</Card>
<Card className="bg-slate-900/50 border-amber-500/20">
<CardHeader>
<CardTitle>2. Configure AeThex in Game Maker</CardTitle>
<CardDescription>Add API credentials via visual scripting</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<p className="text-gray-300">
Drag the <strong>AeThex Config</strong> block into your experience, then enter your API key from the
<a href="/dev-platform/dashboard" className="text-amber-400 hover:underline"> Developer Dashboard</a>.
</p>
<div className="bg-slate-950/50 border border-amber-500/20 rounded-lg p-4 space-y-3">
<p className="text-sm text-amber-200 font-semibold">Visual Script Example:</p>
<div className="font-mono text-sm space-y-2">
<div className="flex items-center gap-2">
<div className="w-40 px-3 py-1 bg-green-950/50 border border-green-500/30 rounded text-green-300">On Player Enter</div>
<div className="text-gray-500">→</div>
<div className="w-40 px-3 py-1 bg-amber-950/50 border border-amber-500/30 rounded text-amber-300">AeThex Auth</div>
</div>
<div className="flex items-center gap-2">
<div className="w-40 px-3 py-1 bg-amber-950/50 border border-amber-500/30 rounded text-amber-300">Player Wallet</div>
<div className="text-gray-500">→</div>
<div className="w-40 px-3 py-1 bg-blue-950/50 border border-blue-500/30 rounded text-blue-300">Get Profile</div>
</div>
<div className="flex items-center gap-2">
<div className="w-40 px-3 py-1 bg-blue-950/50 border border-blue-500/30 rounded text-blue-300">Profile Data</div>
<div className="text-gray-500">→</div>
<div className="w-40 px-3 py-1 bg-purple-950/50 border border-purple-500/30 rounded text-purple-300">Display UI</div>
</div>
</div>
</div>
</CardContent>
</Card>
<Card className="bg-slate-900/50 border-amber-500/20">
<CardHeader>
<CardTitle>3. Build with TypeScript SDK (Advanced)</CardTitle>
<CardDescription>For custom logic beyond Game Maker's visual editor</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<p className="text-gray-300">
Use The Sandbox TypeScript SDK for complex game logic that integrates with AeThex APIs.
</p>
<CodeBlock
code={`import { AeThexClient } from '@aethex/sandbox-sdk';
import { getPlayerWallet } from '@sandbox-game/sdk';
// Initialize AeThex
const aethex = new AeThexClient({
apiKey: process.env.AETHEX_API_KEY,
environment: 'production'
});
// Example: Track player progress across LAND parcels
class CrossLandProgress {
async saveCheckpoint(walletAddress: string, landId: string, checkpoint: number) {
await aethex.users.updateData(walletAddress, {
namespace: 'sandbox-quest',
data: {
currentLand: landId,
checkpoint: checkpoint,
timestamp: Date.now()
}
});
}
async loadProgress(walletAddress: string) {
const data = await aethex.users.getData(walletAddress, {
namespace: 'sandbox-quest'
});
return data.checkpoint || 0;
}
}
// Example: Award NFT for completing quest
async function completeQuest(walletAddress: string) {
// Update quest status in AeThex
await aethex.achievements.unlock(walletAddress, 'sandbox-quest-complete');
// Mint reward NFT on Polygon
const nft = await aethex.web3.mintNFT({
walletAddress: walletAddress,
contractAddress: '0x...', // Your ASSETS contract on Polygon
chain: 'polygon',
metadata: {
name: 'Quest Completionist',
description: 'Completed the AeThex Sandbox Quest',
image: 'ipfs://Qm...',
attributes: [
{ trait_type: 'Rarity', value: 'Epic' },
{ trait_type: 'Type', value: 'Achievement Badge' }
]
}
});
console.log(\`NFT minted! Token ID: \${nft.tokenId}\`);
}`}
language="typescript"
showLineNumbers={true}
/>
</CardContent>
</Card>
</section>
{/* Authentication Flow */}
<section id="authentication" className="space-y-6">
<h3 className="text-2xl font-semibold text-white">Wallet Authentication</h3>
<p className="text-gray-400">
Link Sandbox wallets to AeThex Passport for cross-platform progression.
</p>
<Card className="bg-slate-900/50 border-amber-500/20">
<CardHeader>
<CardTitle>Polygon Wallet Integration</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<p className="text-gray-300">
The Sandbox uses Polygon network for fast, low-cost transactions. AeThex supports Polygon L2 natively.
</p>
<div className="space-y-4">
<div className="flex gap-4 items-start">
<div className="w-8 h-8 rounded-full bg-amber-500/20 flex items-center justify-center text-amber-300 font-bold flex-shrink-0">1</div>
<div>
<h4 className="text-white font-semibold mb-1">Player Enters Experience</h4>
<p className="text-gray-400 text-sm">Game Maker detects player with Polygon wallet connected</p>
</div>
</div>
<div className="flex gap-4 items-start">
<div className="w-8 h-8 rounded-full bg-amber-500/20 flex items-center justify-center text-amber-300 font-bold flex-shrink-0">2</div>
<div>
<h4 className="text-white font-semibold mb-1">Check AeThex Link</h4>
<p className="text-gray-400 text-sm">AeThex API checks if wallet is already linked to Passport</p>
</div>
</div>
<div className="flex gap-4 items-start">
<div className="w-8 h-8 rounded-full bg-amber-500/20 flex items-center justify-center text-amber-300 font-bold flex-shrink-0">3</div>
<div>
<h4 className="text-white font-semibold mb-1">Sign-In Prompt (First Time)</h4>
<p className="text-gray-400 text-sm">If not linked, prompt wallet signature (gasless, EIP-4361)</p>
</div>
</div>
<div className="flex gap-4 items-start">
<div className="w-8 h-8 rounded-full bg-amber-500/20 flex items-center justify-center text-amber-300 font-bold flex-shrink-0">4</div>
<div>
<h4 className="text-white font-semibold mb-1">Cross-Platform Access</h4>
<p className="text-gray-400 text-sm">Player can now access achievements, progress from other platforms</p>
</div>
</div>
</div>
<CodeBlock
code={`import { AeThexClient } from '@aethex/sandbox-sdk';
import { getPlayerWallet, signMessage } from '@sandbox-game/sdk';
const aethex = new AeThexClient({ apiKey: process.env.AETHEX_API_KEY });
async function linkWalletToAeThex() {
const walletAddress = await getPlayerWallet();
// Check if wallet is already linked
const isLinked = await aethex.auth.checkWalletLink(walletAddress);
if (isLinked) {
console.log('Wallet already linked!');
return;
}
// Generate Sign-In with Ethereum message
const { message, nonce } = await aethex.auth.generateSignInMessage({
address: walletAddress,
chainId: 137, // Polygon mainnet
platform: 'sandbox'
});
// Request signature (no gas fees)
const signature = await signMessage(message);
// Verify and link wallet to Passport
const { passportId, token } = await aethex.auth.verifySignature({
address: walletAddress,
signature: signature,
nonce: nonce
});
console.log(\`Linked! Passport ID: \${passportId}\`);
// Load cross-platform achievements
const achievements = await aethex.achievements.list(passportId);
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">The Sandbox Limitations</CardTitle>
</CardHeader>
<CardContent className="space-y-3 text-gray-300">
<p>• <strong>Game Maker constraints:</strong> Visual scripting has limited logic complexity</p>
<p>• <strong>Voxel performance:</strong> Max 50k voxels per LAND parcel, optimize models</p>
<p>• <strong>Player limits:</strong> 100 concurrent players per experience</p>
<p>• <strong>Asset file sizes:</strong> VoxEdit models max 10MB, use LOD for large objects</p>
</CardContent>
</Card>
<Card className="bg-green-950/20 border-green-500/20">
<CardHeader>
<CardTitle className="text-green-300">Optimization Tips</CardTitle>
</CardHeader>
<CardContent className="space-y-3 text-gray-300">
<p>• <strong>Polygon L2 benefits:</strong> 2-second confirmations, $0.001 gas fees vs Ethereum mainnet</p>
<p>• <strong>Batch API calls:</strong> Update multiple players' data in single request</p>
<p>• <strong>Cache NFT metadata:</strong> Store VoxEdit asset metadata on AeThex CDN</p>
<p>• <strong>Mobile support:</strong> The Sandbox mobile app launching 2026, test on Android/iOS</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-amber-400" />
Resources & Examples
</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<Card className="bg-slate-900/50 border-amber-500/20">
<CardHeader>
<CardTitle className="text-lg">Example Experiences</CardTitle>
</CardHeader>
<CardContent className="space-y-3">
<Button variant="outline" className="w-full justify-between" asChild>
<a href="https://www.sandbox.game/en/experiences/aethex-quest/" target="_blank" rel="noopener noreferrer">
AeThex Quest Experience
<ExternalLink className="h-4 w-4" />
</a>
</Button>
<Button variant="outline" className="w-full justify-between" asChild>
<a href="https://github.com/aethex-corp/sandbox-cross-platform-rewards" target="_blank" rel="noopener noreferrer">
Cross-Platform Rewards
<ExternalLink className="h-4 w-4" />
</a>
</Button>
<Button variant="outline" className="w-full justify-between" asChild>
<a href="https://github.com/aethex-corp/sandbox-nft-gallery" target="_blank" rel="noopener noreferrer">
NFT Gallery Template
<ExternalLink className="h-4 w-4" />
</a>
</Button>
</CardContent>
</Card>
<Card className="bg-slate-900/50 border-amber-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.sandbox.game" target="_blank" rel="noopener noreferrer">
The Sandbox Game Maker 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-amber-950/50 to-yellow-950/50 border-amber-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 voxel gaming experiences with The Sandbox and AeThex. Build NFT-powered games with
cross-platform rewards on Polygon L2.
</p>
<div className="flex gap-4">
<Button className="bg-amber-600 hover:bg-amber-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>
);
}

400
client/pages/docs/integrations/VRChat.tsx Normal file
View file

@ -0,0 +1,400 @@
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Headset, Code2, Rocket, ExternalLink, CheckCircle2, AlertTriangle, Package } from "lucide-react";
import { CodeBlock } from "@/components/dev-platform/ui/CodeBlock";
export default function VRChatIntegration() {
return (
<div className="space-y-12">
<section id="overview" className="space-y-4">
<Badge className="bg-purple-500/20 text-purple-100 uppercase tracking-wide">
<Headset className="mr-2 h-3 w-3" />
VRChat Integration
</Badge>
<h2 className="text-3xl font-semibold text-white">
Build VRChat Worlds with AeThex
</h2>
<p className="text-gray-400 text-lg leading-relaxed">
Deploy interactive VR experiences to VRChat's 30K+ concurrent user platform using AeThex's unified API.
Leverage Udon scripting integration, cross-platform authentication, and real-time data sync.
</p>
</section>
{/* Quick Stats */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<Card className="bg-purple-950/20 border-purple-500/20">
<CardContent className="pt-6">
<div className="text-3xl font-bold text-purple-300">30K+</div>
<div className="text-sm text-gray-400">Concurrent Users</div>
</CardContent>
</Card>
<Card className="bg-purple-950/20 border-purple-500/20">
<CardContent className="pt-6">
<div className="text-3xl font-bold text-purple-300">250K+</div>
<div className="text-sm text-gray-400">Published Worlds</div>
</CardContent>
</Card>
<Card className="bg-purple-950/20 border-purple-500/20">
<CardContent className="pt-6">
<div className="text-3xl font-bold text-purple-300">C#</div>
<div className="text-sm text-gray-400">Udon Programming</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-purple-500/20">
<CardHeader>
<CardTitle className="flex items-center gap-2 text-purple-300">
<CheckCircle2 className="h-5 w-5" />
Persistent World Data
</CardTitle>
</CardHeader>
<CardContent className="text-gray-400">
Store player progress, leaderboards, and world state in AeThex backend with automatic sync across sessions
</CardContent>
</Card>
<Card className="bg-slate-900/50 border-purple-500/20">
<CardHeader>
<CardTitle className="flex items-center gap-2 text-purple-300">
<CheckCircle2 className="h-5 w-5" />
Cross-Platform Auth
</CardTitle>
</CardHeader>
<CardContent className="text-gray-400">
Link VRChat users to AeThex Passport for unified identity across Roblox, Fortnite, and web platforms
</CardContent>
</Card>
<Card className="bg-slate-900/50 border-purple-500/20">
<CardHeader>
<CardTitle className="flex items-center gap-2 text-purple-300">
<CheckCircle2 className="h-5 w-5" />
Real-Time Events
</CardTitle>
</CardHeader>
<CardContent className="text-gray-400">
Trigger world events based on API data - sync game state, achievements, or live leaderboards in real-time
</CardContent>
</Card>
<Card className="bg-slate-900/50 border-purple-500/20">
<CardHeader>
<CardTitle className="flex items-center gap-2 text-purple-300">
<CheckCircle2 className="h-5 w-5" />
Asset Pipeline
</CardTitle>
</CardHeader>
<CardContent className="text-gray-400">
Upload and manage VRChat assets through AeThex API, with automatic versioning and CDN distribution
</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-purple-400" />
Quick Start Guide
</h3>
<Card className="bg-slate-900/50 border-purple-500/20">
<CardHeader>
<CardTitle>1. Install AeThex Unity SDK</CardTitle>
<CardDescription>Add the AeThex package to your VRChat Unity project</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<CodeBlock
code={`// Via Unity Package Manager
// Add this URL to Package Manager → Add package from git URL
https://github.com/aethex-corp/unity-sdk.git
// Or download and import manually
// Download: https://github.com/aethex-corp/unity-sdk/releases/latest`}
language="bash"
showLineNumbers={false}
/>
</CardContent>
</Card>
<Card className="bg-slate-900/50 border-purple-500/20">
<CardHeader>
<CardTitle>2. Configure API Credentials</CardTitle>
<CardDescription>Get your API key from the AeThex Developer Dashboard</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<CodeBlock
code={`using AeThex;
public class AeThexManager : MonoBehaviour
{
private AeThexClient client;
void Start()
{
// Initialize AeThex client
client = new AeThexClient(new AeThexConfig
{
ApiKey = "your_api_key_here",
Environment = AeThexEnvironment.Production
});
Debug.Log("AeThex initialized for VRChat");
}
}`}
language="csharp"
showLineNumbers={true}
/>
</CardContent>
</Card>
<Card className="bg-slate-900/50 border-purple-500/20">
<CardHeader>
<CardTitle>3. Create Your First Udon Script</CardTitle>
<CardDescription>Build a persistent leaderboard that syncs across VRChat sessions</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<CodeBlock
code={`using UdonSharp;
using UnityEngine;
using VRC.SDKBase;
using AeThex;
public class VRChatLeaderboard : UdonSharpBehaviour
{
private AeThexClient aethexClient;
void Start()
{
aethexClient = GetComponent<AeThexManager>().GetClient();
}
public override void OnPlayerJoined(VRCPlayerApi player)
{
// Fetch player's AeThex profile
string playerId = player.displayName;
aethexClient.GetUserProfile(playerId).Then(profile =>
{
Debug.Log($"Player {profile.username} joined with score: {profile.score}");
UpdateLeaderboard(profile);
});
}
public void OnPlayerScored(VRCPlayerApi player, int points)
{
// Update score in AeThex backend
aethexClient.UpdateUserScore(player.displayName, points).Then(() =>
{
Debug.Log($"Score updated: +{points} points");
});
}
private void UpdateLeaderboard(UserProfile profile)
{
// Update VRChat UI with leaderboard data
// This syncs across all players in the world
}
}`}
language="csharp"
showLineNumbers={true}
/>
</CardContent>
</Card>
</section>
{/* Authentication Flow */}
<section id="authentication" className="space-y-6">
<h3 className="text-2xl font-semibold text-white">Cross-Platform Authentication</h3>
<p className="text-gray-400">
Link VRChat players to their AeThex Passport for unified identity across all platforms.
</p>
<Card className="bg-slate-900/50 border-purple-500/20">
<CardHeader>
<CardTitle>Authentication Flow</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<ol className="space-y-3 text-gray-300">
<li className="flex gap-3">
<span className="text-purple-400 font-bold">1.</span>
<span>Player joins VRChat world and interacts with authentication panel</span>
</li>
<li className="flex gap-3">
<span className="text-purple-400 font-bold">2.</span>
<span>World displays unique 6-digit code from AeThex API</span>
</li>
<li className="flex gap-3">
<span className="text-purple-400 font-bold">3.</span>
<span>Player visits <code className="bg-purple-950/50 px-2 py-1 rounded">aethex.dev/link</code> and enters code</span>
</li>
<li className="flex gap-3">
<span className="text-purple-400 font-bold">4.</span>
<span>VRChat world receives webhook with linked Passport data</span>
</li>
<li className="flex gap-3">
<span className="text-purple-400 font-bold">5.</span>
<span>Player's VRChat profile now syncs with Roblox, Fortnite, web accounts</span>
</li>
</ol>
<CodeBlock
code={`// Generate authentication code in VRChat world
public void OnAuthButtonPressed()
{
aethexClient.GenerateAuthCode(playerDisplayName).Then(response =>
{
// Display 6-digit code to player in-world
authCodeText.text = $"Code: {response.code}";
Debug.Log($"Player should visit: aethex.dev/link?code={response.code}");
// Poll for authentication completion
StartCoroutine(PollAuthStatus(response.code));
});
}
private IEnumerator PollAuthStatus(string code)
{
while (true)
{
yield return new WaitForSeconds(2f);
var status = await aethexClient.CheckAuthStatus(code);
if (status.authenticated)
{
Debug.Log($"Player linked! Passport ID: {status.passportId}");
OnPlayerAuthenticated(status.passportId);
break;
}
}
}`}
language="csharp"
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">VRChat Limitations</CardTitle>
</CardHeader>
<CardContent className="space-y-3 text-gray-300">
<p>• <strong>No direct HTTP requests:</strong> Use AeThex SDK which handles async via Unity coroutines</p>
<p>• <strong>Udon C# restrictions:</strong> No threading, limited async/await support</p>
<p>• <strong>Rate limits:</strong> Max 100 API calls per world per minute</p>
<p>• <strong>Data size:</strong> Keep API responses under 100KB for optimal performance</p>
</CardContent>
</Card>
<Card className="bg-green-950/20 border-green-500/20">
<CardHeader>
<CardTitle className="text-green-300">Performance Tips</CardTitle>
</CardHeader>
<CardContent className="space-y-3 text-gray-300">
<p>• <strong>Cache data:</strong> Store frequently accessed data locally, refresh every 5 minutes</p>
<p>• <strong>Batch requests:</strong> Use bulk endpoints to fetch multiple players at once</p>
<p>• <strong>Lazy load:</strong> Only fetch data when players interact with features</p>
<p>• <strong>Fallback mode:</strong> Implement offline mode for when API is unavailable</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-purple-400" />
Resources & Examples
</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<Card className="bg-slate-900/50 border-purple-500/20">
<CardHeader>
<CardTitle className="text-lg">Example Worlds</CardTitle>
</CardHeader>
<CardContent className="space-y-3">
<Button variant="outline" className="w-full justify-between" asChild>
<a href="https://github.com/aethex-corp/vrchat-leaderboard-world" target="_blank" rel="noopener noreferrer">
Leaderboard World
<ExternalLink className="h-4 w-4" />
</a>
</Button>
<Button variant="outline" className="w-full justify-between" asChild>
<a href="https://github.com/aethex-corp/vrchat-auth-demo" target="_blank" rel="noopener noreferrer">
Authentication Demo
<ExternalLink className="h-4 w-4" />
</a>
</Button>
<Button variant="outline" className="w-full justify-between" asChild>
<a href="https://github.com/aethex-corp/vrchat-inventory-sync" target="_blank" rel="noopener noreferrer">
Inventory Sync
<ExternalLink className="h-4 w-4" />
</a>
</Button>
</CardContent>
</Card>
<Card className="bg-slate-900/50 border-purple-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.vrchat.com/docs/udon" target="_blank" rel="noopener noreferrer">
VRChat Udon 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-purple-950/50 to-indigo-950/50 border-purple-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">
Start building cross-platform VR experiences with AeThex. Deploy to VRChat, RecRoom,
and web simultaneously with one unified API.
</p>
<div className="flex gap-4">
<Button className="bg-purple-600 hover:bg-purple-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>
);
}