mirror of
https://github.com/LCE-Hub/LCE-Emerald-Launcher.git
synced 2026-07-19 16:57:17 +00:00
396 lines
19 KiB
TypeScript
396 lines
19 KiB
TypeScript
import { useState, useRef, useMemo } from "react";
|
|
import { motion, AnimatePresence } from "framer-motion";
|
|
import { useUI, useAudio, useConfig } from "../../context/LauncherContext";
|
|
import { ColService } from "../../services/ColService";
|
|
import { ColFile } from "../../types/col";
|
|
function argbToHex(argb: number) {
|
|
return (argb >>> 0).toString(16).padStart(8, '0').toUpperCase();
|
|
}
|
|
|
|
function hexToArgb(hex: string) {
|
|
const cleanHex = hex.replace("#", "");
|
|
return parseInt(cleanHex, 16) >>> 0;
|
|
}
|
|
|
|
export default function ColEditorView() {
|
|
const { setActiveView } = useUI();
|
|
const { playPressSound, playBackSound } = useAudio();
|
|
const { animationsEnabled } = useConfig();
|
|
const [col, setCol] = useState<ColFile | null>(null);
|
|
const [searchTerm, setSearchTerm] = useState("");
|
|
const [notification, setNotification] = useState<{ message: string, type: "success" | "error" } | null>(null);
|
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
|
const [activeTab, setActiveTab] = useState<"colors" | "worldColors">("colors");
|
|
const showNotification = (message: string, type: "success" | "error" = "success") => {
|
|
setNotification({ message, type });
|
|
setTimeout(() => setNotification(null), 3000);
|
|
};
|
|
|
|
const currentColors = useMemo(() => {
|
|
if (!col) return [];
|
|
return col.colors.map((c, i) => ({ ...c, originalIdx: i }))
|
|
.filter(c => c.name.toLowerCase().includes(searchTerm.toLowerCase()));
|
|
}, [col, searchTerm]);
|
|
|
|
const currentWorldColors = useMemo(() => {
|
|
if (!col) return [];
|
|
return col.worldColors.map((c, i) => ({ ...c, originalIdx: i }))
|
|
.filter(c => c.name.toLowerCase().includes(searchTerm.toLowerCase()));
|
|
}, [col, searchTerm]);
|
|
|
|
const handleFileLoad = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const file = e.target.files?.[0];
|
|
if (!file) return;
|
|
playPressSound();
|
|
const buffer = await file.arrayBuffer();
|
|
try {
|
|
const parsedCol = ColService.readCOL(buffer);
|
|
setCol(parsedCol);
|
|
showNotification(`Loaded ${file.name}`);
|
|
} catch (err: unknown) {
|
|
console.error("Failed to parse COL", err);
|
|
showNotification(err instanceof Error ? err.message : "Failed to parse COL", "error");
|
|
}
|
|
e.target.value = "";
|
|
};
|
|
|
|
const handleSaveCol = () => {
|
|
if (!col) return;
|
|
playPressSound();
|
|
try {
|
|
const buffer = ColService.serializeCOL(col);
|
|
const blob = new Blob([buffer]);
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement("a");
|
|
a.href = url;
|
|
a.download = "colours.col";
|
|
a.click();
|
|
URL.revokeObjectURL(url);
|
|
showNotification("COL Saved Successfully");
|
|
} catch (err: unknown) {
|
|
console.error("Failed to save COL", err);
|
|
showNotification(err instanceof Error ? err.message : "Failed to save COL", "error");
|
|
}
|
|
};
|
|
|
|
const handleUpdateColor = (idx: number, field: string, val: string | number) => {
|
|
if (!col) return;
|
|
const newCol = { ...col, colors: [...col.colors] };
|
|
newCol.colors[idx] = { ...newCol.colors[idx], [field]: val };
|
|
setCol(newCol);
|
|
};
|
|
|
|
const handleUpdateWorldColor = (idx: number, field: string, val: string | number) => {
|
|
if (!col) return;
|
|
const newCol = { ...col, worldColors: [...col.worldColors] };
|
|
newCol.worldColors[idx] = { ...newCol.worldColors[idx], [field]: val };
|
|
setCol(newCol);
|
|
};
|
|
|
|
const handleAddColor = () => {
|
|
if (!col) return;
|
|
playPressSound();
|
|
setCol({
|
|
...col,
|
|
colors: [{ name: "NewColor", color: 0xFFFFFFFF }, ...col.colors]
|
|
});
|
|
showNotification("Color Added");
|
|
};
|
|
|
|
const handleAddWorldColor = () => {
|
|
if (!col) return;
|
|
playPressSound();
|
|
setCol({
|
|
...col,
|
|
worldColors: [{ name: "NewWorldColor", waterColor: 0xFFFFFFFF, underwaterColor: 0xFFFFFFFF, fogColor: 0xFFFFFFFF }, ...col.worldColors]
|
|
});
|
|
showNotification("World Color Added");
|
|
};
|
|
|
|
const handleDeleteColor = (idx: number) => {
|
|
if (!col) return;
|
|
playBackSound();
|
|
const newCol = { ...col, colors: [...col.colors] };
|
|
newCol.colors.splice(idx, 1);
|
|
setCol(newCol);
|
|
};
|
|
|
|
const handleDeleteWorldColor = (idx: number) => {
|
|
if (!col) return;
|
|
playBackSound();
|
|
const newCol = { ...col, worldColors: [...col.worldColors] };
|
|
newCol.worldColors.splice(idx, 1);
|
|
setCol(newCol);
|
|
};
|
|
|
|
return (
|
|
<motion.div
|
|
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 w-full h-[85vh] max-w-7xl relative"
|
|
>
|
|
<input type="file" ref={fileInputRef} onChange={handleFileLoad} className="hidden" accept=".col" />
|
|
<div className="flex items-center justify-between mb-6 px-4">
|
|
<div className="flex items-center gap-6">
|
|
<h2 className="text-3xl text-white mc-text-shadow tracking-widest uppercase font-bold">COL Editor</h2>
|
|
{col && <span className="text-white/40 mc-text-shadow italic">Version: <span className="text-[#FFFF55]">{col.version}</span></span>}
|
|
</div>
|
|
<div className="flex gap-4">
|
|
<button
|
|
onClick={() => fileInputRef.current?.click()}
|
|
className="px-6 py-2 text-white mc-text-shadow text-lg"
|
|
style={{ backgroundImage: "url('/images/Button_Background.png')", backgroundSize: "100% 100%" }}
|
|
>
|
|
Open COL
|
|
</button>
|
|
<button
|
|
onClick={handleSaveCol}
|
|
disabled={!col}
|
|
className={`px-6 py-2 text-white mc-text-shadow text-lg ${!col ? "opacity-50 grayscale" : ""}`}
|
|
style={{ backgroundImage: "url('/images/Button_Background.png')", backgroundSize: "100% 100%" }}
|
|
>
|
|
Save COL
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{!col ? (
|
|
<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" }}>
|
|
<h3 className="text-2xl text-white/40 mc-text-shadow italic">Open a COL file to begin editing</h3>
|
|
</div>
|
|
) : (
|
|
<div className="flex-1 w-full flex flex-col overflow-hidden" style={{ backgroundImage: "url('/images/frame_background.png')", backgroundSize: "100% 100%", imageRendering: "pixelated" }}>
|
|
<div className="flex gap-1 p-2 pt-4 border-b-2 border-[#373737]">
|
|
<button
|
|
onClick={() => { playPressSound(); setActiveTab("colors"); }}
|
|
className={`flex items-center gap-3 px-6 py-2 transition-all mc-text-shadow ${activeTab === "colors" ? "text-[#FFFF55] opacity-100 scale-105" : "text-white opacity-40 hover:opacity-100"}`}
|
|
>
|
|
<span className="text-lg">Colors ({col.colors.length})</span>
|
|
</button>
|
|
<button
|
|
onClick={() => { playPressSound(); setActiveTab("worldColors"); }}
|
|
disabled={col.version === 0}
|
|
className={`flex items-center gap-3 px-6 py-2 transition-all mc-text-shadow ${activeTab === "worldColors" ? "text-[#FFFF55] opacity-100 scale-105" : "text-white opacity-40 hover:opacity-100"} ${col.version === 0 ? "opacity-20 cursor-not-allowed" : ""}`}
|
|
>
|
|
<span className="text-lg">World Colors ({col.worldColors.length})</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div className="flex-1 flex flex-col p-4 overflow-hidden">
|
|
<div className="mb-4 flex gap-4">
|
|
<input
|
|
type="text"
|
|
placeholder="Search colors..."
|
|
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={activeTab === "colors" ? handleAddColor : handleAddWorldColor}
|
|
className="px-6 py-2 text-white mc-text-shadow text-sm"
|
|
style={{ backgroundImage: "url('/images/Button_Background.png')", backgroundSize: "100% 100%" }}
|
|
>
|
|
Add {activeTab === "colors" ? "Color" : "World Color"}
|
|
</button>
|
|
</div>
|
|
|
|
<div className="flex-1 overflow-y-auto pr-2 custom-scrollbar">
|
|
<table className="w-full text-left border-collapse">
|
|
<thead className="sticky top-0 bg-[#252525] z-10 w-full mb-2">
|
|
<tr className="border-b-2 border-[#373737]">
|
|
<th className="p-3 text-white/40 uppercase text-xs tracking-widest font-bold w-1/4">Name</th>
|
|
{activeTab === "colors" && <th className="p-3 text-white/40 uppercase text-xs tracking-widest font-bold">Color (ARGB)</th>}
|
|
{activeTab === "worldColors" && (
|
|
<>
|
|
<th className="p-3 text-white/40 uppercase text-xs tracking-widest font-bold">Water (ARGB)</th>
|
|
<th className="p-3 text-white/40 uppercase text-xs tracking-widest font-bold">Underwater (ARGB)</th>
|
|
<th className="p-3 text-white/40 uppercase text-xs tracking-widest font-bold">Fog (ARGB)</th>
|
|
</>
|
|
)}
|
|
<th className="p-3 text-white/40 uppercase text-xs tracking-widest font-bold text-right w-16">Remove</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{activeTab === "colors" && currentColors.map((c) => (
|
|
<tr key={c.originalIdx} className="border-b border-[#373737]/30 hover:bg-white/5 transition-colors group">
|
|
<td className="p-2">
|
|
<input
|
|
type="text"
|
|
value={c.name}
|
|
onChange={(e) => handleUpdateColor(c.originalIdx, "name", e.target.value)}
|
|
className="w-full bg-black/40 border border-[#373737] px-2 py-1 outline-none focus:border-[#FFFF55] text-white text-sm"
|
|
/>
|
|
</td>
|
|
<td className="p-2">
|
|
<div className="flex items-center gap-3">
|
|
<input
|
|
type="color"
|
|
value={`#${argbToHex(c.color).substring(2, 8)}`}
|
|
onChange={(e) => {
|
|
const rgb = e.target.value.substring(1).toUpperCase();
|
|
const alpha = argbToHex(c.color).substring(0, 2);
|
|
const newArgb = hexToArgb(`${alpha}${rgb}`);
|
|
handleUpdateColor(c.originalIdx, "color", newArgb);
|
|
}}
|
|
className="w-8 h-8 p-0 cursor-pointer shrink-0 border border-[#373737] rounded-sm bg-transparent"
|
|
/>
|
|
<input
|
|
type="text"
|
|
value={argbToHex(c.color)}
|
|
onChange={(e) => {
|
|
const s = e.target.value.replace(/[^0-9A-Fa-f]/g, '');
|
|
if (s.length <= 8) {
|
|
const parsed = parseInt(s, 16);
|
|
if (!isNaN(parsed)) handleUpdateColor(c.originalIdx, "color", parsed >>> 0);
|
|
}
|
|
}}
|
|
className="bg-black/40 border border-[#373737] w-24 px-2 py-1 outline-none focus:border-[#FFFF55] text-white font-mono text-sm uppercase"
|
|
maxLength={8}
|
|
/>
|
|
</div>
|
|
</td>
|
|
<td className="p-2 text-right">
|
|
<button onClick={() => handleDeleteColor(c.originalIdx)} className="p-1 hover:text-red-500 opacity-60 hover:opacity-100 transition-colors">
|
|
<img src="/images/Trash_Bin_Icon.png" className="w-5 h-5 object-contain" style={{ imageRendering: "pixelated" }} />
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
|
|
{activeTab === "worldColors" && currentWorldColors.map((w) => (
|
|
<tr key={w.originalIdx} className="border-b border-[#373737]/30 hover:bg-white/5 transition-colors group">
|
|
<td className="p-2">
|
|
<input
|
|
type="text"
|
|
value={w.name}
|
|
onChange={(e) => handleUpdateWorldColor(w.originalIdx, "name", e.target.value)}
|
|
className="w-full bg-black/40 border border-[#373737] px-2 py-1 outline-none focus:border-[#FFFF55] text-white text-sm"
|
|
/>
|
|
</td>
|
|
<td className="p-2">
|
|
<div className="flex items-center gap-2">
|
|
<input
|
|
type="color"
|
|
value={`#${argbToHex(w.waterColor).substring(2, 8)}`}
|
|
onChange={(e) => {
|
|
const rgb = e.target.value.substring(1).toUpperCase();
|
|
const alpha = argbToHex(w.waterColor).substring(0, 2);
|
|
handleUpdateWorldColor(w.originalIdx, "waterColor", hexToArgb(`${alpha}${rgb}`));
|
|
}}
|
|
className="w-6 h-6 p-0 cursor-pointer shrink-0 border border-[#373737] rounded-sm bg-transparent"
|
|
/>
|
|
<input
|
|
type="text"
|
|
value={argbToHex(w.waterColor)}
|
|
onChange={(e) => {
|
|
const s = e.target.value.replace(/[^0-9A-Fa-f]/g, '');
|
|
if (s.length <= 8) {
|
|
const parsed = parseInt(s, 16);
|
|
if (!isNaN(parsed)) handleUpdateWorldColor(w.originalIdx, "waterColor", parsed >>> 0);
|
|
}
|
|
}}
|
|
className="bg-black/40 border border-[#373737] w-20 px-2 py-1 outline-none focus:border-[#FFFF55] text-white font-mono text-xs uppercase"
|
|
maxLength={8}
|
|
/>
|
|
</div>
|
|
</td>
|
|
<td className="p-2">
|
|
<div className="flex items-center gap-2">
|
|
<input
|
|
type="color"
|
|
value={`#${argbToHex(w.underwaterColor).substring(2, 8)}`}
|
|
onChange={(e) => {
|
|
const rgb = e.target.value.substring(1).toUpperCase();
|
|
const alpha = argbToHex(w.underwaterColor).substring(0, 2);
|
|
handleUpdateWorldColor(w.originalIdx, "underwaterColor", hexToArgb(`${alpha}${rgb}`));
|
|
}}
|
|
className="w-6 h-6 p-0 cursor-pointer shrink-0 border border-[#373737] rounded-sm bg-transparent"
|
|
/>
|
|
<input
|
|
type="text"
|
|
value={argbToHex(w.underwaterColor)}
|
|
onChange={(e) => {
|
|
const s = e.target.value.replace(/[^0-9A-Fa-f]/g, '');
|
|
if (s.length <= 8) {
|
|
const parsed = parseInt(s, 16);
|
|
if (!isNaN(parsed)) handleUpdateWorldColor(w.originalIdx, "underwaterColor", parsed >>> 0);
|
|
}
|
|
}}
|
|
className="bg-black/40 border border-[#373737] w-20 px-2 py-1 outline-none focus:border-[#FFFF55] text-white font-mono text-xs uppercase"
|
|
maxLength={8}
|
|
/>
|
|
</div>
|
|
</td>
|
|
<td className="p-2">
|
|
<div className="flex items-center gap-2">
|
|
<input
|
|
type="color"
|
|
value={`#${argbToHex(w.fogColor).substring(2, 8)}`}
|
|
onChange={(e) => {
|
|
const rgb = e.target.value.substring(1).toUpperCase();
|
|
const alpha = argbToHex(w.fogColor).substring(0, 2);
|
|
handleUpdateWorldColor(w.originalIdx, "fogColor", hexToArgb(`${alpha}${rgb}`));
|
|
}}
|
|
className="w-6 h-6 p-0 cursor-pointer shrink-0 border border-[#373737] rounded-sm bg-transparent"
|
|
/>
|
|
<input
|
|
type="text"
|
|
value={argbToHex(w.fogColor)}
|
|
onChange={(e) => {
|
|
const s = e.target.value.replace(/[^0-9A-Fa-f]/g, '');
|
|
if (s.length <= 8) {
|
|
const parsed = parseInt(s, 16);
|
|
if (!isNaN(parsed)) handleUpdateWorldColor(w.originalIdx, "fogColor", parsed >>> 0);
|
|
}
|
|
}}
|
|
className="bg-black/40 border border-[#373737] w-20 px-2 py-1 outline-none focus:border-[#FFFF55] text-white font-mono text-xs uppercase"
|
|
maxLength={8}
|
|
/>
|
|
</div>
|
|
</td>
|
|
<td className="p-2 text-right">
|
|
<button onClick={() => handleDeleteWorldColor(w.originalIdx)} className="p-1 hover:text-red-500 opacity-60 hover:opacity-100 transition-colors">
|
|
<img src="/images/Trash_Bin_Icon.png" className="w-5 h-5 object-contain" style={{ imageRendering: "pixelated" }} />
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex justify-center mt-6 h-14">
|
|
<button
|
|
onClick={() => { playBackSound(); setActiveView("devtools"); }}
|
|
className="w-72 h-full flex items-center justify-center transition-colors text-2xl mc-text-shadow outline-none border-none hover:text-[#FFFF55] text-white"
|
|
style={{ backgroundImage: "url('/images/Button_Background.png')", backgroundSize: "100% 100%", imageRendering: "pixelated" }}
|
|
>
|
|
Back
|
|
</button>
|
|
</div>
|
|
|
|
<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-[100] 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>
|
|
</motion.div>
|
|
);
|
|
}
|