feat: add Godot, GameMaker, GameJolt, and Itch.io integrations
- Game engine integrations: Godot (GDScript/C#), GameMaker (GML) - Distribution platform integrations: GameJolt, Itch.io - Reorganized DocsIntegrations into Engines/Platforms/Distribution sections - Added routes for all 4 new integration pages - Total coverage: 10+ platforms, 2+ engines, 2+ storefronts
This commit is contained in:
MrPiglr
GitHub
parent
68d84528cf
commit
1c7b70666a
6 changed files with 2156 additions and 3 deletions
|
|
@ -49,6 +49,10 @@ 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";
|
||||
|
|
@ -641,6 +645,22 @@ const App = () => (
|
|||
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 />} />
|
||||
|
|
|
|||
|
|
@ -113,16 +113,146 @@ export default function DocsIntegrations() {
|
|||
</p>
|
||||
</section>
|
||||
|
||||
{/* Platform Integrations Showcase */}
|
||||
{/* 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">
|
||||
Platform Integrations
|
||||
Social VR & Metaverse Platforms
|
||||
</h3>
|
||||
</div>
|
||||
<p className="text-gray-400">
|
||||
Deploy your games and apps across multiple platforms using AeThex's unified API.
|
||||
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">
|
||||
|
|
|
|||
414
client/pages/docs/integrations/GameJolt.tsx
Normal file
414
client/pages/docs/integrations/GameJolt.tsx
Normal 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
484
client/pages/docs/integrations/GameMaker.tsx
Normal 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
547
client/pages/docs/integrations/Godot.tsx
Normal 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
558
client/pages/docs/integrations/ItchIo.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in a new issue