CSS integration and game interactions (part 3)

An inventory of the current state of the CSS integration and the game interaction was created to allow a side by side comparison. The left image is the mockup and the right image is the screenshot from the skin page used for integration. The comments are from the point of view of the developer in need of answered related to the artwork or the gameplay.



lobby in progress

Associated ticket.

  • The start new story background is missing
  • The previous background is missing (off and hover)

lobby finished


the author picks a card


the author waits for the players to pick a card

Associated ticket.

(10:40:27 AM) dachary: antoviaque: da1: I have another question, related to http://cardstori.es/?skin=invitation_owner
(10:44:23 AM) dachary: could you describe me the algorithm that should be implemented with regard to displaying the cards and the name of the player as shown in http://cardstori.es/trac/browser/static/mockups/author4.png?rev=c54daacea76bfd7bafe49177c81b623aa709d055 ?
(10:44:52 AM) dachary: I could not figure it out by myself.
(10:45:01 AM) antoviaque: let me see
(10:50:47 AM) antoviaque: the way I understand it is: on hover, z-index changed (to put the card on top) and display of label
(10:50:58 AM) antoviaque: the issue is with the cards on the left
(10:51:22 AM) antoviaque: I don’t think there will be an easy way to do that, but let me think a bit
(10:55:05 AM) antoviaque: ok, discussed with tartaruga, to try to find a way to make things more simple
(10:55:33 AM) antoviaque: we would keep the same behavior as for the other docks
(10:56:15 AM) antoviaque: the only issue then would be the fact that the left part of the label would be covered by the previous card
(10:57:44 AM) antoviaque: so to avoid that, it would be put on the top of the card – still *on* the card and not above, but the higher part of the card is fully visible, so the label wouldn’t be covered
(10:57:51 AM) antoviaque: dachary: makes sense?
(10:59:58 AM) dachary: antoviaque: yes it does make sense. It also solves the problem of having to display a name with a variable size. Or to make the card always scale to the maximum before displaying the name, which would probably break the smoothness of the dock.
(11:05:27 AM) antoviaque: dachary: ah but that issue remains – since the label is still on/inside the card
(11:05:38 AM) antoviaque: just on the upper part instead of the lower part
(11:07:04 AM) antoviaque: hmm, we should be able to keep the same size of font, no? it’s just the rounded label background that would resize, with no overflow on the text?
(11:07:18 AM) antoviaque: not sure it would look good, but probably worth a shot
(11:17:07 AM) dachary: antoviaque: I will keep it the same size and see how it looks. That will give us ideas on how to solve it for good.
(11:18:29 AM) dachary: hum. I misread your lines.
(11:20:30 AM) dachary: I think it is too much work to try to implement this just to see how it looks. It can easily be mockup’ed and I bet it will show that it will either look bad or be unreadable.
(11:20:42 AM) antoviaque: hmm
(11:36:24 AM) antoviaque: I also asked Deborah about simply putting it out of the card like it is now, but she said it wouldn’t look good
(11:42:34 AM) antoviaque: if it’s too much work, another option is to keep something that doesn’t look perfect, and simply keep this part as a task for later on, since it’s not the priority
(11:48:38 AM) dachary: antoviaque: I’m reluctant to try programatically why could be mockuped. Not just because it’s less work for me. But because I’m convinced it’s less work overall. I’ll make you a deal : show me mockups where the name shows in the smallest size and the largest size. If it looks ok I will implement it. I’m not convinced it will look ok just now.
(11:48:48 AM) dachary: I need to see it with my own eyes ;-)
(11:49:06 AM) antoviaque: ahah, ok then : )
(11:49:14 AM) antoviaque: I’ll put it in a ticket
(11:49:36 AM) antoviaque: and see this with Deborah when she reviews the last pending items
(11:50:05 AM) antoviaque: In the meantime this can simply stay on the top like it is now I guess

the author waits for the players to vote for a card

Associated ticket

  • The mockup is missing
  • The complete button background is missing

the player picks a card


the player waits for the others to pick a card


the player votes for a card


the player waits for the other to votes for a card


the game is complete, author point of view

Associated ticket

(10:18:59 AM) dachary: Why is “Your Choice” in red ?
(10:19:16 AM) antoviaque: let me see
(10:19:17 AM) dachary: is it because you lost ?
(10:19:45 AM) antoviaque: yes
(10:19:50 AM) antoviaque: red = lost, green = won
(10:20:27 AM) dachary: ok
(10:20:35 AM) antoviaque: and actually there are two “YOUR CHOICE”, which is a bug
(10:20:36 AM) dachary: then how do you show that the author lost ?
(10:21:46 AM) dachary: antoviaque: ^
(10:22:14 AM) antoviaque: I guess right now you only see it through the list of people who won
(10:22:19 AM) antoviaque: this is a problem, true
(10:22:32 AM) antoviaque: This page will still require some work imho
(10:22:32 AM) dachary: It is indeed.
(10:24:16 AM) dachary: At the moment the code adds a class “win” to the card, not to the voter names. I could change the code to add a class to the voter names. But it would be better to resolve this issues beforehand. Otherwise it has a high probability of being reverted soon.
(10:24:56 AM) dachary: I will display all names with a green background to avoid confusion, for now. So that the player only relies on the “Who won this game list” and does not try to interpret the red/greeen semantic.
(10:25:25 AM) antoviaque: it is on the voters, yes – for example when nobody choses the author card, every player wins no matter what card they chose
(10:25:32 AM) da1: agreed : there should be a very visible : YOU LOST / YOU WIN, it should be the first thing that is noticed imho. Then, present but not as flashy, it is explained why and who lost/win

the game is complete, player point of view

Associated ticket.

  • The background of The story is missing
  • The background to display when clicking Why is missing

credits and copyright

This entry was posted in cardstories. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>