Skip to content

Commit 901d04e

Browse files
TibowlTibowl
committed
Update homepage
1 parent d321279 commit 901d04e

File tree

6 files changed

+71
-26
lines changed

6 files changed

+71
-26
lines changed

‎components/Icon.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,13 @@ import { elements, getStarColor, image, urlify, weapons } from "../utils/utils"
55
import FormattedLink from "./FormattedLink"
66

77
export default function Icon({ icon, className, loading = "lazy" }: { icon: { name: string, icon?: string }, className?: string, loading?: "eager" | "lazy" }) {
8-
const src = icon.icon ?? "img/unknown.png"
8+
const src = (icon.icon?.startsWith("img/") ? ("/" + icon.icon) : icon.icon) ?? "img/unknown.png"
99

10-
if (src.startsWith("img"))
11-
// eslint-disable-next-line @next/next/no-img-element
12-
return <img alt={icon.name} loading={loading} src={"/" + src} className={className} width={256} height={256} onError={(e) => (e.target as HTMLImageElement).src = "/img/unknown.png"} />
10+
// if (src.startsWith("img"))
11+
// eslint-disable-next-line @next/next/no-img-element
12+
return <img alt={icon.name} loading={loading} src={src} className={className} width={256} height={256} onError={(e) => (e.target as HTMLImageElement).src = "/img/unknown.png"} />
1313

14-
return <Image alt={icon.name} loading={loading} src={src} className={className} width={256} height={256} onError={(e) => (e.target as HTMLImageElement).src = "/img/unknown.png"} />
14+
// return <Image alt={icon.name} loading={loading} src={src} className={className} width={256} height={256} onError={(e) => (e.target as HTMLImageElement).src = "/img/unknown.png"} />
1515
}
1616

