Leahnaya/sendou.ink
1
0
Fork 0
mirror of https://github.com/Sendouc/sendou.ink.git synced 2026-06-02 22:26:57 -05:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Extract WeaponImageSelector component

Browse Source
This commit is contained in:
Kalle 2022-12-22 21:44:32 +02:00
parent f81451b0c0
commit df7a48fd6f
1 changed files with 31 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
app/features/map-planner/components/Planner.tsx
View File

@ -31,7 +31,7 @@ const BLUEPRINTS_AVAILABLE: Partial<Record<ModeShort, Array<StageId>>> = {
};
export default function Planner() {
const { t } = useTranslation(["common", "weapons"]);
const { t } = useTranslation(["common"]);
const { i18n } = useTranslation();
const appRef = React.useRef<TldrawApp>();
const app = appRef.current!;
@ -126,25 +126,7 @@ export default function Planner() {
return (
<>
<StageBackgroundSelector onAddBackground={handleAddBackgroundImage} />
<div className="plans__weapons-section">
{mainWeaponIds.map((weaponId) => {
return (
<Button
key={weaponId}
variant="minimal"
onClick={() => handleAddWeapon(weaponId)}
>
<Image
alt={t(`weapons:MAIN_${weaponId}`)}
title={t(`weapons:MAIN_${weaponId}`)}
path={mainWeaponImageUrl(weaponId)}
width={36}
height={36}
/>
</Button>
);
})}
</div>
<WeaponImageSelector handleAddWeapon={handleAddWeapon} />
<div className="plans__powered-by">
<a href={TLDRAW_URL} target="_blank" rel="noreferrer">
{t("common:plans.poweredBy", { name: "tldraw" })}
@ -155,6 +137,35 @@ export default function Planner() {
);
}
function WeaponImageSelector({
handleAddWeapon,
}: {
handleAddWeapon: (weaponId: MainWeaponId) => void;
}) {
const { t } = useTranslation(["weapons"]);
return (
<div className="plans__weapons-section">
{mainWeaponIds.map((weaponId) => {
return (
<Button
key={weaponId}
variant="minimal"
onClick={() => handleAddWeapon(weaponId)}
>
<Image
alt={t(`weapons:MAIN_${weaponId}`)}
title={t(`weapons:MAIN_${weaponId}`)}
path={mainWeaponImageUrl(weaponId)}
width={36}
height={36}
/>
</Button>
);
})}
</div>
);
}
function StageBackgroundSelector({
onAddBackground,
}: {