Add creature thumbnails.
rodzic
c98f121c61
commit
2c8f517d8a
|
@ -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;
|
||||
}
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
Ładowanie…
Reference in New Issue