Start on team composition form

[cheshire137]

Based on https://trello.com/c/wXa0dJqb/23-mockups-version-1, this adds a simple CompositionForm React component with a form that is completely not hooked up or functional yet. My thinking is we can start by getting the basic page structure in place, then hook things up in follow-up branches.

Here's what it looks like -- is it everything you ever dreamed of, @RobThePM? 😀

I hope @smbriones, @justbarreto, and @summasmiff can build upon this to make it look good. 🙏 It's fine with me if y'all want to work on this branch or in a separate branch, whichever.

[RobThePM]

Looks great so far. The labels "Offense Payload 1", "Offense Payload 2", etc. when the user catches maps, right (e.g. they switch the map to a king of the hill map)?

[cheshire137]

The "Offense Payload 1" labels don't change at all right now, but the intention is that they will eventually. Think of this pull request like a slightly more real mock-up: it's not Balsamiq, but it's not the real thing either. The page is static, it doesn't allow you to save your composition or add new players; it's all fake right now. This gives us some structure to start styling the page and manipulating it to see what looks right. We can also land this first and flesh out new endpoints that let us get real data, like a list of maps in #13, then incorporate those into this page separately.

That perhaps reveals another table we should have in the database: each segment of a map where the team organizer might want to have a particular role. Edit: I added a map_segments table in #5.

[smbriones]

Hi there! I'm having some fun playing with the visual design a bit and curious what your thoughts are on this. Did I leave off anything that is important to see? What does everyone think of something like this? Any feedback/thoughts would be great! cc @cheshire137 @RobThePM

[cheshire137]

Ahhh! It's so pretty! 🌈 Thank you, Stephanie. 😀 You've managed to take a page with a lot of information to convey and make it not intimidating. I love the colors, it's very friendly. I also think having the hero faces really helps for visual recognition. It's easier and faster for me to parse Sombra's face than to read "Sombra" and conjure up the hero in my mind.

I like that the name of the comp isn't always presented in an input field. It's clearly editable from the icon next to it, but there's no box around it to clutter up the design from being in an input.

Having the slots where no hero has been selected have a gray background instead of white also draws attention to them, like "hey you need to do something here." That's helpful.

The gradient up top is pretty and I can see it comes from the Gibraltar screenshot. This puts in mind all kinds of fun ideas about programmatically detecting the best color range to use based on a given image, but that's probably a bit unnecessary at this point. 😀 I'm sure we can just hardcode some gradients based on our static list of maps. I think each map will have a "slug" anyway, so "Watchpoint: Gibraltar" -> "watchpoint-gibraltar", and we can make use of that slug for CSS classes like .watchpoint-gibraltar { } for setting map-specific colors and images.

@siege911 you're a Reinhardt main now. 😆

[siege911]

Looks very nice but in order to be a Reinhardt main, I think I need to learn to right click occasionally. Apparently my teammates like it when I put that big blue rectangle up.

[cheshire137]

Ah one omission I'm seeing, and it might fine, is the different map sections. You have "Offense 1-3" when Rob before had them separated out as "Offense Payload 1," "Offense Payload 2," etc. Depending on what map sections we have, they might not be summarizable like in your design. For a capture map like Hanamura, we'd have Point 1 and Point 2, which can be shortened to "Points 1-2". For Eichenwalde, first you capture Point 1, then you escort the payload to point 2, then you escort the payload to point 3. So maybe for that one the columns in your design would keep separate names, like Capture Point 1, Payload Point 2, Payload Point 3.

[RobThePM]

@smbriones

I agree with Cheshire on lots of points:

• portraits next to the names help recognize the hero faster
• i like the edit button for the team comp name

I also love the way you've chosen to display the Offense and Defense labels. Very slick. Hopefully it can somehow still be used for hybrid maps like King's Row, where there's a capture point and payload, as Cheshire pointed out.

I posted a couple of screenshots for sample design stuff here: https://trello.com/c/wXa0dJqb. These are purely suggestions and ultimately it's up to the designers to determine what would look best for the product. If they help give you ideas, then great. If not, no worries.

As a side note, we will be deciding which features will be included in our first version of the product tomorrow. This should help better focus development and design efforts. That being said, everything you have in that sample will most likely make it into the first version.

Thanks Stephanie!

