diff --git a/client/src/MassiveDecks/Actions/Event.elm b/client/src/MassiveDecks/Actions/Event.elm index c9eea27..48690a6 100644 --- a/client/src/MassiveDecks/Actions/Event.elm +++ b/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 diff --git a/client/src/MassiveDecks/States/Playing.elm b/client/src/MassiveDecks/States/Playing.elm index 713c76c..92a6e64 100644 --- a/client/src/MassiveDecks/States/Playing.elm +++ b/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 diff --git a/client/src/MassiveDecks/States/Playing/UI.elm b/client/src/MassiveDecks/States/Playing/UI.elm index 3932c27..260e1d4 100644 --- a/client/src/MassiveDecks/States/Playing/UI.elm +++ b/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 diff --git a/client/src/MassiveDecks/Util.elm b/client/src/MassiveDecks/Util.elm index 388ee32..01edea5 100644 --- a/client/src/MassiveDecks/Util.elm +++ b/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 diff --git a/server/app/assets/stylesheets/lobby.less b/server/app/assets/stylesheets/lobby.less index 376d4ee..f4f9a4c 100644 --- a/server/app/assets/stylesheets/lobby.less +++ b/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); } diff --git a/server/app/assets/stylesheets/massivedecks.less b/server/app/assets/stylesheets/massivedecks.less index 0577b0a..c2d4cf6 100644 --- a/server/app/assets/stylesheets/massivedecks.less +++ b/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; } diff --git a/server/app/assets/stylesheets/variables.less b/server/app/assets/stylesheets/variables.less index ed03e78..ab49623 100644 --- a/server/app/assets/stylesheets/variables.less +++ b/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;