72 lines
2.8 KiB
TypeScript
72 lines
2.8 KiB
TypeScript
import { Comic, ComicBubble, ComicPage } from '@prisma/client';
|
|
import Image from 'next/image';
|
|
import { percentify, randomColour } from '../src/utils';
|
|
|
|
interface Props {
|
|
page: ComicPage & {
|
|
bubbles: ComicBubble[];
|
|
comic: Comic;
|
|
};
|
|
highlightedBubbles: number[] | null;
|
|
}
|
|
|
|
export default function HighlightComic(props: Props) {
|
|
return (
|
|
<div className='relative box-border inline-block select-none'>
|
|
<div className='box-border max-w-full'>
|
|
<Image
|
|
src={props.page.imageUrl}
|
|
width={props.page.width}
|
|
height={props.page.height}
|
|
alt={props.page.title}
|
|
style={{
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
}}
|
|
/>
|
|
</div>
|
|
{props.highlightedBubbles &&
|
|
props.highlightedBubbles.map((bubble) => {
|
|
return (
|
|
<div
|
|
key={bubble}
|
|
className='box-border'
|
|
aria-hidden
|
|
style={{
|
|
border: `1.5px dashed ${randomColour(
|
|
props.page.id,
|
|
0.9,
|
|
0.49,
|
|
0.5
|
|
)}`,
|
|
backgroundColor: randomColour(
|
|
props.page.id,
|
|
0.9,
|
|
undefined,
|
|
0.5
|
|
),
|
|
position: 'absolute',
|
|
left: `${percentify(
|
|
props.page.width,
|
|
props.page.bubbles[bubble].areaX
|
|
)}%`,
|
|
top: `${percentify(
|
|
props.page.height,
|
|
props.page.bubbles[bubble].areaY
|
|
)}%`,
|
|
width: `${percentify(
|
|
props.page.width,
|
|
props.page.bubbles[bubble].areaWidth
|
|
)}%`,
|
|
height: `${percentify(
|
|
props.page.height,
|
|
props.page.bubbles[bubble].areaHeight
|
|
)}%`,
|
|
}}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|