Add recipies and specialty links

Tibowl · Tibowl · commit 2af8686e6e95 · 2022-02-02T20:25:40.000+01:00
diff --git a/components/Icon.tsx b/components/Icon.tsx
@@ -24,31 +24,37 @@ export function IconName({ name, type, urltype, loading = "lazy" }: { name: stri
   </FormattedLink>
 }
 
-export function SmallIcon({ thing, location }: { thing: SmallThing, location: string }) {
+export function SmallIcon({ thing, location, sizeSet = "m", children }: { thing: SmallThing, location: string, sizeSet?: "m" | "s", children?: any }) {
   const color = getStarColor((hasStars(thing) ? thing.stars : 0) ?? 0)
+  const sizes = {
+    m: "w-24 sm:w-28 lg:w-32",
+    s: "w-10 sm:w-12 lg:w-14"
+  }
 
-  return <FormattedLink key={thing.name} location={location} href={`/${thing.urlpath}/${urlify(thing.name, false)}`} className="bg-slate-300 dark:bg-slate-800 w-24 sm:w-28 lg:w-32 m-1 relative rounded-xl transition-all duration-100 hover:outline outline-slate-800 dark:outline-slate-300 font-bold text-sm" >
-    <div className={`${color} rounded-t-xl h-24 sm:h-28 lg:h-32`}>
-      <Icon icon={thing} className="rounded-t-xl m-0 p-0" />
-      <span className="absolute block p-0.5 top-0 w-full">
+  return <><FormattedLink key={thing.name} location={location} href={`/${thing.urlpath}/${urlify(thing.name, false)}`} className={`bg-slate-300 dark:bg-slate-800 ${sizes[sizeSet]} m-1 relative rounded-xl transition-all duration-100 hover:outline outline-slate-800 dark:outline-slate-300 font-bold text-sm`} >
+    <div className={`${color} rounded-xl ${sizes[sizeSet]}`}>
+      <Icon icon={thing} className={`${sizeSet == "s" ? "rounded-xl" : "rounded-t-xl"} m-0 p-0`} />
+      {hasElement(thing) && thing.element && sizeSet != "s" && <span className="absolute block p-0.5 top-0 w-full">
         <div className="flex flex-col">
-          {hasElement(thing) && thing.element && thing.element.map(e => <div key={e} className="w-6 md:w-8">
+          {thing.element.map(e => <div key={e} className="w-6 md:w-8">
             <Image src={elements[e]} alt={`${e} Element`} loading="eager" />
           </div>)}
         </div>
-      </span>
-      <span className="absolute block p-0.5 top-0 w-full">
+      </span>}
+      {hasWeapon(thing) && thing.weapon && sizeSet != "s" && <span className="absolute block p-0.5 top-0 w-full">
         <div className="flex flex-col float-right">
-          {hasWeapon(thing) && thing.weapon && <div className="w-6 md:w-8">
+          <div className="w-6 md:w-8">
             <Image src={weapons[thing.weapon]} alt={thing.weapon} loading="eager" />
-          </div>}
+          </div>
         </div>
-      </span>
+      </span>}
     </div>
-    <span className={`flex justify-center items-center m-0 p-0 px-1 ${thing.name.length > 27 ? "text-xs md:text-xs" : thing.name.length > 20 ? "text-sm md:text-sm" : ""} duration-200 md:text-base ${styles.iconHeight}`}>
+    {sizeSet != "s" && <span className={`flex justify-center items-center m-0 p-0 px-1 ${thing.name.length > 27 ? "text-xs md:text-xs" : thing.name.length > 20 ? "text-sm md:text-sm" : ""} duration-200 md:text-base ${styles.iconHeight}`}>
       {thing.name}
-    </span>
+    </span>}
   </FormattedLink>
+  {children && <FormattedLink location={location} href={`/${thing.urlpath}/${urlify(thing.name, false)}`}>{children}</FormattedLink>}
+  </>
 }
 
 function hasElement(char: SmallThing): char is SmallChar {
diff --git a/components/Specialty.tsx b/components/Specialty.tsx
@@ -0,0 +1,18 @@
+import { SmallChar, SmallMaterial } from "../utils/types"
+import { SmallIcon } from "./Icon"
+
+export interface SpecialtyItem {
+    special: SmallMaterial,
+    char: SmallChar,
+    recipe: SmallMaterial
+}
+
+export function Specialty({ specialty, location }: { specialty: SpecialtyItem, location: string }) {
+    return <div className="flex flex-wrap justify-start text-center items-center mt-2 gap-1">
+        <SmallIcon thing={specialty.special} location={location} sizeSet="s">{specialty.special.name}</SmallIcon>
+        <div>be obtained by using </div>
+        <SmallIcon thing={specialty.char} location={location} sizeSet="s">{specialty.char.name}</SmallIcon>
+        <div> while cooking </div>
+        <SmallIcon thing={specialty.recipe} location={location} sizeSet="s">{specialty.recipe.name}</SmallIcon>
+    </div>
+}
diff --git a/pages/characters/[char].tsx b/pages/characters/[char].tsx
@@ -9,21 +9,23 @@ import Guides from "../../components/Guides"
 import Icon from "../../components/Icon"
 import Main from "../../components/Main"
 import { MaterialCost, MaterialImage } from "../../components/Material"
+import { Specialty, SpecialtyItem } from "../../components/Specialty"
 import { FullAscensionCosts } from "../../components/Tables"
 import YouTube from "../../components/YouTube"
-import { CharacterCurves, CostTemplates, getCharacterCurves, getCharacters, getCostTemplates } from "../../utils/data-cache"
+import { CharacterCurves, CostTemplates, getCharacterCurves, getCharacters, getCostTemplates, getMaterials } from "../../utils/data-cache"
 import { Character, CharacterFull, Constellation, CostTemplate, CurveEnum, Meta, Passive, Skill, Skills, TalentTable, TalentValue } from "../../utils/types"
-import { elements, ElementType, getCharStatsAt, getCostsFromTemplate, getGuidesFor, getIconPath, getLinkToGuide, getStarColor, isFullCharacter, isValueTable, joinMulti, stat, urlify, weapons } from "../../utils/utils"
+import { createSmallChar, createSmallMaterial, elements, ElementType, getCharStatsAt, getCostsFromTemplate, getGuidesFor, getIconPath, getLinkToGuide, getStarColor, isFullCharacter, isValueTable, joinMulti, stat, urlify, weapons } from "../../utils/utils"
 import styles from "../style.module.css"
 
 interface Props {
   char: Character,
   characterCurves: CharacterCurves | null
   costTemplates: CostTemplates | null
+  specialty: SpecialtyItem | null
   guides?: string[][]
 }
 
-export default function CharacterWebpage({ char, location, characterCurves, costTemplates, guides }: Props & { location: string }) {
+export default function CharacterWebpage({ char, location, characterCurves, costTemplates, guides, specialty }: Props & { location: string }) {
   const charElems = char.skills?.map(skill => skill.ult?.type).filter(x => x) as ElementType[] ?? [char.meta.element]
   const multiskill = (char.skills?.length ?? 0) > 1
   const color = getStarColor(char.star ?? 0)
@@ -103,6 +105,10 @@ export default function CharacterWebpage({ char, location, characterCurves, cost
         {isFullCharacter(char) && characterCurves && <Stats char={char} curves={characterCurves} />}
         {char.ascensionCosts && costTemplates && <FullAscensionCosts template={char.ascensionCosts} costTemplates={costTemplates} />}
         {char.meta && <MetaSection meta={char.meta} />}
+        {specialty && <>
+          <h3 className="text-lg font-bold pt-1" id="specialty">Specialty:</h3>
+          <Specialty specialty={specialty} location={location} />
+        </>}
         {char.media.videos && <Videos videos={char.media.videos} />}
         {char.skills && costTemplates && <CharacterSkills skills={char.skills} costTemplates={costTemplates} />}
       </div>
@@ -472,9 +478,26 @@ export async function getStaticProps(context: GetStaticPropsContext): Promise<Ge
 
   const guides = (await getGuidesFor("character", char.name))?.map(({ guide, page }) => [page.name, getLinkToGuide(guide, page)])
 
+  let specialty: SpecialtyItem | null = null
+
+  const mats = await getMaterials()
+  const special = Object.values(mats ?? {}).find(m => m.specialty?.char == char.name)
+  if (special) {
+    const recipe = Object.values(mats ?? {}).find(m => m.name == special.specialty?.recipe)
+
+    if (recipe)
+      specialty = {
+        special: createSmallMaterial(special),
+        char: createSmallChar(char),
+        recipe: createSmallMaterial(recipe)
+      }
+  }
+
+
   return {
     props: {
       char,
+      specialty,
       characterCurves,
       costTemplates,
       guides
diff --git a/pages/materials/[material].tsx b/pages/materials/[material].tsx
@@ -6,25 +6,31 @@ import FormattedLink from "../../components/FormattedLink"
 import Guides from "../../components/Guides"
 import Icon, { SmallIcon } from "../../components/Icon"
 import Main from "../../components/Main"
-import { CostTemplates, getCharacters, getCostTemplates, getMaterials, getWeapons } from "../../utils/data-cache"
-import { Cost, CostTemplate, Material, SmallChar, SmallWeapon } from "../../utils/types"
-import { clean, createSmallChar, createSmallWeapon, getCostsFromTemplate, getGuidesFor, getIconPath, getLinkToGuide, getStarColor, isInCosts, joinMulti, urlify } from "../../utils/utils"
+import { MaterialCost } from "../../components/Material"
+import { Specialty, SpecialtyItem } from "../../components/Specialty"
+import { getCharacters, getCostTemplates, getMaterials, getWeapons } from "../../utils/data-cache"
+import { Material, SmallChar, SmallMaterial, SmallWeapon } from "../../utils/types"
+import { clean, createSmallChar, createSmallMaterial, createSmallWeapon, getGuidesFor, getIconPath, getLinkToGuide, getStarColor, isInCosts, joinMulti, urlify } from "../../utils/utils"
+import styles from "../style.module.css"
+
 
 interface Props {
   mat: Material,
   guides?: string[][],
+  specialty: SpecialtyItem | null,
   usedBy: {
     charTalents: SmallChar[]
     charAscension: SmallChar[]
     weaponAscension: SmallWeapon[]
+    food: SmallMaterial[]
   }
 }
 
-export default function MaterialWebpage({ mat, location, guides, usedBy }: Props & { location: string }) {
+export default function MaterialWebpage({ mat, location, guides, specialty, usedBy }: Props & { location: string }) {
   const color = getStarColor(mat.stars ?? 1)
   const usedByDesc = []
 
-  const { charTalents, charAscension, weaponAscension } = usedBy
+  const { charTalents, charAscension, weaponAscension, food } = usedBy
 
   const overlap = charTalents.filter(x => charAscension.some(y => x.name == y.name))
   const uniqueTalents = charTalents.filter(x => !charAscension.some(y => x.name == y.name))
@@ -101,6 +107,27 @@ export default function MaterialWebpage({ mat, location, guides, usedBy }: Props
           {mat.sources.map(s => <div key={s}>{s}</div>)}
         </>}
 
+        {mat.recipe && <>
+          <h3 className="text-lg font-bold pt-1" id="recipe">Recipe:</h3>
+          <table className={`table-auto ${styles.table} mb-2 sm:text-sm md:text-base text-xs`}>
+            <thead>
+              <tr className="divide-x divide-gray-200 dark:divide-gray-500">
+                <th>Items</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-200 dark:divide-gray-500">
+              {mat.recipe.map(({ name, count }) => <tr className="pr-1 divide-x divide-gray-200 dark:divide-gray-500" key={name} >
+                <td><MaterialCost name={name} count={count} /></td>
+              </tr>)}
+            </tbody>
+          </table>
+        </>}
+
+        {specialty && <>
+          <h3 className="text-lg font-bold pt-1" id="specialty">Specialty:</h3>
+          <Specialty specialty={specialty} location={location} />
+        </>}
+
         {overlap.length > 0 && <>
           <h3 className="text-lg font-bold pt-1" id="chartalents">Used by character ascensions and talents:</h3>
           <div className="flex flex-wrap justify-start text-center mt-2">
@@ -129,6 +156,13 @@ export default function MaterialWebpage({ mat, location, guides, usedBy }: Props
           </div>
         </>}
 
+        {food.length > 0 && <>
+          <h3 className="text-lg font-bold pt-1" id="food">Used by food:</h3>
+          <div className="flex flex-wrap justify-start text-center mt-2">
+            {food.map(c => <SmallIcon key={c.name} thing={c} location={location} />)}
+          </div>
+        </>}
+
         {mat.longDesc && <>
           <h3 className="text-lg font-bold pt-1" id="longdesc">Description:</h3>
           <blockquote className="pl-5 mb-2 border-l-2">
@@ -140,6 +174,7 @@ export default function MaterialWebpage({ mat, location, guides, usedBy }: Props
   )
 }
 
+
 export async function getStaticProps(context: GetStaticPropsContext): Promise<GetStaticPropsResult<Props>> {
   const matName = context.params?.material
   const data = await getMaterials()
@@ -154,13 +189,13 @@ export async function getStaticProps(context: GetStaticPropsContext): Promise<Ge
 
   const guides = (await getGuidesFor("material", mat.name))?.map(({ guide, page }) => [page.name, getLinkToGuide(guide, page)])
 
-  const char = await getCharacters()
+  const chars = await getCharacters()
   const costTemplates = await getCostTemplates()
   const charAscension: SmallChar[] = []
   const charTalents: SmallChar[] = []
 
-  if (char && costTemplates) {
-    for (const c of Object.values(char)) {
+  if (chars && costTemplates) {
+    for (const c of Object.values(chars)) {
       if (c.ascensionCosts && isInCosts(c.ascensionCosts, costTemplates, mat.name))
         charAscension.push(createSmallChar(c))
 
@@ -184,14 +219,46 @@ export async function getStaticProps(context: GetStaticPropsContext): Promise<Ge
     }
   }
 
+  const food: SmallMaterial[] = []
+  for (const material of Object.values(data ?? {})) {
+    if (material.recipe && material.recipe.some(x => x.name == mat.name))
+      food.push(createSmallMaterial(material))
+  }
+
+  let specialty: SpecialtyItem | null = null
+  if (mat.specialty && chars && data) {
+    const char = Object.values(chars).find(c => c.name == mat.specialty?.char)
+    const recipe = Object.values(data).find(m => m.name == mat.specialty?.recipe)
+    if (char && recipe)
+      specialty = {
+        special: createSmallMaterial(mat),
+        char: createSmallChar(char),
+        recipe: createSmallMaterial(recipe)
+      }
+  } else if (chars && data) {
+    const special = Object.values(data).find(m => mat.name == m.specialty?.recipe)
+    if (special) {
+      const char = Object.values(chars).find(c => c.name == special.specialty?.char)
+
+      if (char)
+        specialty = {
+          special: createSmallMaterial(special),
+          char: createSmallChar(char),
+          recipe: createSmallMaterial(mat)
+        }
+    }
+  }
+
   return {
     props: {
       mat,
       guides,
+      specialty,
       usedBy: {
         charAscension,
         charTalents,
-        weaponAscension: weaponAscension.sort((a, b) => (a.stars && b.stars && b.stars - a.stars) || (a.weapon && b.weapon && a.weapon.localeCompare(b.weapon)) || a.name.localeCompare(b.name))
+        weaponAscension: weaponAscension.sort((a, b) => (a.stars && b.stars && b.stars - a.stars) || (a.weapon && b.weapon && a.weapon.localeCompare(b.weapon)) || a.name.localeCompare(b.name)),
+        food
       }
     },
     revalidate: 60 * 60 * 2
diff --git a/utils/types.ts b/utils/types.ts
@@ -310,14 +310,16 @@ export interface Enemy {
 }
 
 export interface Material {
-    name:      string
-    desc:      string
-    longDesc?: string
-    stars?:    number
-    type:      string
-    category:  string
-    icon:      string
-    sources?:  string[]
+    name:       string
+    desc:       string
+    longDesc?:  string
+    stars?:     number
+    type:       string
+    category:   string
+    icon:       string
+    sources?:   string[]
+    specialty?: { char: string, recipe: string }
+    recipe?:    Item[]
 }
 
 
@@ -368,3 +370,7 @@ export interface SmallEnemy extends SmallThing {
     kind?: string
     urlpath: "enemies"
 }
+
+export interface SmallMaterial extends SmallThing {
+    urlpath: "materials"
+}
diff --git a/utils/utils.ts b/utils/utils.ts
@@ -11,7 +11,7 @@ import Claymore from "../public/img/weapon_types/Claymore.png"
 import Polearm from "../public/img/weapon_types/Polearm.png"
 import Sword from "../public/img/weapon_types/Sword.png"
 import { CostTemplates, getGuides } from "./data-cache"
-import { Artifact, Character, CharacterFull, Cost, CostTemplate, CurveEnum, Enemy, Guide, GuidePage, SmallArtifact, SmallChar, SmallEnemy, SmallWeapon, TalentTable, TalentValue, Weapon, WeaponCurveName, WeaponType } from "./types"
+import { Artifact, Character, CharacterFull, Cost, CostTemplate, CurveEnum, Enemy, Guide, GuidePage, Material, SmallArtifact, SmallChar, SmallEnemy, SmallMaterial, SmallWeapon, TalentTable, TalentValue, Weapon, WeaponCurveName, WeaponType } from "./types"
 
 export const elements = {
     Pyro, Electro, Cryo, Hydro, Anemo, Geo, Dendro
@@ -209,6 +209,13 @@ export function createSmallEnemy(enemy: Enemy): SmallEnemy {
     return e
 }
 
+export function createSmallMaterial(material: Material): SmallMaterial {
+    const m: SmallMaterial = { name: material.name, urlpath: "materials" }
+    if (material.stars) m.stars = material.stars
+    if (material.icon) m.icon = material.icon
+    return m
+}
+
 export function joinMulti(input: string[]): string {
     if (input.length <= 1) return input[0]
 
