this.props.onSelectColor([r, g, b])} + style={{background: `rgb(${r},${g},${b})`}} + className={className} + key={r*10000+g*1000+b}/> + }) + return ( +

+ {paletteListItems} +

) + } +} + +class PaintArea extends Component { + constructor(props) { + super(props) + this.handleMouseMove = this.handleMouseMove.bind(this) + + this._onMouseDown = this._onMouseDown.bind(this) + this._onMouseUp = this._onMouseUp.bind(this) + this.state = { + mouseDown: false + } + } + + _onMouseDown() { + this.setState({ mouseDown: true }) + } + + _onMouseUp() { + this.setState({ mouseDown: false }) + } + + componentWillMount() { + document.addEventListener('mousedown', this._onMouseDown) + document.addEventListener('mouseup', this._onMouseUp) + } + + componentWillUnmount() { + document.removeEventListener('mousedown', this._onMouseDown) + document.removeEventListener('mouseup', this._onMouseUp) + } + + handleMouseMove(x, y) { + if (this.state.mouseDown) { + this.props.onTool(x, y) + } + } + + render() { + let cells = this.props.data.map((row, iy) => { + let rowCells = row.map((cell, ix) => { + let r = cell[0] + let g = cell[1] + let b = cell[2] + return this.handleMouseMove(ix, iy)} + onClick={() => this.props.onTool(ix, iy)} + className="paintareacell" + style={{ + background: `rgb(${r},${g},${b})` + }} + key={(ix * 100000) + iy}/> + }) + return {rowCells} + }) + + return ( + + + {cells} + +

+ ) + } +} + +class App extends Component { + constructor(props) { + super(props) + + this.state = { + connected: false, + pixels: [], + selectedColor: [0, 0, 0] + } + this._connectWebsocket = this._connectWebsocket.bind(this) + this._onMessage = this._onMessage.bind(this) + this._onOpen = this._onOpen.bind(this) + this._onClose = this._onClose.bind(this) + this._onError = this._onError.bind(this) + + this.paintCell = this.paintCell.bind(this) + this._connectWebsocket() + } + + _onMessage({data}) { + let pixels = JSON.parse(data) + pixels.forEach(row => { + let rowNums = row.map((col) => col.some((it) => it > 0)) + console.log(...rowNums) + }); + + this.setState({ + pixels: pixels + }) + } + + _onOpen() { + this.setState({connected: true}) + noop(this._websocket) + } + + _onClose() { + this.setState({connected: false}) + this._connectWebsocket() + } + + _onError() { + this.setState({connected: false}) + this._connectWebsocket() + } + + _connectWebsocket() { + this._websocket = new WebSocket('ws://' + window.location.hostname + ':3001/ws') + this._websocket.onmessage = this._onMessage + this._websocket.onopen = this._onOpen + this._websocket.onclose = this._onClose + this._websocket.onerror = this._onError + } + + paintCell(x, y) { + let { r, g, b } = rgb(this.state.selectedColor) + setPixel(this._websocket, x, y, r, g, b) + } + + render() { + let connectedText = this.state.connected ? "Connected" : "Not connected" + return ( +

+ {connectedText} +

+ + this.setState({selectedColor: color})} /> +

+ ); + } +} + +export default App; diff --git a/src/App.test.js b/src/App.test.js new file mode 100644 index 0000000..a754b20 --- /dev/null +++ b/src/App.test.js @@ -0,0 +1,9 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App'; + +it('renders without crashing', () => { + const div = document.createElement('div'); + ReactDOM.render(, div); + ReactDOM.unmountComponentAtNode(div); +}); diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..b4cc725 --- /dev/null +++ b/src/index.css @@ -0,0 +1,5 @@ +body { + margin: 0; + padding: 0; + font-family: sans-serif; +} diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..fae3e35 --- /dev/null +++ b/src/index.js @@ -0,0 +1,8 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import './index.css'; +import App from './App'; +import registerServiceWorker from './registerServiceWorker'; + +ReactDOM.render(, document.getElementById('root')); +registerServiceWorker(); diff --git a/src/logo.svg b/src/logo.svg new file mode 100644 index 0000000..6b60c10 --- /dev/null +++ b/src/logo.svg @@ -0,0 +1,7 @@ + diff --git a/src/registerServiceWorker.js b/src/registerServiceWorker.js new file mode 100644 index 0000000..a3e6c0c --- /dev/null +++ b/src/registerServiceWorker.js @@ -0,0 +1,117 @@ +// In production, we register a service worker to serve assets from local cache. + +// This lets the app load faster on subsequent visits in production, and gives +// it offline capabilities. However, it also means that developers (and users) +// will only see deployed updates on the "N+1" visit to a page, since previously +// cached resources are updated in the background. + +// To learn more about the benefits of this model, read https://goo.gl/KwvDNy. +// This link also includes instructions on opting out of this behavior. + +const isLocalhost = Boolean( + window.location.hostname === 'localhost' || + // [::1] is the IPv6 localhost address. + window.location.hostname === '[::1]' || + // 127.0.0.1/8 is considered localhost for IPv4. + window.location.hostname.match( + /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ + ) +); + +export default function register() { + if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { + // The URL constructor is available in all browsers that support SW. + const publicUrl = new URL(process.env.PUBLIC_URL, window.location); + if (publicUrl.origin !== window.location.origin) { + // Our service worker won't work if PUBLIC_URL is on a different origin + // from what our page is served on. This might happen if a CDN is used to + // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374 + return; + } + + window.addEventListener('load', () => { + const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; + + if (isLocalhost) { + // This is running on localhost. Lets check if a service worker still exists or not. + checkValidServiceWorker(swUrl); + + // Add some additional logging to localhost, pointing developers to the + // service worker/PWA documentation. + navigator.serviceWorker.ready.then(() => { + console.log( + 'This web app is being served cache-first by a service ' + + 'worker. To learn more, visit https://goo.gl/SC7cgQ' + ); + }); + } else { + // Is not local host. Just register service worker + registerValidSW(swUrl); + } + }); + } +} + +function registerValidSW(swUrl) { + navigator.serviceWorker + .register(swUrl) + .then(registration => { + registration.onupdatefound = () => { + const installingWorker = registration.installing; + installingWorker.onstatechange = () => { + if (installingWorker.state === 'installed') { + if (navigator.serviceWorker.controller) { + // At this point, the old content will have been purged and + // the fresh content will have been added to the cache. + // It's the perfect time to display a "New content is + // available; please refresh." message in your web app. + console.log('New content is available; please refresh.'); + } else { + // At this point, everything has been precached. + // It's the perfect time to display a + // "Content is cached for offline use." message. + console.log('Content is cached for offline use.'); + } + } + }; + }; + }) + .catch(error => { + console.error('Error during service worker registration:', error); + }); +} + +function checkValidServiceWorker(swUrl) { + // Check if the service worker can be found. If it can't reload the page. + fetch(swUrl) + .then(response => { + // Ensure service worker exists, and that we really are getting a JS file. + if ( + response.status === 404 || + response.headers.get('content-type').indexOf('javascript') === -1 + ) { + // No service worker found. Probably a different app. Reload the page. + navigator.serviceWorker.ready.then(registration => { + registration.unregister().then(() => { + window.location.reload(); + }); + }); + } else { + // Service worker found. Proceed as normal. + registerValidSW(swUrl); + } + }) + .catch(() => { + console.log( + 'No internet connection found. App is running in offline mode.' + ); + }); +} + +export function unregister() { + if ('serviceWorker' in navigator) { + navigator.serviceWorker.ready.then(registration => { + registration.unregister(); + }); + } +} diff --git a/src/unicorn.html b/src/unicorn.html new file mode 100644 index 0000000..35cc5aa --- /dev/null +++ b/src/unicorn.html @@ -0,0 +1,345 @@ + + + + + Unicorn Paint + + + + + + +

Unicorn Paint

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

+ + + + + + + -- cgit v1.2.3-ZIG