search

Zetawar / zetawar

Zetawar is a turn based tactical strategy game implemented in 100% ClojureScript.
MIT License
169 stars 14 forks source link

Show unit stats in the build menu #46

Closed Conaws closed 7 years ago

Conaws commented 7 years ago

When choosing which new unit to build, it would be helpful to see things like their movement, their range, and any other metrics that affect their performance

tbeddy commented 7 years ago

Thoughts on something like this? Each unit's stats are displayed in a small table in a collapsible panel.

screen shot 2017-03-23 at 12 10 11 am
tbeddy commented 7 years ago

Here's an updated version with more stats. I include the text "P = Personnel" and "A = Armored" at the bottom of the modal's body for clarity.

screen shot 2017-03-27 at 8 59 09 pm

I think it looks nice with this much info, but adding more would probably get ugly (if sticking with the React-Boostrap table-in-a-panel-in-a-column-in-a-row-in-a-grid format I'm using). Maybe using a button to open the panel beneath the unit's image/name/cost would be better, as it would allow each table to span the entire modal and give the stats room to breath.

djwhitt commented 7 years ago

I like the idea, but there's a lot of header repetition. What about putting all the units in one table with headers at the top?

djwhitt commented 7 years ago

Another thought, the abbreviations (P and A) are probably necessary to keep the size from getting out of control, but they should use the "abbr" tag so users can get an explanation if they hover.

tbeddy commented 7 years ago

Is this closer to what you were thinking? Or were you thinking of keeping the clickable part outside of the table?

screen shot 2017-03-30 at 9 27 55 pm
djwhitt commented 7 years ago

Yep, that's what I was thinking. I'm fine with the clickable part being inside the table.

tbeddy commented 7 years ago

Thoughts on style?

Hovering over the type will give the full name, and hovering over the armor value will either give the capturing armor value or say that the unit cannot capture bases.

screen shot 2017-04-01 at 10 53 16 pm
djwhitt commented 7 years ago

The hover text sounds good, but the different size fonts in the stats cells look a little off to me. I think consistency is probably better even if it makes the table a bit sparse. For the ranges, I prefer "1-2" to "Min:1 Max:2". It would also be nice if the table column width was consistent. You should be able to accomplish that using the Bootstrap grid CSS classes (col-md-4, etc.).

Conaws commented 7 years ago

Or I'd suggest using the new css grid specification -- it's shipped in most major browsers now

gridbyexample.com/video

On Tue, Apr 4, 2017 at 11:52 PM, David Whittington <notifications@github.com

wrote:

The hover text sounds good, but the different size fonts in the stats cells look a little off to me. I think consistency is probably better even if it makes the table a bit sparse. For the ranges, I prefer "1-2" to "Min:1 Max:2". It would also be nice if the table column width was consistent. You should be able to accomplish this using the Bootstrap grid CSS classes (col-md-4, etc.).

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/Zetawar/zetawar/issues/46#issuecomment-291588494, or mute the thread https://github.com/notifications/unsubscribe-auth/ACljr0nrWlUd_1DoJgBPkYq8IcU4A9orks5rsopJgaJpZM4LjCkY .

-- Conor White-Sullivan 347-216-0173 @Conaw http://twitter.com/conaw

Good tests kill flawed theories, we remain alive to guess again. ~ Karl Popper

djwhitt commented 7 years ago

This is on dev now. I think there are more tweaks we could do, but I'm going to call it "good enough" for now.

@Conaws Thanks for the css grid spec link! I plan to revisit the styling on this at some point. I'll definitely look into that when I do.