Play area and return behavior

[KatieWoe]

Test device
Dell
Operating System
Win 10
Browser
Chrome
Problem description
For phetsims/qa#459
The atoms floating back from being off screen seem to return to the play area. In other sims it seems like they would normally return to their buckets. Also, the area where this return is triggered is shockingly small.

Visuals

Troubleshooting information:

!!!!! DO NOT EDIT !!!!!
Name: ‪Build a Molecule‬
URL: https://phet-dev.colorado.edu/html/build-a-molecule/0.0.0-dev.23/phet/build-a-molecule_all_phet.html
Version: 0.0.0-dev.23 2019-11-20 23:29:39 UTC
Features missing: touch
Flags: pixelRatioScaling
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.97 Safari/537.36
Language: en-US
Window: 1536x722
Pixel Ratio: 2.5/1
WebGL: WebGL 1.0 (OpenGL ES 2.0 Chromium)
GLSL: WebGL GLSL ES 1.0 (OpenGL ES GLSL ES 1.0 Chromium)
Vendor: WebKit (WebKit WebGL)
Vertex: attribs: 16 varying: 30 uniform: 4096
Texture: size: 16384 imageUnits: 16 (vertex: 16, combined: 32)
Max viewport: 32767x32767
OES_texture_float: true
Dependencies JSON: {}

[arouinfar]

Looks like this matches the Java behavior. That said, this approach generally feels weird to me.

There is no reason to allow users to drag the atoms beyond the top or left side of the ?dev boundary. Similarly, there is no reason to allow atoms to be dragged below the carousel. The right side of the screen is a little trickier since we need to allow molecules to be dragged into the collection area.

Here's what I propose

• Do not let atoms be dragged outside of the green box. The left, top, and right bounds match dev, and the bottom bound is flush with the bottom of the carousel.
• If an atom or molecule is released to the right of the red dashed line and does not correspond to a matching molecule/collection, animate the return back into the play area.
• If an atom or molecule is dragged into the navy box, return the atom(s) it the corresponding bucket(s).
  

[Denz1994]

The bounds have been updated to match the mockup from above.

Note the 3rd screen uses different bounds for the carousel. It would really work out nicely (due to the above change) if the refill button could be moved to the right side of the screen. The top of the refill button would be aligned with the top of the carousel. See the mockup below.

We could also align the reset button by moving it up a bit and centering it with the refill button. This may also work out better if we iconize the refill button so i18n for the text wouldn't be a problem in that smaller space.

@arouinfar Can your review this dev version for the bound changes? Also, what are your thoughts about moving the refill button?

[arouinfar]

@Denz1994 the boundaries in dev.29 are generally looking pretty good, but things are a little funky on the 3rd screen.

This atom will get pushed into the play area.

This atom will get returned to the carousel.

Let's simplify things a bit further on the 3rd screen, and consider just two regions. If the atom is released below the magneta line (aligned to top of carousel) the atom will return to the carousel.

Another thing I've noticed is that the animation to bump the atom back into the play area feels really slow. Can we speed it up a bit @Denz1994?

We could also align the reset button by moving it up a bit and centering it with the refill button.

The refill button is being discussed in #58, and in design meeting, we had entertained the idea of layering the button on top of the carousel. We can discuss the button placement in that issue.

[Denz1994]

Hey @arouinfar can you check this dev version for the bounds on the 3rd screen?

[arouinfar]

@Denz1994 the boundaries are all looking good, but the animation speed when bumping the atom back into the play area feels slower than it needs to be. Can you speed it up?

[Denz1994]

Could you take a look at master @arouinfar? I doubled the speed.

[arouinfar]

Looks much better, thanks @Denz1994

[Denz1994]

Closing this one. The latest dev version contains these changes.