mirror of
https://github.com/LCE-Hub/LCE-Emerald-Launcher.git
synced 2026-10-22 17:22:06 +00:00
1384 lines
55 KiB
TypeScript
1384 lines
55 KiB
TypeScript
import {
|
|
useState,
|
|
useEffect,
|
|
useLayoutEffect,
|
|
useRef,
|
|
useCallback,
|
|
memo,
|
|
} from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { motion } from "framer-motion";
|
|
import { TauriService, PlaytimeResponse } from "../../services/TauriService";
|
|
import CustomTUModal from "../modals/CustomTUModal";
|
|
import SetUidModal from "../modals/SetUidModal";
|
|
import ImportWorldModal from "../modals/ImportWorldModal";
|
|
import PlaytimeModal from "../modals/PlaytimeModal";
|
|
import CustomizeModal from "../modals/CustomizeModal";
|
|
import DownloadDlcModal from "../modals/DownloadDlcModal";
|
|
import OptionsModal from "../modals/OptionsModal";
|
|
import { parseSchema } from "../../utils/argsSchema";
|
|
import {
|
|
useUI,
|
|
useConfig,
|
|
useAudio,
|
|
useGame,
|
|
} from "../../context/LauncherContext";
|
|
import { ScreenshotImage } from "../common/ScreenshotImage";
|
|
import { usePlatform } from "../../hooks/usePlatform";
|
|
import type { Edition } from "../../types/edition";
|
|
import { HIDDEN_INSTANCE_URL } from "../../types/edition";
|
|
interface DeleteConfirmButtonProps {
|
|
label: string;
|
|
onClick: () => void;
|
|
isDanger?: boolean;
|
|
}
|
|
|
|
const DeleteConfirmButton = memo(function DeleteConfirmButton({
|
|
label,
|
|
onClick,
|
|
isDanger = false,
|
|
}: DeleteConfirmButtonProps) {
|
|
const [isHovered, setIsHovered] = useState(false);
|
|
|
|
return (
|
|
<button
|
|
onClick={onClick}
|
|
onMouseEnter={() => setIsHovered(true)}
|
|
onMouseLeave={() => setIsHovered(false)}
|
|
className={`w-24 h-10 flex items-center justify-center mc-text-shadow transition-colors ${
|
|
isDanger ? "text-red-500" : "text-white"
|
|
} ${isHovered ? (isDanger ? "text-red-400" : "text-[#FFFF55]") : ""}`}
|
|
style={{
|
|
backgroundImage: isHovered
|
|
? "url('/images/button_highlighted.png')"
|
|
: "url('/images/Button_Background.png')",
|
|
backgroundSize: "100% 100%",
|
|
imageRendering: "pixelated",
|
|
}}
|
|
>
|
|
{label}
|
|
</button>
|
|
);
|
|
});
|
|
|
|
const ROW_ESTIMATE = 52;
|
|
const ROW_GAP = 4;
|
|
const VersionsView = memo(function VersionsView() {
|
|
const { t } = useTranslation();
|
|
const { setActiveView } = useUI();
|
|
const {
|
|
setProfile: setSelectedProfile,
|
|
animationsEnabled,
|
|
instanceLaunchArgs,
|
|
setInstanceLaunchArgs,
|
|
} = useConfig();
|
|
const { playPressSound, playBackSound } = useAudio();
|
|
const {
|
|
editions,
|
|
installs: installedVersions,
|
|
toggleInstall,
|
|
handleUninstall,
|
|
handleCancelDownload,
|
|
deleteCustomEdition: onDeleteEdition,
|
|
addCustomEdition: onAddEdition,
|
|
updateCustomEdition: onUpdateEdition,
|
|
downloadingIds,
|
|
updatesAvailable,
|
|
addToSteam,
|
|
cycleBranch,
|
|
customizations,
|
|
updateCustomization,
|
|
saveCustomPath,
|
|
} = useGame();
|
|
const { isDayTime } = useConfig();
|
|
const { isAndroid } = usePlatform();
|
|
const visibleEditions = editions.filter(
|
|
(e) =>
|
|
e.url !== HIDDEN_INSTANCE_URL || installedVersions.includes(e.instanceId),
|
|
);
|
|
const [focusIndex, setFocusIndex] = useState<number>(0);
|
|
const [focusBtn, setFocusBtn] = useState<number>(0);
|
|
const [isImportModalOpen, setIsImportModalOpen] = useState(false);
|
|
const [isSetUidModalOpen, setIsSetUidModalOpen] = useState(false);
|
|
const [setUidTargetId, setSetUidTargetId] = useState("");
|
|
const [editingEdition, setEditingEdition] = useState<Edition | null>(null);
|
|
const [isImportWorldModalOpen, setIsImportWorldModalOpen] = useState(false);
|
|
const [importWorldTarget, setImportWorldTarget] = useState<{
|
|
id: string;
|
|
name: string;
|
|
} | null>(null);
|
|
const [isPlaytimeModalOpen, setIsPlaytimeModalOpen] = useState(false);
|
|
const [playtimeTarget, setPlaytimeTarget] = useState<{
|
|
id: string;
|
|
name: string;
|
|
} | null>(null);
|
|
const [isCustomizeModalOpen, setIsCustomizeModalOpen] = useState(false);
|
|
const [customizeTarget, setCustomizeTarget] = useState<Edition | null>(null);
|
|
const [_playtimeMap, setPlaytimeMap] = useState<
|
|
Record<string, PlaytimeResponse>
|
|
>({});
|
|
const [initialPath, setInitialPath] = useState<string>("");
|
|
const [_hoveredBtn, setHoveredBtn] = useState<{
|
|
row: number;
|
|
btn: string;
|
|
} | null>(null);
|
|
const [openMenuId, setOpenMenuId] = useState<string | null>(null);
|
|
const [deleteConfirmEdition, setDeleteConfirmEdition] =
|
|
useState<Edition | null>(null);
|
|
const [isDlcModalOpen, setIsDlcModalOpen] = useState(false);
|
|
const [dlcTargetEdition, setDlcTargetEdition] = useState<Edition | null>(
|
|
null,
|
|
);
|
|
const [isOptionsModalOpen, setIsOptionsModalOpen] = useState(false);
|
|
const [optionsTarget, setOptionsTarget] = useState<{
|
|
id: string;
|
|
name: string;
|
|
} | null>(null);
|
|
const [argsSchemas, setArgsSchemas] = useState<Record<string, boolean>>({});
|
|
const [thumb, setThumb] = useState({ height: 0, top: 0 });
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
const listRef = useRef<HTMLDivElement>(null);
|
|
const trackRef = useRef<HTMLDivElement>(null);
|
|
const thumbRef = useRef<HTMLDivElement>(null);
|
|
const dragOffsetRef = useRef(0);
|
|
const draggingRef = useRef(false);
|
|
const menuRef = useRef<HTMLDivElement>(null);
|
|
const [menuDir, setMenuDir] = useState<"down" | "up">("down");
|
|
const ITEM_COUNT = visibleEditions.length;
|
|
const [visibleRange, setVisibleRange] = useState<{
|
|
start: number;
|
|
end: number;
|
|
}>({
|
|
start: 0,
|
|
end: visibleEditions.length ? visibleEditions.length - 1 : 0,
|
|
});
|
|
const itemHeightsRef = useRef<number[]>([]);
|
|
const observersRef = useRef<Map<number, ResizeObserver>>(new Map());
|
|
const visibleEditionsRef = useRef(visibleEditions);
|
|
visibleEditionsRef.current = visibleEditions;
|
|
const focusIndexRef = useRef(focusIndex);
|
|
const openMenuIdRef = useRef(openMenuId);
|
|
const updateThumb = useCallback(() => {
|
|
const container = listRef.current;
|
|
const track = trackRef.current;
|
|
if (!container || !track) return;
|
|
const scrollHeight = container.scrollHeight;
|
|
const clientHeight = container.clientHeight;
|
|
const scrollable = scrollHeight - clientHeight;
|
|
if (scrollable <= 0) {
|
|
setThumb((prev) =>
|
|
prev.height === 0 && prev.top === 0 ? prev : { height: 0, top: 0 },
|
|
);
|
|
return;
|
|
}
|
|
const trackHeight = track.clientHeight;
|
|
const HANDLE = 40;
|
|
const STEP = HANDLE + 4;
|
|
const maxTop = trackHeight - HANDLE;
|
|
const maxIndex = Math.max(1, Math.floor(maxTop / STEP));
|
|
const index = Math.min(
|
|
maxIndex,
|
|
Math.round((container.scrollTop / scrollable) * maxIndex),
|
|
);
|
|
const top = index * STEP;
|
|
setThumb((prev) =>
|
|
prev.top === top && prev.height === HANDLE
|
|
? prev
|
|
: { height: HANDLE, top },
|
|
);
|
|
}, []);
|
|
|
|
const handleThumbPointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
|
|
e.preventDefault();
|
|
draggingRef.current = true;
|
|
dragOffsetRef.current =
|
|
e.clientY - e.currentTarget.getBoundingClientRect().top;
|
|
e.currentTarget.setPointerCapture(e.pointerId);
|
|
};
|
|
|
|
const handleThumbPointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
|
|
if (!draggingRef.current) return;
|
|
const container = listRef.current;
|
|
const track = trackRef.current;
|
|
if (!container || !track) return;
|
|
const trackRect = track.getBoundingClientRect();
|
|
const trackTop = trackRect.top + track.clientTop;
|
|
const y = e.clientY - trackTop - dragOffsetRef.current;
|
|
const trackHeight = track.clientHeight;
|
|
const maxTop = Math.max(0, trackHeight - thumb.height);
|
|
const scrollable = container.scrollHeight - container.clientHeight;
|
|
if (scrollable <= 0) return;
|
|
const clampedY = Math.min(Math.max(y, 0), maxTop);
|
|
container.scrollTop = (clampedY / maxTop) * scrollable;
|
|
};
|
|
|
|
const handleThumbPointerUp = () => {
|
|
draggingRef.current = false;
|
|
};
|
|
|
|
const updateVisibleRange = useCallback(() => {
|
|
const container = listRef.current;
|
|
const editions = visibleEditionsRef.current;
|
|
if (!container) return;
|
|
const scrollTop = container.scrollTop;
|
|
const viewportHeight = container.clientHeight;
|
|
const heights = itemHeightsRef.current;
|
|
const n = editions.length;
|
|
let acc = 0;
|
|
let start = n;
|
|
let end = -1;
|
|
for (let i = 0; i < n; i++) {
|
|
const itemTop = acc;
|
|
const itemNeo = acc + (heights[i] ?? ROW_ESTIMATE); //neo: me fr fr :3
|
|
if (itemTop >= scrollTop && itemNeo <= scrollTop + viewportHeight) {
|
|
if (start === n) start = i;
|
|
end = i;
|
|
}
|
|
acc += (heights[i] ?? ROW_ESTIMATE) + ROW_GAP;
|
|
}
|
|
if (start === n) start = 0;
|
|
if (end < 0) end = n - 1;
|
|
const fi = focusIndexRef.current;
|
|
if (fi >= 0 && fi < n) {
|
|
start = Math.min(start, fi);
|
|
end = Math.max(end, fi);
|
|
}
|
|
const menuId = openMenuIdRef.current;
|
|
if (menuId) {
|
|
const mi = editions.findIndex((e) => e.id === menuId);
|
|
if (mi >= 0) {
|
|
start = Math.min(start, mi);
|
|
end = Math.max(end, mi);
|
|
}
|
|
}
|
|
setVisibleRange((prev) =>
|
|
prev.start === start && prev.end === end ? prev : { start, end },
|
|
);
|
|
updateThumb();
|
|
}, [updateThumb]);
|
|
|
|
const setRowRef = (index: number) => (el: HTMLDivElement | null) => {
|
|
if (el) {
|
|
let ro = observersRef.current.get(index);
|
|
if (!ro) {
|
|
ro = new ResizeObserver(() => {
|
|
itemHeightsRef.current[index] = el.offsetHeight;
|
|
updateVisibleRange();
|
|
});
|
|
observersRef.current.set(index, ro);
|
|
}
|
|
ro.observe(el);
|
|
} else {
|
|
const ro = observersRef.current.get(index);
|
|
if (ro) {
|
|
ro.disconnect();
|
|
observersRef.current.delete(index);
|
|
}
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
focusIndexRef.current = focusIndex;
|
|
}, [focusIndex]);
|
|
|
|
useEffect(() => {
|
|
openMenuIdRef.current = openMenuId;
|
|
}, [openMenuId]);
|
|
|
|
useEffect(() => {
|
|
const container = listRef.current;
|
|
if (!container) return;
|
|
const ro = new ResizeObserver(() => updateVisibleRange());
|
|
ro.observe(container);
|
|
updateVisibleRange();
|
|
return () => {
|
|
ro.disconnect();
|
|
observersRef.current.forEach((obs) => obs.disconnect());
|
|
observersRef.current.clear();
|
|
};
|
|
}, [updateVisibleRange]);
|
|
useEffect(() => {
|
|
const handleKeyDown = (e: KeyboardEvent) => {
|
|
if (document.activeElement?.tagName === "INPUT") return;
|
|
if (
|
|
isImportModalOpen ||
|
|
isSetUidModalOpen ||
|
|
isImportWorldModalOpen ||
|
|
isPlaytimeModalOpen ||
|
|
isCustomizeModalOpen ||
|
|
isDlcModalOpen ||
|
|
isOptionsModalOpen ||
|
|
deleteConfirmEdition
|
|
) {
|
|
return;
|
|
}
|
|
|
|
if (e.key === "Escape" || e.key === "Backspace") {
|
|
playBackSound();
|
|
setActiveView("main");
|
|
return;
|
|
}
|
|
|
|
if (e.key === "ArrowDown") {
|
|
e.preventDefault();
|
|
setFocusIndex((prev) => (prev >= ITEM_COUNT - 1 ? 0 : prev + 1));
|
|
setFocusBtn(0);
|
|
} else if (e.key === "ArrowUp") {
|
|
e.preventDefault();
|
|
setFocusIndex((prev) => (prev <= 0 ? ITEM_COUNT - 1 : prev - 1));
|
|
setFocusBtn(0);
|
|
} else if (e.key === "ArrowLeft") {
|
|
e.preventDefault();
|
|
if (focusIndex < visibleEditions.length) {
|
|
const edition = visibleEditions[focusIndex];
|
|
const isInstalled = installedVersions.includes(edition.instanceId);
|
|
const maxBtn = isInstalled ? 1 : 2;
|
|
setFocusBtn((prev) => (prev <= 0 ? maxBtn : prev - 1));
|
|
}
|
|
} else if (e.key === "ArrowRight") {
|
|
e.preventDefault();
|
|
if (focusIndex < visibleEditions.length) {
|
|
const edition = visibleEditions[focusIndex];
|
|
const isInstalled = installedVersions.includes(edition.instanceId);
|
|
const maxBtn = isInstalled ? 1 : 2;
|
|
setFocusBtn((prev) => (prev >= maxBtn ? 0 : prev + 1));
|
|
}
|
|
} else if (e.key === "Enter") {
|
|
e.preventDefault();
|
|
if (focusIndex < visibleEditions.length) {
|
|
const edition = visibleEditions[focusIndex];
|
|
const isInstalled = installedVersions.includes(edition.instanceId);
|
|
const isDownloading = downloadingIds.includes(edition.instanceId);
|
|
if (focusBtn === 0) {
|
|
playPressSound();
|
|
setOpenMenuId(null);
|
|
setSelectedProfile(edition.instanceId);
|
|
} else if (focusBtn === 2 || (focusBtn === 1 && isInstalled)) {
|
|
playPressSound();
|
|
setOpenMenuId(openMenuId === edition.id ? null : edition.id);
|
|
} else if (focusBtn === 1 && !isInstalled) {
|
|
playPressSound();
|
|
if (isDownloading) {
|
|
handleCancelDownload(edition.instanceId);
|
|
} else {
|
|
toggleInstall(edition.instanceId);
|
|
}
|
|
}
|
|
} else if (focusIndex === visibleEditions.length) {
|
|
playPressSound();
|
|
setIsImportModalOpen(true);
|
|
} else if (focusIndex === visibleEditions.length + 1) {
|
|
playPressSound();
|
|
handleImportFolder();
|
|
} else {
|
|
playBackSound();
|
|
setActiveView("main");
|
|
}
|
|
}
|
|
};
|
|
|
|
window.addEventListener("keydown", handleKeyDown);
|
|
return () => window.removeEventListener("keydown", handleKeyDown);
|
|
}, [
|
|
focusIndex,
|
|
focusBtn,
|
|
editions,
|
|
installedVersions,
|
|
downloadingIds,
|
|
ITEM_COUNT,
|
|
playPressSound,
|
|
playBackSound,
|
|
setSelectedProfile,
|
|
setActiveView,
|
|
toggleInstall,
|
|
handleCancelDownload,
|
|
addToSteam,
|
|
isDayTime,
|
|
isImportModalOpen,
|
|
isSetUidModalOpen,
|
|
isImportWorldModalOpen,
|
|
isPlaytimeModalOpen,
|
|
isCustomizeModalOpen,
|
|
isDlcModalOpen,
|
|
isOptionsModalOpen,
|
|
deleteConfirmEdition,
|
|
]);
|
|
|
|
useEffect(() => {
|
|
if (focusIndex < visibleEditions.length && listRef.current) {
|
|
const el = listRef.current.querySelector(
|
|
`[data-index="${focusIndex}"]`,
|
|
) as HTMLElement;
|
|
if (el) {
|
|
el.scrollIntoView({ behavior: "smooth", block: "nearest" });
|
|
}
|
|
}
|
|
}, [focusIndex]);
|
|
|
|
useLayoutEffect(() => {
|
|
if (!openMenuId) return;
|
|
const container = listRef.current;
|
|
const menu = menuRef.current;
|
|
if (!container || !menu) return;
|
|
const row = menu.closest("[data-index]") as HTMLElement | null;
|
|
if (!row) return;
|
|
const containerRect = container.getBoundingClientRect();
|
|
const rowRect = row.getBoundingClientRect();
|
|
const menuHeight = menu.offsetHeight;
|
|
const spaceBelow = containerRect.bottom - rowRect.bottom;
|
|
const spaceAbove = rowRect.top - containerRect.top;
|
|
setMenuDir(
|
|
spaceBelow < menuHeight && spaceAbove > spaceBelow ? "up" : "down",
|
|
);
|
|
}, [openMenuId]);
|
|
|
|
useEffect(() => {
|
|
const fetchPlaytimes = async () => {
|
|
const map: Record<string, PlaytimeResponse> = {};
|
|
await Promise.all(
|
|
installedVersions.map(async (id) => {
|
|
try {
|
|
map[id] = await TauriService.getPlaytime(id);
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
}),
|
|
);
|
|
setPlaytimeMap(map);
|
|
};
|
|
fetchPlaytimes();
|
|
}, [installedVersions]);
|
|
|
|
useEffect(() => {
|
|
let cancelled = false;
|
|
const checkSchemas = async () => {
|
|
const map: Record<string, boolean> = {};
|
|
await Promise.all(
|
|
installedVersions.map(async (id) => {
|
|
try {
|
|
const schema = await TauriService.getInstanceArgsSchema(id);
|
|
map[id] = !!schema && parseSchema(schema) !== null;
|
|
} catch (e) {
|
|
console.error(e);
|
|
map[id] = false;
|
|
}
|
|
}),
|
|
);
|
|
if (!cancelled) setArgsSchemas(map);
|
|
};
|
|
checkSchemas();
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [installedVersions]);
|
|
|
|
const handleEditionClick = (edition: Edition, index: number) => {
|
|
playPressSound();
|
|
setSelectedProfile(edition.instanceId);
|
|
setFocusIndex(index);
|
|
};
|
|
|
|
const handleImportFolder = async () => {
|
|
try {
|
|
const folder = await TauriService.pickFolder();
|
|
if (folder) {
|
|
setInitialPath(folder);
|
|
setIsImportModalOpen(true);
|
|
}
|
|
} catch (e) {
|
|
if (e !== "CANCELED") console.error(e);
|
|
}
|
|
};
|
|
|
|
const handleImportWorld = (instanceId: string) => {
|
|
const edition = visibleEditions.find(
|
|
(e: Edition) => e.instanceId === instanceId,
|
|
);
|
|
setImportWorldTarget({ id: instanceId, name: edition?.name ?? instanceId });
|
|
setIsImportWorldModalOpen(true);
|
|
};
|
|
|
|
return (
|
|
<motion.div
|
|
ref={containerRef}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0, y: 20 }}
|
|
transition={{ duration: animationsEnabled ? 0.25 : 0 }}
|
|
className="flex flex-col items-center w-full max-w-5xl outline-none"
|
|
>
|
|
<div className="w-full min-w-120 p-1 mb-3 mc-options-bg relative flex items-stretch">
|
|
<div
|
|
ref={listRef}
|
|
onScroll={updateVisibleRange}
|
|
className="flex-1 min-w-0 h-85 max-h-85 overflow-y-auto snap-y snap-mandatory mc-versionrecess hidden-scrollbar"
|
|
>
|
|
<div className="flex flex-col gap-1 hidden-scrollbar">
|
|
{visibleEditions.map((edition: Edition, i: number) => {
|
|
if (i < visibleRange.start || i > visibleRange.end) {
|
|
return (
|
|
<div
|
|
key={edition.id}
|
|
data-index={i}
|
|
style={{
|
|
height: itemHeightsRef.current[i] ?? ROW_ESTIMATE,
|
|
}}
|
|
className="w-[calc(100%-20px)] shrink-0 snap-start"
|
|
/>
|
|
);
|
|
}
|
|
const isInstalled = installedVersions.includes(
|
|
edition.instanceId,
|
|
);
|
|
const isFocused = focusIndex === i;
|
|
const isCustom = edition.id.startsWith("custom_");
|
|
const isDownloading = downloadingIds.includes(edition.instanceId);
|
|
const isComingSoon = edition.comingSoon;
|
|
const isDownloadFocused =
|
|
!isInstalled && isFocused && focusBtn === 1;
|
|
const isGearFocused =
|
|
isFocused && focusBtn === (isInstalled ? 1 : 2);
|
|
return (
|
|
<div
|
|
key={edition.id}
|
|
data-index={i}
|
|
ref={setRowRef(i)}
|
|
className={`w-[calc(100%-20px)] snap-start flex items-center gap-3 ${!isFocused ? "mc-button-ninesliced" : "mc-button-ninesliced-selected"} ${isComingSoon ? "opacity-50 cursor-not-allowed" : ""} relative ${openMenuId === edition.id ? "z-50" : "z-0"}`}
|
|
onMouseEnter={() => !isComingSoon && setFocusIndex(i)}
|
|
onMouseLeave={() => setFocusIndex(-1)} //neo: you see this, smartcmd?
|
|
onClick={() =>
|
|
!isComingSoon && handleEditionClick(edition, i)
|
|
}
|
|
>
|
|
<div className="w-12 h-12 flex items-center justify-center shrink-0 bg-[url(/images/empty.png)] bg-cover bg-center bg-no-repeat">
|
|
{edition.logo ? (
|
|
edition.logo.startsWith("http") ||
|
|
edition.logo.startsWith("/images") ? (
|
|
<img
|
|
src={edition.logo}
|
|
alt=""
|
|
className={`w-10 h-10 object-contain ${isComingSoon ? "opacity-40 grayscale" : ""}`}
|
|
style={{ imageRendering: "pixelated" }}
|
|
/>
|
|
) : (
|
|
<ScreenshotImage
|
|
path={edition.logo}
|
|
alt=""
|
|
className={`w-6 h-6 object-contain ${isComingSoon ? "opacity-40 grayscale" : ""}`}
|
|
style={{ imageRendering: "pixelated" }}
|
|
/>
|
|
)
|
|
) : (
|
|
<div className="w-6 h-6 bg-gray-600/30 rounded-sm" />
|
|
)}
|
|
</div>
|
|
|
|
<div
|
|
className={`flex-1 text-left min-w-0 outline-none rounded cursor-pointer ${isComingSoon ? "cursor-not-allowed" : ""}`}
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<span
|
|
className={`text-xl tracking-wide truncate ${!isFocused ? "text-white" : "text-[#ffff00]"}`}
|
|
style={{ textShadow: "none" }}
|
|
>
|
|
{edition.name}
|
|
</span>
|
|
{edition.category &&
|
|
edition.category.map((cat: string) => (
|
|
<span
|
|
key={cat}
|
|
className="text-[9px] px-1.5 py-0.5 bg-[#444] text-[#aaa] font-bold uppercase border border-[#555] mc-text-shadow"
|
|
>
|
|
{cat}
|
|
</span>
|
|
))}
|
|
{isCustom && !edition.category && (
|
|
<span className="text-[10px] px-1.5 py-0.5 bg-[#777] text-[#222] font-bold uppercase">
|
|
{t("versions.custom")}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2 shrink-0 relative">
|
|
{!isInstalled && (
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
if (!isDownloading) {
|
|
toggleInstall(edition.instanceId);
|
|
} else {
|
|
handleCancelDownload(edition.instanceId);
|
|
}
|
|
}}
|
|
onMouseEnter={() =>
|
|
setHoveredBtn({ row: i, btn: "main" })
|
|
}
|
|
onMouseLeave={() => setHoveredBtn(null)}
|
|
className={`w-10 h-10 flex items-center justify-center bg-cover bg-no-repeat bg-center transition-all
|
|
${
|
|
isDownloadFocused
|
|
? "bg-[url(/images/checkbox_highlighted.png)] ring-4" //neo: ring-4 does not render at all (i dunno why tbh), so transition from ring-0 to ring-4 creates a transition indicating that it was selected. this is a coincidence but im keeping it
|
|
: "bg-[url(/images/checkbox.png)] ring-0"
|
|
}`}
|
|
style={{
|
|
imageRendering: "pixelated",
|
|
}}
|
|
>
|
|
<img
|
|
src={
|
|
isDownloading
|
|
? "/images/Trash_Bin_Icon.png"
|
|
: "/images/Download_Icon.png"
|
|
}
|
|
alt=""
|
|
className="w-8 h-8 object-contain"
|
|
style={{
|
|
imageRendering: "pixelated",
|
|
filter: isDownloading
|
|
? "hue-rotate(300deg)"
|
|
: "none",
|
|
}}
|
|
/>
|
|
</button>
|
|
)}
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
playPressSound();
|
|
setOpenMenuId(
|
|
openMenuId === edition.id ? null : edition.id,
|
|
);
|
|
}}
|
|
onMouseEnter={() =>
|
|
setHoveredBtn({ row: i, btn: "menu" })
|
|
}
|
|
onMouseLeave={() => setHoveredBtn(null)}
|
|
className={`w-10 h-10 flex flex-col items-center justify-center gap-1 relative bg-cover bg-no-repeat bg-center transition-all
|
|
${
|
|
isGearFocused
|
|
? "bg-[url(/images/checkbox_highlighted.png)] ring-4" //neo: same comment as the download button above
|
|
: "bg-[url(/images/checkbox.png)] ring-0"
|
|
}`}
|
|
style={{
|
|
imageRendering: "pixelated",
|
|
}}
|
|
>
|
|
<div className={"w-8 h-8"}>
|
|
<img
|
|
src={
|
|
updatesAvailable?.[edition.instanceId]
|
|
? "/images/Update_Icon.png"
|
|
: "/images/gear.png"
|
|
}
|
|
/>
|
|
</div>
|
|
</button>
|
|
|
|
{openMenuId === edition.id && (
|
|
<div
|
|
ref={menuRef}
|
|
className={`absolute right-0 ${menuDir === "up" ? "bottom-full mb-2" : "top-11"} w-48 bg-[#1a1a1a] border-2 border-[#555] z-[100] shadow-2xl p-0.5 animate-in fade-in zoom-in duration-75`}
|
|
style={{
|
|
imageRendering: "pixelated",
|
|
}}
|
|
>
|
|
{updatesAvailable?.[edition.instanceId] && (
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
playPressSound();
|
|
toggleInstall(edition.instanceId);
|
|
setOpenMenuId(null);
|
|
}}
|
|
className="w-full text-left px-3 py-1.5 text-xs text-[#ffff55] hover:text-white hover:bg-[#ffff55]/20 flex items-center gap-2 group transition-colors mc-text-shadow font-bold border-b border-white/5 mb-1"
|
|
>
|
|
<img
|
|
src="/images/Update_Icon.png"
|
|
alt=""
|
|
className="w-3 h-3 object-contain"
|
|
style={{ imageRendering: "pixelated" }}
|
|
/>
|
|
{t("versions.updateAvailable")}
|
|
</button>
|
|
)}
|
|
{!isAndroid && !isInstalled && (
|
|
<button
|
|
onClick={async (e) => {
|
|
e.stopPropagation();
|
|
playPressSound();
|
|
setOpenMenuId(null);
|
|
try {
|
|
const folder = await TauriService.pickFolder();
|
|
if (folder) {
|
|
const entries =
|
|
await TauriService.listDirectory(folder);
|
|
if (entries.length > 0) {
|
|
const dialog =
|
|
document.createElement("div");
|
|
dialog.className =
|
|
"fixed inset-0 bg-black/80 flex items-center justify-center z-50";
|
|
dialog.innerHTML = `
|
|
<div class="w-[420px] p-4 flex flex-col items-center mc-options-bg">
|
|
<h3 class="text-2xl font-bold text-[#333333] mb-4 text-left w-full px-4 mc-text-shadow">${t("versions.invalidDirectory")}</h3>
|
|
<p class="text-[#333333] mb-6 text-left w-full px-4">${t("versions.selectEmptyDirectory")}</p>
|
|
<div class="flex flex-col gap-3 w-full px-4">
|
|
<button id="empty-dir-ok" class="w-full h-10 flex items-center justify-center text-lg mc-text-shadow text-white hover:text-[#ffff00]" style="background-image: url('/images/Layout_Button_Bmp.png'); background-size: 100% 100%; image-rendering: pixelated; border: none; cursor: pointer;" onmouseenter="this.style.backgroundImage='url(/images/Layout_Button_Over.png)'" onmouseleave="this.style.backgroundImage='url(/images/Layout_Button_Bmp.png)'">${t("common.ok")}</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
document.body.appendChild(dialog);
|
|
const close = () =>
|
|
document.body.removeChild(dialog);
|
|
dialog
|
|
.querySelector("#empty-dir-ok")
|
|
?.addEventListener("click", close);
|
|
dialog.addEventListener("click", (e) => {
|
|
if (e.target === dialog) close();
|
|
});
|
|
return;
|
|
}
|
|
await saveCustomPath(
|
|
edition.instanceId,
|
|
folder,
|
|
);
|
|
toggleInstall(edition.instanceId);
|
|
}
|
|
} catch (err) {
|
|
if (err !== "CANCELED") console.error(err);
|
|
}
|
|
}}
|
|
className="w-full text-left px-3 py-2 text-xs text-[#dddddd] flex items-center gap-2 mc-text-shadow"
|
|
>
|
|
<img
|
|
src="/images/Download_Icon.png"
|
|
alt=""
|
|
className="w-3.5 h-3.5 object-contain"
|
|
style={{ imageRendering: "pixelated" }}
|
|
/>
|
|
{t("versions.downloadToCustomPath")}
|
|
</button>
|
|
)}
|
|
{edition.officialDLC && isInstalled ? (
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
playPressSound();
|
|
setDlcTargetEdition(edition);
|
|
setIsDlcModalOpen(true);
|
|
setOpenMenuId(null);
|
|
}}
|
|
className="w-full text-left px-3 py-2 text-[10px] text-[#dddddd] flex items-center gap-2 mc-text-shadow"
|
|
>
|
|
<svg
|
|
width="14"
|
|
height="14"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
className="w-3.5 h-3.5"
|
|
>
|
|
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
|
|
<polyline points="17 8 12 3 7 8" />
|
|
<line x1="12" y1="3" x2="12" y2="15" />
|
|
</svg>
|
|
{t("versions.downloadDlc")}
|
|
</button>
|
|
) : null}{" "}
|
|
{argsSchemas[edition.instanceId] && (
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
playPressSound();
|
|
setOptionsTarget({
|
|
id: edition.instanceId,
|
|
name: edition.name,
|
|
});
|
|
setIsOptionsModalOpen(true);
|
|
setOpenMenuId(null);
|
|
}}
|
|
className="w-full text-left px-3 py-2 text-xs text-[#dddddd] flex items-center gap-2 mc-text-shadow"
|
|
>
|
|
<svg
|
|
width="14"
|
|
height="14"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
className="w-3.5 h-3.5"
|
|
>
|
|
<line x1="4" y1="21" x2="4" y2="14" />
|
|
<line x1="4" y1="10" x2="4" y2="3" />
|
|
<line x1="12" y1="21" x2="12" y2="12" />
|
|
<line x1="12" y1="8" x2="12" y2="3" />
|
|
<line x1="20" y1="21" x2="20" y2="16" />
|
|
<line x1="20" y1="12" x2="20" y2="3" />
|
|
<line x1="1" y1="14" x2="7" y2="14" />
|
|
<line x1="9" y1="8" x2="15" y2="8" />
|
|
<line x1="17" y1="16" x2="23" y2="16" />
|
|
</svg>
|
|
{t("versions.options")}
|
|
</button>
|
|
)}
|
|
{Array.isArray(edition.branches) &&
|
|
edition.branches.length > 0 && (
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
playPressSound();
|
|
cycleBranch(edition.id);
|
|
}}
|
|
className="w-full text-left px-3 py-1.5 text-[10px] text-white mc-text-shadow flex items-center justify-between group"
|
|
>
|
|
<span className="text-[#AAAAAA] font-bold">
|
|
{t("versions.channel")}
|
|
</span>
|
|
<span className="text-[#ffff55] font-bold">
|
|
{edition.selectedBranch ?? t("versions.latest")}
|
|
</span>
|
|
</button>
|
|
)}
|
|
<div className="h-[1px] bg-white/5 my-0.5 mx-1" />
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
playPressSound();
|
|
toggleInstall(edition.instanceId);
|
|
setOpenMenuId(null);
|
|
}}
|
|
className="w-full text-left px-3 py-1.5 text-xs text-[#dddddd] hover:bg-[#ffff55]/20 flex items-center gap-2 group transition-colors mc-text-shadow font-bold border-b border-white/5 mb-1"
|
|
>
|
|
<img
|
|
src="/images/tools/pck.png" //neo: i have no other image to use lol
|
|
alt=""
|
|
className="w-3 h-3 object-contain"
|
|
style={{ imageRendering: "pixelated" }}
|
|
/>
|
|
{t("versions.repair")}
|
|
</button>
|
|
{!isAndroid && (
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
playPressSound();
|
|
TauriService.openInstanceFolder(
|
|
edition.instanceId,
|
|
);
|
|
setOpenMenuId(null);
|
|
}}
|
|
className="w-full text-left px-3 py-2 text-xs text-[#dddddd] flex items-center gap-2 mc-text-shadow"
|
|
>
|
|
<img
|
|
src="/images/Folder_Icon.png"
|
|
alt=""
|
|
className="w-3.5 h-3.5 object-contain"
|
|
style={{ imageRendering: "pixelated" }}
|
|
/>
|
|
{t("versions.openFolder")}
|
|
</button>
|
|
)}{" "}
|
|
{!isAndroid && (
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
playPressSound();
|
|
const PANORAMA_PROFILES = [
|
|
"legacy_evolved",
|
|
"vanilla_tu19",
|
|
"360revived",
|
|
"vanilla_tu24",
|
|
];
|
|
const panoId = PANORAMA_PROFILES.includes(
|
|
edition.id,
|
|
)
|
|
? edition.id
|
|
: "vanilla_tu19";
|
|
const panoramaUrl = `/panorama/${panoId}_Panorama_Background_${isDayTime ? "Day" : "Night"}.png`;
|
|
addToSteam(
|
|
edition.instanceId,
|
|
edition.name,
|
|
edition.titleImage ?? "",
|
|
panoramaUrl,
|
|
);
|
|
setOpenMenuId(null);
|
|
}}
|
|
className="w-full text-left px-3 py-2 text-xs text-[#dddddd] flex items-center gap-2 mc-text-shadow"
|
|
>
|
|
<img
|
|
src="/images/steam.png"
|
|
alt=""
|
|
className="w-3.5 h-3.5 object-contain invert brightness-0"
|
|
style={{ imageRendering: "pixelated" }}
|
|
/>
|
|
{t("versions.addToSteam")}
|
|
</button>
|
|
)}{" "}
|
|
{!isAndroid && (
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
playPressSound();
|
|
handleImportWorld(edition.instanceId);
|
|
setOpenMenuId(null);
|
|
}}
|
|
className="w-full text-left px-3 py-2 text-xs text-[#dddddd] flex items-center gap-2 mc-text-shadow"
|
|
>
|
|
<svg
|
|
width="14"
|
|
height="14"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
className="w-3.5 h-3.5"
|
|
>
|
|
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
|
|
<polyline points="7 10 12 15 17 10" />
|
|
<line x1="12" y1="15" x2="12" y2="3" />
|
|
</svg>
|
|
{t("versions.importWorld")}
|
|
</button>
|
|
)}{" "}
|
|
{!isAndroid && (
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
playPressSound();
|
|
TauriService.backupInstance(
|
|
edition.instanceId,
|
|
).catch((err) => {
|
|
if (err !== "CANCELED") console.error(err);
|
|
});
|
|
setOpenMenuId(null);
|
|
}}
|
|
className="w-full text-left px-3 py-2 text-xs text-[#dddddd] flex items-center gap-2 mc-text-shadow"
|
|
>
|
|
<svg
|
|
width="14"
|
|
height="14"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
className="w-3.5 h-3.5"
|
|
>
|
|
<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" />
|
|
<polyline points="17 21 17 13 7 13 7 21" />
|
|
<polyline points="7 3 7 8 15 8" />
|
|
</svg>
|
|
{t("versions.backup")}
|
|
</button>
|
|
)}{" "}
|
|
{!isAndroid && (
|
|
<button
|
|
onClick={async (e) => {
|
|
e.stopPropagation();
|
|
playPressSound();
|
|
setOpenMenuId(null);
|
|
try {
|
|
await TauriService.restoreInstance();
|
|
} catch (err) {
|
|
if (err !== "CANCELED") console.error(err);
|
|
}
|
|
}}
|
|
className="w-full text-left px-3 py-2 text-xs text-[#dddddd] flex items-center gap-2 mc-text-shadow"
|
|
>
|
|
<svg
|
|
width="14"
|
|
height="14"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
className="w-3.5 h-3.5"
|
|
>
|
|
<path d="M21 12a9 9 0 1 1-9-9 9 9 0 0 1 9 9z" />
|
|
<polyline points="12 7 12 12 15 15" />
|
|
</svg>
|
|
{t("versions.restore")}
|
|
</button>
|
|
)}{" "}
|
|
{!isAndroid && (
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
playPressSound();
|
|
setCustomizeTarget(edition);
|
|
setIsCustomizeModalOpen(true);
|
|
setOpenMenuId(null);
|
|
}}
|
|
className="w-full text-left px-3 py-2 text-xs text-[#dddddd] flex items-center gap-2 mc-text-shadow"
|
|
>
|
|
<svg
|
|
width="14"
|
|
height="14"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
className="w-3.5 h-3.5"
|
|
>
|
|
<path d="M12 20h9M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" />
|
|
</svg>
|
|
{t("versions.customize")}
|
|
</button>
|
|
)}{" "}
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
playPressSound();
|
|
setSetUidTargetId(edition.instanceId);
|
|
setIsSetUidModalOpen(true);
|
|
setOpenMenuId(null);
|
|
}}
|
|
className="w-full text-left px-3 py-2 text-xs text-[#dddddd] flex items-center gap-2 mc-text-shadow"
|
|
>
|
|
<svg
|
|
width="14"
|
|
height="14"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
className="w-3.5 h-3.5"
|
|
>
|
|
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
|
|
<circle cx="12" cy="7" r="4"></circle>
|
|
</svg>
|
|
{t("versions.setUid")}
|
|
</button>{" "}
|
|
{isCustom ? (
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
playPressSound();
|
|
setEditingEdition(edition);
|
|
setIsImportModalOpen(true);
|
|
setOpenMenuId(null);
|
|
}}
|
|
className="w-full text-left px-3 py-2 text-xs text-[#aaaaaa] flex items-center gap-2 mc-text-shadow"
|
|
>
|
|
<svg
|
|
width="14"
|
|
height="14"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
className="w-3.5 h-3.5"
|
|
>
|
|
<path d="M12 20h9M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" />
|
|
</svg>
|
|
{t("versions.editCustom")}
|
|
</button>
|
|
) : null}{" "}
|
|
<div className="h-[2px] bg-[#555] my-0.5 mx-1" />
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
playBackSound();
|
|
if (isCustom) {
|
|
onDeleteEdition(edition.id);
|
|
} else {
|
|
setDeleteConfirmEdition(edition);
|
|
}
|
|
setOpenMenuId(null);
|
|
}}
|
|
className="w-full text-left px-3 py-2 text-xs text-red-500 hover:text-red-400 hover:bg-red-500/10 flex items-center gap-2 transition-colors mc-text-shadow font-bold"
|
|
>
|
|
<img
|
|
src="/images/Trash_Bin_Icon.png"
|
|
alt=""
|
|
className="w-3.5 h-3.5 object-contain"
|
|
style={{ imageRendering: "pixelated" }}
|
|
/>
|
|
{isCustom
|
|
? t("versions.removeCustom")
|
|
: t("versions.uninstall")}
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
<div
|
|
className="w-[calc(100%-20px)] shrink-0"
|
|
style={{ height: ROW_ESTIMATE }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
ref={trackRef}
|
|
className="w-13 h-85 max-h-85 shrink-0 relative select-none mc-versionrecess"
|
|
>
|
|
{thumb.height > 0 && (
|
|
<div
|
|
ref={thumbRef}
|
|
onPointerDown={handleThumbPointerDown}
|
|
onPointerMove={handleThumbPointerMove}
|
|
onPointerUp={handleThumbPointerUp}
|
|
onPointerCancel={handleThumbPointerUp}
|
|
className="absolute left-1/2 -translate-x-[30px] w-10 h-10 mc-options-bg cursor-pointer"
|
|
style={{ top: thumb.top - 12 }}
|
|
>
|
|
{
|
|
//neo: oh my goodness this took me a lot to figure out, anyway its just a transparent <hr> so the div isnt empty so that the border-image renders
|
|
}
|
|
<hr style={{ color: "transparent" }} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{!isAndroid && (
|
|
<div className="absolute left-3 bottom-6 z-10 flex items-center gap-1 pb-1 pr-1 w-fit mc-help">
|
|
<button
|
|
onClick={() => {
|
|
playPressSound();
|
|
setInitialPath("");
|
|
setIsImportModalOpen(true);
|
|
}}
|
|
onMouseEnter={() => setFocusIndex(visibleEditions.length)}
|
|
onMouseLeave={() => setHoveredBtn(null)}
|
|
className="w-8 h-8 flex items-center justify-center text-[#333333] mc-optionbutton"
|
|
style={{
|
|
imageRendering: "pixelated",
|
|
}}
|
|
>
|
|
<svg
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="3"
|
|
strokeLinecap="square"
|
|
>
|
|
<path d="M12 5v14M5 12h14" />
|
|
</svg>
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => {
|
|
playPressSound();
|
|
handleImportFolder();
|
|
}}
|
|
onMouseEnter={() => setFocusIndex(visibleEditions.length + 1)}
|
|
onMouseLeave={() => setHoveredBtn(null)}
|
|
title={t("modals.customTu.importTitle")}
|
|
className="w-8 h-8 flex items-center justify-center text-[#333333] mc-optionbutton"
|
|
style={{
|
|
imageRendering: "pixelated",
|
|
}}
|
|
>
|
|
<img
|
|
src="/images/Folder_Icon.png"
|
|
alt={t("modals.customTu.importTitle")}
|
|
className="w-5 h-5 object-contain invert"
|
|
style={{ imageRendering: "pixelated" }}
|
|
/>
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="mc-help text-xl text-[#FFFFFF] max-h-24 min-h-24 overflow-hidden px-4 w-280">
|
|
{visibleEditions[focusIndex]?.desc ??
|
|
visibleEditions.find((e) => e.id == useConfig().profile)?.desc ??
|
|
""}
|
|
</div>
|
|
|
|
{!isAndroid && (
|
|
<div className="flex justify-center">
|
|
<button
|
|
data-index={visibleEditions.length + 2}
|
|
onMouseEnter={() => setFocusIndex(visibleEditions.length + 2)}
|
|
onClick={() => {
|
|
playBackSound();
|
|
setActiveView("main");
|
|
}}
|
|
className="w-48 h-10 flex items-center justify-center text-xl mc-text-shadow text-white"
|
|
style={{
|
|
backgroundImage:
|
|
focusIndex === visibleEditions.length + 2
|
|
? "url('/images/button_highlighted.png')"
|
|
: "url('/images/Button_Background.png')",
|
|
backgroundSize: "100% 100%",
|
|
imageRendering: "pixelated",
|
|
}}
|
|
>
|
|
{t("common.done")}
|
|
</button>{" "}
|
|
</div>
|
|
)}
|
|
|
|
<CustomTUModal
|
|
isOpen={isImportModalOpen}
|
|
onClose={() => {
|
|
setIsImportModalOpen(false);
|
|
setEditingEdition(null);
|
|
setInitialPath("");
|
|
}}
|
|
onImport={(ed: {
|
|
name: string;
|
|
desc: string;
|
|
url: string;
|
|
path?: string;
|
|
}) => {
|
|
if (editingEdition) {
|
|
onUpdateEdition(editingEdition.id, ed);
|
|
} else {
|
|
const id = onAddEdition(ed);
|
|
setSelectedProfile(id);
|
|
}
|
|
}}
|
|
playPressSound={playPressSound}
|
|
playBackSound={playBackSound}
|
|
editingEdition={editingEdition}
|
|
initialPath={initialPath}
|
|
/>
|
|
|
|
<SetUidModal
|
|
isOpen={isSetUidModalOpen}
|
|
onClose={() => setIsSetUidModalOpen(false)}
|
|
playPressSound={playPressSound}
|
|
playBackSound={playBackSound}
|
|
instances={visibleEditions}
|
|
installedVersions={installedVersions}
|
|
targetInstanceId={setUidTargetId}
|
|
/>
|
|
|
|
<ImportWorldModal
|
|
isOpen={isImportWorldModalOpen}
|
|
onClose={() => {
|
|
setIsImportWorldModalOpen(false);
|
|
setImportWorldTarget(null);
|
|
}}
|
|
playPressSound={playPressSound}
|
|
playBackSound={playBackSound}
|
|
targetInstanceId={importWorldTarget?.id ?? ""}
|
|
targetInstanceName={importWorldTarget?.name ?? ""}
|
|
/>
|
|
|
|
<PlaytimeModal
|
|
isOpen={isPlaytimeModalOpen}
|
|
onClose={() => {
|
|
setIsPlaytimeModalOpen(false);
|
|
setPlaytimeTarget(null);
|
|
}}
|
|
playBackSound={playBackSound}
|
|
instanceId={playtimeTarget?.id ?? ""}
|
|
instanceName={playtimeTarget?.name ?? ""}
|
|
/>
|
|
|
|
<CustomizeModal
|
|
isOpen={isCustomizeModalOpen}
|
|
onClose={() => {
|
|
setIsCustomizeModalOpen(false);
|
|
setCustomizeTarget(null);
|
|
}}
|
|
playPressSound={playPressSound}
|
|
playBackSound={playBackSound}
|
|
editionName={customizeTarget?.name ?? ""}
|
|
currentTitleImage={
|
|
customizeTarget
|
|
? customizations[customizeTarget.instanceId]?.titleImage ||
|
|
customizeTarget.titleImage
|
|
: undefined
|
|
}
|
|
currentPanorama={
|
|
customizeTarget
|
|
? customizations[customizeTarget.instanceId]?.panorama ||
|
|
customizeTarget.panorama
|
|
: undefined
|
|
}
|
|
onSave={(updates) => {
|
|
if (customizeTarget) {
|
|
updateCustomization(customizeTarget.instanceId, updates);
|
|
}
|
|
}}
|
|
/>
|
|
|
|
<DownloadDlcModal
|
|
isOpen={isDlcModalOpen}
|
|
onClose={() => {
|
|
setIsDlcModalOpen(false);
|
|
setDlcTargetEdition(null);
|
|
}}
|
|
playPressSound={playPressSound}
|
|
playBackSound={playBackSound}
|
|
editionName={dlcTargetEdition?.name ?? ""}
|
|
instanceId={dlcTargetEdition?.instanceId ?? ""}
|
|
officialDLC={dlcTargetEdition?.officialDLC ?? ""}
|
|
/>
|
|
|
|
<OptionsModal
|
|
isOpen={isOptionsModalOpen}
|
|
onClose={() => {
|
|
setIsOptionsModalOpen(false);
|
|
setOptionsTarget(null);
|
|
}}
|
|
playPressSound={playPressSound}
|
|
playBackSound={playBackSound}
|
|
instanceId={optionsTarget?.id ?? ""}
|
|
instanceName={optionsTarget?.name ?? ""}
|
|
savedValues={
|
|
optionsTarget
|
|
? instanceLaunchArgs[optionsTarget.id]?.values
|
|
: undefined
|
|
}
|
|
onSave={(instanceId, values, args) => {
|
|
setInstanceLaunchArgs((prev) => ({
|
|
...prev,
|
|
[instanceId]: { values, args },
|
|
}));
|
|
}}
|
|
/>
|
|
|
|
{deleteConfirmEdition && (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60">
|
|
<div
|
|
className="w-[400px] p-6"
|
|
style={{
|
|
backgroundImage: "url('/images/Download_Background.png')",
|
|
backgroundSize: "100% 100%",
|
|
backgroundRepeat: "no-repeat",
|
|
imageRendering: "pixelated",
|
|
}}
|
|
>
|
|
<h3 className="text-xl text-white mc-text-shadow mb-4 text-center">
|
|
{t("versions.deleteTitle", { name: deleteConfirmEdition.name })}
|
|
</h3>
|
|
<p className="text-sm text-white mb-6 text-center leading-relaxed">
|
|
{t("versions.deleteWarning")}
|
|
</p>
|
|
<div className="flex justify-center gap-4">
|
|
<DeleteConfirmButton
|
|
label={t("common.cancel")}
|
|
onClick={() => {
|
|
playBackSound();
|
|
setDeleteConfirmEdition(null);
|
|
}}
|
|
/>
|
|
<DeleteConfirmButton
|
|
label={t("common.delete")}
|
|
isDanger
|
|
onClick={() => {
|
|
playPressSound();
|
|
handleUninstall(deleteConfirmEdition.id);
|
|
setDeleteConfirmEdition(null);
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</motion.div>
|
|
);
|
|
});
|
|
|
|
export default VersionsView;
|