Skip to content

Commit

Permalink
Added back build display
Browse files Browse the repository at this point in the history
  • Loading branch information
ChrisMGeo committed Aug 18, 2024
1 parent e237184 commit 249b8a1
Show file tree
Hide file tree
Showing 2 changed files with 215 additions and 47 deletions.
166 changes: 166 additions & 0 deletions src/components/build-display.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,166 @@
import {
Box,
CardMedia,
Divider,
Grid,
Stack,
Typography,
} from "@mui/material";
import CardContentEvenPadding from "./card-content-even-padding";
import CardLight from "./card-light";
import { Fragment } from "react";
import { bgGradient } from "../consts/rarity-colors";
import { CharacterBuild } from "../consts/character-builds";
import { translatedWeaponInfo, TranslatedWeaponInfo } from "../consts/weapon-info";
import { TranslatedArtifactInfo, translatedArtifactInfo } from "../consts/artifact-info";
import UnityRichTextComponent from "./unity-rich-text";

interface BuildDisplayProps {
build: CharacterBuild["builds"][number];
}
const BuildDisplay = ({
build: { weapons, artifactSets }
}: BuildDisplayProps) => {
const allWeaponInfo = translatedWeaponInfo();
const allArtifactInfo = translatedArtifactInfo();
return (
<Grid container spacing={2}>
<Grid item xs={12} lg={6}>
<Stack flexDirection="column" spacing={2}>
<Typography variant="h6">Weapons</Typography>

{weapons.map((weaponId, index) => (
<Fragment key={index}>
<WeaponDisplay weaponInfo={allWeaponInfo.find(weaponInfo => weaponInfo.nameId === weaponId)!} />
{index !== weapons.length - 1 ? <Divider>OR</Divider> : <></>}
</Fragment>
))}
</Stack>
</Grid>
<Grid item xs={12} lg={6}>
<Stack flexDirection="column" spacing={2}>
{" "}
<Typography variant="h6">Artifact Sets</Typography>
{artifactSets.map((artifactId, index) => (
<Fragment key={index}>
<ArtifactSetDisplay artifactInfo={allArtifactInfo.find(artifactInfo => artifactInfo.nameId === artifactId)!} />
{index !== artifactSets.length - 1 ? (
<Divider>OR</Divider>
) : (
<></>
)}
</Fragment>
))}
</Stack>
</Grid>
</Grid>
);
};
const WeaponDisplay = ({ weaponInfo: { nameId, rarity, name, refinementInfo } }: { weaponInfo: TranslatedWeaponInfo }) => {
const key = nameId;

return (
<CardLight sx={{ borderRadius: 4, display: "flex", maxHeight: "144px" }}>
<div
style={{
backgroundImage: `radial-gradient(at bottom right, ${bgGradient[rarity].light}, ${bgGradient[rarity].dark})`,
display: "flex",
flexDirection: "column",
justifyContent: "center",
}}
>
<CardMedia
component="img"
alt={`${key}`}
src={`/genshin-helper-website/weapons/${nameId}/awaken-icon.png`}
sx={{
width: 92,
height: 92,
margin: "8px",
}}
/>
</div>
<Box
sx={{
display: "flex",
flexDirection: "column",
maxHeight: "100%",
}}
>
<CardContentEvenPadding>
<div>
<Typography component="div" variant="h6">
{name}
</Typography>
</div>
<div style={{ overflowY: "auto", maxHeight: "80px" }}>
<Typography variant="body2" color="text.secondary" component="div">
<UnityRichTextComponent>{refinementInfo[0].desc.split("\\n").join("\n")}</UnityRichTextComponent>
</Typography>
</div>
</CardContentEvenPadding>
</Box>
</CardLight>
);
};
const ArtifactSetDisplay = ({
artifactInfo: { nameId: key, maxRarity: rarity, name, setBonuses }
}: {
artifactInfo: TranslatedArtifactInfo,
}) => {
return (
<CardLight sx={{ borderRadius: 4, display: "flex", maxHeight: "144px" }}>
<div
style={{
backgroundImage: `radial-gradient(at bottom right, ${bgGradient[rarity].light}, ${bgGradient[rarity].dark})`,
display: "flex",
flexDirection: "column",
justifyContent: "center",
}}
>
<CardMedia
component="img"
alt={`${key}`}
src={`/genshin-helper-website/artifacts/${key}/set-icon.png`}
sx={{
width: 92,
height: 92,
margin: "8px",
}}
/>
</div>
<Box
sx={{
display: "flex",
flexDirection: "column",
maxHeight: "100%",
}}
>
<CardContentEvenPadding>
<div>
<Typography component="div" variant="h6">
{name}
</Typography>
</div>
<div style={{ overflowY: "auto", maxHeight: "80px" }}>
<Typography
variant="body2"
color="text.secondary"
component="div"
whiteSpace="pre-wrap"
>
<UnityRichTextComponent>{[1, 2, 4]
.map((num: number) => {
const exists = num in setBonuses;
if (!exists) return "";
return `${num}-Piece Set: ${setBonuses[num].desc.split("\\n").join("\n")}`;
})
.join("\n")}</UnityRichTextComponent>
</Typography>
</div>
</CardContentEvenPadding>
</Box>
</CardLight>
);
};
export default BuildDisplay;
96 changes: 49 additions & 47 deletions src/pages/character.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
// MenuItem,
Skeleton,
Stack,
Tab,
// Tab,
Tabs,
Typography,
Expand All @@ -23,40 +24,40 @@ import CharSelectDropdown from "../components/char-select-dropdown";
// import DropdownButton from "../components/dropdown-button";
import { theme } from "../theme";
import StickyCard from "../components/sticky-card";
// import BuildDisplay from "../components/BuildDisplay";
import BuildDisplay from "../components/build-display";
import { translatedCharacterInfo } from "../consts/character-info";
import CardLight from "../components/card-light";
import UnityRichTextComponent from "../components/unity-rich-text";
const viteConfig = { base: "/genshin-helper-website" };
import characterBuilds from "../consts/character-builds";

