Skip to content

Commit 095035e

Browse files
TibowlTibowl
committed
Add gachacalc
1 parent 76e93b6 commit 095035e

File tree

10 files changed

+460
-97
lines changed

10 files changed

+460
-97
lines changed

‎components/Tables.tsx‎

Lines changed: 35 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -6,37 +6,39 @@ import styles from "../pages/style.module.css"
66
import { MaterialCost } from "./Material"
77

88
export function FullAscensionCosts({ template, costTemplates }: { template: CostTemplate, costTemplates: CostTemplates }) {
9-
const [expanded, setExpanded] = useState(false)
10-
const costs = getCostsFromTemplate(template, costTemplates)
9+
const [expanded, setExpanded] = useState(false)
10+
const costs = getCostsFromTemplate(template, costTemplates)
1111

12-
return <>
13-
<h3 className="text-lg font-bold pt-1" id="ascensions">Ascensions:</h3>
14-
<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)}>
15-
<thead className="font-semibold divide-x divide-gray-200 dark:divide-gray-500">
16-
<td>Asc.</td>
17-
<td>Mora</td>
18-
<td colSpan={costs[costs.length - 1].items.length}>Items</td>
19-
</thead>
20-
<tbody className="divide-y divide-gray-200 dark:divide-gray-500">
21-
{costs
22-
.slice(1)
23-
.map(({ mora, items }, ind) => {
24-
let newItems = items
25-
if (ind == 0 && template.mapping.BossMat)
26-
newItems = [items[0], { name: "", count: 0 }, ...items.slice(1)]
27-
return <tr className="pr-1 divide-x divide-gray-200 dark:divide-gray-500" key={ind}>
28-
<td>A{ind + 1}</td>
29-
<td className="text-right">{mora}</td>
30-
{newItems.map(({ count, name }) => <td key={name}>
31-
{count > 0 && <MaterialCost name={name} count={count}/> }
32-
</td>)}
33-
</tr>
34-
})
35-
.filter((_, i, arr) => expanded ? true : (i == arr.length - 1))}
36-
{!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">
37-
<td colSpan={costs[costs.length - 1].items.length + 2} style={({ textAlign: "center" })}>Click to expand...</td>
38-
</tr>}
39-
</tbody>
40-
</table>
41-
</>
42-
}
12+
return <>
13+
<h3 className="text-lg font-bold pt-1" id="ascensions">Ascensions:</h3>
14+
<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)}>
15+
<thead>
16+
<tr className="divide-x divide-gray-200 dark:divide-gray-500">
17+
<th>Asc.</th>
18+
<th>Mora</th>
19+
<th colSpan={costs[costs.length - 1].items.length}>Items</th>
20+
</tr>
21+
</thead>
22+
<tbody className="divide-y divide-gray-200 dark:divide-gray-500">
23+
{costs
24+
.slice(1)
25+
.map(({ mora, items }, ind) => {
26+
let newItems = items
27+
if (ind == 0 && template.mapping.BossMat)
28+
newItems = [items[0], { name: "", count: 0 }, ...items.slice(1)]
29+
return <tr className="pr-1 divide-x divide-gray-200 dark:divide-gray-500" key={ind}>
30+
<td>A{ind + 1}</td>
31+
<td className="text-right">{mora}</td>
32+
{newItems.map(({ count, name }) => <td key={name}>
33+
{count > 0 && <MaterialCost name={name} count={count} />}
34+
</td>)}
35+
</tr>
36+
})
37+
.filter((_, i, arr) => expanded ? true : (i == arr.length - 1))}
38+
{!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">
39+
<td colSpan={costs[costs.length - 1].items.length + 2} style={({ textAlign: "center" })}>Click to expand...</td>
40+
</tr>}
41+
</tbody>
42+
</table>
43+
</>
44+
}

