Skip to content

Commit

Permalink
🔎 Added Eyedropper tool
Browse files Browse the repository at this point in the history
  • Loading branch information
@derekkramer
derekkramer committed Nov 22, 2017
1 parent f5b5fdc commit 38e8aca
Show file tree
Hide file tree
Showing 3 changed files with 87 additions and 27 deletions.
67 changes: 50 additions & 17 deletions src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ class App extends Component {
originY: 0,
isLoading: true,
intro: true,
eyedropper: false,
palette: [
'247a23',
'30bf2e',
Expand Down Expand Up @@ -72,12 +73,14 @@ class App extends Component {
this._updatePixel = this._updatePixel.bind(this);
this._updateOffscreenCanvas = this._updateOffscreenCanvas.bind(this);
this._getDrawLocation = this._getDrawLocation.bind(this);
this.onClick = this.onClick.bind(this);
this.onPaletteClick = this.onPaletteClick.bind(this);
this._addColor = this._addColor.bind(this);
this._rgbToHex = this._rgbToHex.bind(this);
this.clearPalette = this.clearPalette.bind(this);
this._checkPickerVisibility = this._checkPickerVisibility.bind(this);
this.onIntroClick = this.onIntroClick.bind(this);
this.onEyedropperClick = this.onEyedropperClick.bind(this);
this._getColor = this._getColor.bind(this);
}

_init() {
Expand Down Expand Up @@ -223,11 +226,15 @@ class App extends Component {
let { doc, col } = this._getDocumentLocation(pixelX, pixelY);

if(pixelX >= 0 && pixelX < 500 && pixelY >= 0 && pixelY < 500) {
this._updatePixel(doc, col);
if(this.state.eyedropper) {
this._getColor(doc, col);
}else {
this._updatePixel(doc, col);

this._updateOffscreenCanvas(b, row, col);
this._updateOffscreenCanvas(b, row, col);

socket.emit('clientUpdate', doc, b, row, col, this.state.quilt[doc].color);
socket.emit('clientUpdate', doc, b, row, col, this.state.quilt[doc].color);
}
}
}

Expand Down Expand Up @@ -385,7 +392,7 @@ class App extends Component {
return { x, y };
}

onClick(event) {
onPaletteClick(event) {
if(event.target.style.backgroundColor)
this.setState({ color: this._rgbToHex(event.target.style.backgroundColor) });
}
Expand Down Expand Up @@ -450,6 +457,31 @@ class App extends Component {
this.setState({ intro: false });
}

onEyedropperClick() {
let eyedropper = document.getElementById('eyedropper');

eyedropper.className = eyedropper.className === 'eyedropper' ? 'eyedropper_down' : 'eyedropper';

document.body.style.cursor = document.body.style.cursor !== 'copy' ? 'copy' : 'auto';

this.setState(prevState => {
let eyedropper = this.state.eyedropper ? false : true;

return { eyedropper };
});
}

_getColor(doc, col) {
let quilt = this.state.quilt;
let colors = quilt[doc].color;
let getCol = col * 7;

let color = colors.substr(getCol, 7).slice(0, -1);

this.setState({ color });
this.onEyedropperClick();
}

componentDidMount() {
this._init()
.then(this._getCanvas)
Expand All @@ -468,15 +500,15 @@ class App extends Component {
: null
}
<div className='splash'>
<p>Pixel <br /> Share</p>
<p>Pixel <br /> Share<br /><span>0.1.0</span></p>
</div>
<canvas id='quilt'></canvas>
{this.state.isLoading
? <Loading/>
: null
}
<div className='palette'>
<Palette palette={this.state.palette} onClick={this.onClick} savePalette={this.savePalette} clearPalette={this.clearPalette} />
<Palette palette={this.state.palette} onPaletteClick={this.onPaletteClick} savePalette={this.savePalette} clearPalette={this.clearPalette} onEyedropperClick={this.onEyedropperClick} />
<div className='picker'>
<div>
<input type='button' id='add' value='Add to Palette' onClick={this._addColor} />
Expand All @@ -490,12 +522,10 @@ class App extends Component {
}
}

const Palette = ({ palette, onClick, clearPalette }) =>
const Palette = ({ palette, onPaletteClick, clearPalette, onEyedropperClick }) =>
<div id='paletteContainer'>
<div id='paletteButtons'>
<input type='button' value='Clear Palette' onClick={clearPalette} />
</div>
<div id='palette' onClick={onClick}>
<input type='button' value='Clear Palette' onClick={clearPalette} />
<div id='palette' onClick={onPaletteClick}>
{palette.length > 1 ?
palette.map(color => {
let id = `color${color}`;
Expand All @@ -507,20 +537,23 @@ const Palette = ({ palette, onClick, clearPalette }) =>
: null
}
</div>
<input className='eyedropper' id='eyedropper' type='button' value='&#9906;' onClick={onEyedropperClick} />
</div>

const Intro = ({ onClick }) =>
<div id="intro">
<div id="description">
Welcome to <span id="title">PixelShare</span>&nbsp;&nbsp;the online community quilt<br/><br/>
Welcome to <span id="title">PixelShare</span>&nbsp;&nbsp;the online community quilt<br/>

<span>Scroll</span>&nbsp;&nbsp;to zoom in and out<br/>

<span>Scroll</span>&nbsp;&nbsp;to zoom in and out<br/><br/>
<span>Click and drag</span>&nbsp;&nbsp;to pan around the quilt<br/>

<span>Click and drag</span>&nbsp;&nbsp;to pan around the quilt<br/><br/>
<span>Click the swatch</span>&nbsp;&nbsp;to select a custom color<br/>

<span>Click the swatch</span>&nbsp;&nbsp;to select a custom color<br/><br/>
<span>Click the&nbsp;&nbsp;&#9906;&nbsp;&nbsp;button</span>&nbsp;&nbsp;to select a color from another pixel<br/>

<span>Add to palette</span>&nbsp;&nbsp;saves the color for now &ndash; and next time<br/><br/>
<span>Add to palette</span>&nbsp;&nbsp;saves the color for now &ndash; and next time<br/>

<span>Clear palette</span>&nbsp;&nbsp;resets the palette to the original colors
</div>
Expand Down
24 changes: 19 additions & 5 deletions src/css/App.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@
padding-left: 1%;
font-family: karmaticArcade;
font-size: 2vw;
line-height: 200%;
-webkit-mask-image: linear-gradient(to top, black, rgba(0, 0, 0, 0.7) 50%, black); }
.App #intro #title {
font-size: 2.8vw; }
Expand All @@ -53,7 +54,7 @@
display: flex;
align-items: center;
justify-content: center;
margin: 7vh 0 2vh 0; }
margin: 4vh 0 2vh 0; }
.App #intro #show input[type=checkbox] {
position: relative;
width: 2%;
Expand Down Expand Up @@ -137,6 +138,11 @@
font-family: karmaticArcade;
font-size: calc(100vw / 12 - 100vh / 12);
-webkit-mask-image: linear-gradient(to top, black, rgba(0, 0, 0, 0.7) 50%, black); }
.App .splash p span {
font-size: 0.8vw;
line-height: 300%;
padding-left: 1vw;
vertical-align: top; }
.App input[type=button] {
width: 100%;
border: 1px solid #888;
Expand Down Expand Up @@ -195,6 +201,8 @@
.App #paletteContainer {
width: 7vw;
max-width: 80%;
display: flex;
flex-direction: column;
margin: 5%;
margin-bottom: auto; }
.App #paletteContainer #palette {
Expand All @@ -203,10 +211,16 @@
.App #paletteContainer #palette .color {
height: 0;
padding-top: 100%; }
.App #paletteContainer #paletteButtons {
display: flex;
flex-direction: column;
justify-content: flex-end; }
.App #paletteContainer .eyedropper {
border: 1px solid #555; }
.App #paletteContainer .eyedropper_down {
background: #bbb;
background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#bbb));
background: -webkit-linear-gradient(top, #888, #bbb);
background: -moz-linear-gradient(top, #888, #bbb);
background: -ms-linear-gradient(top, #888, #bbb);
background: -o-linear-gradient(top, #888, #bbb);
border: 1px solid #444; }
.App #quilt {
width: 100vh;
height: 100vh;
Expand Down
23 changes: 18 additions & 5 deletions src/scss/App.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@
padding-left: 1%;
font-family: karmaticArcade;
font-size: 2vw;
line-height: 200%;
-webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,.7) 50%, rgba(0,0,0,1));
}

Expand All @@ -72,7 +73,7 @@
display: flex;
align-items: center;
justify-content: center;
margin: 7vh 0 2vh 0;
margin: 4vh 0 2vh 0;

input[type=checkbox] {
position: relative;
Expand Down Expand Up @@ -167,6 +168,13 @@
font-family: karmaticArcade;
font-size: calc(100vw / 12 - 100vh / 12);
-webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,.7) 50%, rgba(0,0,0,1));

span {
font-size: 0.8vw;
line-height: 300%;
padding-left: 1vw;
vertical-align: top;
}
}
}

Expand Down Expand Up @@ -233,6 +241,8 @@
#paletteContainer {
width: 7vw;
max-width: 80%;
display: flex;
flex-direction: column;
margin: 5%;
margin-bottom: auto;

Expand All @@ -246,10 +256,13 @@
}
}

#paletteButtons {
display: flex;
flex-direction: column;
justify-content: flex-end;
.eyedropper {
border: 1px solid #555;
}

.eyedropper_down {
@include background-gradient(#888, #bbb);
border: 1px solid #444;
}
}

Expand Down

0 comments on commit 38e8aca

Please sign in to comment.