channingallen / tower-defense Goto Github PK

I get that it's supposed to teach the flex-direction rule specifically, but flex-flow is a lot less awkward to write (plus it's more practical if you have a specific wrap value to specify).

I think space-between could be linked to this song: https://youtu.be/uiVav5nBmOE?t=25

When a modal opens it would be nice if one of its buttons was focussed so that the modal can be dismissed without reaching for the mouse.

While arranging the towers, the browser is working but when during waves the tab randomly crashes and I have to reload.

Chrome Version 53.0.2785.143 (64-bit)
OS: Fedora 24

Great job on the instructional game, I really like it!

However, it's important to understand how justify-content really works. Your explanation for the first wave states justify-content positions a container's items horizontally [...], which is not entirely correct. This is only true, as long as the main-axis is the horizontal axis, meaning flex-direction: row or flex-direction: row-reverse. Changing flex-direction to column also changes the main-axis and therefore the justify-content (and align-items) behavior.

Would be great to add a level wich teaches that differentiation.

The CSS justify-content property defines how the browser distributes space between and around flex items along the main-axis of their container. (https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)

The flex-direction CSS property specifies how flex items are placed in the flex container defining the main axis and the direction (normal or reversed). (https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction)

iPad Pro, latest gen, under safari. Looks like the engine is assuming that wall time is simulation time. When the iPad drops time the towers jump ahead and you can’t beat the first level even. I’m guessing if the engine was taking into account the dropped time it would work correctly or maybe it’s an issue of high load causing safari to suspend processing.

The property does not apply when the colon is preceded by a space.

Please add Open Graph tags to make it looks nicer when sharing via Facebook (and other sites that now interpret them) - maybe also Twitter Card tags?

I love this project, just donated. Would be great to see support for more flexbox features like flex-wrap, flex-grow, flex-shrink, etc.

Using Firefox 44.0.2 on Windows nothing happens when I click on the question mark icon in the stylesheet. (Nothing shows up in the console either.)

Really like this project. It would be even better if you could add an option to disable/hide the hints. That way, learners can test if they REALLY understand everything.

This is really cool, shared it with my team and they love it. We're an Ember shop and we'd love to grab lunch with you sometime!

When I was on level 9, "flex-direction: row-reverse;" has no effect on the first row.

The second row works fine with it though.

Great game though.

I wish aborting a wave wouldn’t clear all inputs. All I had to do was switch a single property.

(I still enjoyed the game.)

Recent changes to the flexbox spec exclude absolutely-positioned elements from the flex layout, but a prior version required them to be handled with a zero-size placeholder.

Each tower group has an absolutely-positioned child to make the pulse effect work. Unfortunately, since Firefox still hasn't implemented the latest flexbox spec, this breaks the spacing for justify-content: space-between and space-around. Since those are critical in the first few levels, the game is pretty much unusable in Firefox.

A simple fix would be to make a new wrapper for the tower group that contains two children: the absolutely-positioned background element and the display: flex container that the towers will go in (the one the user styles).

I believe this workaround would be made in /app/components/td-game/board/tower-group/template.hbs. I'd make a pull request, but not having done much Ember dev myself I'm not sure the cleanest way to add the wrapper element.

I would appreciate a ‘as fast as possible’ option to rush to the end of the wave. I don’t really need to watch the foes make their way through the maze to see if my solution works.

You are using 1500x1500 png files to generate the paths. THAT'S HUGE!!!
Not only is it a large image in terms of the number of pixels used in the image, but png24 is also a lossless image format so there is no compression being applied to the image making the file size of the image far heavier than if you used a jpg.

On a slow connection that takes forever for the path to download and you can't do anything until the path has finished downloading.

This is also terrible if you're using mobile data to play the game. By the time you get to the end of the game you have used up a massive chunk of your mobile data allowance without even realising it.

The much more sensible option would be to use svg files to generate the paths instead. The path images are very simple graphics so they would be pretty easy to turn into svg files.

An svg file can scale to any pixel size without losing image quality and it has a tiny file size making it the perfect file format for those background paths.

Svg doesn't work in IE8 & 9 but neither does flexbox so your game would be broken in IE8 & 9 anyway.

Others have not had this issue, refresh did not help. I would also suggest having some examples shown, and a reset button, but nice project!

I understand you can’t run the game in a background tab, but why clear the inputs?

It is impossible to correctly place towers using both justify-content: space-around; and justify-content: space-around; because of the presence of a non-tower element in the tower-group div.

For example, with 2 towers, the second one is always in the middle (with both).

To manually fix this, I had to remove this last element from the div.

First off, great work with the game, just completed it and it is challenging but educational, sure beats box a, box b, box c blah blah blah. Also great work at Indie Hackers, the industry is heading for a crash with this VC 'ish. YKWIM?

Anyway, the twitter link that opens when the user completes the game is a web intent that is suppose to pop up, not open in a new tab, I suggest you replace it with a traditional link.

i.e. Replace https://twitter.com/intent/user?screen_name=channingallen with https://twitter.com/ChanningAllen.

Also, what's the deal with waves not being able to run in the background? I started a wave, checked another tab & got the pop up that I'm sure your aware of, then when I typed the code out again, it wouldn't run so I had to refresh. What's up with that?

Keep up the good work!