Skip to content
This repository was archived by the owner on Aug 18, 2022. It is now read-only.

Db #117

Open
ChinPTeo wants to merge 3 commits into
base: db
Choose a base branch
from
Open

Db #117

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3a70057
trying out css
ChinPTeo Aug 11, 2022
c4ba871
trying out more css
ChinPTeo Aug 11, 2022
e63532e
Improved styling
ChinPTeo Aug 16, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
155 changes: 85 additions & 70 deletions src/Pages/DB/DB.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,33 +3,82 @@ import React from "react";
import { useLocation } from "wouter";
import { useTranslation } from "react-i18next";
import { Disclaimer } from "./Disclaimer";
import AutoSizer from "react-virtualized-auto-sizer";
import IngameNamesJson from "../../../public/locales/IngameNames.json";

// todo use translation for char names
const charNames = IngameNamesJson.English.character_names;
type CharEntry = [keyof typeof charNames, string];

function CharCard({ charEntry }: { charEntry: CharEntry }) {
const tooLongNames = [
"Kaedehara Kazuha",
"Kamisato Ayaka",
"Raiden Shogun",
"Sangonomiya Kokomi",
"Kamisato Ayato",
"Shikanoin Heizou",
"Traveler (Anemo)",
"Traveler (Geo)",
"Traveler (Electro)",
"Traveler (Pyro)",
];
const rareCharNames = [
"amber",
"barbara",
"beidou",
"bennett",
"chongyun",
"diona",
"fischl",
"gorou",
"kaeya",
"kujousara",
"lisa",
"kuki",
"ningguang",
"noelle",
"razor",
"heizou",
"rosaria",
"sucrose",
"sayu",
"thoma",
"xiangling",
"xinyan",
"xingqiu",
"yanfei",
"yunjin",
];

const [_, setLocation] = useLocation();
const [shortName, name] = charEntry;

const legendaryCss = "bg-opacity-60 bg-[#FFB13F] ";
const rareCss = "bg-opacity-60 bg-[#D28FD6]";
return (
<div
className="hover:bg-gray-600 border border-gray-700 hover:border-gray-400 rounded-md relative"
style={{ display: "inline-block", margin: "5px" }}
onClick={() => setLocation(`/db/${shortName}`)}
>
<img
src={`/images/avatar/${shortName}.png`}
alt={name}
className="w-16"
style={{ margin: "auto" }}
/>
<div
className="top-0 right-0 text-sm font-semibold text-grey-300"
style={{ textAlign: "center" }}
>
{name}
<div className=" border-gray-700 border-2 rounded-md">
<div className="hover:opacity-50">
<div
className={rareCharNames.includes(shortName) ? rareCss : legendaryCss}
onClick={() => setLocation(`/db/${shortName}`)}
>
<img
src={`/images/avatar/${shortName}.png`}
alt={name}
className="margin-auto"
/>
</div>
<div>
{tooLongNames.includes(name) ? (
<div className="text-xs flex items-center justify-center text-center h-8 bg-slate-600 ">
{name}
</div>
) : (
<div className="text-md flex items-center justify-center text-center h-8 bg-slate-600 ">
{name}
</div>
)}
</div>
</div>
</div>
);
Expand All @@ -38,43 +87,15 @@ function CharCard({ charEntry }: { charEntry: CharEntry }) {
const LOCALSTORAGE_DISC_KEY = "gcsim-db-disclaimer-show";

function CharsView({ characters }: { characters: CharEntry[] }) {
// TODO consider removing this, idk what does it do lol
const parentRef = React.useRef<HTMLDivElement>(null!);
return (
<div className="h-full w-full pl-2 pr-2">
<AutoSizer defaultHeight={100}>
{({ height, width }) => (
<div
ref={parentRef}
style={{
minHeight: "100px",
height: height,
width: width,
overflow: "auto",
position: "relative",
}}
id="resize-inner"
>
<div
className="ListInner"
style={{
width: width - 50,
position: "relative",
}}
>
{characters.map(entry => (
<div
key={entry[0]}
style={{ display: "inline-block" }}
// ref={virtualRow.measureRef}
>
<CharCard charEntry={entry} />
</div>
))}
</div>
<div className="p-4">
<div className="grid grid-cols-3 gap-2 wide:grid-cols-12">
{characters.map((entry) => (
<div key={entry[0]}>
<CharCard charEntry={entry} />
</div>
)}
</AutoSizer>
))}
</div>
</div>
);
}
Expand Down Expand Up @@ -103,34 +124,28 @@ export function DB() {
)
: charsEntries;
return (
<main className="flex flex-col h-full m-2 w-full xs:w-full sm:w-[640px] hd:w-full wide:w-[1160px] ml-auto mr-auto ">
<div className="flex flex-col m-2 w-full xs:w-full sm:w-[640px] hd:w-full wide:w-[1160px] ml-auto mr-auto ">
<LolDanger />
<div className="flex flex-row items-center">
<div
className="ml-auto flex flex-row gap-x-1"
style={{ marginLeft: "0", marginRight: "auto" }}
>
<ShowFaqsButton setShowDisclaimer={setShowDisclaimer} />
<InputGroup
leftIcon="search"
placeholder={t("db.type_to_search")}
value={searchString}
onChange={e => setSearchString(e.target.value)}
/>
</div>
<div className=" flex flex-row gap-x-1">
<ShowFaqsButton setShowDisclaimer={setShowDisclaimer} />
<InputGroup
leftIcon="search"
placeholder={t("db.type_to_search")}
value={searchString}
onChange={(e) => setSearchString(e.target.value)}
/>
</div>
<div className="border-b-2 mt-2 border-gray-300" />
<div className="p-2 grow ">
<CharsView characters={filteredChars} />
</div>
<CharsView characters={filteredChars} />
<Disclaimer
isOpen={showDisclaimer}
onClose={() => setShowDisclaimer(false)}
hideAlways={hideDisclaimer}
/>
</main>
</div>
);
}

function ShowFaqsButton({
setShowDisclaimer,
}: {
Expand Down