1717
export function IconName({ name, type, urltype, loading = "lazy" }: { name: string, type: string, urltype: string, loading: "eager" | "lazy" }) {

‎pages/characters/[char].tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -312,7 +312,7 @@ function Talent({ talent, costTemplates }: { talent: Skill, costTemplates: CostT
312312
<ReactMarkdown>{(talent.desc?.replace(/ ?\$\{.*?\}/g, "").replace(/\n/g, "\n\n") ?? "")}</ReactMarkdown>
313313
</div>
314314
{(talent.video || talent.videomp4) && <div className="p-2 flex flex-col justify-around items-center w-full ">
315-
{talent.videomp4 ? <video src={talent.videomp4} autoPlay loop className="w-full" /> : <img src={talent.video} alt="Talent video" className="w-full" />}
315+
{talent.videomp4 ? <video src={talent.videomp4} autoPlay muted loop playsInline className="w-full" /> : <img src={talent.video} alt="Talent video" className="w-full" />}
316316
</div>}
317317
</div>
318318
{talent.talentTable && <TalentTable table={talent.talentTable} />}

‎pages/index.tsx‎

Lines changed: 58 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,11 @@ import FormattedLink from "../components/FormattedLink"
44
import alarm from "../public/alarm.svg"
55
import book from "../public/book.svg"
66
import calc from "../public/calc.svg"
7+
import discord from "../public/discord.svg"
8+
import github from "../public/github.svg"
79
import newspaper from "../public/newspaper.svg"
810
import person from "../public/person.svg"
11+
import { weapons } from "../utils/utils"
912

1013
export default function Home({ location }: { location: string }) {
1114
return (
@@ -25,9 +28,37 @@ export default function Home({ location }: { location: string }) {
2528
<p className="m-3 text-2xl">
2629
A Genshin Impact Discord bot and site
2730
</p>
28-
<div className="md:flex md:flex-row items-center justify-around">
29-
<Button href="https://discord.com/oauth2/authorize?client_id=826550363355086918&scope=bot+applications.commands&permissions=313344" title="Add the Discord bot" location={location} colors="bg-sky-300 dark:bg-sky-900"/>
30-
<Button href="https://github.com/Tibowl/hutao#commands" title="View commands" location={location}/>
31+
<div className="md:flex md:flex-row items-center justify-around max-w-4xl">
32+
<Button href="https://discord.com/oauth2/authorize?client_id=826550363355086918&scope=bot+applications.commands&permissions=313344" location={location} colors="bg-sky-300 dark:bg-sky-900">
33+
<span className="m-2 h-6 w-6">
34+
<Image src={discord} width={24} height={24} alt="Icon" />
35+
</span>
36+
<h3 className="text-2xl font-bold m-2">
37+
Add the Discord bot
38+
</h3>
39+
</Button>
40+
<Button href="https://github.com/Tibowl/hutao#commands" location={location}>
41+
<span className="m-2 h-6 w-6">
42+
<Image src={github} width={24} height={24} alt="Icon" />
43+
</span>
44+
<h3 className="text-2xl font-bold m-2">
45+
View command list on GitHub
46+
</h3>
47+
</Button>
48+
</div>
49+
<div className="md:flex md:flex-row items-center justify-around md:max-w-4xl">
50+
<FormattedLink
51+
href="https://discord.gg/BM3Srp8j8G"
52+
location={location}
53+
className="py-0.5 px-1 mt-1 border w-full md:w-auto rounded-md text-center items-center justify-center flex flex-row"
54+
target="_blank">
55+
<span className="mx-1.5 h-5 w-5">
56+
<Image src={discord} width={20} height={20} alt="Icon" />
57+
</span>
58+
<h3 className="text-xl font-semibold m-2">
59+
Join the support server
60+
</h3>
61+
</FormattedLink>
3162
</div>
3263
</div>
3364

@@ -41,52 +72,60 @@ export default function Home({ location }: { location: string }) {
4172
</div>
4273

4374
<div className="md:flex md:flex-row items-center max-w-4xl">
44-
<Card title="Character and Weapon Information" desc="Check which books that character needs or how many enhancement ores you need to level that shiny new weapon" location={location} src={person} />
45-
<Card title="News and Events" desc="Don't miss out on the latest drip marketing" location={location} src={newspaper} />
75+
<Card href="/characters" title="Character Information &rarr;" desc="Check which talent books a character needs, their talent scaling, their constellations and more" location={location} src={person} alsoSite />
76+
<Card title="News" desc="Don't miss out on the latest drip marketing" location={location} src={newspaper} />
4677
</div>
4778

4879
<div className="md:flex md:flex-row items-center max-w-4xl">
49-
<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} />
50-
<Card title="And more!" desc="Abyss schedule/floors, this month's Paimon's Bargains, ..." location={location} />
80+
<Card title="Weapon Information" desc="Check how many enhancement ores you need to level that shiny new weapon or which refinements/sub-stat it has" location={location} src={weapons.Sword} />
81+
<Card title="Events" desc="Get reminded when new events come out" location={location} src={alarm} />
82+
</div>
83+
84+
<div className="md:flex md:flex-row items-center max-w-4xl">
85+
<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} />
86+
<Card title="And more!" desc="Abyss schedule/floors, this month's Paimon's Bargains, ..." location={location} />
5187
</div>
5288
</div>
5389
</main>
5490
)
5591
}
5692

5793

58-
function Button({ href, title, location, colors = "bg-neutral-300 dark:bg-neutral-900" }: { href: string, title: string, location: string, colors?: string }) {
94+
function Button({ href, children, location, colors = "bg-neutral-300 dark:bg-neutral-900" }: { href: string, children: JSX.Element | string | (string | JSX.Element)[], location: string, colors?: string }) {
5995
return <FormattedLink
6096
href={href}
61-
className={`p-2 m-1.5 border ${colors} w-full md:w-auto rounded-md text-center items-start justify-center flex flex-col`}
97+
className={`p-2 m-1.5 border ${colors} w-full md:w-auto rounded-md text-center items-center justify-center flex flex-row`}
6298
location={location}
6399
target="_blank"
64100
>
65-
<h3 className="text-2xl font-bold m-2">{title}</h3>
101+
{children}
66102
</FormattedLink>
67103
}
68104

69-
function Card({ href, src, title, desc, location, colors = "bg-slate-300 dark:bg-slate-800", alsoSite }: { href?: string, src?: string, title: string, desc: string, colors?: string, location: string, alsoSite?: string | boolean }) {
105+
function Card({ href, src, title, desc, location, colors = "bg-slate-300 dark:bg-slate-800", alsoSite }: { href?: string, src?: string | StaticImageData, title: string, desc: string, colors?: string, location: string, alsoSite?: string | boolean }) {
70106
const className = `px-6 py-1.5 m-1.5 h-full text-left border max-w-full items-start justify-center flex flex-col rounded-2xl ${colors}`
71107

72108
if (href)
73109
return <FormattedLink
74-
href={href}
75-
className={className}
76-
style={{ minHeight: "12rem" }}
77-
location={location}
78-
>
79-
<h3 className="text-3xl font-semibold">{src && <Image src={src} width={24} height={24} alt="Icon"/>} {title}</h3>
110+
href={href}
111+
className={className}
112+
style={{ minHeight: "12rem" }}
113+
location={location}
114+
>
115+
<h3 className="text-3xl font-semibold">{src && <Image src={src} width={24} height={24} alt="Icon" />} {title}</h3>
80116
{alsoSite && <p className="mt-0 text-xs">
81117
{alsoSite == true ? "Also available on the site" : alsoSite}
82118
</p>}
83119
<p className="mt-2 text-lg">
84120
{desc}
85121
</p>
86-
</FormattedLink>
122+
</FormattedLink>
87123
else
88124
return <div className={className} style={{ minHeight: "12rem" }}>
89-
<h3 className="text-3xl font-semibold">{src && <Image src={src} width={24} height={24} alt="Icon"/>} {title}</h3>
125+
<h3 className="text-3xl font-semibold">{src && <Image src={src} width={24} height={24} alt="Icon" />} {title}</h3>
126+
{alsoSite && <p className="mt-0 text-xs">
127+
{alsoSite == true ? "Also available on the site" : alsoSite}
128+
</p>}
90129
<p className="mt-2 text-lg">
91130
{desc}
92131
</p>

‎pages/materials/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,7 @@ export default function Materials(props: Props & { location: string }) {
141141
.map((mat, i) => {
142142
const color = getStarColor(mat.stars ?? 1)
143143

144-
return <FormattedLink key={mat.name} prefetch={i < 21} location={props.location} href={`/materials/${urlify(mat.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 text-bold text-sm" >
144+
return <FormattedLink key={mat.name} prefetch={i < 21 ? undefined : false} location={props.location} href={`/materials/${urlify(mat.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 text-bold text-sm" >
145145
<div className={`${color} rounded-t-xl h-24 sm:h-28 lg:h-32`}>
146146
<Icon icon={mat} loading={i < 21 ? "eager" : "lazy"} className="rounded-t-xl m-0 p-0" />
147147
</div>

‎public/discord.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎public/github.svg‎

Lines changed: 3 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)