mirror of
https://github.com/LCE-Hub/LCE-Emerald-Launcher.git
synced 2026-09-24 17:11:00 +00:00
feat: ui fixes + new credit view (not finished yet
This commit is contained in:
KayJann
@@ -0,0 +1,289 @@
|
||||
import { useEffect, memo } from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import { useUI, useAudio } from "../../context/LauncherContext";
|
||||
|
||||
interface CreditCategory {
|
||||
category: string;
|
||||
icon?: string;
|
||||
subcategories: {
|
||||
name: string;
|
||||
icon: string;
|
||||
roles: {
|
||||
role: string;
|
||||
members: {
|
||||
name: string;
|
||||
url: string;
|
||||
}[];
|
||||
}[];
|
||||
}[];
|
||||
}
|
||||
|
||||
const CreditsView = memo(function CreditsView() {
|
||||
const { setActiveView } = useUI();
|
||||
const { playBackSound } = useAudio();
|
||||
|
||||
const credits: CreditCategory[] = [
|
||||
{
|
||||
category: "Emerald Team",
|
||||
icon: "/images/emerald_0.png",
|
||||
subcategories: [
|
||||
{
|
||||
name: "Leadership",
|
||||
icon: "",
|
||||
roles: [
|
||||
{
|
||||
role: "Founder & Maintainer",
|
||||
members: [
|
||||
{ name: "KayJann", url: "https://github.com/KayJannOnGit" },
|
||||
],
|
||||
},
|
||||
{
|
||||
role: "Active Maintainer",
|
||||
members: [
|
||||
{ name: "neoapps", url: "https://github.com/neoapps-dev" },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Contributors",
|
||||
icon: "",
|
||||
roles: [
|
||||
{
|
||||
role: "",
|
||||
members: [
|
||||
{ name: "Santiago Fisela", url: "https://github.com/PinkLittleKitty" },
|
||||
{ name: "Leon", url: "https://github.com/hornyalcoholic" },
|
||||
{ name: "Criador_Mods", url: "https://github.com/CriadorMods" },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
category: "LCE TEAM",
|
||||
subcategories: [
|
||||
{
|
||||
name: "neoLegacy",
|
||||
icon: "/images/neoLegacy.png",
|
||||
roles: [
|
||||
{
|
||||
role: "Founder",
|
||||
members: [
|
||||
{ name: "Piebot", url: "https://github.com/Piebot" },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "360 Revived",
|
||||
icon: "/images/360_revived.png",
|
||||
roles: [
|
||||
{
|
||||
role: "Founder",
|
||||
members: [
|
||||
{ name: "BluTac10", url: "https://github.com/BluTac10" },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Hellish Ends",
|
||||
icon: "",
|
||||
roles: [
|
||||
{
|
||||
role: "Founder",
|
||||
members: [
|
||||
{ name: "DeadVoxelx", url: "https://github.com/DeadVoxelx" },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Revelations",
|
||||
icon: "",
|
||||
roles: [
|
||||
{
|
||||
role: "Founder",
|
||||
members: [
|
||||
{ name: "Revela", url: "https://github.com/Revela" },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Portable LCE",
|
||||
icon: "",
|
||||
roles: [
|
||||
{
|
||||
role: "Founder",
|
||||
members: [
|
||||
{ name: "TBD", url: "#" },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
}
|
||||
{
|
||||
category: "SPECIAL THANKS",
|
||||
icon: "",
|
||||
subcategories: [
|
||||
{
|
||||
name: "Discord Booster",
|
||||
icon: "/images/discord.png",
|
||||
roles: [
|
||||
{
|
||||
role: "",
|
||||
members: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Donors",
|
||||
icon: "",
|
||||
roles: [
|
||||
{
|
||||
role: "",
|
||||
members: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
const handleKey = (e: KeyboardEvent) => {
|
||||
if (document.activeElement?.tagName === "INPUT") return;
|
||||
if (e.key === "Escape") {
|
||||
playBackSound();
|
||||
setActiveView("main");
|
||||
}
|
||||
};
|
||||
window.addEventListener("keydown", handleKey);
|
||||
return () => window.removeEventListener("keydown", handleKey);
|
||||
}, [setActiveView, playBackSound]);
|
||||
|
||||
return (
|
||||
<div className="relative w-full h-full flex items-center justify-center overflow-hidden">
|
||||
<motion.div
|
||||
initial={{ y: "50%" }}
|
||||
animate={{ y: "-200%" }}
|
||||
transition={{ duration: 30, ease: "linear" }}
|
||||
onAnimationComplete={() => setActiveView("main")}
|
||||
className="flex flex-col items-center justify-center space-y-8 py-20"
|
||||
>
|
||||
<button
|
||||
onClick={() => {
|
||||
playBackSound();
|
||||
setActiveView("main");
|
||||
}}
|
||||
className="absolute bottom-8 right-8 h-10 flex items-center justify-center gap-2 px-4 text-xl mc-text-shadow transition-colors outline-none border-none text-white"
|
||||
style={{
|
||||
backgroundImage: "url('/images/Button_Background.png')",
|
||||
backgroundSize: "100% 100%",
|
||||
imageRendering: "pixelated",
|
||||
}}
|
||||
>
|
||||
Back to Menu
|
||||
</button>
|
||||
|
||||
{credits.map((cat) => (
|
||||
<div key={cat.category} className="flex flex-col items-center gap-6">
|
||||
<h2
|
||||
className={`text-3xl font-bold mc-text-shadow uppercase tracking-wider text-center flex items-center gap-3 ${
|
||||
cat.category === "LCE TEAM" ? "text-[#9B59B6]" :
|
||||
cat.category === "SPECIAL THANKS" ? "text-[#FFD700]" :
|
||||
"text-[#50C878]"
|
||||
}`}
|
||||
style={{ textShadow: "2px 2px 0px #000000" }}
|
||||
>
|
||||
{cat.icon && (
|
||||
<img
|
||||
src={cat.icon}
|
||||
alt={cat.category}
|
||||
className="w-10 h-10 object-contain"
|
||||
style={{ imageRendering: "pixelated" }}
|
||||
/>
|
||||
)}
|
||||
{cat.category}
|
||||
</h2>
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
{cat.subcategories.map((sub) => (
|
||||
<div key={sub.name} className="flex flex-col items-center gap-3">
|
||||
<h3 className={`text-2xl mc-text-shadow uppercase tracking-wide text-center flex items-center gap-3 ${
|
||||
sub.name === "Discord Booster" ? "text-[#FF69B4]" : "text-white/90"
|
||||
}`}>
|
||||
{sub.icon && (
|
||||
<img
|
||||
src={sub.icon}
|
||||
alt={sub.name}
|
||||
className="w-8 h-8 object-contain"
|
||||
style={{ imageRendering: "pixelated" }}
|
||||
/>
|
||||
)}
|
||||
{sub.name}
|
||||
</h3>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
{sub.roles.map((role) => (
|
||||
<div key={role.role} className="flex flex-col items-center gap-2">
|
||||
{role.role && (
|
||||
<h4 className="text-white/70 text-lg mc-text-shadow uppercase tracking-wide text-center">
|
||||
{role.role}
|
||||
</h4>
|
||||
)}
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
{role.members.map((member) => (
|
||||
<a
|
||||
key={member.name}
|
||||
href={member.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-[#e2cc4c] text-2xl mc-text-shadow font-medium cursor-pointer"
|
||||
style={{ textShadow: "2px 2px 0px #000000" }}
|
||||
>
|
||||
{member.name}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<div className="flex flex-row items-center justify-center gap-6 mt-12">
|
||||
<div className="bg-white rounded-xl p-3 shadow-2xl w-64">
|
||||
<img
|
||||
src="/images/LCE Team.png"
|
||||
alt="LCE Team"
|
||||
className="w-full h-auto object-contain"
|
||||
style={{ imageRendering: "pixelated" }}
|
||||
/>
|
||||
</div>
|
||||
<div className="bg-white rounded-xl p-3 shadow-2xl w-64">
|
||||
<img
|
||||
src="/images/esrb_warning.png"
|
||||
alt="ESRB Warning"
|
||||
className="w-full h-auto object-contain"
|
||||
style={{ imageRendering: "pixelated" }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center gap-2 mt-8">
|
||||
<p className="text-white/60 text-sm mc-text-shadow text-center uppercase tracking-wider">
|
||||
Not affiliated with Mojang, Microsoft, or 4J Studios
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
export default CreditsView;
|
||||
@@ -9,7 +9,7 @@ import {
|
||||
import type { Edition } from "../../types/edition";
|
||||
|
||||
const HomeView = memo(function HomeView() {
|
||||
const { setActiveView, setShowCredits, focusSection, onNavigateToSkin } =
|
||||
const { setActiveView, focusSection, onNavigateToSkin } =
|
||||
useUI();
|
||||
const { profile, legacyMode } = useConfig();
|
||||
const { playPressSound, playSfx } = useAudio();
|
||||
@@ -208,12 +208,12 @@ const HomeView = memo(function HomeView() {
|
||||
onClick={() => {
|
||||
if (isFocusedSection) {
|
||||
playSfx("orb.ogg");
|
||||
setShowCredits(true);
|
||||
setActiveView("credits");
|
||||
}
|
||||
}}
|
||||
className={`text-white hover:text-[#FFFF55] text-xl mc-text-shadow tracking-widest transition-colors mt-1 bg-transparent border-none outline-none ${!isFocusedSection ? "pointer-events-none" : ""}`}
|
||||
>
|
||||
EMERALD TEAM
|
||||
CREDITS
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user