Merge pull request #85 from Pho86/travellers

add travellers to teambuilder, and fix raiden, childe pages

src/app/api/teamrec/google/route.ts

@@ -26,7 +26,7 @@ export async function POST(req: Request, res: NextResponse) {
         });
 
         const systemPrompt = `${prompt}, YOU ARE ON [PART ${body.part}]  ${body.part > 1 ? `Past Info Provided: ${currentInfo}` : ""} PRINT ONLY [PART ${body.part}]`;
-        console.log(`YOU ARE ON [PART ${body.part}] `)
+        console.log(`YOU ARE ON [PART ${body.part}], ${availableCharacters} `)
         if(body.part == 1) {
             const result = await streamText({
                 model: google('models/gemini-1.5-flash-latest'),

src/app/api/teamrec/prompt.ts

@@ -13,9 +13,9 @@ Healer/Shielder (Slot 4): Reserve slot 4 for a healer or shielder to sustain the
 
 Your Goal: Create a balanced team capable of handling various challenges in the game.
 
-Your Response: Your response should be an array containing ONLY the filename of the selected characters. Ensure it is only the CHARACTER_FILENAME, which contain crucial information for character identification. Sometimes there will be another list provided of characters that is not available to be chosen and that character cannot be chosen again for this team. 
+Your Response: Your response should be an array containing ONLY the filename of the selected characters. Ensure it is only the CHARACTER_FILENAME, which contain crucial information for character identification. Sometimes there will be another list provided of characters that is not available to be chosen and that character cannot be chosen again for this team. You can only choose one traveller. Only if it is traveller return as Traveller (Element) instead of filename.
 
-If there is another list of characters provided that cannot be chosen, please indicate and select alternative characters accordingly.
+If there is another list of characters provided that cannot be chosen, please indicate and select alternative characters accordingly. 
 
 [PART 1 END]
 
@@ -42,7 +42,7 @@ The format should be in Markdown.
 ---------
 
 [PART 1 START]
-Character_filename 1, Character_filename 2, Character_filename 3, Character_filename 4 [FILENAME IS PRIORITY DO NOT SPELLCHECK]
+Character_filename 1, Character_filename 2, Character_filename 3, Character_filename 4 [FILENAME IS PRIORITY DO NOT SPELLCHECK, IF PLAYERBOY OR PLAYERGIRL (TRAVELLER) RETURN AS Traveller (ELEMENT) INSTEAD]
 [PART 1 END]
 
 [PART 2 START Create a Team Name] # Combine character names, use a standardized name, or employ a creative word and build off of that.
@@ -120,13 +120,11 @@ Provide a short description of builds, stats, artifacts, weapons, and recommende
 [PART 4 END]
 
 [Additional Notes:
-Ensure the first character is always the Main DPS.
-The second and third characters are Sub DPS/Support, choose only the best one.
-Try to make the fourth character a Healer/Shielder, if they do not provide those utilities, instea make them a support or Sub DPS.
+Try to ensure the characters are in the correct slots, with 1 = DPS 2/3 = Sub DPS or support, 4 = Healer or Shielder. 
 Describe artifacts, weapons, and substats for each character.
 Conclude with team rotation and tips for effective play.
 Do not display any information with square brackets [].
-
+If it is a traveller, return as Traveller (Element)
 `;
 
 export default prompt;

src/app/characters/[name]/page.tsx

@@ -21,18 +21,15 @@ export default async function CharacterPage({ params }: { params: { name: string
   let CharacterData;
 
   const response = await fetch(`https://genshin-db-api.vercel.app/api/v5/stats?folder=characters&query=${params.name}&dumpResult=true`);
-  if (!response.ok) {
-    throw new Error("Failed to fetch character data");
-  }
+
   const res = await response.json();
   CharacterData = res.result;
   const names = addFileName([CharacterData]);
   const characterName = names[0].fileName;
-
   const [constellationsResponse, talentsResponse, nameCardResponse, voiceResponse, outfitResponse] = await Promise.all([
     fetch(`https://genshin-db-api.vercel.app/api/v5/constellations?query=${params.name}&matchCategories=true&dumpResults=true&verboseCategories=true`),
     fetch(`https://genshin-db-api.vercel.app/api/v5/talents?query=${params.name}&matchCategories=true&dumpResults=true&verboseCategories=true`),
-    fetch(`https://genshin-db-api.vercel.app/api/v5/namecards?query=${characterName}&matchCategories=true`),
+    fetch(`https://genshin-db-api.vercel.app/api/v5/namecards?query=${CharacterData.nameCardName ? CharacterData.nameCardName : characterName}&matchCategories=true`),
     fetch(`https://genshin-db-api.vercel.app/api/v5/voiceovers?query=${params.name}&matchCategories=true`),
     fetch(`https://genshin-db-api.vercel.app/api/v5/outfits?query=${params.name}&matchCategories=true&dumpResults=true&verboseCategories=true`)
   ]);

src/app/components/CharacterCard/team.tsx

@@ -2,18 +2,19 @@
 import { useState, useEffect } from "react";
 import Image from "next/image";
 import { Character } from "@/app/types/character";
-const isCharacterOwned = (arr:any, targetName:string) => {
-    return arr.some((character:Character) => character.name === targetName);
+const isCharacterOwned = (arr: any, targetName: string) => {
+    return arr.some((character: Character) => character.name === targetName);
 };
-export default function TeamCharacterCard({ character, selectCharacter, removeCharacter, activeProp, selectOwned, ownedOption, ownedCharacters }: {
+export default function TeamCharacterCard({ character, selectCharacter, removeCharacter, activeProp, selectOwned, ownedOption, ownedCharacters, traveller = false }: {
     character: Character,
     index: number,
     selectCharacter: (char: Character) => void,
     removeCharacter: (char: Character) => void,
     activeProp: () => boolean,
     selectOwned: (char: Character) => void,
     ownedOption: boolean;
-    ownedCharacters: Character[]
+    ownedCharacters: Character[],
+    traveller?: boolean
 }) {
     const [active, setActive] = useState<boolean>(activeProp());
     const [owned, setOwned] = useState<boolean>(false);
@@ -33,6 +34,7 @@ export default function TeamCharacterCard({ character, selectCharacter, removeCh
             setActive(!active);
         }
     };
+
     useEffect(() => {
         if (ownedOption) {
             const isOwned = isCharacterOwned(ownedCharacters, character.name);
@@ -54,14 +56,24 @@ export default function TeamCharacterCard({ character, selectCharacter, removeCh
                         <Image src={`/regions/${character.region}.webp`} width={25} height={25} alt={`${character.region} icon`} />
                     </div>
                 )}
-                <Image
-                    src={`https://enka.network/ui/UI_AvatarIcon_${character.fileName}.png`}
-                    width={200}
-                    height={200}
-                    alt={`${character.name}`}
-                    title={`${character.name}`}
-                    className={`rounded-t-xl rounded-br-4xl max-h-40 object-cover bg-gradient-to-br ${character.rarity == 4 ? "from-gradient-SR-start to-gradient-SR-end" : "from-gradient-SSR-start to-gradient-SSR-end"} `}
-                />
+                {traveller ?
+                    <Image
+                        src={`/characters/travellers.webp`}
+                        width={1000}
+                        height={1000}
+                        alt={`${character.name}`}
+                        title={`${character.name}`}
+                        className={`rounded-t-xl rounded-br-4xl max-h-40 object-cover bg-gradient-to-br ${character.rarity == 4 ? "from-gradient-SR-start to-gradient-SR-end" : "from-gradient-SSR-start to-gradient-SSR-end"} `}
+                    /> :
+                    <Image
+                        src={`https://enka.network/ui/UI_AvatarIcon_${character.fileName}.png`}
+                        width={200}
+                        height={200}
+                        alt={`${character.name}`}
+                        title={`${character.name}`}
+                        className={`rounded-t-xl rounded-br-4xl max-h-40 object-cover bg-gradient-to-br ${character.rarity == 4 ? "from-gradient-SR-start to-gradient-SR-end" : "from-gradient-SSR-start to-gradient-SSR-end"} `}
+                    />
+                }
                 <p className="text-center w-full text-[.65rem] whitespace-nowrap p-1 text-black relative font-bold rounded-b-xl">{character.name}</p>
             </div>
         </div>

src/app/components/CharacterInfo/index.tsx

@@ -1,4 +1,3 @@
-"use client"
 import { Character } from "@/app/types/character";
 import StatsTable from "@/app/components/StatsTable";
 import InfoCharacterBanner from "@/app/components/CharacterInfoBanner";

src/app/components/CharacterInfoBanner/index.tsx

@@ -2,11 +2,12 @@
 import Image from "next/image"
 import { motion, useScroll, useTransform } from "framer-motion"
 import { useRef, useState, } from "react"
+import { Character } from "@/app/types/character"
 
 export default function InfoCharacterBanner({
     characterData, params
 }: {
-    characterData: any,
+    characterData: Character,
     params: {
         name: string
     },

src/app/components/Gallery/index.tsx

@@ -1,3 +1,4 @@
+"use client"
 import Image from "next/image"
 import { useState } from "react"
 import Link from "next/link";
@@ -10,7 +11,6 @@ export default function Gallery({
     characterData: Character
 }) {
     const [active, setActive] = useState<number>(0);
-    // console.log(characterData)
     return (
         <>
             <h2 className="font-bold text-3xl">Gallery</h2>

src/app/components/StatsTable/index.tsx

@@ -1,3 +1,4 @@
+"use client"
 import { Character } from "@/app/types/character";
 import Image from "next/image";
 import { useLayoutEffect, useState } from "react";

src/app/components/TeamBuilder/index.tsx

@@ -76,8 +76,8 @@ export default function TeamBuilder({
     };
 
     const removeCharacter = (character: Character) => {
-        const updatedCharacters = activeCharacters.map((item, i) => {
-            if (item.name === character.name) {
+        const updatedCharacters = activeCharacters.map(item => {
+            if (typeof item.name === 'string' && item.name.startsWith("Traveller") || item.name === character.name) {
                 return {};
             }
             return item;
@@ -137,10 +137,10 @@ export default function TeamBuilder({
     }
 
     const handleOwnedClick = (character: Character) => {
-        const isOwned = ownedCharacters.some(c => c.id === character.id);
+        const isOwned = ownedCharacters.some(c => c.name === character.name);
         let updatedOwnedCharacters;
         if (isOwned) {
-            updatedOwnedCharacters = ownedCharacters.filter(c => c.id !== character.id);
+            updatedOwnedCharacters = ownedCharacters.filter(c => c.name !== character.name);
         } else {
             updatedOwnedCharacters = [...ownedCharacters, character];
         }
@@ -209,6 +209,7 @@ export default function TeamBuilder({
 
                 if (part == 1) {
                     const namesArray = recommendedData.trim().split(", ");
+                    console.log(namesArray)
                     let startIndex = 0;
                     let endIndex = 0;
                     if (team === 1) {
@@ -221,8 +222,14 @@ export default function TeamBuilder({
 
                     for (let i = startIndex; i < endIndex; i++) {
                         const nameToSearch = namesArray[i - startIndex];
-
-                        const character = CharacterData.find(character => character.fileName.toLowerCase().includes(nameToSearch.toLowerCase()));
+                        const character = CharacterData.find(character => {
+                            if(nameToSearch.toLowerCase().startsWith("traveller")) {
+                                return character.name.toLowerCase().includes(nameToSearch.toLowerCase())
+                            } else {
+                                return character.fileName.toLowerCase().includes(nameToSearch.toLowerCase())
+                            }
+                        }
+                        );
                         if (character) {
                             selectCharacter(character, i);
                         } else {
@@ -324,8 +331,6 @@ export default function TeamBuilder({
     const dragCharacter = useRef<number>(0)
     const draggedOverCharacter = useRef<number>(0)
 
-
-
     return (
         <>
             <div className="flex gap-3 justify-around flex-col md:flex-row">
@@ -353,18 +358,23 @@ export default function TeamBuilder({
                         const weaponConditions = [true, "Bow", "Sword", "Polearm", "Claymore", "Catalyst"];
                         const validElement = activeElement === 0 || elementConditions[activeElement] === character.elementText;
                         const validWeapon = activeWeapon === 0 || weaponConditions[activeWeapon] === character.weaponText;
-                        if (character.name == "Aether" || character.name == "Lumine") return //temp
+                        if (character.name == "Aether" || character.name == "Lumine") return null
                         if (validWeapon && validElement) return <TeamCharacterCard
                             key={index}
                             index={index}
                             character={character}
                             selectCharacter={selectCharacter}
                             removeCharacter={removeCharacter}
+                            selectOwned={handleOwnedClick}
+                            traveller={character.name.startsWith("Traveller")}
                             activeProp={() => {
-                                const count = activeCharacters.filter(item => item.name === character.name).length;
-                                return count === 1;
+                                let travellerActive = 0
+                                if (character.name.startsWith("Traveller")) {
+                                    travellerActive = activeCharacters.filter(item => typeof item.name === 'string' && item.name.startsWith("Traveller")).length;
+                                }
+                                const isCurrentActive = activeCharacters.some(item => item.name === character.name);
+                                return travellerActive > 0 || isCurrentActive;
                             }}
-                            selectOwned={handleOwnedClick}
                             ownedOption={selectedOwned}
                             ownedCharacters={ownedCharacters}
                         />
@@ -407,9 +417,10 @@ export default function TeamBuilder({
                         <div className="grid grid-cols-4 gap-2 md:gap-4 h-full w-full">
                             {mounted ? activeCharacters.map((character: any, index: number) => {
                                 if (!secondTeam) {
-                                    if (index > 3) return
+                                    if (index > 3) return null
                                 }
-                                return <div key={index} className={`rounded-xl cursor-move overflow-hidden transition-shadow ${!character.active && "border-2"} ${selectedSlot == index && "scale-105 shadow-light"}`}
+
+                                return <div key={index} className={`rounded-xl cursor-move overflow-hidden transition-shadow ${!character.active && "border-2"} ${selectedSlot == index && "scale-[103%] shadow-light"}`}
                                     onClick={() => setSelectedSlot(index)}
                                     draggable
                                     onDragStart={() => (dragCharacter.current = index)}
@@ -418,7 +429,14 @@ export default function TeamBuilder({
                                     onDragOver={(e) => e.preventDefault()}
                                 >
                                     {character.active ? <div className={` hover:scale-100 relative`} >
-                                        <Image src={`https://enka.network/ui/UI_AvatarIcon_${character.fileName}.png`} width={1000} height={1000} alt="" draggable="false" className={`w-full object-cover bg-gradient-to-br ${character.rarity == 4 ? " from-gradient-SR-start  to-gradient-SR-end" : "from-gradient-SSR-start  to-gradient-SSR-end"}`} />
+                                        {character.name.startsWith("Traveller") ?
+                                            <Image src={`/characters/travellers.webp`} width={1000} height={1000} alt="" draggable="false" className={`w-full object-cover bg-gradient-to-br ${character.rarity == 4 ? " from-gradient-SR-start  to-gradient-SR-end" : "from-gradient-SSR-start  to-gradient-SSR-end"} relative`} />
+                                            :
+                                            <Image src={`https://enka.network/ui/UI_AvatarIcon_${character.fileName}.png`} width={1000} height={1000} alt="" draggable="false" className={`w-full object-cover bg-gradient-to-br ${character.rarity == 4 ? " from-gradient-SR-start  to-gradient-SR-end" : "from-gradient-SSR-start  to-gradient-SSR-end"} relative`} />
+                                        }
+                                        <div className="absolute top-1 left-1 text-black">
+                                            <Image src={`/elements/${character.elementText}.webp`} width={25} height={25} alt={`${character.element} icon`} />
+                                        </div>
                                     </div>
                                         :
                                         <div className={`w-full h-full flex items-center justify-center font-bold text-7xl relative`}>

src/app/teambuilder/page.tsx

@@ -2,7 +2,7 @@ import { Suspense } from "react";
 import TeamBuilder from "../components/TeamBuilder";
 import { addFileName } from "../utils/helper";
 import Loader from "../components/Loader";
-
+import { Character } from "../types/character";
 export default async function TeamBuilderPage() {
     const response = await fetch('https://genshin-db-api.vercel.app/api/v5/characters?query=names&matchCategories=true&verboseCategories=true', {
         cache: 'no-cache'
@@ -11,17 +11,29 @@ export default async function TeamBuilderPage() {
         throw new Error("failed to fetch")
     }
     const res = await response.json()
-    const characterData = res.sort();
+    let characterData = res.sort();
     characterData.forEach((name: any) => {
         addFileName([name]);
     });
 
+    const addCharacterToCharacterData = (characters: Character[], character: Character, element: string) => {
+        const newCharacter = { ...character, name: `Traveller (${element})`, elementText: element };
+        return [newCharacter, ...characters];
+    };
+    let modifiedCharacterData = characterData;
+    modifiedCharacterData = addCharacterToCharacterData(modifiedCharacterData, characterData[0], "Hydro");
+    modifiedCharacterData = addCharacterToCharacterData(modifiedCharacterData, characterData[0], "Dendro");
+    modifiedCharacterData = addCharacterToCharacterData(modifiedCharacterData, characterData[0], "Electro");
+    modifiedCharacterData = addCharacterToCharacterData(modifiedCharacterData, characterData[0], "Geo");
+    modifiedCharacterData = addCharacterToCharacterData(modifiedCharacterData, characterData[0], "Anemo");
+
+    let sortedCharacterData = modifiedCharacterData
     return (
         <>
             <h1 className="text-3xl text-primary">Team Builder (Beta)</h1>
 
             <Suspense fallback={<Loader />}>
-                <TeamBuilder CharacterData={characterData} />
+                <TeamBuilder CharacterData={sortedCharacterData} />
             </Suspense>
         </>
     );

src/app/types/character.ts

@@ -61,6 +61,7 @@ export type Character = {
         "hoyolab-avatar"?: string;
     };
     fileName: string;
+    nameCardName: string;
     talents: any;
     constellations: any;
     voices: any;