init
This commit is contained in:
hxt
@@ -1,13 +1,452 @@
|
||||
import React from "react";
|
||||
// The exported code uses Tailwind CSS. Install Tailwind CSS in your dev environment to ensure all styles work.
|
||||
|
||||
import React, { useState } from "react";
|
||||
|
||||
const Characters: React.FC = () => {
|
||||
const [selectedStars, setSelectedStars] = useState<string>("All Stars");
|
||||
const [selectedElement, setSelectedElement] = useState<string>("All");
|
||||
const [selectedClass, setSelectedClass] = useState<string>("All");
|
||||
const [selectedZodiac, setSelectedZodiac] = useState<string>("All");
|
||||
const [searchTerm, setSearchTerm] = useState<string>("");
|
||||
|
||||
const heroes = [
|
||||
{
|
||||
id: 1,
|
||||
name: "Abigail",
|
||||
stars: 5,
|
||||
element: "fire",
|
||||
class: "Fire Warrior",
|
||||
imageUrl:
|
||||
"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20female%20warrior%20with%20pink%20hair%20and%20red%20eyes%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=1&orientation=squarish",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Abyssal Yufine",
|
||||
stars: 5,
|
||||
element: "dark",
|
||||
class: "Dark Knight",
|
||||
imageUrl:
|
||||
"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20female%20knight%20with%20white%20hair%20and%20purple%20eyes%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=2&orientation=squarish",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Achates",
|
||||
stars: 4,
|
||||
element: "fire",
|
||||
class: "Fire Soul Weaver",
|
||||
imageUrl:
|
||||
"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20female%20healer%20with%20blonde%20hair%20and%20red%20eyes%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=3&orientation=squarish",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "Adin",
|
||||
stars: 3,
|
||||
element: "earth",
|
||||
class: "Earth Thief",
|
||||
imageUrl:
|
||||
"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20female%20thief%20with%20purple%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=4&orientation=squarish",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: "Adlay",
|
||||
stars: 3,
|
||||
element: "earth",
|
||||
class: "Earth Mage",
|
||||
imageUrl:
|
||||
"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20male%20mage%20with%20brown%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=5&orientation=squarish",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: "Adventurer Ras",
|
||||
stars: 3,
|
||||
element: "fire",
|
||||
class: "Fire Knight",
|
||||
imageUrl:
|
||||
"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20male%20knight%20with%20white%20and%20blue%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=6&orientation=squarish",
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
name: "ae-GISELLE",
|
||||
stars: 5,
|
||||
element: "earth",
|
||||
class: "Earth Mage",
|
||||
imageUrl:
|
||||
"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20female%20mage%20with%20light%20blonde%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=7&orientation=squarish",
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
name: "ae-KARINA",
|
||||
stars: 5,
|
||||
element: "water",
|
||||
class: "Ice Knight",
|
||||
imageUrl:
|
||||
"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20female%20knight%20with%20purple%20hair%20and%20blue%20eyes%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=8&orientation=squarish",
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
name: "ae-NINGNING",
|
||||
stars: 5,
|
||||
element: "fire",
|
||||
class: "Fire Soul Weaver",
|
||||
imageUrl:
|
||||
"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20female%20soul%20weaver%20with%20light%20pink%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=9&orientation=squarish",
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
name: "ae-WINTER",
|
||||
stars: 5,
|
||||
element: "fire",
|
||||
class: "Fire Thief",
|
||||
imageUrl:
|
||||
"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20female%20thief%20with%20pink%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=10&orientation=squarish",
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
name: "Afternoon Soak Flan",
|
||||
stars: 5,
|
||||
element: "fire",
|
||||
class: "Fire Ranger",
|
||||
imageUrl:
|
||||
"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20female%20ranger%20with%20black%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=11&orientation=squarish",
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
name: "Ainos",
|
||||
stars: 3,
|
||||
element: "dark",
|
||||
class: "Dark Soul Weaver",
|
||||
imageUrl:
|
||||
"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20female%20soul%20weaver%20with%20dark%20purple%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=12&orientation=squarish",
|
||||
},
|
||||
];
|
||||
|
||||
const renderStars = (count: number) => {
|
||||
return Array(count)
|
||||
.fill(0)
|
||||
.map((_, index) => (
|
||||
<i key={index} className="text-yellow-400 text-lg">
|
||||
★
|
||||
</i>
|
||||
));
|
||||
};
|
||||
|
||||
const getElementIcon = (element: string) => {
|
||||
switch (element) {
|
||||
case "fire":
|
||||
return (
|
||||
<div className="min-h-screen bg-[#1A1412] text-white font-sans">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||
<h1 className="text-3xl font-bold text-[#E6B17E] mb-6">角色列表</h1>
|
||||
<div className="bg-[#2A211E] rounded-lg p-6 border border-[#C17F59]/30">
|
||||
<p className="text-[#C17F59]">角色列表页面内容将在这里显示</p>
|
||||
<div className="w-6 h-6 rounded-full bg-red-500 flex items-center justify-center">
|
||||
<i className="fas fa-fire text-white text-xs"></i>
|
||||
</div>
|
||||
);
|
||||
case "water":
|
||||
return (
|
||||
<div className="w-6 h-6 rounded-full bg-blue-500 flex items-center justify-center">
|
||||
<i className="fas fa-tint text-white text-xs"></i>
|
||||
</div>
|
||||
);
|
||||
case "earth":
|
||||
return (
|
||||
<div className="w-6 h-6 rounded-full bg-green-500 flex items-center justify-center">
|
||||
<i className="fas fa-leaf text-white text-xs"></i>
|
||||
</div>
|
||||
);
|
||||
case "light":
|
||||
return (
|
||||
<div className="w-6 h-6 rounded-full bg-yellow-500 flex items-center justify-center">
|
||||
<i className="fas fa-sun text-white text-xs"></i>
|
||||
</div>
|
||||
);
|
||||
case "dark":
|
||||
return (
|
||||
<div className="w-6 h-6 rounded-full bg-purple-700 flex items-center justify-center">
|
||||
<i className="fas fa-moon text-white text-xs"></i>
|
||||
</div>
|
||||
);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const getClassIcon = (className: string) => {
|
||||
if (className.includes("Knight")) {
|
||||
return <i className="fas fa-shield-alt"></i>;
|
||||
} else if (className.includes("Warrior")) {
|
||||
return <i className="fas fa-hammer"></i>;
|
||||
} else if (className.includes("Thief")) {
|
||||
return <i className="fas fa-mask"></i>;
|
||||
} else if (className.includes("Ranger")) {
|
||||
return <i className="fas fa-bullseye"></i>;
|
||||
} else if (className.includes("Mage")) {
|
||||
return <i className="fas fa-hat-wizard"></i>;
|
||||
} else if (className.includes("Soul Weaver")) {
|
||||
return <i className="fas fa-hand-holding-medical"></i>;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const getZodiacIcon = (index: number) => {
|
||||
const zodiacs = [
|
||||
<i className="fas fa-gem" key="gemini"></i>,
|
||||
<i className="fas fa-bull" key="taurus"></i>,
|
||||
<i className="fas fa-balance-scale" key="libra"></i>,
|
||||
<i className="fas fa-water" key="cancer"></i>,
|
||||
<i className="fas fa-arrow-alt-circle-right" key="sagittarius"></i>,
|
||||
<i className="fas fa-fish" key="pisces"></i>,
|
||||
<i className="fas fa-sun" key="leo"></i>,
|
||||
<i className="fas fa-water" key="scorpio"></i>,
|
||||
<i className="fas fa-bolt" key="sagittarius"></i>,
|
||||
<i className="fas fa-mountain" key="capricorn"></i>,
|
||||
<i className="fas fa-tint" key="aquarius"></i>,
|
||||
<i className="fas fa-fish" key="pisces"></i>,
|
||||
];
|
||||
return zodiacs[index % zodiacs.length];
|
||||
};
|
||||
|
||||
const filteredHeroes = heroes.filter((hero) => {
|
||||
// Filter by search term
|
||||
if (
|
||||
searchTerm &&
|
||||
!hero.name.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Filter by stars
|
||||
if (selectedStars !== "All Stars") {
|
||||
const starCount = parseInt(selectedStars.split(" ")[0]);
|
||||
if (hero.stars !== starCount) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// Filter by element
|
||||
if (
|
||||
selectedElement !== "All" &&
|
||||
hero.element !== selectedElement.toLowerCase()
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
});
|
||||
|
||||
return (
|
||||
<div
|
||||
className="min-h-screen bg-gray-900 text-white p-4 md:p-8 w-full"
|
||||
style={{ maxWidth: "1440px", margin: "0 auto", minHeight: "1024px" }}
|
||||
>
|
||||
<h1 className="text-4xl font-bold text-center my-8">
|
||||
All Epic Seven Heroes
|
||||
</h1>
|
||||
|
||||
<div className="bg-gray-800 p-4 rounded-lg mb-8">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Hero Name"
|
||||
className="bg-gray-700 border-none px-4 py-2 rounded-md text-sm w-full"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
|
||||
<div className="flex">
|
||||
{["All Stars", "3 Stars", "4 Stars", "5 Stars"].map((stars) => (
|
||||
<button
|
||||
key={stars}
|
||||
className={`px-4 py-2 rounded-md cursor-pointer whitespace-nowrap !rounded-button ${
|
||||
selectedStars === stars
|
||||
? "bg-amber-700"
|
||||
: "bg-gray-700 hover:bg-gray-600"
|
||||
}`}
|
||||
onClick={() => setSelectedStars(stars)}
|
||||
>
|
||||
{stars}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-4">
|
||||
<div className="flex flex-wrap gap-1">
|
||||
<button
|
||||
className={`px-4 py-2 rounded-md cursor-pointer whitespace-nowrap !rounded-button ${
|
||||
selectedElement === "All"
|
||||
? "bg-amber-700"
|
||||
: "bg-gray-700 hover:bg-gray-600"
|
||||
}`}
|
||||
onClick={() => setSelectedElement("All")}
|
||||
>
|
||||
All
|
||||
</button>
|
||||
|
||||
<button
|
||||
className={`px-4 py-2 rounded-md flex items-center gap-2 cursor-pointer whitespace-nowrap !rounded-button ${
|
||||
selectedElement === "fire"
|
||||
? "bg-amber-700"
|
||||
: "bg-gray-700 hover:bg-gray-600"
|
||||
}`}
|
||||
onClick={() => setSelectedElement("fire")}
|
||||
>
|
||||
<div className="w-5 h-5 rounded-full bg-red-500 flex items-center justify-center">
|
||||
<i className="fas fa-fire text-white text-xs"></i>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
className={`px-4 py-2 rounded-md flex items-center gap-2 cursor-pointer whitespace-nowrap !rounded-button ${
|
||||
selectedElement === "water"
|
||||
? "bg-amber-700"
|
||||
: "bg-gray-700 hover:bg-gray-600"
|
||||
}`}
|
||||
onClick={() => setSelectedElement("water")}
|
||||
>
|
||||
<div className="w-5 h-5 rounded-full bg-blue-500 flex items-center justify-center">
|
||||
<i className="fas fa-tint text-white text-xs"></i>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
className={`px-4 py-2 rounded-md flex items-center gap-2 cursor-pointer whitespace-nowrap !rounded-button ${
|
||||
selectedElement === "earth"
|
||||
? "bg-amber-700"
|
||||
: "bg-gray-700 hover:bg-gray-600"
|
||||
}`}
|
||||
onClick={() => setSelectedElement("earth")}
|
||||
>
|
||||
<div className="w-5 h-5 rounded-full bg-green-500 flex items-center justify-center">
|
||||
<i className="fas fa-leaf text-white text-xs"></i>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
className={`px-4 py-2 rounded-md flex items-center gap-2 cursor-pointer whitespace-nowrap !rounded-button ${
|
||||
selectedElement === "light"
|
||||
? "bg-amber-700"
|
||||
: "bg-gray-700 hover:bg-gray-600"
|
||||
}`}
|
||||
onClick={() => setSelectedElement("light")}
|
||||
>
|
||||
<div className="w-5 h-5 rounded-full bg-yellow-500 flex items-center justify-center">
|
||||
<i className="fas fa-sun text-white text-xs"></i>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
className={`px-4 py-2 rounded-md flex items-center gap-2 cursor-pointer whitespace-nowrap !rounded-button ${
|
||||
selectedElement === "dark"
|
||||
? "bg-amber-700"
|
||||
: "bg-gray-700 hover:bg-gray-600"
|
||||
}`}
|
||||
onClick={() => setSelectedElement("dark")}
|
||||
>
|
||||
<div className="w-5 h-5 rounded-full bg-purple-700 flex items-center justify-center">
|
||||
<i className="fas fa-moon text-white text-xs"></i>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-4">
|
||||
<div className="flex flex-wrap gap-1">
|
||||
<button
|
||||
className={`px-4 py-2 rounded-md cursor-pointer whitespace-nowrap !rounded-button ${
|
||||
selectedClass === "All"
|
||||
? "bg-amber-700"
|
||||
: "bg-gray-700 hover:bg-gray-600"
|
||||
}`}
|
||||
onClick={() => setSelectedClass("All")}
|
||||
>
|
||||
All
|
||||
</button>
|
||||
|
||||
{[
|
||||
"Knight",
|
||||
"Warrior",
|
||||
"Thief",
|
||||
"Ranger",
|
||||
"Mage",
|
||||
"Soul Weaver",
|
||||
].map((classType) => (
|
||||
<button
|
||||
key={classType}
|
||||
className={`px-4 py-2 rounded-md flex items-center gap-2 cursor-pointer whitespace-nowrap !rounded-button ${
|
||||
selectedClass === classType
|
||||
? "bg-amber-700"
|
||||
: "bg-gray-700 hover:bg-gray-600"
|
||||
}`}
|
||||
onClick={() => setSelectedClass(classType)}
|
||||
>
|
||||
{getClassIcon(classType)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-4">
|
||||
<div className="flex flex-wrap gap-1">
|
||||
<button
|
||||
className={`px-4 py-2 rounded-md cursor-pointer whitespace-nowrap !rounded-button ${
|
||||
selectedZodiac === "All"
|
||||
? "bg-amber-700"
|
||||
: "bg-gray-700 hover:bg-gray-600"
|
||||
}`}
|
||||
onClick={() => setSelectedZodiac("All")}
|
||||
>
|
||||
All
|
||||
</button>
|
||||
|
||||
{[...Array(12)].map((_, index) => (
|
||||
<button
|
||||
key={index}
|
||||
className={`px-4 py-2 rounded-md flex items-center gap-2 cursor-pointer whitespace-nowrap !rounded-button ${
|
||||
selectedZodiac === `zodiac-${index}`
|
||||
? "bg-amber-700"
|
||||
: "bg-gray-700 hover:bg-gray-600"
|
||||
}`}
|
||||
onClick={() => setSelectedZodiac(`zodiac-${index}`)}
|
||||
>
|
||||
{getZodiacIcon(index)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-2">
|
||||
<div className="bg-gray-700 px-4 py-2 rounded-md">
|
||||
<p className="text-gray-400">Select Buffs</p>
|
||||
</div>
|
||||
<div className="bg-gray-700 px-4 py-2 rounded-md">
|
||||
<p className="text-gray-400">Select Debuffs</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{filteredHeroes.map((hero) => (
|
||||
<div
|
||||
key={hero.id}
|
||||
className="bg-gray-800 rounded-lg p-4 flex items-center gap-4 cursor-pointer hover:bg-gray-700 transition-colors"
|
||||
>
|
||||
<div className="relative">
|
||||
<img
|
||||
src={hero.imageUrl}
|
||||
alt={hero.name}
|
||||
className="w-16 h-16 rounded-full object-cover object-top"
|
||||
/>
|
||||
<div className="absolute -bottom-1 -right-1">
|
||||
{getElementIcon(hero.element)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1">
|
||||
<h3 className="text-xl font-semibold text-amber-400">
|
||||
{hero.name}
|
||||
</h3>
|
||||
<div className="flex">{renderStars(hero.stars)}</div>
|
||||
<p className="text-gray-400">{hero.class}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user