[cheshire137]

Ooh your design brings to mind another feature: we could indicate visually when there's a duplicate hero. So if Rob tried to put me and Rick both on Mercy for the same segment, the app could highlight both of us in red. There could also be a subtle checkbox that's unchecked by default for "Allow duplicate picks?" for if you wanted to come up with a team comp for No Hero Limits in the arcade.

[cheshire137]

everything you have in that sample will most likely make it into the first version

That was my thinking when I started on this page. This composition form seemed like the core of your original app idea, Rob, so I figured it'd be fine to get it underway. 👍

[smbriones]

So maybe for that one the columns in your design would keep separate names, like Capture Point 1, Payload Point 2, Payload Point 3

Hopefully it can somehow still be used for hybrid maps like King's Row, where there's a capture point and payload, as Cheshire pointed out.

@cheshire137 @RobThePM That makes sense! Thank you for explaining. I'll update that in the mockup.

[smbriones]

we could indicate visually when there's a duplicate hero.

@cheshire137 Good idea! I'll work on how to show that.

[RobThePM]

we could indicate visually when there's a duplicate hero

i totally forgot about duplicate heroes, great idea!

[smbriones]

@cheshire137 @RobThePM, based on the above points, here are some updates! Not sure if I got this data completely right, but here are examples of how we could potentially show duplicates and allowed duplicates, and also different map sections like with Hanamura and Eichenwalde.

[RobThePM]

@smbriones nice! i like how the points are displayed for the hybrid map. data looks pretty much right; we might change the label for "point 1" to "capture point 1" or something, but overall everything looks good. what determines if the red/blue line below each point label is solid or faded?