// interface TabPanelProps {
// children?: React.ReactNode;
// index: number;
// value: number;
// }
interface TabPanelProps {
children?: React.ReactNode;
index: number;
value: number;
}

// const TabPanel = (props: TabPanelProps) => {
// const { children, value, index, ...other } = props;
//
// return (
// <div
// role="tabpanel"
// hidden={value !== index}
// id={`simple-tabpanel-${index}`}
// aria-labelledby={`simple-tab-${index}`}
// {...other}
// >
// {value === index && children}
// </div>
// );
// };
const TabPanel = (props: TabPanelProps) => {
const { children, value, index, ...other } = props;

return (
<div
role="tabpanel"
hidden={value !== index}
id={`simple-tabpanel-${index}`}
aria-labelledby={`simple-tab-${index}`}
{...other}
>
{value === index && children}
</div>
);
};
//
// const a11yProps = (index: number) => {
// return {
// id: `simple-tab-${index}`,
// "aria-controls": `simple-tabpanel-${index}`,
// };
// };
const a11yProps = (index: number) => {
return {
id: `simple-tab-${index}`,
"aria-controls": `simple-tabpanel-${index}`,
};
};

const PageCharacter = () => {
const navigate = useNavigate();
Expand Down Expand Up @@ -87,6 +88,7 @@ const CharacterDisplayCard = ({
characterKey,
onClose,
}: CharacterDisplayCardProps) => {
const builds = characterBuilds.find(buildInfo => buildInfo.nameId === characterKey)?.builds;
const [buildTab, setBuildTab] = useState(0);
const handleBuildChange = (_e: React.SyntheticEvent, newValue: number) => {
setBuildTab(newValue);
Expand Down Expand Up @@ -161,20 +163,20 @@ const CharacterDisplayCard = ({
},
}}
>
{/* {builds.map((build, index) => ( */}
{/* <Tab */}
{/* label={build.name} */}
{/* {...a11yProps(index)} */}
{/* sx={{ */}
{/* color: `${theme.palette[ */}
{/* (characterInfo.vision_key.toLowerCase() as ElementKey) ?? */}
{/* "primary" */}
{/* ].main */}
{/* } !important`, */}
{/* }} */}
{/* key={index} */}
{/* /> */}
{/* ))} */}
{(builds ?? [{ name: "WIP" }]).map((build, index) => (
<Tab
label={build.name}
{...a11yProps(index)}
sx={{
color: `${theme.palette[
(characterInfo.vision.toLowerCase() as Element) ??
"primary"
].main
} !important`,
}}
key={index}
/>
))}
</Tabs>
</CardContentEvenPadding>
</StickyCard>
Expand All @@ -190,11 +192,11 @@ const CharacterDisplayCard = ({
<CardContentEvenPadding>
<Stack flexDirection="column" gap={2}>
<Typography variant="h5">Build Info</Typography>
{/* {builds.map((build: Build, index) => ( */}
{/* <TabPanel value={buildTab} index={index} key={index}> */}
{/* <BuildDisplay build={build} /> */}
{/* </TabPanel> */}
{/* ))} */}
{(builds ?? []).map((build, index) => (
<TabPanel value={buildTab} index={index} key={index}>
<BuildDisplay build={build} />
</TabPanel>
))}
</Stack>
</CardContentEvenPadding>
</Card>
Expand Down

0 comments on commit 249b8a1

Please sign in to comment.