04a movementpx

[PeterBreen]

Fixes #4 - movement is now calculated with px values, not percent. Pixel boundaries (window height/width) are calculated by the <App /> parent component with an event listener for resize and passed as a prop to each <Dopefish />.

Previously, movement speed was fine-tuned by modifying an interval value in each Dopefish component's state, where interval was the percentage to change position each tick (which was hardcoded at 50ms between ticks). Now, however, each tick is hardcoded to move 1px at a time and the interval - renamed tickInterval determines the number of milliseconds between ticks. Modifying tickInterval will modify movement speed. The default value is 20, for 20ms.

Similarly, with the window height/width values available, position calculations are no longer percent based - each Dopefish component will now take a prop from the parent App container giving windowHeight and windowWidth (which will change if the window is resized, so it can handle resize events automatically) and use these to calculate current x/y position and target position. This could use some testing on high-DPI and low-DPI large monitors to fine-tune the interval in ms, but reducing from 50ms to 20ms is a good enough start.

Technically, this does mean the app will have very odd behavior in a window with dimensions equal to or smaller than 20x20px. 😄

Unlike percent-based coordinates, the component handles resize by allowing fish to potentially go off-screen to reach a target coordinate set. See #24 for details.