edit note: i just double checked the wiki (http://overwatch.gamepedia.com/Assault) and the 2 point assault maps don't seem to be referred to as control points, so the labels are just fine! 😄

[smbriones]

what determines if the red/blue line below each point label is solid or faded?

@RobThePM Good question! I was thinking that it could indicate that there were still selections that need to be made in that column. It's not too important, but just another visual queue. Does that make sense?

The Hanamura mock above was a little incorrect though because I added the "Allow duplicate picks" checkbox and forgot to change the blue bar to full opacity.

[RobThePM]

@smbriones ahhh okay, gotcha, i see that now! totally makes sense.

[smbriones]

Control map! 😄 @cheshire137 @RobThePM

[cheshire137]

Control map!

Very nice! I just now noticed the bars under each name have rounded corners on the start and end of the three segments to signal that each bar is part of a larger whole. 😀

Since this is a control map, there won't actually be attack/defend on it -- everyone's attacking. So you could lop off the three blue columns on the right and just keep the first three red columns. I don't know if that changes the layout any, since you'll have much more horizontal space available.

The 'duplicate' checkbox styling is just how I pictured it. 👌 The only thing I'd maybe change is since it's listed right after the list of players, you might think it's referring to players and not heroes. That area is where we have the most free whitespace, so I agree with your choice to stick the option there. Maybe a header and some space between the players and the checkbox, though, like "Composition Options"? There might be other settings we think of per-composition in the future that could also go there.

Another detail we might incorporate somewhere is a way to share this composition with your friends. I think initially it would just be copying the URL to the page and sending it to people outside of the app. So maybe the URL with a little copy icon next to it. Here's how that sort of thing looks on Gfycat:

This could perhaps go in that whitespace on the left, just after the 'duplicate' checkbox. We can truncate the URL with ... to fit the space, if we show the URL. Maybe we just have a copy icon and 'Share' as the clickable text.

[RobThePM]

Looking good!

"Composition Options"

I agree that we might be able to fit a "Composition Options" section somewhere.

Maybe we just have a copy icon and 'Share' as the clickable text.

I like this (or even the arrow icon for sharing from Facebook).

Also, no biggie, but for Control Maps we only need three columns since there's only three sections to the map. In my original Google sheet (https://docs.google.com/spreadsheets/d/1zstpx2-vZfGX9sgfHy5vtOmJUFOaYowtlp3l1xWbhE8/edit#gid=823800667) I went with a violet color because red + blue = violet... right? riiiiiight? 😄 However, I am NOT an artist/designer by any means so please feel free to use whatever color you like.

[smbriones]

@cheshire137 @RobThePM

Maybe a header and some space between the players and the checkbox, though, like "Composition Options"? There might be other settings we think of per-composition in the future that could also go there.

Got it! There may be a better spot for these settings at some point, but this is probably good for now.

Maybe we just have a copy icon and 'Share' as the clickable text.

Sounds good! I'll add that as well.

Would it be helpful if I created a mockup for each map to reflect the column count and specific headers? Love that spreadsheet, @RobThePM. So helpful to see everything mapped out like that. ❤️

[rewinfrey]

Also, no biggie, but for Control Maps we only need three columns since there's only three sections to the map.

Since this is a control map, there won't actually be attack/defend on it -- everyone's attacking.

@RobThePM @cheshire137 you're both right, and this makes sense. I am mostly to blame for why @smbriones' mock up has the three additional columns, but I don't think the idea is communicated in the mock ups alone. The idea was that on a control map, having the flexibility to define an "attack" focused comp and a "defense" focused comp allows a team to fluidly switch focus during respawn from attack to defense and back to attack throughout a match.

For example, at the beginning of the match, we might go with the attack comp to try to capture the control point. As we hold that point, the enemy team makes adjustments to counter. Depending on the success of those counter picks, we have the option of migrating the team to the preset defense comp as the team respawns. Later in the match, despite our best defense efforts, the enemy team snowballed three ults on us and took control of the point, we can switch back to the attack comp.

I understand having both attack and defense comps defined for a control map is not currently an idea built into the game, and the two team comps for a single map would be unique to control point maps. We could think of it is "alternate comp" rather than attack and defense. I'm thinking since the UI for all other maps includes 6 columns, we could continue with that here, but would be a slightly different meaning. Curious what y'all think of this idea?

[RobThePM]

In order to accommodate multiple team comps for the same point, I thought they could added below each other. Please see the Trello card with mockup: https://trello.com/c/GNyojHlC

I call each Team Comp a "Plan".

The thought behind this mockup is several things.

• I thought scrolling up and down would be an easy and quick way to navigate through the different Plans.
• buttons for adding and deleting plans as needed
• by setting the columns as the "static" value (i.e. The points don't change), and have the rows/names be the dynamic value, it allows you to change people'a names in case there's more than 6 people in your group and you have different Plans for the different team comps

That being said, I'm open to other ideas. :)

[RobThePM]

I thought they could be added below each other*

Also if we expand to other games I think this format will also work

(Sorry on phone)

[cheshire137]

Would it be helpful if I created a mockup for each map to reflect the column count and specific headers?

I don't think that'd be necessary. Having the general design in place is enough to start implementing it in this branch! How would you like to do this, @smbriones? I can start translating your image mockup into JSX and CSS in this branch, and you can join in, making commits to this branch as well.

The idea was that on a control map, having the flexibility to define an "attack" focused comp and a "defense" focused comp

I think I prefer Rob's idea for having these be two different compositions rather than built into one composition that overloads the meaning of the attack/defend split.

[rewinfrey]

@RobThePM @cheshire137 allowing multiple team comp plans for a single map is great and maintains consistency for the data model across all map types. I'm 💯 on this rather than the dual purpose attack / defense comps for control point maps 👍

[RobThePM]

And sorry, I didn't mention it earlier, but the idea of having an attack comp and a defense comp for control maps can also be accommodated by the format in the Trello card.

[RobThePM]

We are essentially thinking of the same idea. Great minds think a like! 😄

[smbriones]

How would you like to do this, @smbriones? I can start translating your image mockup into JSX and CSS in this branch, and you can join in, making commits to this branch as well.

@cheshire137 That would be perfect! 😄 I could also just start building our framework in this branch so that we'd have access to that CSS right away. That might be better than doing it in a separate PR? Either way works for me. Do you have a preference?

[cheshire137]

It's coming along!

[smbriones]

Wow, you are fast! 😄 Looking great, @cheshire137!

[cheshire137]

This now fixes #27 by adding the Clear Sans font.

[cheshire137]

Ever closer!

I think we could go ahead and land this and continue work on 1) styling and 2) actually hooking up these static HTML elements in a follow-up branch. The diff size of this pull request is getting large enough that I don't want to make it a bear 🐻 to review.

[rewinfrey]