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

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

flexboxdefense.com

243 pointsChanningAllen42 comments

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 center instead of on the right.

Edit: Here's the Firefox bug https://bugzilla.mozilla.org/show_bug.cgi?id=874718

Same deal in Iceweasel 41.0 - thought I was missing something crucial!

Can someone explain to me why this only happens on linux?

No, because it's not a Linux only bug. There's a Mac OS X report below, which I can confirm.

Ah, thanks for the tip. Looking into it.

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

Just put in a fix which works on Mac OS X and should work on Linux as well.

Unless I'm crazy, wave 6 requires align-self on the individual items, which is not mentioned in the help boxes, ever.

Or am I missing something, and not adjusting individual items would still work there?

Edit: Yeah, I'm missing something. /headdesk :)

align-items: center; justify-content: space-between;

seems to work.

and align-self is mentioned on wave 10.

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.

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

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 :).

There's now a "Cancel Wave" button that should address the first of your issues...

Definitely helpful to understanding flexbox. It took me a while to notice the help '?' icon to bring the tooltip back up.

On Wave 3, "justify-content: space-between" appears to position incorrectly on Firefox 44 on OS X: http://i.imgur.com/nx6hROH.png

On Chrome, it positions the turrets on the edges as expected.

EDIT: Looks like evunveot noticed the same in Linux and linked to the Firefox bug.

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.

It's awkward because CSS offers no good way to talk about the relationship between two things (it's very much 'one thing at a time'), whereas relationships between things are pretty much all layout is about.

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.

Cool game, but switching tabs breaks the game, you lose all points you didn't yet earn.

Another fun 'learn flexbox' games is Flexbox Froggy

http://flexboxfroggy.com

This is awesome. I'd love to be able to move the towers around during the waves for some more challenging levels.

Thanks! Yep, the idea was to get about 10 or so basic learning levels in and then to add some "challenge" levels, with features like the one you mentioned.

Even better: allow using CSS transitions to make moving turrets.

Good point actually; you could extend this with a number of properties to make an awesome learn-while-you-play td game for CSS more generally... keep us posted ;)

Sometimes, the box where you input the CSS rules will shake when you click on the hint box. Not sure if this is supposed to happen or not, but it was unexpected from me.

Otherwise, I thought this was pretty neat and very informative. Good job and thanks for sharing!

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.

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

This is fantastic as I've just started learning flex-boxes, I did have one problem using it, there's no stop button once the circles start flowing!

Fixed!

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.

This is fantastic! I would love to be able to bring back the helpful modal at the beginning of each turn, as a refresher on the options.

There is a "?" button in the top right of every stylesheet that brings the modal back up, but I'm also in the process of adding tool tips that are more obvious and always available.

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

This is great. I have been meaning to learn the CSS flex box model and thanks to this game it took only a few minutes!

Pretty cool. Buggy when changing tabs and I wish there were a speedup button (I don't like tower defence games).

Great tutorial !

This is great!!

Reply on news.ycombinator.com