diff --git a/public/Capes/4J.png b/public/Capes/4J.png new file mode 100644 index 0000000..a2d4883 Binary files /dev/null and b/public/Capes/4J.png differ diff --git a/public/Capes/Unused_Cape_2.png b/public/Capes/Unused_Cape_2.png new file mode 100644 index 0000000..a256f03 Binary files /dev/null and b/public/Capes/Unused_Cape_2.png differ diff --git a/src/components/views/SkinsView.tsx b/src/components/views/SkinsView.tsx index bae0fbc..e6ee247 100644 --- a/src/components/views/SkinsView.tsx +++ b/src/components/views/SkinsView.tsx @@ -76,10 +76,15 @@ const DEFAULT_SKINS: SavedSkin[] = [ id: "tranqlmao", name: "Tranq", url: "/Skins/tranq.png", - isSlim: false, + isSlim: true, }, ]; +const DEFAULT_CAPES: SavedCape[] = [ + { id: "4j", name: "4J Studios", url: "/Capes/4J.png" }, + { id: "unused2", name: "Unused Cape 2", url: "/Capes/Unused_Cape_2.png" }, +]; + const HeadPreview = memo(function HeadPreview({ src }: { src: string }) { const canvasRef = useRef(null); @@ -135,13 +140,17 @@ const SkinsView = memo(function SkinsView() { "lce-custom-capes", [], ); + const savedCapes = [ + ...DEFAULT_CAPES, + ...storedCapes.filter((c) => !DEFAULT_CAPES.some((d) => d.id === c.id)), + ]; const [activeCapeId, setActiveCapeId] = useState(null); const TOP_BUTTONS_COUNT = viewMode === "skin" ? 3 : 3; const SKINS_START_INDEX = TOP_BUTTONS_COUNT; const BACK_BUTTON_INDEX = SKINS_START_INDEX + - (viewMode === "skin" ? savedSkins.length : storedCapes.length); + (viewMode === "skin" ? savedSkins.length : savedCapes.length); const ITEM_COUNT = BACK_BUTTON_INDEX + 1; const setSavedSkins = ( @@ -243,10 +252,10 @@ const SkinsView = memo(function SkinsView() { useEffect(() => { if (!activeCapeId) { - const match = storedCapes.find((c) => c.url === capeUrl); + const match = savedCapes.find((c) => c.url === capeUrl); if (match) setActiveCapeId(match.id); } - }, [activeCapeId, storedCapes, capeUrl]); + }, [activeCapeId, savedCapes, capeUrl]); useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { @@ -333,7 +342,7 @@ const SkinsView = memo(function SkinsView() { setFocusIndex(0); } else if (focusIndex === BACK_BUTTON_INDEX) { const itemCount = - viewMode === "cape" ? storedCapes.length + 1 : savedSkins.length; + viewMode === "cape" ? savedCapes.length + 1 : savedSkins.length; setFocusIndex(SKINS_START_INDEX + itemCount - 1); } else if (focusIndex >= SKINS_START_INDEX) { const rowCount = 4; @@ -351,7 +360,18 @@ const SkinsView = memo(function SkinsView() { playPressSound(); setViewMode(viewMode === "skin" ? "cape" : "skin"); } else if (focusIndex < BACK_BUTTON_INDEX) { - handleSkinSelect(savedSkins[focusIndex - SKINS_START_INDEX]); + if (viewMode === "cape") { + const capeIdx = focusIndex - SKINS_START_INDEX; + if (capeIdx === 0) { + playPressSound(); + setCapeUrl(null); + setActiveCapeId(null); + } else { + handleCapeSelect(savedCapes[capeIdx - 1]); + } + } else { + handleSkinSelect(savedSkins[focusIndex - SKINS_START_INDEX]); + } } else { playBackSound(); setActiveView("main"); @@ -363,7 +383,7 @@ const SkinsView = memo(function SkinsView() { }, [ focusIndex, savedSkins.length, - storedCapes.length, + savedCapes.length, playBackSound, setActiveView, playPressSound, @@ -414,6 +434,9 @@ const SkinsView = memo(function SkinsView() { const isDefaultSkin = (id: string | null) => DEFAULT_SKINS.some((d) => d.id === id); + const isDefaultCape = (id: string | null) => + DEFAULT_CAPES.some((d) => d.id === id); + const handleDeleteActive = () => { if (!activeSkinId || isDefaultSkin(activeSkinId)) return; playPressSound(); @@ -457,7 +480,7 @@ const SkinsView = memo(function SkinsView() { }; const handleDeleteActiveCape = () => { - if (!activeCapeId) return; + if (!activeCapeId || isDefaultCape(activeCapeId)) return; playPressSound(); const updatedCapes = storedCapes.filter((c) => c.id !== activeCapeId); setStoredCapes(updatedCapes); @@ -476,6 +499,8 @@ const SkinsView = memo(function SkinsView() { isDefaultSkin(activeSkinId) || (!activeSkinId && skinUrl === "/images/Default.png"); const isActiveCapeDefault = !activeCapeId && !capeUrl; + const isCapeDeleteDisabled = + isActiveCapeDefault || isDefaultCape(activeCapeId); return ( { if (viewMode === "skin" && !isActiveDefault) setFocusIndex(1); - else if (viewMode === "cape" && !isActiveCapeDefault) + else if (viewMode === "cape" && !isCapeDeleteDisabled) setFocusIndex(1); }} onClick={() => { @@ -528,7 +553,7 @@ const SkinsView = memo(function SkinsView() { }} className={`w-40 h-10 flex items-center justify-center transition-colors text-2xl mc-text-shadow outline-none border-none ${ (viewMode === "skin" && isActiveDefault) || - (viewMode === "cape" && isActiveCapeDefault) + (viewMode === "cape" && isCapeDeleteDisabled) ? "text-gray-400 opacity-80 cursor-not-allowed" : focusIndex === 1 ? "text-[#FFFF55]" @@ -537,7 +562,7 @@ const SkinsView = memo(function SkinsView() { style={{ backgroundImage: (viewMode === "skin" && isActiveDefault) || - (viewMode === "cape" && isActiveCapeDefault) + (viewMode === "cape" && isCapeDeleteDisabled) ? "url('/images/Button_Background2.png')" : focusIndex === 1 ? "url('/images/button_highlighted.png')" @@ -673,7 +698,7 @@ const SkinsView = memo(function SkinsView() { No Cape - {storedCapes.map((cape, i) => { + {savedCapes.map((cape, i) => { const idx = SKINS_START_INDEX + 1 + i; const isActive = activeCapeId ? activeCapeId === cape.id @@ -707,9 +732,10 @@ const SkinsView = memo(function SkinsView() { onChange={(e) => handleCapeNameChange(cape.id, e.target.value) } - className={`bg-transparent text-center outline-none border-none text-base mc-text-shadow w-full truncate transition-colors relative z-10 ${isActive || isFocused ? "text-[#FFFF55]" : "text-white"}`} + className={`bg-transparent text-center outline-none border-none text-base mc-text-shadow w-full truncate transition-colors relative z-10 ${isActive || isFocused ? "text-[#FFFF55]" : "text-white"} ${isDefaultCape(cape.id) ? "pointer-events-none" : ""}`} onClick={(e) => e.stopPropagation()} spellCheck={false} + readOnly={isDefaultCape(cape.id)} /> );