comicbox/components/HighlightComic.tsx

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>
    );
}