diff --git a/src/pages/Characters.tsx b/src/pages/Characters.tsx index 4005262..0c9659e 100644 --- a/src/pages/Characters.tsx +++ b/src/pages/Characters.tsx @@ -1,16 +1,455 @@ -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 = () => { - return ( -
-
-

角色列表

-
-

角色列表页面内容将在这里显示

-
-
-
- ); + const [selectedStars, setSelectedStars] = useState("All Stars"); + const [selectedElement, setSelectedElement] = useState("All"); + const [selectedClass, setSelectedClass] = useState("All"); + const [selectedZodiac, setSelectedZodiac] = useState("All"); + const [searchTerm, setSearchTerm] = useState(""); + + 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) => ( + + ★ + + )); + }; + + const getElementIcon = (element: string) => { + switch (element) { + case "fire": + return ( +
+ +
+ ); + case "water": + return ( +
+ +
+ ); + case "earth": + return ( +
+ +
+ ); + case "light": + return ( +
+ +
+ ); + case "dark": + return ( +
+ +
+ ); + default: + return null; + } + }; + + const getClassIcon = (className: string) => { + if (className.includes("Knight")) { + return ; + } else if (className.includes("Warrior")) { + return ; + } else if (className.includes("Thief")) { + return ; + } else if (className.includes("Ranger")) { + return ; + } else if (className.includes("Mage")) { + return ; + } else if (className.includes("Soul Weaver")) { + return ; + } + return null; + }; + + const getZodiacIcon = (index: number) => { + const zodiacs = [ + , + , + , + , + , + , + , + , + , + , + , + , + ]; + 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 ( +
+

+ All Epic Seven Heroes +

+ +
+
+ setSearchTerm(e.target.value)} + /> + +
+ {["All Stars", "3 Stars", "4 Stars", "5 Stars"].map((stars) => ( + + ))} +
+
+ +
+
+ + + + + + + + + + + +
+
+ +
+
+ + + {[ + "Knight", + "Warrior", + "Thief", + "Ranger", + "Mage", + "Soul Weaver", + ].map((classType) => ( + + ))} +
+
+ +
+
+ + + {[...Array(12)].map((_, index) => ( + + ))} +
+
+ +
+
+

Select Buffs

+
+
+

Select Debuffs

+
+
+
+ +
+ {filteredHeroes.map((hero) => ( +
+
+ {hero.name} +
+ {getElementIcon(hero.element)} +
+
+ +
+

+ {hero.name} +

+
{renderStars(hero.stars)}
+

{hero.class}

+
+
+ ))} +
+
+ ); }; -export default Characters; \ No newline at end of file +export default Characters;