47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
import type { CoverSprite } from "@ben-to/builder/domain";
|
||
import { publicAssetHref } from "./public-asset";
|
||
|
||
/**
|
||
* Tuile d’une planche de sprites via `<img>` + décalage (plus fiable que `background-image` avec le runtime Solid).
|
||
*/
|
||
export const SpriteTile = (props: Readonly<{ sprite: CoverSprite; size?: number; class?: string }>) => {
|
||
const size = () => props.size ?? 32;
|
||
const scale = () => size() / props.sprite.cell;
|
||
const imgW = () => Math.round(props.sprite.sheetWidth * scale());
|
||
const imgH = () => Math.round(props.sprite.sheetHeight * scale());
|
||
const offsetLeft = () => Math.round(-props.sprite.col * size());
|
||
const offsetTop = () => Math.round(-props.sprite.row * size());
|
||
return (
|
||
<span
|
||
class={props.class}
|
||
aria-hidden="true"
|
||
style={{
|
||
display: "block",
|
||
width: `${size()}px`,
|
||
height: `${size()}px`,
|
||
overflow: "hidden",
|
||
position: "relative",
|
||
"flex-shrink": "0"
|
||
}}
|
||
>
|
||
<img
|
||
src={publicAssetHref(props.sprite.sheet)}
|
||
alt=""
|
||
width={imgW()}
|
||
height={imgH()}
|
||
draggable={false}
|
||
decoding="async"
|
||
style={{
|
||
position: "absolute",
|
||
left: `${offsetLeft()}px`,
|
||
top: `${offsetTop()}px`,
|
||
"max-width": "none",
|
||
width: `${imgW()}px`,
|
||
height: `${imgH()}px`,
|
||
"image-rendering": "pixelated"
|
||
}}
|
||
/>
|
||
</span>
|
||
);
|
||
};
|