mirror of
https://github.com/LCE-Hub/LCE-Emerald-Launcher.git
synced 2026-07-18 08:17:23 +00:00
764 lines
34 KiB
TypeScript
764 lines
34 KiB
TypeScript
import { useState, useEffect, useRef, useMemo } from "react";
|
|
import { motion, AnimatePresence } from "framer-motion";
|
|
import { useUI, useAudio, useConfig } from "../../context/LauncherContext";
|
|
import { PckService } from "../../services/PckService";
|
|
import { PCKFile, PCKAsset, PCKAssetType } from "../../types/pck";
|
|
import SkinPreview3D from "../common/SkinPreview3D";
|
|
export default function PckEditorView() {
|
|
const { setActiveView } = useUI();
|
|
const { playPressSound, playBackSound } = useAudio();
|
|
const { animationsEnabled } = useConfig();
|
|
const [pck, setPck] = useState<PCKFile | null>(null);
|
|
const [selectedAssetId, setSelectedAssetId] = useState<string | null>(null);
|
|
const [searchTerm, setSearchTerm] = useState("");
|
|
const [isEditingProperty, setIsEditingProperty] = useState<{ idx: number, key: string, val: string } | null>(null);
|
|
const [expandedFolders, setExpandedFolders] = useState<Set<string>>(new Set());
|
|
const [notification, setNotification] = useState<{ message: string, type: "success" | "error" } | null>(null);
|
|
const [showTypeModal, setShowTypeModal] = useState<{ file: File, data: Uint8Array } | null>(null);
|
|
const [isChangingType, setIsChangingType] = useState(false);
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
|
const replaceInputRef = useRef<HTMLInputElement>(null);
|
|
const addAssetInputRef = useRef<HTMLInputElement>(null);
|
|
const treeData = useMemo(() => {
|
|
if (!pck) return [];
|
|
interface TempNode {
|
|
name: string;
|
|
path: string;
|
|
isFolder: boolean;
|
|
asset?: PCKAsset;
|
|
children: Record<string, TempNode>;
|
|
}
|
|
|
|
const root: Record<string, TempNode> = {};
|
|
pck.files.forEach(asset => {
|
|
if (searchTerm && !asset.path.toLowerCase().includes(searchTerm.toLowerCase())) return;
|
|
const parts = asset.path.split("/");
|
|
let currentLevel = root;
|
|
let currentPath = "";
|
|
parts.forEach((part, index) => {
|
|
currentPath = currentPath ? `${currentPath}/${part}` : part;
|
|
const isLast = index === parts.length - 1;
|
|
if (!currentLevel[part]) {
|
|
currentLevel[part] = {
|
|
name: part,
|
|
path: currentPath,
|
|
isFolder: !isLast,
|
|
asset: isLast ? asset : undefined,
|
|
children: {}
|
|
};
|
|
}
|
|
currentLevel = currentLevel[part].children;
|
|
});
|
|
});
|
|
|
|
const convert = (nodes: Record<string, TempNode>): any[] => {
|
|
return Object.values(nodes)
|
|
.sort((a, b) => {
|
|
if (a.isFolder && !b.isFolder) return -1;
|
|
if (!a.isFolder && b.isFolder) return 1;
|
|
return a.name.localeCompare(b.name);
|
|
})
|
|
.map(node => ({
|
|
...node,
|
|
children: convert(node.children)
|
|
}));
|
|
};
|
|
|
|
return convert(root);
|
|
}, [pck, searchTerm]);
|
|
|
|
const selectedAsset = useMemo(() => {
|
|
return pck?.files.find(f => f.id === selectedAssetId) || null;
|
|
}, [pck, selectedAssetId]);
|
|
|
|
const [assetPreview, setAssetPreview] = useState<{ id: string, url: string } | null>(null);
|
|
|
|
useEffect(() => {
|
|
if (!selectedAsset || ![PCKAssetType.SKIN, PCKAssetType.CAPE, PCKAssetType.TEXTURE, PCKAssetType.SKIN_DATA].includes(selectedAsset.type)) {
|
|
setAssetPreview(null);
|
|
return;
|
|
}
|
|
|
|
const blob = new Blob([selectedAsset.data as any], { type: "image/png" });
|
|
const url = URL.createObjectURL(blob);
|
|
setAssetPreview({ id: selectedAsset.id, url });
|
|
|
|
return () => {
|
|
URL.revokeObjectURL(url);
|
|
};
|
|
}, [selectedAsset]);
|
|
|
|
const assetPreviewUrl = (assetPreview && selectedAsset && assetPreview.id === selectedAsset.id) ? assetPreview.url : null;
|
|
|
|
const toggleFolder = (path: string) => {
|
|
const next = new Set(expandedFolders);
|
|
if (next.has(path)) next.delete(path);
|
|
else next.add(path);
|
|
setExpandedFolders(next);
|
|
};
|
|
|
|
const renderTree = (nodes: any[], depth = 0) => {
|
|
return nodes.map(node => {
|
|
const isExpanded = expandedFolders.has(node.path) || !!searchTerm;
|
|
const isSelected = selectedAssetId === node.asset?.id;
|
|
return (
|
|
<div key={node.path} className="flex flex-col">
|
|
<div
|
|
onClick={() => {
|
|
if (node.isFolder) {
|
|
toggleFolder(node.path);
|
|
} else {
|
|
playPressSound();
|
|
setSelectedAssetId(node.asset.id);
|
|
}
|
|
}}
|
|
style={{ paddingLeft: `${depth * 16 + 12}px` }}
|
|
className={`flex items-center gap-2 p-2 cursor-pointer transition-all border-l-2 ${isSelected
|
|
? "bg-[#FFFF55]/10 border-[#FFFF55] text-[#FFFF55]"
|
|
: "border-transparent hover:bg-white/5 text-white"
|
|
} ${node.isFolder ? "font-bold" : ""}`}
|
|
>
|
|
{node.isFolder ? (
|
|
<img
|
|
src={isExpanded ? "/images/Settings_Arrow_Down.png" : "/images/Settings_Arrow_Right.png"}
|
|
className="w-3 h-3 object-contain opacity-80"
|
|
style={{ imageRendering: "pixelated" }}
|
|
/>
|
|
) : (
|
|
<div className="w-3" />
|
|
)}
|
|
<img
|
|
src={node.isFolder ? "/images/Folder_Icon.png" : "/images/tools/pck.png"}
|
|
className={`w-4 h-4 object-contain ${isSelected ? "" : "grayscale opacity-60"}`}
|
|
style={{ imageRendering: "pixelated" }}
|
|
/>
|
|
<span className="truncate mc-text-shadow text-base">
|
|
{node.name}
|
|
</span>
|
|
{!node.isFolder && (
|
|
<span className="ml-auto text-[10px] opacity-40 uppercase">
|
|
{(node.asset.size / 1024).toFixed(1)} KB
|
|
</span>
|
|
)}
|
|
</div>
|
|
{node.isFolder && isExpanded && (
|
|
<div className="flex flex-col">
|
|
{renderTree(node.children, depth + 1)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
});
|
|
};
|
|
|
|
const handleFileLoad = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const file = e.target.files?.[0];
|
|
if (!file) return;
|
|
playPressSound();
|
|
const buffer = await file.arrayBuffer();
|
|
try {
|
|
const parsed = await PckService.readPCK(buffer);
|
|
setPck(parsed);
|
|
setSelectedAssetId(parsed.files[0]?.id || null);
|
|
setExpandedFolders(new Set());
|
|
} catch (err) {
|
|
console.error("Failed to parse PCK", err);
|
|
showNotification("Failed to parse PCK", "error");
|
|
}
|
|
};
|
|
|
|
const handleNewPCK = () => {
|
|
playPressSound();
|
|
const newPck: PCKFile = {
|
|
version: 2,
|
|
endianness: "little",
|
|
xmlSupport: false,
|
|
properties: ["ANIM", "BOX"],
|
|
files: []
|
|
};
|
|
setPck(newPck);
|
|
setSelectedAssetId(null);
|
|
setExpandedFolders(new Set());
|
|
showNotification("New PCK Created");
|
|
};
|
|
|
|
|
|
const showNotification = (message: string, type: "success" | "error" = "success") => {
|
|
setNotification({ message, type });
|
|
setTimeout(() => setNotification(null), 3000);
|
|
};
|
|
|
|
const handleExportAsset = (asset: PCKAsset) => {
|
|
playPressSound();
|
|
const blob = new Blob([asset.data as any]);
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement("a");
|
|
a.href = url;
|
|
a.download = asset.path.split("/").pop() || "asset";
|
|
a.click();
|
|
URL.revokeObjectURL(url);
|
|
showNotification(`Exported: ${asset.path.split("/").pop()}`);
|
|
};
|
|
|
|
const handleDeleteAsset = (id: string) => {
|
|
if (!pck) return;
|
|
playBackSound();
|
|
const newFiles = pck.files.filter(f => f.id !== id);
|
|
const assetPath = pck.files.find(f => f.id === id)?.path;
|
|
setPck({ ...pck, files: newFiles });
|
|
if (selectedAssetId === id) setSelectedAssetId(newFiles[0]?.id || null);
|
|
showNotification(`Deleted: ${assetPath?.split("/").pop()}`);
|
|
};
|
|
|
|
const handleReplaceAsset = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
if (!pck || !selectedAssetId) return;
|
|
const file = e.target.files?.[0];
|
|
if (!file) return;
|
|
|
|
playPressSound();
|
|
const buffer = await file.arrayBuffer();
|
|
const data = new Uint8Array(buffer);
|
|
|
|
const newFiles = pck.files.map(f => f.id === selectedAssetId ? { ...f, data, size: data.length } : f);
|
|
setPck({ ...pck, files: newFiles });
|
|
e.target.value = "";
|
|
showNotification("Asset Replaced");
|
|
};
|
|
|
|
const handleAddAsset = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
if (!pck) return;
|
|
const file = e.target.files?.[0];
|
|
if (!file) return;
|
|
playPressSound();
|
|
const buffer = await file.arrayBuffer();
|
|
const data = new Uint8Array(buffer);
|
|
setShowTypeModal({ file, data });
|
|
e.target.value = "";
|
|
};
|
|
|
|
const confirmAddAsset = (type: PCKAssetType) => {
|
|
if (!pck || !showTypeModal) return;
|
|
const { file, data } = showTypeModal;
|
|
const newAsset: PCKAsset = {
|
|
id: Math.random().toString(36).substr(2, 9),
|
|
path: file.name,
|
|
type,
|
|
size: data.length,
|
|
data,
|
|
properties: []
|
|
};
|
|
|
|
if (type === PCKAssetType.SKIN || type === PCKAssetType.CAPE) {
|
|
newAsset.properties.push({ key: "ANIM", value: "0" });
|
|
}
|
|
|
|
setPck({ ...pck, files: [...pck.files, newAsset] });
|
|
setSelectedAssetId(newAsset.id);
|
|
setShowTypeModal(null);
|
|
showNotification("Asset Added");
|
|
};
|
|
|
|
const handlePropertyEdit = (idx: number, newVal: string, isKey = false) => {
|
|
if (!pck || !selectedAssetId) return;
|
|
const newFiles = pck.files.map(f => {
|
|
if (f.id === selectedAssetId) {
|
|
const newProps = [...f.properties];
|
|
if (isKey) {
|
|
newProps[idx] = { ...newProps[idx], key: newVal };
|
|
if (!pck.properties.includes(newVal)) {
|
|
pck.properties.push(newVal);
|
|
}
|
|
} else {
|
|
newProps[idx] = { ...newProps[idx], value: newVal };
|
|
}
|
|
return { ...f, properties: newProps };
|
|
}
|
|
return f;
|
|
});
|
|
setPck({ ...pck, files: newFiles });
|
|
};
|
|
|
|
const handleAddProperty = () => {
|
|
if (!pck || !selectedAssetId) return;
|
|
playPressSound();
|
|
const newFiles = pck.files.map(f => {
|
|
if (f.id === selectedAssetId) {
|
|
return {
|
|
...f,
|
|
properties: [...f.properties, { key: "NEW_PROPERTY", value: "0" }]
|
|
};
|
|
}
|
|
return f;
|
|
});
|
|
setPck({ ...pck, files: newFiles });
|
|
};
|
|
|
|
const handleRemoveProperty = (idx: number) => {
|
|
if (!pck || !selectedAssetId) return;
|
|
playBackSound();
|
|
const newFiles = pck.files.map(f => {
|
|
if (f.id === selectedAssetId) {
|
|
const newProps = [...f.properties];
|
|
newProps.splice(idx, 1);
|
|
return { ...f, properties: newProps };
|
|
}
|
|
return f;
|
|
});
|
|
setPck({ ...pck, files: newFiles });
|
|
};
|
|
|
|
const handleTypeChange = (newType: PCKAssetType) => {
|
|
if (!pck || !selectedAssetId) return;
|
|
playPressSound();
|
|
const newFiles = pck.files.map(f => {
|
|
if (f.id === selectedAssetId) {
|
|
return { ...f, type: newType };
|
|
}
|
|
return f;
|
|
});
|
|
setPck({ ...pck, files: newFiles });
|
|
};
|
|
|
|
const handleMoveAsset = (direction: 'up' | 'down') => {
|
|
if (!pck || !selectedAssetId) return;
|
|
const idx = pck.files.findIndex(f => f.id === selectedAssetId);
|
|
if (idx === -1) return;
|
|
const newIdx = direction === 'up' ? idx - 1 : idx + 1;
|
|
if (newIdx < 0 || newIdx >= pck.files.length) return;
|
|
playPressSound();
|
|
const newFiles = [...pck.files];
|
|
[newFiles[idx], newFiles[newIdx]] = [newFiles[newIdx], newFiles[idx]];
|
|
setPck({ ...pck, files: newFiles });
|
|
};
|
|
|
|
const handleSavePCK = () => {
|
|
if (!pck) return;
|
|
playPressSound();
|
|
const buffer = PckService.serializePCK(pck);
|
|
const blob = new Blob([buffer]);
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement("a");
|
|
a.href = url;
|
|
a.download = pck.files.length > 0 ? "new.pck" : "empty.pck";
|
|
a.click();
|
|
URL.revokeObjectURL(url);
|
|
showNotification("PCK Saved Successfully");
|
|
};
|
|
|
|
useEffect(() => {
|
|
const handleKeyDown = (e: KeyboardEvent) => {
|
|
if (document.activeElement?.tagName === "INPUT") return;
|
|
if (e.key === "Escape" || e.key === "Backspace") {
|
|
if (isEditingProperty) {
|
|
setIsEditingProperty(null);
|
|
return;
|
|
}
|
|
playBackSound();
|
|
setActiveView("devtools");
|
|
return;
|
|
}
|
|
};
|
|
window.addEventListener("keydown", handleKeyDown);
|
|
return () => window.removeEventListener("keydown", handleKeyDown);
|
|
}, [playBackSound, setActiveView, isEditingProperty]);
|
|
|
|
const getTypeColor = (type: PCKAssetType) => {
|
|
switch (type) {
|
|
case PCKAssetType.SKIN: return "#FFFF55";
|
|
case PCKAssetType.SKIN_DATA: return "#FFFF55";
|
|
case PCKAssetType.CAPE: return "#AA00AA";
|
|
case PCKAssetType.TEXTURE: return "#55FFFF";
|
|
case PCKAssetType.AUDIO_DATA: return "#55FF55";
|
|
case PCKAssetType.UI_DATA: return "#FFAA00";
|
|
case PCKAssetType.LOCALISATION: return "#FF55FF";
|
|
case PCKAssetType.MODELS: return "#5555FF";
|
|
default: return "#AAAAAA";
|
|
}
|
|
};
|
|
|
|
return (
|
|
<motion.div
|
|
ref={containerRef}
|
|
initial={{ opacity: 0, scale: 0.95 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
exit={{ opacity: 0, scale: 0.95 }}
|
|
transition={{ duration: animationsEnabled ? 0.3 : 0 }}
|
|
className="flex flex-col items-center w-full max-w-6xl h-[85vh] outline-none"
|
|
>
|
|
<div className="w-full flex justify-between items-center mb-4 px-8">
|
|
<h2 className="text-2xl text-white mc-text-shadow border-b-2 border-[#373737] pb-1 tracking-widest uppercase font-bold">
|
|
PCK Editor
|
|
</h2>
|
|
<div className="flex gap-4">
|
|
<button
|
|
onClick={() => fileInputRef.current?.click()}
|
|
className="px-6 py-2 text-white mc-text-shadow transition-all hover:text-[#FFFF55] text-lg outline-none"
|
|
style={{ backgroundImage: "url('/images/Button_Background.png')", backgroundSize: "100% 100%" }}
|
|
>
|
|
Open PCK
|
|
</button>
|
|
<button
|
|
onClick={handleNewPCK}
|
|
className="px-6 py-2 text-white mc-text-shadow transition-all hover:text-[#FFFF55] text-lg outline-none"
|
|
style={{ backgroundImage: "url('/images/Button_Background.png')", backgroundSize: "100% 100%" }}
|
|
>
|
|
New PCK
|
|
</button>
|
|
<button
|
|
onClick={handleSavePCK}
|
|
disabled={!pck}
|
|
className={`px-6 py-2 text-white mc-text-shadow transition-all hover:text-[#FFFF55] text-lg outline-none ${!pck ? "opacity-50 grayscale" : ""}`}
|
|
style={{ backgroundImage: "url('/images/Button_Background.png')", backgroundSize: "100% 100%" }}
|
|
>
|
|
Save PCK
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<input type="file" ref={fileInputRef} onChange={handleFileLoad} className="hidden" accept=".pck" />
|
|
<input type="file" ref={replaceInputRef} onChange={handleReplaceAsset} className="hidden" />
|
|
<input type="file" ref={addAssetInputRef} onChange={handleAddAsset} className="hidden" />
|
|
{!pck ? (
|
|
<div className="flex-1 w-full flex flex-col items-center justify-center p-12"
|
|
style={{ backgroundImage: "url('/images/frame_background.png')", backgroundSize: "100% 100%", imageRendering: "pixelated" }}>
|
|
<img src="/images/tools/pck.png" className="w-32 h-32 mb-8 opacity-20 grayscale" style={{ imageRendering: "pixelated" }} />
|
|
<h3 className="text-2xl text-white/40 mc-text-shadow italic">Open a PCK file to begin editing</h3>
|
|
</div>
|
|
) : (
|
|
<div className="flex-1 w-full flex gap-4 overflow-hidden">
|
|
<div className="w-2/3 flex flex-col p-4" style={{ backgroundImage: "url('/images/frame_background.png')", backgroundSize: "100% 100%", imageRendering: "pixelated" }}>
|
|
<div className="mb-4 flex gap-4">
|
|
<input
|
|
type="text"
|
|
placeholder="Search assets..."
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
className="flex-1 bg-black/40 border-2 border-[#373737] text-white px-4 py-2 outline-none focus:border-[#FFFF55] transition-colors"
|
|
/>
|
|
<button
|
|
onClick={() => addAssetInputRef.current?.click()}
|
|
className="px-4 py-2 text-white mc-text-shadow text-sm shrink-0"
|
|
style={{ backgroundImage: "url('/images/Button_Background.png')", backgroundSize: "100% 100%" }}
|
|
>
|
|
Add Asset
|
|
</button>
|
|
</div>
|
|
<div className="flex-1 overflow-y-auto pr-2 custom-scrollbar">
|
|
{renderTree(treeData)}
|
|
</div>
|
|
</div>
|
|
<div className="w-1/3 flex flex-col p-6 overflow-y-auto" style={{ backgroundImage: "url('/images/frame_background.png')", backgroundSize: "100% 100%", imageRendering: "pixelated" }}>
|
|
<AnimatePresence mode="wait">
|
|
{!selectedAsset ? (
|
|
<div className="flex-1 flex flex-col items-center justify-center text-white/20 italic gap-4">
|
|
<img src="/images/tools/pck.png" className="w-16 h-16 opacity-10 grayscale" style={{ imageRendering: "pixelated" }} />
|
|
<span>Select an asset to view details</span>
|
|
</div>
|
|
) : (
|
|
<motion.div
|
|
key={selectedAsset.id}
|
|
initial={{ opacity: 0, x: 20 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
className="flex flex-col h-full"
|
|
>
|
|
<div className="flex justify-between items-start mb-4 border-b border-[#373737] pb-2">
|
|
<div className="flex flex-col gap-1 min-w-0 flex-1 pr-4">
|
|
<h3 className="text-[#FFFF55] text-xl mc-text-shadow truncate">
|
|
{selectedAsset.path.split("/").pop()}
|
|
</h3>
|
|
<div className="relative">
|
|
<button
|
|
onClick={() => setIsChangingType(!isChangingType)}
|
|
className="flex items-center gap-1.5 px-2 py-0.5 bg-white/5 hover:bg-white/10 border border-white/10 rounded-sm transition-all group/type"
|
|
>
|
|
<span className="text-[10px] uppercase tracking-widest mc-text-shadow font-bold" style={{ color: getTypeColor(selectedAsset.type) }}>
|
|
{PCKAssetType[selectedAsset.type].replace(/_/g, " ")}
|
|
</span>
|
|
<img
|
|
src="/images/Settings_Arrow_Down.png"
|
|
className={`w-2 h-2 object-contain opacity-40 group-hover/type:opacity-60 transition-transform ${isChangingType ? "rotate-180" : ""}`}
|
|
style={{ imageRendering: "pixelated" }}
|
|
/>
|
|
</button>
|
|
|
|
<AnimatePresence>
|
|
{isChangingType && (
|
|
<>
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
className="fixed inset-0 z-[120]"
|
|
onClick={() => setIsChangingType(false)}
|
|
/>
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.95, y: -10 }}
|
|
animate={{ opacity: 1, scale: 1, y: 0 }}
|
|
exit={{ opacity: 0, scale: 0.95, y: -10 }}
|
|
className="absolute top-full left-0 mt-2 z-[130] p-2 min-w-[180px] grid grid-cols-1 gap-1 shadow-2xl"
|
|
style={{
|
|
backgroundImage: "url('/images/frame_background.png')",
|
|
backgroundSize: "100% 100%",
|
|
imageRendering: "pixelated"
|
|
}}
|
|
>
|
|
{Object.keys(PCKAssetType)
|
|
.filter(k => isNaN(Number(k)))
|
|
.map((typeName) => {
|
|
const typeVal = PCKAssetType[typeName as keyof typeof PCKAssetType];
|
|
const isActive = selectedAsset.type === typeVal;
|
|
return (
|
|
<button
|
|
key={typeName}
|
|
onClick={() => {
|
|
handleTypeChange(typeVal);
|
|
setIsChangingType(false);
|
|
}}
|
|
className={`w-full text-left px-3 py-2 text-[10px] uppercase tracking-widest transition-all border-l-2 ${isActive
|
|
? "bg-white/10 border-[#FFFF55] text-white"
|
|
: "border-transparent text-white/40 hover:text-white/80 hover:bg-white/5"
|
|
}`}
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-1.5 h-1.5 rounded-full" style={{ backgroundColor: getTypeColor(typeVal) }} />
|
|
{typeName.replace(/_/g, " ")}
|
|
</div>
|
|
</button>
|
|
);
|
|
})}
|
|
</motion.div>
|
|
</>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-2 shrink-0">
|
|
<button onClick={() => handleMoveAsset('up')} className="hover:scale-110 active:scale-95 transition-transform">
|
|
<img src="/images/Settings_Arrow_Up.png" className="w-4 h-4 object-contain" style={{ imageRendering: "pixelated" }} />
|
|
</button>
|
|
<button onClick={() => handleMoveAsset('down')} className="hover:scale-110 active:scale-95 transition-transform">
|
|
<img src="/images/Settings_Arrow_Down.png" className="w-4 h-4 object-contain" style={{ imageRendering: "pixelated" }} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{assetPreviewUrl && (
|
|
<div className="w-full h-[550px] bg-black/40 border-2 border-[#373737] mb-6 flex items-center justify-center overflow-hidden relative group">
|
|
{(selectedAsset.type === PCKAssetType.SKIN || selectedAsset.type === PCKAssetType.CAPE || selectedAsset.type === PCKAssetType.SKIN_DATA) ? (
|
|
<SkinPreview3D key={selectedAsset.id} asset={selectedAsset} previewUrl={assetPreviewUrl || undefined} className="w-full h-full" />
|
|
) : (
|
|
<img src={assetPreviewUrl} className="max-w-full max-h-full object-contain" style={{ imageRendering: "pixelated" }} />
|
|
)}
|
|
<div className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity bg-black/60 px-2 py-1 rounded text-[10px] text-white/60 pointer-events-none uppercase tracking-widest">
|
|
{selectedAsset.type === PCKAssetType.SKIN ? "3D Skin View" : selectedAsset.type === PCKAssetType.CAPE ? "3D Cape View" : "Texture Preview"}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="space-y-6 flex-1">
|
|
<div>
|
|
<div className="flex justify-between items-end mb-2 px-1">
|
|
<div className="text-white/40 text-[10px] uppercase tracking-widest text-[#FFFF55]/60">Metadata Properties</div>
|
|
<button
|
|
onClick={handleAddProperty}
|
|
className="text-[#FFFF55] text-[10px] uppercase hover:underline"
|
|
>
|
|
+ Add Property
|
|
</button>
|
|
</div>
|
|
<div className="space-y-4">
|
|
{selectedAsset.properties.map((prop, idx) => (
|
|
<div key={idx} className="flex flex-col gap-1 group/prop">
|
|
<div className="flex justify-between items-center px-1">
|
|
<input
|
|
type="text"
|
|
value={prop.key}
|
|
onChange={(e) => handlePropertyEdit(idx, e.target.value, true)}
|
|
className="bg-transparent text-white/40 text-[10px] outline-none hover:text-white/60 focus:text-[#FFFF55] w-2/3"
|
|
/>
|
|
<button
|
|
onClick={() => handleRemoveProperty(idx)}
|
|
className="text-red-500/0 group-hover/prop:text-red-500/40 hover:text-red-500 transition-colors text-[10px] uppercase"
|
|
>
|
|
Remove
|
|
</button>
|
|
</div>
|
|
<div className="relative">
|
|
<input
|
|
type="text"
|
|
value={prop.value}
|
|
onChange={(e) => handlePropertyEdit(idx, e.target.value)}
|
|
className="w-full bg-black/40 p-2 text-white border border-[#373737] text-sm focus:border-[#FFFF55] outline-none transition-colors"
|
|
/>
|
|
</div>
|
|
|
|
{prop.key === "ANIM" && (
|
|
<div className="mt-2 p-3 bg-black/30 border border-[#373737]/50 grid grid-cols-2 gap-x-4 gap-y-2">
|
|
{[
|
|
{ label: "Slim Format", flag: 1 << 19 },
|
|
{ label: "Modern Wide", flag: 1 << 18 },
|
|
{ label: "Hide Hat", flag: 1 << 16 },
|
|
{ label: "Hide Head", flag: 1 << 10 },
|
|
{ label: "Hide Body", flag: 1 << 13 },
|
|
{ label: "Hide Right Arm", flag: 1 << 11 },
|
|
{ label: "Hide Left Arm", flag: 1 << 12 },
|
|
{ label: "Hide Right Leg", flag: 1 << 14 },
|
|
{ label: "Hide Left Leg", flag: 1 << 15 },
|
|
{ label: "Hide Jacket", flag: 1 << 24 },
|
|
{ label: "Hide Right Sleeve", flag: 1 << 21 },
|
|
{ label: "Hide Left Sleeve", flag: 1 << 20 },
|
|
{ label: "Hide Right Pant", flag: 1 << 23 },
|
|
{ label: "Hide Left Pant", flag: 1 << 22 },
|
|
{ label: "Zombie Arms", flag: 1 << 1 },
|
|
{ label: "Upside Down", flag: 1 << 31 },
|
|
].map((item) => {
|
|
const currentVal = parseInt(prop.value) || 0;
|
|
const isChecked = (currentVal & item.flag) !== 0;
|
|
return (
|
|
<label key={item.label} className="flex items-center gap-2 cursor-pointer group/flag">
|
|
<input
|
|
type="checkbox"
|
|
checked={isChecked}
|
|
onChange={(e) => {
|
|
const newVal = e.target.checked
|
|
? currentVal | item.flag
|
|
: currentVal & ~item.flag;
|
|
handlePropertyEdit(idx, newVal.toString());
|
|
}}
|
|
className="hidden"
|
|
/>
|
|
<div className={`w-3 h-3 border transition-colors ${isChecked ? "bg-[#FFFF55] border-[#FFFF55]" : "border-white/20 group-hover/flag:border-white/40"}`} />
|
|
<span className={`text-[9px] uppercase tracking-tight ${isChecked ? "text-[#FFFF55]" : "text-white/40 group-hover/flag:text-white/60"}`}>
|
|
{item.label}
|
|
</span>
|
|
</label>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
{selectedAsset.properties.length === 0 && (
|
|
<div className="text-white/20 italic text-sm px-1 py-4 border-2 border-dashed border-[#373737] text-center">No metadata properties</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="pt-4 flex flex-col gap-3 mt-auto">
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<button
|
|
onClick={() => handleExportAsset(selectedAsset)}
|
|
className="py-2 text-white mc-text-shadow text-sm transition-all hover:text-[#FFFF55]"
|
|
style={{ backgroundImage: "url('/images/Button_Background.png')", backgroundSize: "100% 100%" }}
|
|
>
|
|
Export
|
|
</button>
|
|
<button
|
|
onClick={() => replaceInputRef.current?.click()}
|
|
className="py-2 text-white mc-text-shadow text-sm transition-all hover:text-[#FFFF55]"
|
|
style={{ backgroundImage: "url('/images/Button_Background.png')", backgroundSize: "100% 100%" }}
|
|
>
|
|
Replace
|
|
</button>
|
|
</div>
|
|
<button
|
|
onClick={() => handleDeleteAsset(selectedAsset.id)}
|
|
className="w-full py-2 text-red-500/80 mc-text-shadow text-sm transition-all hover:text-red-500 hover:scale-[1.02]"
|
|
style={{ backgroundImage: "url('/images/Button_Background.png')", backgroundSize: "100% 100%" }}
|
|
>
|
|
Delete This Asset
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<button
|
|
onClick={() => {
|
|
playBackSound();
|
|
setActiveView("devtools");
|
|
}}
|
|
className="w-72 h-14 flex items-center justify-center transition-colors text-2xl mc-text-shadow mt-6 outline-none border-none hover:text-[#FFFF55] text-white"
|
|
style={{
|
|
backgroundImage: "url('/images/Button_Background.png')",
|
|
backgroundSize: "100% 100%",
|
|
imageRendering: "pixelated",
|
|
}}
|
|
>
|
|
Back
|
|
</button>
|
|
|
|
<AnimatePresence>
|
|
{notification && (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 50, scale: 0.9 }}
|
|
animate={{ opacity: 1, y: 0, scale: 1 }}
|
|
exit={{ opacity: 0, y: 50, scale: 0.9 }}
|
|
className="fixed top-12 right-12 z-[110] p-6 flex flex-col items-center justify-center min-w-[240px]"
|
|
style={{
|
|
backgroundImage: "url('/images/frame_background.png')",
|
|
backgroundSize: "100% 100%",
|
|
imageRendering: "pixelated"
|
|
}}
|
|
>
|
|
<span className="text-white text-lg mc-text-shadow font-bold tracking-widest uppercase">
|
|
{notification.message}
|
|
</span>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
|
|
<AnimatePresence>
|
|
{showTypeModal && (
|
|
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
className="absolute inset-0 bg-black/80 backdrop-blur-sm"
|
|
onClick={() => setShowTypeModal(null)}
|
|
/>
|
|
<motion.div
|
|
initial={{ scale: 0.9, opacity: 0, y: 20 }}
|
|
animate={{ scale: 1, opacity: 1, y: 0 }}
|
|
exit={{ scale: 0.9, opacity: 0, y: 20 }}
|
|
className="relative w-full max-w-md p-8 flex flex-col items-center"
|
|
style={{
|
|
backgroundImage: "url('/images/frame_background.png')",
|
|
backgroundSize: "100% 100%",
|
|
imageRendering: "pixelated"
|
|
}}
|
|
>
|
|
<h3 className="text-2xl text-[#FFFF55] mc-text-shadow font-bold mb-6 tracking-widest uppercase">Select Asset Type</h3>
|
|
<div className="grid grid-cols-2 gap-4 w-full">
|
|
{Object.keys(PCKAssetType)
|
|
.filter(k => isNaN(Number(k)))
|
|
.map((typeName) => (
|
|
<button
|
|
key={typeName}
|
|
onClick={() => confirmAddAsset(PCKAssetType[typeName as keyof typeof PCKAssetType])}
|
|
className="py-3 px-4 text-white mc-text-shadow text-sm transition-all hover:text-[#FFFF55] border-2 border-transparent hover:border-[#FFFF55]/30 bg-black/40"
|
|
>
|
|
{typeName.replace(/_/g, " ")}
|
|
</button>
|
|
))}
|
|
</div>
|
|
<button
|
|
onClick={() => setShowTypeModal(null)}
|
|
className="mt-8 px-8 py-2 text-white/60 mc-text-shadow text-sm hover:text-white transition-colors"
|
|
>
|
|
Cancel
|
|
</button>
|
|
</motion.div>
|
|
</div>
|
|
)}
|
|
</AnimatePresence>
|
|
</motion.div>
|
|
);
|
|
}
|