Add weapons pages

Author: Tibowl

components/Icon.tsx

@@ -1,8 +1,9 @@
 /* eslint-disable @next/next/no-img-element */
 import Image from "next/image"
-import { SmallChar } from "../utils/types"
+import { SmallChar, SmallWeapon } from "../utils/types"
 import { elements, getStarColor, image, urlify, weapons } from "../utils/utils"
 import FormattedLink from "./FormattedLink"
+import styles from "../pages/style.module.css"
 
 export default function Icon({ icon, className, loading = "lazy" }: { icon: { name: string, icon?: string }, className?: string, loading?: "eager" | "lazy" }) {
   const src = (icon.icon?.startsWith("img/") ? ("/" + icon.icon) : icon.icon) ?? "img/unknown.png"
@@ -24,29 +25,33 @@ export function IconName({ name, type, urltype, loading = "lazy" }: { name: stri
 }
 
 
-export function CharIcon({ char, location }: { char: SmallChar, location: string }) {
-  const color = getStarColor(char.stars ?? 0)
+export function SmallIcon({ thing, location }: { thing: SmallChar | SmallWeapon, location: string }) {
+  const color = getStarColor(thing.stars ?? 0)
 
-  return <FormattedLink key={char.name} location={location} href={`/characters/${urlify(char.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" >
+  return <FormattedLink key={thing.name} location={location} href={`/${isSmallChar(thing) ? "characters" : "weapons"}/${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={char} className="rounded-t-xl m-0 p-0" />
+      <Icon icon={thing} className="rounded-t-xl m-0 p-0" />
       <span className="absolute block p-0.5 top-0 w-full">
         <div className="flex flex-col">
-          {char.element && char.element.map(e => <div key={e} className="w-6 md:w-8">
+          {isSmallChar(thing) && thing.element && 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">
         <div className="flex flex-col float-right">
-          {char.weapon && <div className="w-6 md:w-8">
-            <Image src={weapons[char.weapon]} alt={char.weapon} loading="eager" />
+          {thing.weapon && <div className="w-6 md:w-8">
+            <Image src={weapons[thing.weapon]} alt={thing.weapon} loading="eager" />
           </div>}
         </div>
       </span>
     </div>
-    <span className="flex justify-center items-center h-10 md:h-12 m-0 p-0 duration-200 md:text-base">
-      {char.name}
+    <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>
   </FormattedLink>
 }
+
+function isSmallChar(char: SmallChar | SmallWeapon): char is SmallChar {
+  return (char as SmallChar).element != undefined
+}

components/NavBar.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react"
 import FormattedLink from "./FormattedLink"
 
-const pages = ["Guides", "Characters", "Materials", "Reminders"]
+const pages = ["Guides", "Characters", "Weapons", "Materials", "Reminders"]
 
 export default function NavBar({ location }: {location: string}) {
   const [menuOpen, setMenuOpen] = useState(false)

components/Tables.tsx

@@ -0,0 +1,42 @@
+import { useState } from "react"
+import { CostTemplates } from "../utils/data-cache"
+import { CostTemplate } from "../utils/types"
+import { getCostsFromTemplate } from "../utils/utils"
+import styles from "../pages/style.module.css"
+import { MaterialCost } from "./Material"
+
+export function FullAscensionCosts({ template, costTemplates }: { template: CostTemplate, costTemplates: CostTemplates }) {
+    const [expanded, setExpanded] = useState(false)
+    const costs = getCostsFromTemplate(template, costTemplates)
+
+    return <>
+      <h3 className="text-lg font-bold pt-1" id="ascensions">Ascensions:</h3>
+      <table className={`table-auto w-full ${styles.table} mb-2 ${expanded ? "" : "cursor-pointer"} sm:text-sm md:text-base text-xs`} onClick={(e) => setExpanded(true)}>
+        <thead className="font-semibold divide-x divide-gray-200 dark:divide-gray-500">
+          <td>Asc.</td>
+          <td>Mora</td>
+          <td colSpan={costs[costs.length - 1].items.length}>Items</td>
+        </thead>
+        <tbody className="divide-y divide-gray-200 dark:divide-gray-500">
+          {costs
+            .slice(1)
+            .map(({ mora, items }, ind) => {
+              let newItems = items
+              if (ind == 0 && template.mapping.BossMat)
+                newItems = [items[0], { name: "", count: 0 }, ...items.slice(1)]
+              return <tr className="pr-1 divide-x divide-gray-200 dark:divide-gray-500" key={ind}>
+                <td>A{ind + 1}</td>
+                <td className="text-right">{mora}</td>
+                {newItems.map(({ count, name }) => <td key={name}>
+                  {count > 0 && <MaterialCost name={name} count={count}/> }
+                </td>)}
+              </tr>
+            })
+            .filter((_, i, arr) => expanded ? true : (i == arr.length - 1))}
+          {!expanded && <tr className="pr-1 cursor-pointer text-blue-700 dark:text-blue-300 hover:text-blue-400 dark:hover:text-blue-400 no-underline transition-all duration-200 font-semibold">
+            <td colSpan={costs[costs.length - 1].items.length + 2} style={({ textAlign: "center" })}>Click to expand...</td>
+          </tr>}
+        </tbody>
+      </table>
+    </>
+  }

pages/characters/[char].tsx

@@ -9,6 +9,7 @@ import Guides from "../../components/Guides"
 import Icon from "../../components/Icon"
 import Main from "../../components/Main"
 import { MaterialCost, MaterialImage } from "../../components/Material"
+import { FullAscensionCosts } from "../../components/Tables"
 import YouTube from "../../components/YouTube"
 import { CharacterCurves, CostTemplates, getCharacterCurves, getCharacters, getCostTemplates } from "../../utils/data-cache"
 import { Character, CharacterFull, Constellation, CostTemplate, CurveEnum, Meta, Passive, Skill, Skills, TalentTable, TalentValue } from "../../utils/types"
@@ -127,42 +128,6 @@ function AscensionCosts({ costs }: { costs: CostTemplate }) {
   </div>
 }
 
-function FullAscensionCosts({ template, costTemplates }: { template: CostTemplate, costTemplates: CostTemplates }) {
-  const [expanded, setExpanded] = useState(false)
-  const costs = getCostsFromTemplate(template, costTemplates)
-
-  return <>
-    <h3 className="text-lg font-bold pt-1" id="ascensions">Ascensions:</h3>
-    <table className={`table-auto w-full ${styles.table} mb-2 ${expanded ? "" : "cursor-pointer"} sm:text-sm md:text-base text-xs`} onClick={(e) => setExpanded(true)}>
-      <thead className="font-semibold divide-x divide-gray-200 dark:divide-gray-500">
-        <td>Asc.</td>
-        <td>Mora</td>
-        <td colSpan={costs[costs.length - 1].items.length}>Items</td>
-      </thead>
-      <tbody className="divide-y divide-gray-200 dark:divide-gray-500">
-        {costs
-          .slice(1)
-          .map(({ mora, items }, ind) => {
-            let newItems = items
-            if (ind == 0 && template.mapping.BossMat)
-              newItems = [items[0], { name: "", count: 0 }, ...items.slice(1)]
-            return <tr className="pr-1 divide-x divide-gray-200 dark:divide-gray-500" key={ind}>
-              <td>A{ind + 1}</td>
-              <td className="text-right">{mora}</td>
-              {newItems.map(({ count, name }) => <td key={name}>
-                {count > 0 && <MaterialCost name={name} count={count}/> }
-              </td>)}
-            </tr>
-          })
-          .filter((_, i, arr) => expanded ? true : (i == arr.length - 1))}
-        {!expanded && <tr className="pr-1 cursor-pointer text-blue-700 dark:text-blue-300 hover:text-blue-400 dark:hover:text-blue-400 no-underline transition-all duration-200 font-semibold">
-          <td colSpan={costs[costs.length - 1].items.length + 2} style={({ textAlign: "center" })}>Click to expand...</td>
-        </tr>}
-      </tbody>
-    </table>
-  </>
-}
-
 function TalentCosts({ skills }: { skills: Skills[] }) {
   const talents = skills
     .flatMap(s => [...(s.talents ?? []), s.ult])

pages/characters/index.tsx

@@ -3,7 +3,7 @@ import Head from "next/head"
 import Image from "next/image"
 import { useState } from "react"
 import { ExclusiveButton, ToggleAllButton, ToggleButton } from "../../components/Filters"
-import { CharIcon } from "../../components/Icon"
+import { SmallIcon } from "../../components/Icon"
 import Main from "../../components/Main"
 import { getCharacters } from "../../utils/data-cache"
 import { SmallChar, WeaponType } from "../../utils/types"
@@ -109,7 +109,7 @@ export default function Characters(props: Props & { location: string }) {
           .filter(c => starFilter == 0 || starFilter == c.stars)
           .filter(c => elementFilter.some(e => c.element?.includes(e)) || c.element == undefined)
           .filter(c => weaponFilter.some(e => c.weapon?.includes(e)) || c.weapon == undefined)
-          .map(char => <CharIcon key={char.name} char={char} location={props.location} />)}
+          .map(char => <SmallIcon key={char.name} thing={char} location={props.location} />)}
       </div>
     </Main>
   )

pages/materials/[material].tsx

@@ -4,22 +4,23 @@ import Head from "next/head"
 import ReactMarkdown from "react-markdown"
 import FormattedLink from "../../components/FormattedLink"
 import Guides from "../../components/Guides"
-import Icon, { CharIcon, IconName } from "../../components/Icon"
+import Icon, { SmallIcon } from "../../components/Icon"
 import Main from "../../components/Main"
-import { CostTemplates, getCharacters, getCostTemplates, getMaterials } from "../../utils/data-cache"
-import { Cost, CostTemplate, Material, SmallChar } from "../../utils/types"
-import { createSmallChar, getCostsFromTemplate, getGuidesFor, getLinkToGuide, getStarColor, urlify } from "../../utils/utils"
+import { CostTemplates, getCharacters, getCostTemplates, getMaterials, getWeapons } from "../../utils/data-cache"
+import { Cost, CostTemplate, Material, SmallChar, SmallWeapon } from "../../utils/types"
+import { createSmallChar, createSmallWeapon, getCostsFromTemplate, getGuidesFor, getLinkToGuide, getStarColor, urlify } from "../../utils/utils"
 
 interface Props {
   mat: Material,
   guides?: string[][],
   usedBy: {
     charTalents: SmallChar[]
     charAscension: SmallChar[]
+    weaponAscension: SmallWeapon[]
   }
 }
 
-export default function CharacterWebpage({ mat, location, guides, usedBy }: Props & { location: string }) {
+export default function MaterialWebpage({ mat, location, guides, usedBy }: Props & { location: string }) {
   const color = getStarColor(mat.stars ?? 1)
 
   return (
@@ -81,14 +82,21 @@ export default function CharacterWebpage({ mat, location, guides, usedBy }: Prop
         {usedBy.charTalents.length > 0 && <>
           <h3 className="text-lg font-bold pt-1" id="chartalents">Used by character talents:</h3>
           <div className="flex flex-wrap justify-start text-center mt-2">
-            {usedBy.charTalents.map(c => <CharIcon key={c.name} char={c} location={location} />)}
+            {usedBy.charTalents.map(c => <SmallIcon key={c.name} thing={c} location={location} />)}
           </div>
         </>}
 
         {usedBy.charAscension.length > 0 && <>
           <h3 className="text-lg font-bold pt-1" id="charascension">Used by character ascensions:</h3>
           <div className="flex flex-wrap justify-start text-center mt-2">
-            {usedBy.charAscension.map(c => <CharIcon key={c.name} char={c} location={location} />)}
+            {usedBy.charAscension.map(c => <SmallIcon key={c.name} thing={c} location={location} />)}
+          </div>
+        </>}
+
+        {usedBy.weaponAscension.length > 0 && <>
+          <h3 className="text-lg font-bold pt-1" id="weaponascension">Used by weapon ascensions:</h3>
+          <div className="flex flex-wrap justify-start text-center mt-2">
+            {usedBy.weaponAscension.map(c => <SmallIcon key={c.name} thing={c} location={location} />)}
           </div>
         </>}
 
@@ -147,13 +155,25 @@ export async function getStaticProps(context: GetStaticPropsContext): Promise<Ge
     }
   }
 
+
+  const weapons = await getWeapons()
+  const weaponAscension: SmallWeapon[] = []
+
+  if (weapons && costTemplates) {
+    for (const w of Object.values(weapons)) {
+      if (w.ascensionCosts && isInCosts(w.ascensionCosts, costTemplates, mat.name))
+        weaponAscension.push(createSmallWeapon(w))
+    }
+  }
+
   return {
     props: {
       mat,
       guides,
       usedBy: {
         charAscension,
-        charTalents
+        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))
       }
     },
     revalidate: 60 * 60

pages/materials/index.tsx

@@ -172,13 +172,13 @@ export async function getStaticProps(context: GetStaticPropsContext): Promise<Ge
     props: {
       materials: Object
         .values(data)
-        .map(c => {
-          const char: SmallMaterial = { name: c.name }
-          if (c.stars) char.stars = c.stars
-          if (c.icon) char.icon = c.icon
-          if (c.category) char.category = c.category
-          if (c.type) char.type = c.type
-          return char
+        .map(m => {
+          const mat: SmallMaterial = { name: m.name }
+          if (m.stars) mat.stars = m.stars
+          if (m.icon) mat.icon = m.icon
+          if (m.category) mat.category = m.category
+          if (m.type) mat.type = m.type
+          return mat
         })
     },
     revalidate: 60 * 60

pages/style.module.css

@@ -32,4 +32,18 @@
 }
 .stattable tbody td {
     text-align: right;
-}
+}
+
+.iconHeight {
+    min-height: 4rem;
+}
+@media (min-width: 768px) {
+    .iconHeight {
+        min-height: 3rem;
+    }
+}
+@media (min-width: 640px) {
+    .iconHeight {
+        min-height: 3rem;
+    }
+}