Better deckbuilder UI

RivalsDB · Nov 28, 2021 · 85ff2f2 · 85ff2f2
1 parent 2575227
commit 85ff2f2
Show file tree

Hide file tree

Showing 7 changed files with 132 additions and 93 deletions.
diff --git a/client/src/Pages/Build.sass b/client/src/Pages/Build.sass
@@ -57,62 +57,31 @@ $actions-bar-height: 60px
   &-rowpiece_quant--image
     text-align: center
 
-  &-collectionitem--row
-    list-style: none
-    font-size: 16px
-    line-height: 24px
-    padding: 5px 0
-    border-top: 1px solid #CCC
-    display: flex
-    flex-wrap: nowrap
-    &:first-child
-      border-top: none
-
   &-collectionitems--rows
     margin: 0
     padding: 0
 
   &-rowpiece_quant--row
     flex: 0 0 auto
 
-  &-rowpiece_name
-    margin-left: 10px
-    flex: 1 1 auto
   &-rowpiece_props
     margin-left: 10px
     flex: 0 0 auto
     display: flex
     align-items: center
     height: 32px
+    gap: 0 4px
 
-  &-rowpiece_clan,
-  &-rowpiece_disciplines,
-  &-rowpiece_discipline,
-  &-rowpiece_bp
-    display: inline-block
-  &-rowpiece_physical,
-  &-rowpiece_social,
-  &-rowpiece_mental,
-  &-rowpiece_damage,
-  &-rowpiece_shields,
-  &-rowpiece_types,
   &-rowpiece_type
     display: none
     @media screen and ( min-width: $breakpoint-ipad--horizontal)
       &
         display: inline-block
 
-  &-rowpiece_clan
-    $size: 18px
-    margin-left: 10px
-    width: $size
-    height: $size
-  &-rowpiece_disciplines,
   &-rowpiece_types
     width: 60px
     height: 18px
-    margin-left: 5px
-  &-rowpiece_discipline,
+    margin-left: 4px
   &-rowpiece_type
     $size: 18px
     margin-left: 3px
@@ -164,7 +133,7 @@ $actions-bar-height: 60px
     flex: 0 0 auto
   &-action
     cursor: pointer
-    color: var(--color-redmedium)
+    color: var(--color-link)
     text-decoration: underline
     user-select: none
   &-primary
@@ -174,30 +143,72 @@ $actions-bar-height: 60px
     margin: 0
     flex: 0 0 auto
 
+.cardlist
+  &__row
+    padding: 4px 0
+    border-top: 1px solid var(--color-divider)
+    display: flex
+    flex-wrap: nowrap
+    gap: 0 12px
+    &:first-child
+      border-top: none
+
+  &__quant--row
+    flex: 0 0 auto
+
+  &__name
+    flex: 1 1 auto
+
+  &__props
+    flex: 0 0 auto
+    display: flex
+    align-items: center
+    height: 32px
+    gap: 0 4px
+
+  &__clan
+    $size: 21px
+    width: $size
+    height: $size
+
+  &__extra-prop
+    display: none
+    @media screen and ( min-width: $breakpoint-ipad--horizontal)
+      &
+        display: inline-block
+
+.char-icons-list
+  $gap: 3px
+  $itemSize: 20px
+  display: flex
+  gap: $gap
+  width: (3 * $itemSize) + (2 * $gap)
+  &__item
+    display: inline-block
+    width: $itemSize
+    height: $itemSize
+
 .quantpick
   $optHeight: 32px
   $optWidth: 20px
   display: inline-block
 
-  &--1
-    width: 2 * $optWidth
-  &--3
-    width: 4 * $optWidth
-
-  &-option
+  &__option
     display: inline-block
     width: $optWidth
     height: $optHeight
     line-height: $optHeight
     text-align: center
     cursor: pointer
-    font-size: 18px
-    background: var(--color-greylight)
-    box-shadow: inset 0 0 2px var(--color-text)
+    font-size: var(--font-size--default)
+    background: var(--color-bg-closest)
+    box-shadow: inset 0 0 2px var(--color-bg-farthest)
 
     &--active
-      background: var(--color-greydeep)
+      background: var(--color-bg-farthest)
+      box-shadow: inset 0 0 2px var(--color-bg-closest)
+      color: var(--color-copy-highlight)
       font-weight: bold
 
-    input
-      display: none
+  &__radio
+    display: none
diff --git a/client/src/UI/Attribute.elm b/client/src/UI/Attribute.elm
@@ -13,53 +13,54 @@ type Style
 
 attribute : Html msg -> Style -> Int -> Html msg
 attribute icon style n =
