ttrpg-tools/src/components/md-deck/CardLayer.tsx

import {createMemo, For} from 'solid-js';
import {parseMarkdown} from '../../markdown';
import { getLayerStyle } from './hooks/dimensions';
import type { CardData, CardSide } from './types';
import {DeckStore} from "./hooks/deckStore";
import {processVariables} from "../utils/csv-loader";
import {resolvePath} from "../utils/path";

export interface CardLayerProps {
  cardData: CardData;
  store: DeckStore;
  side?: CardSide;
}

export function CardLayer(props: CardLayerProps) {
  const side = () => props.side || 'front';
  const layers = createMemo(() => 
    side() === 'front' 
      ? props.store.state.frontLayerConfigs.filter((l) => l.visible)
      : props.store.state.backLayerConfigs.filter((l) => l.visible)
  );
  const dimensions = () => props.store.state.dimensions!;
  const showBounds = () => props.store.state.isEditing;

  function renderLayerContent(content: string) {
    const iconPath = resolvePath(props.store.state.cards.sourcePath, props.cardData.iconPath ?? "./assets");
    return parseMarkdown(processVariables(content, props.cardData, props.store.state.cards), iconPath) as string;
  }

  const getAlignStyle = (align?: 'l' | 'c' | 'r') => {
    if (align === 'l') return 'left';
    if (align === 'r') return 'right';
    return 'center';
  };
  return (
    <For each={layers()}>
      {(layer) => {
        return (
          <>
            <article
              class="absolute flex flex-col items-stretch justify-center prose prose-sm"
              style={{
                ...getLayerStyle(layer, dimensions()),
                'font-size': `${layer.fontSize || 3}mm`,
                'text-align': getAlignStyle(layer.align)
              }}
              innerHTML={renderLayerContent(props.cardData[layer.prop])}
            />
            {showBounds() && (
              <div
                class="absolute border-2 border-blue-500/50 pointer-events-none select-none"
                style={{
                  left: `${(layer.x1 - 1) * dimensions().cellWidth}mm`,
                  top: `${(layer.y1 - 1) * dimensions().cellHeight}mm`,
                  width: `${(layer.x2 - layer.x1 + 1) * dimensions().cellWidth}mm`,
                  height: `${(layer.y2 - layer.y1 + 1) * dimensions().cellHeight}mm`
                }}
              />
            )}
          </>
        );
      }}
    </For>
  );
}