561c110de1
Core Features Added: - Platform abstraction layer supporting Roblox, UEFN, Spatial, Core - Cross-platform translation engine with Claude API integration - PlatformSelector component for platform switching - TranslationPanel with side-by-side code comparison - Updated template system with platform awareness Technical Implementation: - src/lib/platforms.ts: Platform definitions and utilities - src/lib/translation-engine.ts: AI-powered code translation - src/components/PlatformSelector.tsx: Platform dropdown UI - src/components/TranslationPanel.tsx: Full-screen translation interface - src/components/Toolbar.tsx: Added platform selector and translate button - src/lib/templates.ts: Extended with platform field for all 25 templates Strategic Alignment: This implements the #1 competitive differentiator from the strategic plan: cross-platform code translation. Enables "Build once, deploy everywhere" positioning against competitors like Superbullet.ai. Next Steps (Phase 2): - Integrate into App.tsx with platform state management - Create UEFN Verse template library - Add Claude API key configuration - Test Roblox → UEFN translation - Update documentation with multi-platform features
84 lines
2.7 KiB
TypeScript
84 lines
2.7 KiB
TypeScript
import { memo } from 'react';
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from '@/components/ui/select';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { PlatformId, platforms, activePlatforms } from '@/lib/platforms';
|
|
|
|
interface PlatformSelectorProps {
|
|
value: PlatformId;
|
|
onChange: (platform: PlatformId) => void;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
export const PlatformSelector = memo(function PlatformSelector({
|
|
value,
|
|
onChange,
|
|
disabled = false,
|
|
}: PlatformSelectorProps) {
|
|
const currentPlatform = platforms[value];
|
|
|
|
return (
|
|
<Select value={value} onValueChange={onChange} disabled={disabled}>
|
|
<SelectTrigger className="w-[180px] h-8 text-xs">
|
|
<SelectValue>
|
|
<div className="flex items-center gap-2">
|
|
<span>{currentPlatform.icon}</span>
|
|
<span>{currentPlatform.displayName}</span>
|
|
{currentPlatform.status === 'beta' && (
|
|
<Badge variant="secondary" className="text-[10px] px-1 py-0">
|
|
BETA
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
</SelectValue>
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{activePlatforms.map((platform) => (
|
|
<SelectItem key={platform.id} value={platform.id}>
|
|
<div className="flex items-center gap-2">
|
|
<span>{platform.icon}</span>
|
|
<div className="flex flex-col">
|
|
<span className="font-medium">{platform.displayName}</span>
|
|
<span className="text-xs text-muted-foreground">
|
|
{platform.language}
|
|
</span>
|
|
</div>
|
|
{platform.status === 'beta' && (
|
|
<Badge variant="secondary" className="text-[10px] ml-auto">
|
|
BETA
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
</SelectItem>
|
|
))}
|
|
<SelectItem value="spatial" disabled>
|
|
<div className="flex items-center gap-2 opacity-50">
|
|
<span>🌐</span>
|
|
<div className="flex flex-col">
|
|
<span className="font-medium">Spatial Creator</span>
|
|
<span className="text-xs text-muted-foreground">
|
|
Coming Soon
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</SelectItem>
|
|
<SelectItem value="core" disabled>
|
|
<div className="flex items-center gap-2 opacity-50">
|
|
<span>🎯</span>
|
|
<div className="flex flex-col">
|
|
<span className="font-medium">Core Games</span>
|
|
<span className="text-xs text-muted-foreground">
|
|
Coming Soon
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
);
|
|
});
|