‎pages/_app.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export default function MyApp({ Component, pageProps, router }: AppProps) {
3333
<Head>
3434
<title>{router.pathname.substring(1).replace(/^\w/, w => w.toUpperCase())} | Hu Tao</title>
3535
<link rel="icon" href="/favicon.ico" />
36-
<meta http-httpEquiv="content-language" content="en-us"></meta>
36+
<meta httpEquiv="content-language" content="en-us"></meta>
3737
</Head>
3838

3939
<div className="w-full">

‎pages/characters/[char].tsx‎

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -218,10 +218,12 @@ function Stats({ char, curves }: { char: CharacterFull, curves: Record<CurveEnum
218218
return <>
219219
<h3 className="text-lg font-bold pt-1" id="stats">Stats:</h3>
220220
<table className={`table-auto w-full ${styles.table} ${styles.stattable} mb-2 ${expanded ? "" : "cursor-pointer"} sm:text-sm md:text-base text-xs`} onClick={() => setExpanded(true)}>
221-
<thead className="font-semibold divide-x divide-gray-200 dark:divide-gray-500">
222-
<td>Asc.</td>
223-
<td>Lv.</td>
224-
{Object.keys(max).map((name) => <td key={name}>{name}</td>)}
221+
<thead>
222+
<tr className="divide-x divide-gray-200 dark:divide-gray-500">
223+
<th>Asc.</th>
224+
<th>Lv.</th>
225+
{Object.keys(max).map((name) => <th key={name}>{name}</th>)}
226+
</tr>
225227
</thead>
226228
<tbody className="divide-y divide-gray-200 dark:divide-gray-500">
227229
{levels
@@ -335,10 +337,12 @@ function TalentCost({ template, costTemplates }: { template: CostTemplate, costT
335337
return <>
336338
<div className="font-bold">Talent costs:</div>
337339
<table className={`table-auto w-full ${styles.table} mb-2 ${expanded ? "" : "cursor-pointer"} sm:text-sm md:text-base text-xs`} onClick={() => setExpanded(true)}>
338-
<thead className="font-semibold divide-x divide-gray-200 dark:divide-gray-500">
339-
<td>Lv.</td>
340-
<td>Mora</td>
341-
<td colSpan={maxCostWidth}>Items</td>
340+
<thead>
341+
<tr className="divide-x divide-gray-200 dark:divide-gray-500">
342+
<th>Lv.</th>
343+
<th>Mora</th>
344+
<th colSpan={maxCostWidth}>Items</th>
345+
</tr>
342346
</thead>
343347
<tbody className="divide-y divide-gray-200 dark:divide-gray-500">
344348
{costs
@@ -384,9 +388,11 @@ function TalentTable({ table }: { table: (TalentTable | TalentValue)[] }) {
384388
return <div className="overflow-x-auto pt-1">
385389
<div className="font-bold">Talent values:</div>
386390
<table className={`${maxLevel > 3 ? "table-auto" : "table-fixed"} w-full ${styles.table} mb-2 sm:text-sm md:text-base text-xs`}>
387-
<thead className="font-semibold divide-x divide-gray-200 dark:divide-gray-500">
388-
<td>Name</td>
389-
{levels.map((i) => <td key={i + 1}>Lv. {i + 1}</td>)}
391+
<thead>
392+
<tr className="divide-x divide-gray-200 dark:divide-gray-500">
393+
<th>Name</th>
394+
{levels.map((i) => <th key={i + 1}>Lv. {i + 1}</th>)}
395+
</tr>
390396
</thead>
391397
<tbody className="divide-y divide-gray-200 dark:divide-gray-500">
392398
{table

‎pages/enemies/[enemy].tsx‎

Lines changed: 41 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -91,45 +91,47 @@ function Resistances({ resistance }: { resistance: string[][] }) {
9191
return <>
9292
<h3 className="text-lg font-bold pt-1" id="resistance">Resistances:</h3>
9393
<table className={`table-auto w-full ${styles.table} mb-2 sm:text-base text-sm`}>
94-
<thead className="font-semibold divide-x divide-gray-200 dark:divide-gray-500">
95-
<td>
96-
<div className="flex flex-row items-center content-center">
97-
<div className="absolute invisible inline-block w-5 h-5 sm:relative sm:pr-1 sm:visible"><Image src={elements.Pyro} alt={"Pyro Element"} /></div>
98-
<div>Pyro</div>
99-
</div>
100-
</td>
101-
<td>
102-
<div className="flex flex-row items-center content-center">
103-
<div className="absolute invisible inline-block w-5 h-5 sm:relative sm:pr-1 sm:visible"><Image src={elements.Electro} alt={"Electro Element"} /></div>
104-
<div>Electro</div>
105-
</div>
106-
</td>
107-
<td>
108-
<div className="flex flex-row items-center content-center">
109-
<div className="absolute invisible inline-block w-5 h-5 sm:relative sm:pr-1 sm:visible"><Image src={elements.Cryo} alt={"Cryo Element"} /></div>
110-
<div>Cryo</div>
111-
</div>
112-
</td>
113-
<td>
114-
<div className="flex flex-row items-center content-center">
115-
<div className="absolute invisible inline-block w-5 h-5 sm:relative sm:pr-1 sm:visible"><Image src={elements.Hydro} alt={"Hydro Element"} /></div>
116-
<div>Hydro</div>
117-
</div>
118-
</td>
119-
<td>
120-
<div className="flex flex-row items-center content-center">
121-
<div className="absolute invisible inline-block w-5 h-5 sm:relative sm:pr-1 sm:visible"><Image src={elements.Anemo} alt={"Anemo Element"} /></div>
122-
<div>Anemo</div>
123-
</div>
124-
</td>
125-
<td>
126-
<div className="flex flex-row items-center content-center">
127-
<div className="absolute invisible inline-block w-5 h-5 sm:relative sm:pr-1 sm:visible"><Image src={elements.Geo} alt={"Geo Element"} /></div>
128-
<div>Geo</div>
129-
</div>
130-
</td>
131-
<td>Physical</td>
132-
{resistance[0].length > 7 && <td>Note</td>}
94+
<thead>
95+
<tr className="divide-x divide-gray-200 dark:divide-gray-500">
96+
<th>
97+
<div className="flex flex-row items-center content-center">
98+
<div className="absolute invisible inline-block w-5 h-5 sm:relative sm:pr-1 sm:visible"><Image src={elements.Pyro} alt={"Pyro Element"} /></div>
99+
<div>Pyro</div>
100+
</div>
101+
</th>
102+
<th>
103+
<div className="flex flex-row items-center content-center">
104+
<div className="absolute invisible inline-block w-5 h-5 sm:relative sm:pr-1 sm:visible"><Image src={elements.Electro} alt={"Electro Element"} /></div>
105+
<div>Electro</div>
106+
</div>
107+
</th>
108+
<th>
109+
<div className="flex flex-row items-center content-center">
110+
<div className="absolute invisible inline-block w-5 h-5 sm:relative sm:pr-1 sm:visible"><Image src={elements.Cryo} alt={"Cryo Element"} /></div>
111+
<div>Cryo</div>
112+
</div>
113+
</th>
114+
<th>
115+
<div className="flex flex-row items-center content-center">
116+
<div className="absolute invisible inline-block w-5 h-5 sm:relative sm:pr-1 sm:visible"><Image src={elements.Hydro} alt={"Hydro Element"} /></div>
117+
<div>Hydro</div>
118+
</div>
119+
</th>
120+
<th>
121+
<div className="flex flex-row items-center content-center">
122+
<div className="absolute invisible inline-block w-5 h-5 sm:relative sm:pr-1 sm:visible"><Image src={elements.Anemo} alt={"Anemo Element"} /></div>
123+
<div>Anemo</div>
124+
</div>
125+
</th>
126+
<th>
127+
<div className="flex flex-row items-center content-center">
128+
<div className="absolute invisible inline-block w-5 h-5 sm:relative sm:pr-1 sm:visible"><Image src={elements.Geo} alt={"Geo Element"} /></div>
129+
<div>Geo</div>
130+
</div>
131+
</th>
132+
<th>Physical</th>
133+
{resistance[0].length > 7 && <th>Note</th>}
134+
</tr>
133135
</thead>
134136
<tbody className="divide-y divide-gray-200 dark:divide-gray-500">
135137
{resistance

‎pages/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ export default function Home({ location }: { location: string }) {
8484
</div>
8585

8686
<div className="md:flex md:flex-row items-center max-w-4xl">
87-
<Card title="Gacha calculator" desc="Want to check the odds of getting C1 from the 134 pulls you've got right now?" location={location} src={calc} />
87+
<Card href="/tools/gachacalc" title="Gacha calculator &rarr;" desc="Want to check the odds of getting C1 from the 134 pulls you've got right now?" location={location} src={calc} alsoSite />
8888
<Card title="And more!" desc="Abyss schedule/floors, this month's Paimon's Bargains, ..." location={location} />
8989
</div>
9090
</div>

0 commit comments

Comments
 (0)