mirror of
https://github.com/LCE-Hub/LCE-Emerald-Launcher.git
synced 2026-09-24 17:11:00 +00:00
661 lines
27 KiB
TypeScript
661 lines
27 KiB
TypeScript
import { useState, useEffect, memo, useCallback, useRef, useContext } from 'react';
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
|
import { useUI, useAudio, useConfig, GameContext } from '../../context/LauncherContext';
|
|
import { TauriService } from '../../services/TauriService';
|
|
|
|
const REGISTRY_URL = 'https://raw.githubusercontent.com/LCE-Hub/LCE-Workshop/refs/heads/main/registry.json';
|
|
const RAW_BASE = 'https://raw.githubusercontent.com/LCE-Hub/LCE-Workshop/refs/heads/main';
|
|
const CATEGORY_TABS = ['Skin', 'Texture', 'World', 'Mod', 'DLC'] as const;
|
|
const ALL_TABS = [...CATEGORY_TABS, 'Search'] as const;
|
|
type TabType = typeof ALL_TABS[number];
|
|
|
|
interface RegistryPackage {
|
|
id: string;
|
|
name: string;
|
|
author: string;
|
|
description: string;
|
|
category: string[];
|
|
thumbnail: string;
|
|
zips: Record<string, string>;
|
|
version: string;
|
|
}
|
|
|
|
const COLS = 4;
|
|
|
|
const WorkshopView = memo(function WorkshopView() {
|
|
const { setActiveView } = useUI();
|
|
const { playPressSound, playBackSound } = useAudio();
|
|
const config = useConfig();
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
const gridRef = useRef<HTMLDivElement>(null);
|
|
const searchRef = useRef<HTMLInputElement>(null);
|
|
|
|
const [activeTab, setActiveTab] = useState<TabType>('Skin');
|
|
const [allPackages, setAllPackages] = useState<RegistryPackage[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [focusedIdx, setFocusedIdx] = useState<number | null>(null);
|
|
const [search, setSearch] = useState('');
|
|
const [selectedPkg, setSelectedPkg] = useState<RegistryPackage | null>(null);
|
|
|
|
useEffect(() => {
|
|
containerRef.current?.focus();
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
setLoading(true);
|
|
setError(null);
|
|
fetch(REGISTRY_URL)
|
|
.then((r) => {
|
|
if (!r.ok) throw new Error(`HTTP ${r.status}`);
|
|
return r.json();
|
|
})
|
|
.then((data) => {
|
|
setAllPackages(data.packages ?? []);
|
|
setLoading(false);
|
|
})
|
|
.catch((e) => {
|
|
setError(e.message ?? 'Failed to load registry');
|
|
setLoading(false);
|
|
});
|
|
}, []);
|
|
|
|
const filteredItems = allPackages.filter((pkg) => {
|
|
const matchesTab = activeTab === 'Search' ? true : pkg.category.includes(activeTab);
|
|
if (!matchesTab) return false;
|
|
if (!search.trim()) return activeTab === 'Search' ? false : true;
|
|
const q = search.toLowerCase();
|
|
return (
|
|
pkg.name.toLowerCase().includes(q) ||
|
|
pkg.author.toLowerCase().includes(q) ||
|
|
pkg.description.toLowerCase().includes(q)
|
|
);
|
|
});
|
|
|
|
useEffect(() => {
|
|
setFocusedIdx(null);
|
|
if (activeTab === 'Search') {
|
|
setTimeout(() => searchRef.current?.focus(), 50);
|
|
} else {
|
|
setSearch('');
|
|
}
|
|
}, [activeTab]);
|
|
|
|
useEffect(() => {
|
|
if (focusedIdx !== null && gridRef.current) {
|
|
const el = gridRef.current.querySelector(`[data-card="${focusedIdx}"]`) as HTMLElement;
|
|
el?.scrollIntoView({ block: 'nearest' });
|
|
}
|
|
}, [focusedIdx]);
|
|
|
|
const cycleTab = useCallback((direction: 'next' | 'prev') => {
|
|
playPressSound();
|
|
setActiveTab((prev) => {
|
|
const idx = ALL_TABS.indexOf(prev);
|
|
if (direction === 'next') return ALL_TABS[(idx + 1) % ALL_TABS.length];
|
|
return ALL_TABS[(idx - 1 + ALL_TABS.length) % ALL_TABS.length];
|
|
});
|
|
}, [playPressSound]);
|
|
|
|
const selectTab = useCallback((tab: TabType) => {
|
|
if (tab !== activeTab) {
|
|
playPressSound();
|
|
setActiveTab(tab);
|
|
}
|
|
}, [activeTab, playPressSound]);
|
|
|
|
const openModal = useCallback((pkg: RegistryPackage) => {
|
|
playPressSound();
|
|
setSelectedPkg(pkg);
|
|
}, [playPressSound]);
|
|
|
|
const closeModal = useCallback(() => {
|
|
playBackSound();
|
|
setSelectedPkg(null);
|
|
}, [playBackSound]);
|
|
|
|
useEffect(() => {
|
|
const handleKeyDown = (e: KeyboardEvent) => {
|
|
if (selectedPkg) return;
|
|
|
|
const isSearchInput = document.activeElement === searchRef.current;
|
|
if (isSearchInput) {
|
|
if (e.key === 'Escape') { setSearch(''); containerRef.current?.focus(); }
|
|
return;
|
|
}
|
|
|
|
const count = filteredItems.length;
|
|
if (e.key === 'Escape' || e.key === 'Backspace') {
|
|
playBackSound(); setActiveView('main'); return;
|
|
}
|
|
if (e.key === 'e' || e.key === 'E') { cycleTab('next'); return; }
|
|
if (e.key === 'q' || e.key === 'Q') { cycleTab('prev'); return; }
|
|
|
|
if (count === 0) return;
|
|
|
|
if (e.key === 'ArrowRight') {
|
|
e.preventDefault();
|
|
setFocusedIdx((p) => Math.min((p ?? -1) + 1, count - 1));
|
|
playPressSound();
|
|
} else if (e.key === 'ArrowLeft') {
|
|
e.preventDefault();
|
|
setFocusedIdx((p) => Math.max((p ?? 1) - 1, 0));
|
|
playPressSound();
|
|
} else if (e.key === 'ArrowDown') {
|
|
e.preventDefault();
|
|
setFocusedIdx((p) => Math.min((p ?? -COLS) + COLS, count - 1));
|
|
playPressSound();
|
|
} else if (e.key === 'ArrowUp') {
|
|
e.preventDefault();
|
|
setFocusedIdx((p) => Math.max((p ?? COLS) - COLS, 0));
|
|
playPressSound();
|
|
} else if (e.key === 'Enter' && focusedIdx !== null) {
|
|
const pkg = filteredItems[focusedIdx];
|
|
if (pkg) openModal(pkg);
|
|
}
|
|
};
|
|
window.addEventListener('keydown', handleKeyDown);
|
|
return () => window.removeEventListener('keydown', handleKeyDown);
|
|
}, [playBackSound, playPressSound, setActiveView, cycleTab, filteredItems, focusedIdx, selectedPkg, openModal]);
|
|
|
|
const isSearchTab = activeTab === 'Search';
|
|
|
|
return (
|
|
<motion.div
|
|
ref={containerRef}
|
|
tabIndex={0}
|
|
initial={{ opacity: 0, scale: 0.95 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
exit={{ opacity: 0, scale: 0.95 }}
|
|
transition={{ duration: config.animationsEnabled ? 0.3 : 0 }}
|
|
className="flex flex-col items-center w-full max-w-5xl relative font-['Mojangles'] text-white select-none outline-none focus:outline-none"
|
|
>
|
|
<div className="w-[95%] flex flex-col items-center mt-6">
|
|
<div className="w-full flex items-end justify-between">
|
|
<div className="flex items-end gap-0">
|
|
{ALL_TABS.map((tab) => {
|
|
const isActive = tab === activeTab;
|
|
return (
|
|
<button
|
|
key={tab}
|
|
onClick={() => selectTab(tab)}
|
|
className={`
|
|
relative px-7 h-9 text-xl mc-text-shadow tracking-wide border-none outline-none cursor-pointer transition-none
|
|
${isActive ? 'text-white z-20' : 'text-[#C0C0C0] hover:text-white z-10'}
|
|
`}
|
|
style={{
|
|
backgroundImage: isActive
|
|
? "url('/images/frame_background.png')"
|
|
: "url('/images/backgroundframe.png')",
|
|
backgroundSize: '100% 100%',
|
|
imageRendering: 'pixelated',
|
|
marginRight: '-1px',
|
|
filter: isActive ? 'none' : 'brightness(0.8)',
|
|
}}
|
|
>
|
|
{tab}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{!isSearchTab && (
|
|
<span className="text-[#A0A0A0] text-sm uppercase tracking-widest mc-text-shadow mb-1 mr-1">
|
|
Entries: {loading ? '...' : filteredItems.length}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="p-2"></div>
|
|
<div
|
|
className="w-[95%] flex-1 relative overflow-hidden"
|
|
style={{
|
|
// backgroundImage: "url('/images/frame_background.png')",
|
|
// backgroundSize: '100% 100%',
|
|
// imageRendering: 'pixelated',
|
|
minHeight: '430px',
|
|
}}
|
|
>
|
|
<AnimatePresence mode="wait">
|
|
{isSearchTab ? (
|
|
<motion.div
|
|
key="search-tab"
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
className="absolute inset-0 flex flex-col"
|
|
>
|
|
<div className="flex items-center gap-3 px-4 pt-4 pb-3 border-b border-[#444]">
|
|
<div
|
|
className="flex items-center flex-1 h-10 px-4"
|
|
style={{
|
|
filter: 'brightness(0.8)',
|
|
}}
|
|
>
|
|
<input
|
|
ref={searchRef}
|
|
type="text"
|
|
value={search}
|
|
onChange={(e) => { setSearch(e.target.value); setFocusedIdx(null); }}
|
|
placeholder="Search all workshop entries..."
|
|
spellCheck={false}
|
|
autoFocus
|
|
className="bg-transparent border-none outline-none text-white text-base mc-text-shadow w-full placeholder-white font-['Mojangles']"
|
|
/>
|
|
{search && (
|
|
<button
|
|
onClick={() => { setSearch(''); searchRef.current?.focus(); }}
|
|
className="text-[#888] hover:text-white text-sm ml-2 bg-transparent border-none outline-none cursor-pointer"
|
|
>
|
|
✕
|
|
</button>
|
|
)}
|
|
</div>
|
|
<span className="text-[#A0A0A0] text-sm mc-text-shadow whitespace-nowrap">
|
|
{search.trim() ? `${filteredItems.length} result${filteredItems.length !== 1 ? 's' : ''}` : ''}
|
|
</span>
|
|
</div>
|
|
|
|
{search.trim() && (
|
|
<div ref={gridRef} className="flex-1 overflow-y-auto p-4">
|
|
{filteredItems.length === 0 ? (
|
|
<div className="flex items-center justify-center h-full">
|
|
<span className="text-2xl text-[#E0E0E0] mc-text-shadow uppercase tracking-widest opacity-60">No results</span>
|
|
</div>
|
|
) : (
|
|
<div className="grid gap-3" style={{ gridTemplateColumns: `repeat(${COLS}, 1fr)` }}>
|
|
{filteredItems.map((pkg, i) => (
|
|
<PackageCard
|
|
key={pkg.id}
|
|
pkg={pkg}
|
|
index={i}
|
|
focused={focusedIdx === i}
|
|
onHover={() => setFocusedIdx(i)}
|
|
onClick={() => openModal(pkg)}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</motion.div>
|
|
) : loading ? (
|
|
<motion.div key="loading" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}
|
|
className="absolute inset-0 flex items-center justify-center">
|
|
<span className="text-3xl text-[#E0E0E0] mc-text-shadow tracking-wider opacity-80 uppercase">Please wait</span>
|
|
</motion.div>
|
|
) : error ? (
|
|
<motion.div key="error" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}
|
|
className="absolute inset-0 flex items-center justify-center">
|
|
<span className="text-xl text-red-400 mc-text-shadow uppercase tracking-widest">{error}</span>
|
|
</motion.div>
|
|
) : filteredItems.length === 0 ? (
|
|
<motion.div key="empty" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}
|
|
className="absolute inset-0 flex items-center justify-center">
|
|
<span className="text-2xl text-[#E0E0E0] mc-text-shadow uppercase tracking-widest opacity-60">No entries</span>
|
|
</motion.div>
|
|
) : (
|
|
<motion.div
|
|
key={activeTab}
|
|
ref={gridRef}
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
className="absolute inset-0 overflow-y-auto p-4"
|
|
>
|
|
<div className="grid gap-3" style={{ gridTemplateColumns: `repeat(${COLS}, 1fr)` }}>
|
|
{filteredItems.map((pkg, i) => (
|
|
<PackageCard
|
|
key={pkg.id}
|
|
pkg={pkg}
|
|
index={i}
|
|
focused={focusedIdx === i}
|
|
onHover={() => setFocusedIdx(i)}
|
|
onClick={() => openModal(pkg)}
|
|
/>
|
|
))}
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
|
|
<div className="w-[95%] mt-3 mb-2 flex items-center gap-2">
|
|
<button
|
|
onClick={() => { playBackSound(); setActiveView('main'); }}
|
|
className="w-40 h-10 flex items-center justify-center text-xl mc-text-shadow hover:text-[#FFFF55] text-white border-none outline-none transition-colors"
|
|
style={{ backgroundImage: "url('/images/Button_Background.png')", backgroundSize: '100% 100%', imageRendering: 'pixelated' }}
|
|
onMouseEnter={(e) => { (e.currentTarget as HTMLButtonElement).style.backgroundImage = "url('/images/button_highlighted.png')"; }}
|
|
onMouseLeave={(e) => { (e.currentTarget as HTMLButtonElement).style.backgroundImage = "url('/images/Button_Background.png')"; }}
|
|
>
|
|
Back
|
|
</button>
|
|
</div>
|
|
|
|
<AnimatePresence>
|
|
{selectedPkg && (
|
|
<PackageModal pkg={selectedPkg} onClose={closeModal} playPressSound={playPressSound} />
|
|
)}
|
|
</AnimatePresence>
|
|
</motion.div>
|
|
);
|
|
});
|
|
|
|
function PackageCard({ pkg, index, focused, onHover, onClick }: {
|
|
pkg: RegistryPackage;
|
|
index: number;
|
|
focused: boolean;
|
|
onHover: () => void;
|
|
onClick: () => void;
|
|
}) {
|
|
const thumbnailUrl = `${RAW_BASE}/${pkg.id}/${pkg.thumbnail}`;
|
|
const [imgError, setImgError] = useState(false);
|
|
|
|
return (
|
|
<div
|
|
data-card={index}
|
|
onMouseEnter={onHover}
|
|
onClick={onClick}
|
|
className={`flex flex-col cursor-pointer border-2 transition-none ${focused ? 'border-[#FFFF55]' : 'border-transparent'}`}
|
|
style={{
|
|
backgroundImage: "url('/images/frame_background.png')",
|
|
backgroundSize: '100% 100%',
|
|
imageRendering: 'pixelated',
|
|
}}
|
|
>
|
|
<div className="w-full h-[100px] flex items-center justify-center overflow-hidden bg-black/30">
|
|
{imgError ? (
|
|
<span className="text-[#555] text-sm mc-text-shadow uppercase">No Image</span>
|
|
) : (
|
|
<img src={thumbnailUrl} alt={pkg.name} className="w-full h-full object-contain object-center"
|
|
style={{ imageRendering: 'pixelated' }} onError={() => setImgError(true)} />
|
|
)}
|
|
</div>
|
|
<div className="flex flex-col px-2 pt-2 pb-2 gap-0.5">
|
|
<span className={`text-base mc-text-shadow leading-tight truncate ${focused ? 'text-[#FFFF55]' : 'text-white'}`}>
|
|
{pkg.name}
|
|
</span>
|
|
<span className="text-xs text-[#A0A0A0] mc-text-shadow truncate">by {pkg.author}</span>
|
|
<span className="text-xs text-[#888] mc-text-shadow leading-snug line-clamp-2 mt-0.5">{pkg.description}</span>
|
|
<div className="flex items-center justify-between mt-1">
|
|
<span className="text-[10px] text-[#A0A0A0] mc-text-shadow">v{pkg.version}</span>
|
|
<div className="flex gap-1">
|
|
{pkg.category.map((c) => (
|
|
<span key={c} className="text-[9px] bg-black/60 border border-[#444] px-1 text-[#888] mc-text-shadow uppercase">{c}</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function PackageModal({ pkg, onClose, playPressSound }: {
|
|
pkg: RegistryPackage;
|
|
onClose: () => void;
|
|
playPressSound: () => void;
|
|
}) {
|
|
const thumbnailUrl = `${RAW_BASE}/${pkg.id}/${pkg.thumbnail}`;
|
|
const [imgError, setImgError] = useState(false);
|
|
const [modalFocus, setModalFocus] = useState<'install' | 'close'>('install');
|
|
const [showInstall, setShowInstall] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (showInstall) return; //neo: let install modal handle keys
|
|
const handleKeyDown = (e: KeyboardEvent) => {
|
|
if (e.key === 'Escape' || e.key === 'Backspace') {
|
|
onClose();
|
|
} else if (e.key === 'ArrowLeft' || e.key === 'ArrowRight' || e.key === 'Tab') {
|
|
e.preventDefault();
|
|
playPressSound();
|
|
setModalFocus((p) => p === 'install' ? 'close' : 'install');
|
|
} else if (e.key === 'Enter') {
|
|
if (modalFocus === 'close') onClose();
|
|
else if (modalFocus === 'install') setShowInstall(true);
|
|
}
|
|
};
|
|
window.addEventListener('keydown', handleKeyDown);
|
|
return () => window.removeEventListener('keydown', handleKeyDown);
|
|
}, [modalFocus, showInstall, onClose, playPressSound]);
|
|
|
|
return (
|
|
<>
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
className="fixed inset-0 z-[200] flex items-center justify-center bg-black/70"
|
|
onClick={onClose}
|
|
>
|
|
<motion.div
|
|
initial={{ scale: 0.9, opacity: 0 }}
|
|
animate={{ scale: 1, opacity: 1 }}
|
|
exit={{ scale: 0.9, opacity: 0 }}
|
|
transition={{ duration: 0.15 }}
|
|
onClick={(e) => e.stopPropagation()}
|
|
className="flex flex-col w-[560px] max-h-[80vh] overflow-hidden font-['Mojangles']"
|
|
style={{
|
|
backgroundImage: "url('/images/frame_background.png')",
|
|
backgroundSize: '100% 100%',
|
|
imageRendering: 'pixelated',
|
|
}}
|
|
>
|
|
<div className="w-full h-[200px] flex-shrink-0 bg-black/40 overflow-hidden relative">
|
|
{imgError ? (
|
|
<div className="absolute inset-0 flex items-center justify-center">
|
|
<span className="text-[#555] mc-text-shadow uppercase">No Image</span>
|
|
</div>
|
|
) : (
|
|
<img src={thumbnailUrl} alt={pkg.name} className="w-full h-full object-contain object-center"
|
|
style={{ imageRendering: 'pixelated' }} onError={() => setImgError(true)} />
|
|
)}
|
|
<div className="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent" />
|
|
<div className="absolute bottom-3 left-4 right-4">
|
|
<span className="text-2xl text-white mc-text-shadow block leading-tight">{pkg.name}</span>
|
|
<span className="text-sm text-[#FFFF55] mc-text-shadow">by {pkg.author}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col p-5 gap-3 overflow-y-auto flex-1">
|
|
<p className="text-sm text-[#C0C0C0] mc-text-shadow leading-relaxed">{pkg.description}</p>
|
|
|
|
<div className="flex items-center gap-4 pt-1 border-t border-[#555]">
|
|
<div className="flex flex-col gap-0.5">
|
|
<span className="text-[10px] text-[#666] mc-text-shadow uppercase tracking-widest">Version</span>
|
|
<span className="text-sm text-white mc-text-shadow">v{pkg.version}</span>
|
|
</div>
|
|
<div className="flex flex-col gap-0.5">
|
|
<span className="text-[10px] text-[#666] mc-text-shadow uppercase tracking-widest">Categories</span>
|
|
<div className="flex gap-1">
|
|
{pkg.category.map((c) => (
|
|
<span key={c} className="text-xs bg-black/60 border border-[#555] px-2 py-0.5 text-[#A0A0A0] mc-text-shadow uppercase">{c}</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{Object.keys(pkg.zips).length > 0 && (
|
|
<div className="flex flex-col gap-1 pt-1 border-t border-[#555]">
|
|
<span className="text-[10px] text-[#666] mc-text-shadow uppercase tracking-widest">Files</span>
|
|
{Object.entries(pkg.zips).map(([file, dest]) => (
|
|
<div key={file} className="flex items-center justify-between gap-2">
|
|
<span className="text-xs text-[#A0A0A0] mc-text-shadow">{file}</span>
|
|
{dest && <span className="text-[10px] text-[#666] mc-text-shadow truncate max-w-[200px]">{dest}</span>}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex items-center gap-3 pt-2">
|
|
<button
|
|
onMouseEnter={() => setModalFocus('install')}
|
|
onClick={() => setShowInstall(true)}
|
|
className={`flex-1 h-11 flex items-center justify-center text-xl mc-text-shadow border-none outline-none cursor-pointer transition-none ${modalFocus === 'install' ? 'text-[#FFFF55]' : 'text-white'}`}
|
|
style={{
|
|
backgroundImage: modalFocus === 'install' ? "url('/images/button_highlighted.png')" : "url('/images/Button_Background.png')",
|
|
backgroundSize: '100% 100%',
|
|
imageRendering: 'pixelated',
|
|
}}
|
|
>
|
|
Install
|
|
</button>
|
|
<button
|
|
onMouseEnter={() => setModalFocus('close')}
|
|
onClick={onClose}
|
|
className={`w-32 h-11 flex items-center justify-center text-xl mc-text-shadow border-none outline-none cursor-pointer transition-none ${modalFocus === 'close' ? 'text-[#FFFF55]' : 'text-white'}`}
|
|
style={{
|
|
backgroundImage: modalFocus === 'close' ? "url('/images/button_highlighted.png')" : "url('/images/Button_Background.png')",
|
|
backgroundSize: '100% 100%',
|
|
imageRendering: 'pixelated',
|
|
}}
|
|
>
|
|
Close
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</motion.div>
|
|
|
|
<AnimatePresence>
|
|
{showInstall && (
|
|
<InstallModal pkg={pkg} onClose={() => setShowInstall(false)} playPressSound={playPressSound} />
|
|
)}
|
|
</AnimatePresence>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function InstallModal({ pkg, onClose, playPressSound }: {
|
|
pkg: RegistryPackage;
|
|
onClose: () => void;
|
|
playPressSound: () => void;
|
|
}) {
|
|
const game = useContext(GameContext);
|
|
const availableEditions = game?.editions.filter(e => game.installs.includes(e.id)) || [];
|
|
|
|
const [focusedIdx, setFocusedIdx] = useState(0);
|
|
const [status, setStatus] = useState<'idle' | 'installing' | 'success' | 'error'>('idle');
|
|
const [errorMsg, setErrorMsg] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
const handleKeyDown = (e: KeyboardEvent) => {
|
|
e.stopPropagation();
|
|
if (status === 'installing') return;
|
|
if (status === 'success') {
|
|
if (e.key === 'Escape' || e.key === 'Backspace' || e.key === 'Enter') onClose();
|
|
return;
|
|
}
|
|
|
|
if (e.key === 'Escape' || e.key === 'Backspace') {
|
|
onClose();
|
|
} else if (e.key === 'ArrowUp') {
|
|
e.preventDefault();
|
|
playPressSound();
|
|
setFocusedIdx((p) => Math.max(p - 1, 0));
|
|
} else if (e.key === 'ArrowDown') {
|
|
e.preventDefault();
|
|
playPressSound();
|
|
setFocusedIdx((p) => Math.min(p + 1, availableEditions.length - 1));
|
|
} else if (e.key === 'Enter') {
|
|
if (availableEditions.length > 0) {
|
|
installTo(availableEditions[focusedIdx].id);
|
|
}
|
|
}
|
|
};
|
|
window.addEventListener('keydown', handleKeyDown);
|
|
return () => window.removeEventListener('keydown', handleKeyDown);
|
|
}, [availableEditions, focusedIdx, status, onClose, playPressSound]);
|
|
|
|
const installTo = async (instanceId: string) => {
|
|
setStatus('installing');
|
|
setErrorMsg(null);
|
|
playPressSound();
|
|
try {
|
|
await TauriService.workshopInstall(instanceId, pkg.id, pkg.zips);
|
|
setStatus('success');
|
|
} catch (e: any) {
|
|
console.error(e);
|
|
setStatus('error');
|
|
setErrorMsg(typeof e === 'string' ? e : e.message);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
className="fixed inset-0 z-[300] flex items-center justify-center bg-black/80"
|
|
onClick={status !== 'installing' ? onClose : undefined}
|
|
>
|
|
<motion.div
|
|
initial={{ scale: 0.9, opacity: 0 }}
|
|
animate={{ scale: 1, opacity: 1 }}
|
|
exit={{ scale: 0.9, opacity: 0 }}
|
|
transition={{ duration: 0.15 }}
|
|
onClick={(e) => e.stopPropagation()}
|
|
className="flex flex-col w-[480px] font-['Mojangles'] text-white"
|
|
style={{
|
|
backgroundImage: "url('/images/frame_background.png')",
|
|
backgroundSize: '100% 100%',
|
|
imageRendering: 'pixelated',
|
|
}}
|
|
>
|
|
<div className="p-4 border-b border-[#555] bg-black/30">
|
|
<span className="text-xl mc-text-shadow block">Install to Edition</span>
|
|
<span className="text-sm text-[#A0A0A0] mc-text-shadow">Select an installed edition for "{pkg.name}"</span>
|
|
</div>
|
|
|
|
<div className="p-4 flex flex-col gap-2 max-h-[300px] overflow-y-auto">
|
|
{status === 'installing' && (
|
|
<div className="py-8 flex flex-col items-center justify-center gap-3">
|
|
<span className="text-2xl text-[#FFFF55] mc-text-shadow animate-pulse">Installing...</span>
|
|
<span className="text-xs text-[#A0A0A0] mc-text-shadow">Downloading and extracting assets</span>
|
|
</div>
|
|
)}
|
|
{status === 'success' && (
|
|
<div className="py-8 flex flex-col items-center justify-center gap-3">
|
|
<span className="text-2xl text-[#55FF55] mc-text-shadow">Installed Successfully!</span>
|
|
<span className="text-xs text-[#A0A0A0] mc-text-shadow">Press any key or click to continue</span>
|
|
</div>
|
|
)}
|
|
{status === 'error' && (
|
|
<div className="py-6 flex flex-col items-center justify-center gap-3">
|
|
<span className="text-xl text-[#FF5555] mc-text-shadow">Installation Failed</span>
|
|
<span className="text-xs text-[#A0A0A0] mc-text-shadow text-center">{errorMsg}</span>
|
|
<button
|
|
onClick={() => setStatus('idle')}
|
|
className="mt-2 w-32 h-9 flex items-center justify-center text-sm mc-text-shadow text-white cursor-pointer"
|
|
style={{ backgroundImage: "url('/images/Button_Background.png')", backgroundSize: '100% 100%', imageRendering: 'pixelated' }}
|
|
>
|
|
Retry
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{status === 'idle' && (
|
|
availableEditions.length === 0 ? (
|
|
<div className="py-6 flex items-center justify-center">
|
|
<span className="text-[#FF5555] mc-text-shadow">No installed editions found</span>
|
|
</div>
|
|
) : (
|
|
availableEditions.map((ed, i) => (
|
|
<div
|
|
key={ed.id}
|
|
onClick={() => installTo(ed.id)}
|
|
onMouseEnter={() => setFocusedIdx(i)}
|
|
className={`flex flex-col p-3 cursor-pointer border-2 transition-none ${focusedIdx === i ? 'border-[#FFFF55] bg-black/40' : 'border-[#444] bg-black/20'}`}
|
|
>
|
|
<span className={`text-lg mc-text-shadow ${focusedIdx === i ? 'text-[#FFFF55]' : 'text-white'}`}>{ed.name}</span>
|
|
</div>
|
|
))
|
|
)
|
|
)}
|
|
</div>
|
|
</motion.div>
|
|
</motion.div>
|
|
);
|
|
}
|
|
|
|
export default WorkshopView;
|