General style improvements.

client/src/MassiveDecks/Actions/Event.elm

@@ -16,6 +16,7 @@ type Event
   | RoundEnd Call Id (List PlayedCards) PlayedByAndWinner
 
 
+{-| Generate events from a given change in lobby. -}
 events : Lobby -> Lobby -> List Event
 events oldLobby newLobby = List.concat
   [ diffPlayers oldLobby.players newLobby.players

client/src/MassiveDecks/States/Playing.elm

@@ -89,7 +89,10 @@ update action global data = case action of
           (model { global | seed = seed } { data | shownPlayed = shownPlayed }, effects)
 
       RoundEnd call czar responses playedByAndWinner ->
-        (model global { data | lastFinishedRound = Just (FinishedRound call czar responses playedByAndWinner) }, Effects.none)
+        (model global { data | lastFinishedRound = Just (FinishedRound call czar responses playedByAndWinner)
+                             , shownPlayed = []
+                             }
+          , Effects.none)
 
       _ ->
         (model global data, Effects.none)
@@ -125,7 +128,7 @@ updatePositioning toAnimate existing seed =
 
 
 randomPositioning : Generator Attribute
-randomPositioning = Random.map4 positioning (int -75 75) (int 0 50) bool (int -5 5)
+randomPositioning = Random.map4 positioning (int -75 75) (int 0 50) bool (int -5 1)
 
 
 initialRandomPositioning : Generator Attribute

client/src/MassiveDecks/States/Playing/UI.elm

@@ -105,8 +105,18 @@ playArea contents = div [ class "play-area" ] contents
 
 
 call : List String -> List Response -> Html
-call contents picked = div [ class "card call mui-panel" ]
-                    [ div [ class "call-text "] (Util.interleave (slots (Card.slots contents) "" picked) (List.map text contents)) ]
+call contents picked =
+  let
+    responseFirst = contents |> List.head |> Maybe.map ((==) "") |> Maybe.withDefault False
+    (contents, picked) = if responseFirst then
+        (contents, Util.mapFirst Util.firstLetterToUpper picked)
+      else
+        (Util.mapFirst Util.firstLetterToUpper contents, picked)
+    spanned = List.map (\part -> span [] [ text part ]) contents
+    withSlots = Util.interleave (slots (Card.slots contents) "" picked) spanned
+    callContents = if responseFirst then List.tail withSlots |> Maybe.withDefault withSlots else withSlots
+  in
+    div [ class "card call mui-panel" ] [ div [ class "call-text" ] callContents ]
 
 
 slot : String -> Html
@@ -129,7 +139,8 @@ response address picked disabled responseId contents =
     classes = [ class ("card response mui-panel" ++ pickedClass) ]
     clickHandler = if isPicked || disabled then [] else [ onClick address (Pick responseId) ]
   in
-    div (List.concat [ classes, clickHandler ]) [ div [ class "response-text" ] [ text contents ] ]
+    div (List.concat [ classes, clickHandler ])
+      [ div [ class "response-text" ] [ text (Util.firstLetterToUpper contents), text "." ] ]
 
 
 blankResponse : Attribute -> Html
@@ -145,20 +156,25 @@ handRender disabled contents =
 
 
 handView : Signal.Address Action -> List Int -> Bool -> List Response -> Html
-handView address picked disabled responses = handRender disabled (List.indexedMap (response address picked disabled) responses)
+handView address picked disabled responses =
+  handRender disabled (List.indexedMap (response address picked disabled) responses)
 
 
 pickedResponse : Signal.Address Action -> (Int, String) -> Html
 pickedResponse address (index, contents) =
-  li [ onClick address (Withdraw index) ] [ div [ class "card response mui-panel" ] [ div [ class "response-text" ] [ text contents ] ] ]
+  li [ onClick address (Withdraw index) ]
+     [ div [ class "card response mui-panel" ] [ div [ class "response-text" ]
+                                                     [ text (Util.firstLetterToUpper contents), text "." ] ] ]
 
 
 pickedView : Signal.Address Action -> List (Int, Response) -> Int -> List Attribute -> List Html
 pickedView address picked slots shownPlayed =
   let
-    pb = if (List.length picked < slots) then [] else [ playButton address ]
+    numberPicked = List.length picked
+    pb = if (numberPicked < slots) then [] else [ playButton address ]
+    pickedResponses = List.map (pickedResponse address) picked
   in
-    [ ol [ class "picked" ] (List.concat [ (List.map (pickedResponse address) picked), pb ])
+    [ ol [ class "picked" ] (List.concat [ pickedResponses, pb ])
     , div [ class "others-picked" ] (List.map blankResponse shownPlayed)
     ]
 
@@ -171,7 +187,8 @@ playButton address = li [ class "play-button" ] [ button
 
 playedView : Signal.Address Action -> Bool -> Card.RevealedResponses -> Html
 playedView address isCzar responses =
-  ol [ class "played mui--divider-top" ] (List.indexedMap (\index pc -> li [] [ (playedCards address isCzar index pc) ]) responses.cards)
+  ol [ class "played mui--divider-top" ]
+     (List.indexedMap (\index pc -> li [] [ (playedCards address isCzar index pc) ]) responses.cards)
 
 
 playedCards : Signal.Address Action -> Bool -> Int -> PlayedCards -> Html
@@ -183,7 +200,9 @@ playedCards address isCzar playedId cards =
 
 playedResponse : Response -> Html
 playedResponse contents =
-  div [ class "card response mui-panel" ] [ div [ class "response-text" ] [ text contents ] ]
+  div [ class "card response mui-panel" ]
+    [ div [ class "response-text" ]
+          [ text (Util.firstLetterToUpper contents), text "." ] ]
 
 
 chooseButton : Signal.Address Action -> Int -> Html

client/src/MassiveDecks/Util.elm

@@ -1,6 +1,7 @@
 module MassiveDecks.Util where
 
 import Random exposing (Generator)
+import String
 
 
 interleave : List a -> List a -> List a
@@ -54,3 +55,11 @@ inOrder generators = case generators of
 
 apply : List (a -> b) -> a -> List b
 apply fs value = List.map (\f -> f value) fs
+
+
+firstLetterToUpper : String -> String
+firstLetterToUpper str = (String.toUpper (String.left 1 str)) ++ (String.dropLeft 1 str)
+
+
+mapFirst : (a -> a) -> List a -> List a
+mapFirst f xs = List.indexedMap (\index x -> if index == 0 then f x else x) xs

server/app/assets/stylesheets/lobby.less

@@ -3,6 +3,12 @@
 .card {
   width: @card-width;
   height: @card-height;
+
+  @media (min-width: @enhance-width) {
+    width: @card-width-enhanced;
+    height: @card-width-enhanced;
+  }
+
   margin: 10px;
   padding: 15px;
   font-weight: bold;
@@ -46,22 +52,36 @@
 .call {
   background-color: #000000;
   color: #ffffff;
+  flex-shrink: 0;
 
-  & > div::first-letter {
-    text-transform: uppercase;
+  & > .call-text {
+    & > .slot {
+      text-decoration: underline;
+
+      &:empty {
+        display: inline-block;
+        height: 1.2em;
+        border-bottom: 1px solid #ffffff;
+        min-width: 40px;
+        max-width: 80px;
+      }
+    }
   }
 }
 
-.slot {
-  text-decoration: underline;
+.response {
+  background-color: #ffffff;
+  color: #000000;
 
-  &:empty {
-    display: inline-block;
-    border-bottom: 1px solid #ffffff;
-    width: 60px;
+  &.picked {
+    opacity: 0.5;
   }
 }
 
+.empty-spot {
+  opacity: 0.25;
+}
+
 .winner {
   max-width: 500px;
   margin: 15px auto;
@@ -118,9 +138,9 @@ ol.picked {
     }
 
     &:not(:first-child) {
-      margin-left: -(@card-width - 30);
-      @media (min-width: @degrade-width) {
-        margin-left: 0px;
+      margin-left: -(@card-width * 0.85);
+      @media (min-width: @enhance-width) {
+        margin-left: -(@card-width-enhanced * 0.85);
       }
     }
   }
@@ -146,9 +166,9 @@ ol.considering {
     }
 
     &:not(:first-child) {
-      margin-left: -(@card-width - 30);
-      @media (min-width: @degrade-width) {
-        margin-left: 0px;
+      margin-left: -(@card-width * 0.85);
+      @media (min-width: @enhance-width) {
+        margin-left: -(@card-width-enhanced * 0.85);
       }
     }
   }
@@ -208,23 +228,6 @@ ol.played {
   }
 }
 
-.response {
-  background-color: #ffffff;
-  color: #000000;
-
-  &.picked {
-    opacity: 0.5;
-  }
-
-  &-text::first-letter {
-    text-transform: uppercase;
-  }
-
-  &-text::after {
-    content: ".";
-  }
-}
-
 .scores-toggle {
   flex: none;
   width: 50px;
@@ -255,7 +258,7 @@ ol.played {
   background: #E91E63;
   color: #ffffff;
 
-  @media (min-width: @degrade-width) {
+  @media (min-width: @enhance-width) {
     display: none !important;
   }
 }
@@ -277,7 +280,7 @@ body {
     z-index: 2;
     background-color: #fff;
     transition: transform 0.2s;
-    @media (min-width: @degrade-width) {
+    @media (min-width: @enhance-width) {
       transform: translate(@sidebar-width);
     }
 

server/app/assets/stylesheets/massivedecks.less

@@ -17,7 +17,7 @@ body {
   min-height: 100%;
 
   margin-left: 0px;
-  @media (min-width: @degrade-width) {
+  @media (min-width: @enhance-width) {
     margin-left: @sidebar-width;
   }
 }
@@ -26,7 +26,7 @@ header {
   position: fixed;
   top: 0;
   left: 0;
-  @media (min-width: @degrade-width) {
+  @media (min-width: @enhance-width) {
     left: @sidebar-width;
   }
   right: 0;
@@ -69,7 +69,7 @@ header {
 }
 
 body.hide-scores {
-  @media (min-width: @degrade-width) {
+  @media (min-width: @enhance-width) {
     header {
       left: 0;
     }

server/app/assets/stylesheets/variables.less

@@ -1,5 +1,8 @@
-@degrade-width: 768px;
+@enhance-width: 768px;
 @sidebar-width: 200px;
 
 @card-width: 135px;
 @card-height: 160px;
+
+@card-width-enhanced: 180px;
+@card-height-enhanced: 180px;