88 lines
2.4 KiB
TypeScript
88 lines
2.4 KiB
TypeScript
import jss, { StyleSheet } from "jss";
|
|
import preset from "jss-preset-default";
|
|
import { FC, useEffect, useState } from "react";
|
|
|
|
import { BackdropInfo } from "@dndbeyond/character-rules-engine/es";
|
|
|
|
import { DDB_MEDIA_URL } from "../../../../../constants";
|
|
|
|
interface BackdropStylesProps {
|
|
backdrop: BackdropInfo;
|
|
}
|
|
|
|
export const BackdropStyles: FC<BackdropStylesProps> = ({ backdrop }) => {
|
|
const [sheet, setSheet] = useState<StyleSheet | null>(null);
|
|
|
|
const renderStyleSheet = (): void => {
|
|
if (backdrop.backdropAvatarUrl !== null) {
|
|
let tempSheet = jss.createStyleSheet({});
|
|
|
|
const bodyStyles = window.getComputedStyle(document.body);
|
|
const newNavHeight = bodyStyles.getPropertyValue(
|
|
"--top-navigation-height"
|
|
);
|
|
const navHeightVar = newNavHeight
|
|
? "--top-navigation-height"
|
|
: "--ttui-site-nav-height";
|
|
|
|
if (tempSheet !== null) {
|
|
let breakpointRules: Record<string, string> = [
|
|
{ width: 768, image: backdrop.backdropAvatarUrl },
|
|
{ width: 1024, image: backdrop.backdropAvatarUrl },
|
|
{ width: 1200, image: backdrop.backdropAvatarUrl },
|
|
{
|
|
width: 1921,
|
|
image:
|
|
backdrop.smallBackdropAvatarUrl === null
|
|
? ""
|
|
: backdrop.smallBackdropAvatarUrl,
|
|
},
|
|
{
|
|
width: 2561,
|
|
image:
|
|
backdrop.largeBackdropAvatarUrl === null
|
|
? ""
|
|
: backdrop.largeBackdropAvatarUrl,
|
|
},
|
|
].reduce((acc, breakpoint) => {
|
|
acc[`@media (min-width: ${breakpoint.width}px)`] = {
|
|
background: `url(${breakpoint.image}) no-repeat center calc(var(${navHeightVar}) + var(--sheet-header-height)), url(${DDB_MEDIA_URL}/attachments/0/84/background_texture.png) #f9f9f9 !important`,
|
|
};
|
|
return acc;
|
|
}, {});
|
|
|
|
tempSheet.addRules({
|
|
"@global": {
|
|
"html body.body-rpgcharacter-sheet": breakpointRules,
|
|
},
|
|
});
|
|
|
|
tempSheet.attach();
|
|
setSheet(tempSheet);
|
|
}
|
|
}
|
|
};
|
|
|
|
const removeStyleSheet = (): void => {
|
|
if (sheet) {
|
|
jss.removeStyleSheet(sheet);
|
|
setSheet(null);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
jss.setup(preset());
|
|
renderStyleSheet();
|
|
return () => {
|
|
removeStyleSheet();
|
|
};
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
removeStyleSheet();
|
|
renderStyleSheet();
|
|
}, [backdrop]);
|
|
|
|
return null;
|
|
};
|