Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

32 answer had opened 33 task while I had wrongly implemented code #142

Open
darius-v opened this issue Mar 27, 2016 · 3 comments
Open

32 answer had opened 33 task while I had wrongly implemented code #142

darius-v opened this issue Mar 27, 2016 · 3 comments

Comments

@darius-v
Copy link

So as title says - I did it wrong, but - the drag was not working, but I saw 33 had openened like I had done right.

My drag was implemented like this:
`
function(sprite, spriteContainer) {

// imagine mouse downs is array
var spriteMouseDowns = Observable.fromEvent(sprite, "mousedown"),

  // mouse moves is array 
    spriteContainerMouseMoves = Observable.fromEvent(spriteContainer, "mousemove"),

  // mouse ups is array
    spriteContainerMouseUps = Observable.fromEvent(spriteContainer, "mouseup"),
    spriteMouseDrags =
        // For every mouse down event on the sprite...
  spriteMouseDowns.map(function(mouseEvent){

    console.log(mouseEvent);

    return spriteContainerMouseMoves

  }).takeUntil(spriteContainerMouseUps.take(1));
            // --------------------------------------------------------
            //                    INSERT CODE HERE
            // --------------------------------------------------------
            // Complete this expression...
            // For every mouse down event, return the mouse move event
            // sequence until a mouse up event occurs.

// For each mouse drag event, move the sprite to the absolute page position.
spriteMouseDrags.forEach(function(dragPoint) {
    sprite.style.left = dragPoint.pageX + "px";
    sprite.style.top = dragPoint.pageY + "px";
});

spriteContainerMouseUps.forEach(function(event) {
console.log('up', event);
})

spriteContainerMouseMoves.forEach(function(event) {
console.log('move', event);
})

}
`

@darius-v
Copy link
Author

darius-v commented Mar 27, 2016

Now I am not sure if I would have done the excersize myself, but I tried to analise and understand the answer.

Hard part is to solve the task comparing to arrays because we cannot log sequence to the console like array. Maybe we can do that by forearhing or subscribing to the observable. But first time doing that task its not obvious. So I had a question - why concatMap instead of map. Besides that with videos there was example of using concatMap. And I thinked and came to this:

Why concatMap instead of map?
I guess its this: if we imagine that mouse downs is array [d1, d2, …]
We map this array to arrays of mouse moves, so it starts looking like this:

[
[move11, move12, ...],
[move21, move22, ...],
]

So we call concatALl and get array looking like

[move11, move12, …, move21, move22, ... ]

The drag is single sequence even if we had many mouse down and mouse up events.
If we do not use concatAll and would subscribe like this:

var subscription = spriteMouseDrags.subscribe(
  function (x) {
    console.log( x);  // this becomes not single event but ‘array’ and we see it in console like this: AnonymousObservable {} 
// and we can subscribe to it and the drag will not work even without concatAll() 
    x.subscribe(function(dragPoint){
      console.log(dragPoint);


  sprite.style.left = dragPoint.pageX + "px";
      sprite.style.top = dragPoint.pageY + "px";

});


  },
  function (err) {
    console.log('Error: %s', err);
  },
  function () {
    console.log('Completed');
  });

So I guess before 32 excersize you could make some bit easier excersizes still so the user could learn to imagine the sequence as an array, how to print it for debugging.

Also for me it helped looking at concatAll documentation:
https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/concatall.md

And btw I hade MD code highlightint not working >:( of course its not your fault but github fault. Even stak overflow works better. Or MD fault that its not so user friendly and I need to dig at documentation how to damn syntax highlight. >:(

But thanks for good tutorial, so far its best of what I have found, tried. At first I did not try it, but tried another because it looked too simple like using map - wtf, its not hard and I learn nothing i thought. But then came back to this, because others were to hard to understand of not enough examplination.
And also the design looked old school, so false impression - bad design , bad quality of content :D which is why internet apps have to have good design I start to believe even more.

@morenoh149
Copy link
Collaborator

Please use triple back ticks to format your code snippets

@WERT7
Copy link

WERT7 commented May 3, 2018

Today no matter what you've written, next exercise will be unlocked as soon as you reload the page. This is indeed needed because almost each of the tasks doesn't work :(

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants