diff options
author | Martin Ashby <martin@martin-laptop.lan> | 2018-06-02 09:46:43 +0100 |
---|---|---|
committer | Martin Ashby <martin@martin-laptop.lan> | 2018-06-02 09:46:43 +0100 |
commit | 4a353d95f6d2dd8a9841bdae6f0721f5b014599e (patch) | |
tree | c0f039c5e7711d1163f641117b8f5548ab8d282f /src/FrameControl.js | |
parent | 76180c302197e83a257b975394768e5affa4054e (diff) | |
parent | 4a9b96e5cc8bf822bf3b2860b175f446cb45f98a (diff) | |
download | unicornpaint-4a353d95f6d2dd8a9841bdae6f0721f5b014599e.tar.gz unicornpaint-4a353d95f6d2dd8a9841bdae6f0721f5b014599e.tar.bz2 unicornpaint-4a353d95f6d2dd8a9841bdae6f0721f5b014599e.tar.xz unicornpaint-4a353d95f6d2dd8a9841bdae6f0721f5b014599e.zip |
Merge branch 'master' of github.com:MFAshby/unicornpaint
Diffstat (limited to 'src/FrameControl.js')
-rw-r--r-- | src/FrameControl.js | 56 |
1 files changed, 56 insertions, 0 deletions
diff --git a/src/FrameControl.js b/src/FrameControl.js new file mode 100644 index 0000000..45db5d4 --- /dev/null +++ b/src/FrameControl.js @@ -0,0 +1,56 @@ +import React, { Component } from 'react' +import { rgb, getPixel } from './Utils' + +class FramePreview extends Component { + render() { + let width = this.props.pixels.length + let height = this.props.pixels[0].length + + let rows = [] + for (var y=height-1; y>=0; y--) { + let cells = [] + for (var x=0; x<width; x++) { + let {r, g, b} = rgb(getPixel(x, y, this.props.pixels)) + cells.push(<td + style={{ + background: `rgb(${r},${g},${b})`, + ...styles.previewPixel + }}/>) + } + rows.push(<tr key={y}>{cells}</tr>) + } + + let bgColor = this.props.selected ? "red" : "grey" + return <table onClick={this.props.onClick} style={{background: bgColor}}><tbody> {rows} </tbody></table> + } +} + +export default class FrameControl extends Component { + // frames: [] + // selectedFrame: number + render() { + // A series of divs, 1 per frame, + let frames = this.props.frames + let selectedFrame = this.props.selectedFrame + let framePreviews = frames.map((frame, ix) => + <div> + <span>Frame {ix+1}</span> + <FramePreview + pixels={frame} + selected={ix === this.props.selectedFrame} + onClick={() => this.props.onFrameSelected(ix)}/> + </div>) + return <div style={styles.previewContainer}>{framePreviews}</div> + } +} + +const styles = { + previewcontainer: { + }, + previewTable: { + }, + previewPixel: { + width: "4px", + height: "4px", + } +}
\ No newline at end of file |