From 85ff2f2886fc03d964b34db1637e68bfcbd9a63e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Luiz=20S=C3=B3crate?= Date: Sun, 28 Nov 2021 23:45:55 +0100 Subject: [PATCH] Better deckbuilder UI --- client/src/Pages/Build.sass | 103 +++++++++++++++++++--------------- client/src/UI/Attribute.elm | 25 +++++---- client/src/UI/Attribute.sass | 14 ++--- client/src/UI/Deckbuilder.elm | 58 ++++++++++--------- client/src/UI/Icon.elm | 4 ++ client/src/UI/Icon.sass | 13 ++++- client/src/base.sass | 8 +++ 7 files changed, 132 insertions(+), 93 deletions(-) diff --git a/client/src/Pages/Build.sass b/client/src/Pages/Build.sass index b0434f33..391c3c51 100644 --- a/client/src/Pages/Build.sass +++ b/client/src/Pages/Build.sass @@ -57,17 +57,6 @@ $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 @@ -75,44 +64,24 @@ $actions-bar-height: 60px &-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 index ce7fd7b4..2eef13f4 100644 --- a/client/src/UI/Attribute.elm +++ b/client/src/UI/Attribute.elm @@ -13,24 +13,25 @@ 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 ] ] @@ -38,28 +39,28 @@ attribute icon style 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 index 2820a9fc..76bd54bf 100644 --- a/client/src/UI/Attribute.sass +++ b/client/src/UI/Attribute.sass @@ -1,4 +1,4 @@ -.attr +.attribute $size: 30px display: inline-block width: $size @@ -6,21 +6,19 @@ 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 index bd63641c..48625850 100644 --- 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,16 +214,28 @@ 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 @@ -236,6 +243,7 @@ viewQuantityPicker msg card copiesInDeck = , 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 index d419f08a..c0605662 100644 --- 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 index 4ce9c53d..44c169f4 100644 --- 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) diff --git a/client/src/base.sass b/client/src/base.sass index 29d6e3df..fd170e62 100644 --- a/client/src/base.sass +++ b/client/src/base.sass @@ -13,10 +13,18 @@ body --color-bg-close: rgba(38, 70, 97, 1) --color-bg-closest: rgba(47, 86, 120, 1) --color-copy-medium: rgba(229, 209, 149, 1) + --color-copy-highlight: #F5EDD6 --color-link: rgba(87, 189, 37, 1) --color-footer-text: rgba(36,106,120,1) --color-header-logo: rgba(37,163,189,1) + --color-divider: rgba(37,163,189, 0.2) --color-cancel: #BD3E25 + --color-blood: #AD231F + --color-bloodreq: #5C6D70 + --color-physical: #2959A3 + --color-social: #A33829 + --color-mental: #A37A29 + --color-ranged: #8FA0A3 body background: var(--color-bg-far)