-    span [ class "attr" ]
+    span [ class "attribute" ]
         [ span
-            [ class "attr-icon"
+            [ class "attribute__icon"
             , case style of
                 Light ->
-                    class "attr-icon--light"
+                    class "attribute__icon--light"
 
                 Dark ->
-                    class "attr-icon--dark"
+                    class "attribute__icon--dark"
             ]
             [ icon ]
         , span
-            [ case style of
+            [ class "attribute__number"
+            , case style of
                 Light ->
-                    class "attr-number--light"
+                    class "attribute-number--light"
 
                 Dark ->
-                    class "attr-number--dark"
+                    class "attribute-number--dark"
             ]
             [ text <| String.fromInt n ]
         ]
 
 
 bloodPotency : Cards.BloodPotency -> Html msg
 bloodPotency =
-    attribute (Icon.icon ( Icon.BloodPotency, Icon.Standard )) Light
+    attribute (Icon.icon ( Icon.BloodPotency, Icon.Colored )) Light
 
 
 bloodPotencyRequirement : Cards.BloodPotencyRequirement -> Html msg
 bloodPotencyRequirement requirement =
-    Maybe.map (attribute (Icon.icon ( Icon.BloodPotencReq, Icon.Standard )) Light) requirement
+    Maybe.map (attribute (Icon.icon ( Icon.BloodPotencReq, Icon.Colored )) Light) requirement
         |> Maybe.withDefault nothing
 
 
 physical : Cards.Attribute -> Html msg
 physical =
-    attribute (Icon.icon ( Icon.Physical, Icon.Standard )) Dark
+    attribute (Icon.icon ( Icon.Physical, Icon.Colored )) Light
 
 
 mental : Cards.Attribute -> Html msg
 mental =
-    attribute (Icon.icon ( Icon.Mental, Icon.Standard )) Dark
+    attribute (Icon.icon ( Icon.Mental, Icon.Colored )) Light
 
 
 social : Cards.Attribute -> Html msg
 social =
-    attribute (Icon.icon ( Icon.Social, Icon.Standard )) Dark
+    attribute (Icon.icon ( Icon.Social, Icon.Colored )) Light
 
 
 damage : Maybe Cards.Damage -> Html msg

diff --git a/client/src/UI/Attribute.sass b/client/src/UI/Attribute.sass
@@ -1,26 +1,24 @@
-.attr
+.attribute
   $size: 30px
   display: inline-block
   width: $size
   height: $size
   line-height: $size
   text-align: center
   position: relative
-  &-icon
+
+  &__icon
     position: absolute
     top: 0
     bottom: 0
     left: 0
     right: 0
     z-index: -1
-    img
-      width: 100%
-    &--dark
-      opacity: 0.4
+    opacity: 0.8
 
+  &__number
+    font-size: 21px
   &-number--light
     color: #FFF
   &-number--dark
     color: #000
-    font-weight: bold
-    text-shadow: 0 0 2px #FFF
diff --git a/client/src/UI/Deckbuilder.elm b/client/src/UI/Deckbuilder.elm
@@ -4,13 +4,14 @@ import Cards exposing (Card)
 import Clan exposing (Clan)
 import Deck exposing (Decklist)
 import Dict
-import Html exposing (Html, div, h2, input, label, li, span, text)
+import Html exposing (Html, div, h2, input, label, li, span, text, ul)
 import Html.Attributes exposing (checked, class, classList, name, type_)
 import Html.Events exposing (onClick)
 import Html.Keyed as Keyed
 import Shared exposing (Collection)
 import UI.Attribute
 import UI.Card
+import UI.CardName
 import UI.FilterSelection
 import UI.Icon as Icon
 
@@ -183,34 +184,28 @@ viewCardList collection msg data decklist =
 
 viewCardListRow : (Msg -> msg) -> Decklist -> Card -> Html msg
 viewCardListRow msg deck card =
-    li [ class "deckbldr-collectionitem--row" ]
-        [ span [ class "deckbldr-rowpiece_quant--row" ] [ viewQuantityPicker msg card (Deck.copiesInDeck deck card) ]
-        , span [ class "deckbldr-rowpiece_name" ] [ text <| Cards.name card ]
-        , span [ class "deckbldr-rowpiece_props" ]
+    li [ class "cardlist__row" ]
+        [ span [ class "cardlist__quant--row" ] [ viewQuantityPicker msg card (Deck.copiesInDeck deck card) ]
+        , span [ class "cardlist__name" ] [ UI.CardName.withOverlay card ]
+        , span [ class "cardlist__props" ]
             (case card of
                 Cards.FactionCard props ->
-                    [ span [ class "deckbldr-rowpiece_clan" ] [ Icon.clan Icon.Negative props.clan ]
-                    , span [ class "deckbldr-rowpiece_bp" ] [ UI.Attribute.bloodPotency props.bloodPotency ]
-                    , span [ class "deckbldr-rowpiece_physical" ] [ UI.Attribute.physical props.physical ]
-                    , span [ class "deckbldr-rowpiece_social" ] [ UI.Attribute.social props.social ]
-                    , span [ class "deckbldr-rowpiece_mental" ] [ UI.Attribute.mental props.mental ]
-                    , span [ class "deckbldr-rowpiece_disciplines" ]
-                        (props.disciplines
-                            |> List.map (span [ class "deckbldr-rowpiece_discipline" ] << List.singleton << Icon.discipline)
-                        )
+                    [ span [ class "cardlist__clan" ] [ Icon.clan Icon.Negative props.clan ]
+                    , span [] [ UI.Attribute.bloodPotency props.bloodPotency ]
+                    , span [ class "cardlist__extra-prop" ] [ UI.Attribute.physical props.physical ]
+                    , span [ class "cardlist__extra-prop" ] [ UI.Attribute.social props.social ]
+                    , span [ class "cardlist__extra-prop" ] [ UI.Attribute.mental props.mental ]
+                    , viewIconsList Icon.discipline props.disciplines
                     ]
 
                 Cards.LibraryCard props ->
-                    [ span [ class "deckbldr-rowpiece_clan" ]
+                    [ span [ class "cardlist__clan" ]
                         [ props.clan |> Maybe.map (Icon.clan Icon.Negative) |> Maybe.withDefault (text "")
                         ]
-                    , span [ class "deckbldr-rowpiece_bp" ] [ UI.Attribute.bloodPotencyRequirement props.bloodPotency ]
-                    , span [ class "deckbldr-rowpiece_damage" ] [ UI.Attribute.damage props.damage ]
-                    , span [ class "deckbldr-rowpiece_shields" ] [ UI.Attribute.shield props.shield ]
-                    , span [ class "deckbldr-rowpiece_types" ]
-                        (props.attackType
-                            |> List.map (span [ class "deckbldr-rowpiece_type" ] << List.singleton << Icon.attackType)
-                        )
+                    , span [] [ UI.Attribute.bloodPotencyRequirement props.bloodPotency ]
+                    , span [ class "cardlist__extra-prop" ] [ UI.Attribute.damage props.damage ]
+                    , span [ class "cardlist__extra-prop" ] [ UI.Attribute.shield props.shield ]
+                    , viewIconsList Icon.attackType props.attackType
                     ]
 
                 _ ->
@@ -219,23 +214,36 @@ viewCardListRow msg deck card =
         ]
 
 
+viewIconsList : (iconTypes -> Html msg) -> List iconTypes -> Html msg
+viewIconsList viewIcon iconTypes =
+    ul [ class "cardlist__extra-prop", class "char-icons-list" ]
+        (iconTypes
+            |> List.map
+                (viewIcon
+                    >> List.singleton
+                    >> li [ class "char-icons-list__item" ]
+                )
+        )
+
+
 viewQuantityPicker : (Msg -> msg) -> Card -> Int -> Html msg
 viewQuantityPicker msg card copiesInDeck =
-    div [ class "quantpick", class ("quantpick--" ++ (String.fromInt <| Cards.maxPerDeck card)) ] <|
+    div [ class "quantpick" ]
         (Cards.maxPerDeck card
             |> List.range 0
             |> List.map
                 (\n ->
                     label
-                        [ class "quantpick-option"
-                        , classList [ ( "quantpick-option--active", n == copiesInDeck ) ]
+                        [ class "quantpick__option"
+                        , classList [ ( "quantpick__option--active", n == copiesInDeck ) ]
                         ]
                         [ text <| String.fromInt n
                         , input
                             [ type_ "radio"
                             , name <| "count-" ++ Cards.id card
                             , checked <| n == copiesInDeck
                             , onClick <| msg <| ChangedDecklist ( card, n )
+                            , class "quantpick__radio"
                             ]
                             []
                         ]

diff --git a/client/src/UI/Icon.elm b/client/src/UI/Icon.elm
@@ -75,6 +75,7 @@ type IconImage
 type IconStyle
     = Standard
     | Negative
+    | Colored
 
 
 type alias Icon =
@@ -192,6 +193,9 @@ styleClass style =
         Standard ->
             class "ui-icon--standard"
 
+        Colored ->
+            class "ui-icon--colored"
+
         Negative ->
             class "ui-icon--negative"
 

diff --git a/client/src/UI/Icon.sass b/client/src/UI/Icon.sass
@@ -33,5 +33,14 @@ $other_icons: action agenda alchemy attack blood bloodpotency bloodpotencyrequir
     -webkit-mask-image: url("../../assets/icons/icon-#{$icon}.svg")
     mask-image: url("../../assets/icons/icon-#{$icon}.svg")
 
-.ui-icon--standard.ui-icon_bloodpotency
-  background-color: #AE2413
+.ui-icon--colored
+  &.ui-icon_bloodpotency
+    background-color: var(--color-blood)
+  &.ui-icon_physical
+    background-color: var(--color-physical)
+  &.ui-icon_social
+    background-color: var(--color-social)
+  &.ui-icon_mental
+    background-color: var(--color-mental)
+  &.ui-icon_bloodpotencyrequirement
+    background-color: var(--color-bloodreq)