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

[darius-v]

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]

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]

Please use triple back ticks to format your code snippets

[WERT7]

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 :(