Add creature thumbnails.

pull/220/head
Atul Varma 2021-08-30 09:05:12 -04:00
rodzic c98f121c61
commit 2c8f517d8a
2 zmienionych plików z 87 dodań i 8 usunięć

Wyświetl plik

@ -0,0 +1,19 @@
.gallery-thumbnail {
width: 320px;
height: 240px;
}
.gallery-thumbnail.is-empty {
background-color: lightgray;
}
.gallery-item {
display: inline-block;
border: 1px solid black;
margin-right: 1em;
margin-bottom: 1em;
}
.gallery-item p {
margin: 1em;
}

Wyświetl plik

@ -1,7 +1,18 @@
import React, { useContext, useEffect } from "react";
import React, { useContext, useEffect, useRef } from "react";
import { AutoSizingSvg } from "../auto-sizing-svg";
import {
CreatureContext,
CreatureContextType,
CreatureSymbol,
} from "../creature-symbol";
import { GalleryComposition, GalleryContext } from "../gallery-context";
import { Page } from "../page";
import { createPageWithStateSearchParams } from "../page-with-shareable-state";
import { svgScale, SvgTransform } from "../svg-transform";
import { CreatureDesign } from "./creature-page/core";
import { deserializeCreatureDesign } from "./creature-page/serialization";
import "./gallery-page.css";
function compositionRemixUrl(comp: GalleryComposition): string {
return (
@ -10,14 +21,63 @@ function compositionRemixUrl(comp: GalleryComposition): string {
);
}
const GalleryCompositionView: React.FC<GalleryComposition> = (props) => {
const THUMBNAIL_CLASS = "gallery-thumbnail canvas";
const EmptyThumbnail: React.FC = () => (
<div className={THUMBNAIL_CLASS + " is-empty"}></div>
);
const CreatureThumbnail: React.FC<{ design: CreatureDesign }> = (props) => {
const svgRef = useRef<SVGSVGElement>(null);
const ctx: CreatureContextType = {
...useContext(CreatureContext),
...props.design.compCtx,
};
const { background } = props.design.compCtx;
return (
<p>
<a href={compositionRemixUrl(props)} target="_blank">
{props.title}
</a>{" "}
{props.kind} by {props.ownerName}
</p>
<div className={THUMBNAIL_CLASS} style={{ backgroundColor: background }}>
<CreatureContext.Provider value={ctx}>
<AutoSizingSvg padding={10} ref={svgRef} bgColor={background}>
<SvgTransform transform={svgScale(0.2)}>
<CreatureSymbol {...props.design.creature} />
</SvgTransform>
</AutoSizingSvg>
</CreatureContext.Provider>
</div>
);
};
function getThumbnail(gc: GalleryComposition): JSX.Element {
if (gc.kind === "creature") {
let design: CreatureDesign;
try {
design = deserializeCreatureDesign(gc.serializedValue);
} catch (e) {
console.log(`Could not deserialize creature "${gc.title}"`, e);
return <EmptyThumbnail />;
}
return <CreatureThumbnail design={design} />;
}
return <EmptyThumbnail />;
}
const GalleryCompositionView: React.FC<GalleryComposition> = (props) => {
const thumbnail = getThumbnail(props);
const url = compositionRemixUrl(props);
return (
<div className="gallery-item">
<a href={url} target="_blank">
{thumbnail}
</a>
<p>
<a href={url} target="_blank">
{props.title}
</a>{" "}
{props.kind} by {props.ownerName}
</p>
</div>
);
};