grid mostly there

src/components/picture.tsx

@@ -0,0 +1,44 @@
+import * as Model from "../model";
+
+import * as React from "react";
+
+export interface Props {
+    src: string;
+    image: Model.Image;
+    onClick: () => void;
+    selected?: boolean;
+    width: number;
+}
+
+export class Picture extends React.PureComponent<Props, {}> {
+    static displayName = "Picture";
+
+    render() {
+        const src = `img/600/${this.props.src}`;
+        return <img
+            className={ this.props.selected ? "Picture-selected" : ""}
+            onClick={this.props.onClick}
+            srcSet={this._srcset()}
+            src={src}
+            width={ this.props.selected ? "100%" : this.props.width + "px" }
+        />;
+    }
+
+    private _srcset = (): string => {
+        const srcs: string[] = [];
+
+        Model.SIZES.forEach(size => {
+            const width = this.props.image.width > this.props.image.height
+                ? size
+                : this.props.image.width / this.props.image.height * size;
+
+            const scale = width / this.props.width;
+
+            if (scale >= 1) {
+                srcs.push(`img/${size}/${this.props.src} ${scale}x`);
+            }
+        });
+
+        return srcs.join(",");
+    }
+}