Show HN: Flexbox Defense – learn CSS flexbox by playing a tower defense game • Hacker News Board

Re: Show HN: Flexbox Defense – learn CSS flexbox by playing a tower defense game

#31

Post by rootlocus » Thu, Mar 03, 2016, 8:38 AM UTC

ChanningAllen wrote: post #2

Hey, author here. I've always been a big fan of tower defense games so I thought it would be cool to make an open-source version of the game for teaching basic Flexbox properties. It's also a project that's helped me learn Ember.js. The code is on GitHub: https://github.com/channingallen/tower-defense

A suggestion: don't wiggle the editor when there's a problem, or move the help icon outside. I wanted to check the "?" icon a couple of times, but couldn't click it because it was wiggling with the editor.

It's really frustrating.

Re: Show HN: Flexbox Defense – learn CSS flexbox by playing a tower defense game

#32

Post by ChanningAllen » Thu, Mar 03, 2016, 9:01 AM UTC

unholiness wrote: post #28

ChanningAllen wrote: post #22

Earlier quoted context omitted.

The input boxes run a validation check whenever the user presses enter or focuses out of them; if this check determines the input value to be invalid, the stylesheet will shake. In your case, you were probably typing some input before you clicked the hint box, thus focusing out of the input and invoking the validation check.

Okay, but this validation happens instead of opening the help dialog. Whatever event triggers there eats the button click. When typing an incorrect input, the first place a user will go to fix it is the help. It's a bit of a catch-22 when the help button will only help you after you fix your typos.

Hm, I see what you mean. Others have brought this up as well. I'll move the fix up in the queue.

Re: Show HN: Flexbox Defense – learn CSS flexbox by playing a tower defense game

#33

Post by foggy80 » Thu, Mar 03, 2016, 10:04 AM UTC

evunveot wrote: post #5

ChanningAllen wrote: post #2

Hey, author here. I've always been a big fan of tower defense games so I thought it would be cool to make an open-source version of the game for teaching basic Flexbox properties. It's also a project that's helped me learn Ember.js. The code is on GitHub: https://github.com/channingallen/tower-defense

In Firefox on Linux (44.0.2), Wave 3 don't seem to be working as intended because for the second tower group you've got: div.board__tower-group div.tower-group__tower div.tower-group__tower div.board__tower-group--body and, even though it's `position:absolute`, Firefox is taking that third child into account when applying `justify-content:space-between`, placing the first tower on the left and the second in the cente…

It didn't work in Firefox on Windows 10 either.

Re: Show HN: Flexbox Defense – learn CSS flexbox by playing a tower defense game

#34

Post by progx » Thu, Mar 03, 2016, 10:09 AM UTC

d0m wrote: post #8

Awesome tutorial! I feel like flexbox could have been so much simpler.. I mean, there's a reason why there are so many "Learn flexbox tutorial" out there. Like, "justify-content: flex-end" won't win any API award.

And why not a simple "end" instead of "flex-end"... less to type and in context of "display: flex" obvious.

We will never know, but millions of developers must type it for years.

Re: Show HN: Flexbox Defense – learn CSS flexbox by playing a tower defense game

#35

Post by molsson » Thu, Mar 03, 2016, 10:53 AM UTC

ChanningAllen wrote: post #2

Hey, author here. I've always been a big fan of tower defense games so I thought it would be cool to make an open-source version of the game for teaching basic Flexbox properties. It's also a project that's helped me learn Ember.js. The code is on GitHub: https://github.com/channingallen/tower-defense

This is just awesome! Huge thanks for teaching me flexbox today.

Re: Show HN: Flexbox Defense – learn CSS flexbox by playing a tower defense game

#36

Post by M4v3R » Thu, Mar 03, 2016, 10:55 AM UTC

ChanningAllen wrote: post #17

jtokoph wrote: post #9

Very cool! Would love to be able to stop mid wave and tweak a mistake instead of waiting for the whole thing to finish/refresh. Sucks having to retype my rules all over again too.

Aye — implementing a "Restart Wave" button as we speak.

While you're at it, a "Speed up" button would be handy as well :).

Re: Show HN: Flexbox Defense – learn CSS flexbox by playing a tower defense game

#37

Post by Vignitus » Thu, Mar 03, 2016, 12:03 PM UTC

Great tutorial !

Re: Show HN: Flexbox Defense – learn CSS flexbox by playing a tower defense game

#38

Post by Rezouce » Thu, Mar 03, 2016, 1:21 PM UTC

It's a fun way to learn flexbox. You should think to add an autocomplete helper when typing the flexbox properties.

Re: Show HN: Flexbox Defense – learn CSS flexbox by playing a tower defense game

#39

Post by Flimm » Thu, Mar 03, 2016, 1:30 PM UTC

This is cool, I'm looking forwarding to the next waves to be released, as I would love to try other properties like flex-grow and flex-shrink.

Re: Show HN: Flexbox Defense – learn CSS flexbox by playing a tower defense game

#40

Post by song » Thu, Mar 03, 2016, 1:35 PM UTC

Really fun, I enjoyed playing all the waves... Would definitely be cool to have more challenge levels with maybe css transitions to move the tower while the wave is happening :-)