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

Re:Show HN: Flexbox Defense – learn CSS flexbox by playing a... by ChanningAllen on Wednesday March 02, 2016 @05:27PM (#11213548)

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

[ Parent | on HN ]

Re:Show HN: Flexbox Defense – learn CSS flexbox by playing a... by evunveot on Wednesday March 02, 2016 @06:29PM (#11213932)

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

[ Parent | on HN ]

Re:Show HN: Flexbox Defense – learn CSS flexbox by playing a... by ChanningAllen on Thursday March 03, 2016 @04:38PM (#11220243)

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

[ Parent | on HN ]

Re:Show HN: Flexbox Defense – learn CSS flexbox by playing a... by eponeponepon on Wednesday March 02, 2016 @07:02PM (#11214092)

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

[ Parent | on HN ]

Re:Show HN: Flexbox Defense – learn CSS flexbox by playing a... by sethish on Wednesday March 02, 2016 @07:29PM (#11214214)

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

[ Parent | on HN ]

Re:Show HN: Flexbox Defense – learn CSS flexbox by playing a... by labster on Wednesday March 02, 2016 @07:53PM (#11214309)

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

[ Parent | on HN ]

Re:Show HN: Flexbox Defense – learn CSS flexbox by playing a... by ChanningAllen on Wednesday March 02, 2016 @07:56PM (#11214320)

Ah, thanks for the tip. Looking into it.

[ Parent | on HN ]

Re:Show HN: Flexbox Defense – learn CSS flexbox by playing a... by foggy80 on Thursday March 03, 2016 @05:04AM (#11215941)

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

[ Parent | on HN ]

Re:Show HN: Flexbox Defense – learn CSS flexbox by playing a... by rootlocus on Thursday March 03, 2016 @03:38AM (#11215685)

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.

[ Parent | on HN ]

Re:Show HN: Flexbox Defense – learn CSS flexbox by playing a... by groby_b on Wednesday March 02, 2016 @09:05PM (#11214583)

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

[ Parent | on HN ]

Re:Show HN: Flexbox Defense – learn CSS flexbox by playing a... by littleajax on Wednesday March 02, 2016 @09:12PM (#11214605)

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

seems to work.

and align-self is mentioned on wave 10.

[ Parent | on HN ]

Re:Show HN: Flexbox Defense – learn CSS flexbox by playing a... by molsson on Thursday March 03, 2016 @05:53AM (#11216086)

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

[ Parent | on HN ]