gregorbiswanger/rxjs-fruits

A game for learning RxJS 🍎🍌

RxJS-fruits

RxJS-fruits is a game for learning RxJS (Reactive Extensions for JavaScript). Check it out at rxjs-fruits.com.

👨‍💻 Author

Gregor Biswanger (Microsoft MVP, Intel Black Belt and Intel Software Innovator) is a freelance lecturer, consultant, trainer, author and speaker. He is a consultant for large and medium-sized companies, organizations and agencies for software architecture, web- and cross-platform development with C# and JavaScript. His key aspects are MEAN-Stack, ASP.NET-Core, Docker, Azure, Domain-Driven Design and Microservices.

Additionally he is writing articles for known magazines and you can find attending or speaking at international conferences. Gregor Biswanger is one of the well-known .NET- and JavaScript-expert in Germany, Swiss and Austria.

• Twitter
• Homepage
• GitHub

📚 Translators

My gratitude to these contributors for localizing RxJS-Fruits. This is what open source is all about.

• Chinese Simplified by Tian-Hun
• Russian by Valentin Chernyshov
• Spanish by Andrés Villanueva Federico Levin

🙋‍♀️🙋‍♂ Contributing

Feel free to submit a pull request if you find any bugs (to see a list of active issues, visit the Issues section. Please make sure all commits are properly documented.

🧪 Working with this Repo

To write own exercises, I wrote an Angular Schematics. More information about this RxJS-fruits Schematics.

😘 A big thank you

• To @BeleEisenmann for the design of the graphics
• To @BaggersIO for the help on hardcore css pitfalls
• To some of my preview testers:
  @niklas_wortmann @ADickenscheidt @g_doroschenko @LeoFischl @hjst1979 @peterbucher @sharpcms

🙏 Sponsors

Thank you to all sponsors!

🎉 Copyright and License

Copyright 2020 Gregor Biswanger. Code released under the MIT License. Images released under Creative Commons.

rxjs-fruits's Issues

Clicking multiple times activates the next button

RFC Second Conveyor Belt

Hi,

I just peeked into the game and cannot estimate yet, if it would be a lot of work to introduce a second conveyor belt.
In my opinion that would be awesome for explaining switchMap, or the differences between say concat- vs. mergeMap.
Would you appreciate such a feature or do you think, that it complicates things too much?

Regards
Alfhir

Bug report

Steps to reproduce

• Complete last level.
• Click next button.
• Open dev-tool and you will keep receiving errors.

Note code states

add not found page

add disclaimer

Toggle the animation

Hello and thank you for the amazing work you've been doing.

As a user, I would love to toggle the animation part on and off the give more space to my code editor.

Is this something you can agree with, I may contribute with this feature if you go along with it.

Thank you and keep up the awesome work 👍

Ignore activities from the last level

Task was accomplished. Then clicked on Start again and then click the continue button. New level appears, but executes the logic from the old level.

Implement reset logic

subscription will make the belt move, take should stop the belt

https://www.rxjs-fruits.com/take

take will complete and therefore unsubscribe => belt should stop moving then.

I believe same is true with from ? :/

The given dataset for the 'skipLast, skip & merge' exercise might cause confusion

Hi @GregorBiswanger

Really enjoy how low-level the learning experience can be for RxJS.

I noticed that exercise 14 (skipLast, skip & merge) can cause confusion. Let me explain.

It is expected to only have 3 apples left after using either skipLast or skip. The usable apples are the clean and dirty ones. If we take a closer look at the array it's clear that there are more than 3 items valid. The first 3 items and the last item are valid.

const apples = from(['apple', 'dirty-apple', 'apple', 'old-apple', 'apple']);

It looks to me that the last item in the list must be and old apple as well. That would make sense looking at the operators we are allowed to use.

Regards
Ruben

Issue with level 15

Hi @GregorBiswanger

I was going through the Rxjs fruits game and very much enjoyed it while understanding it at the same time. But I seemed to have stuck at the level 15 wherein I can't figure out how to use the concatMap inside the pipe. Can you please help me with that?

Thanks

Implement Game Over Dialog

Implement Google Analytics

Translate to Spanish game levels

Translate to spanish all the games levels using the initial approach suggested by the author of the game.

Progress

• Level 1 - subscribe - PR #26
• Level 2 - subscribe-next - PR #27
• Level 3 - distinct - PR #28
• Level 4 - take - PR #30
• Level 5 - filter - PR #31
• Level 6 - map - PR #32
• Level 7 - filter-map-take - PR #33
• Level 8 - distinctuntilchanged - PR #34
• Level 9 - skip - PR #35
• Level 10 - skip-take-map - PR #36
• Level 11 -merge
• Level 12 - take-last
• Level 13 - skip-last
• Level 14 - skiplast-skip-merge
• Level 15 - zip-concatmap
• Level 16 - repeat

There is no Russian translation

Hello Gregor! I see you made support for the Russian language, but I do not see Json with a Russian translation. Maybe you forgot to add it? Also, json with a Russian translation is not present either in pull requests, or in your commits :(

Intercept opportunities to cheat

A start over/clear button?

Maybe a button that clears and resets the editor to its initial state if you found yourself going down to deep of a rabbit hole.