diff --git a/client/src/Pages/Build.sass b/client/src/Pages/Build.sass index 1214f6a6..b0434f33 100644 --- a/client/src/Pages/Build.sass +++ b/client/src/Pages/Build.sass @@ -37,6 +37,8 @@ $actions-bar-height: 60px &-filters, &-flaggroup display: inline-block + &-flaggroup + margin-bottom: 8px &-collectionitems--images margin: 0 padding: 0 diff --git a/client/src/Pages/Deck/Edit/Id_.elm b/client/src/Pages/Deck/Edit/Id_.elm index 54604ab1..6fbf1559 100644 --- a/client/src/Pages/Deck/Edit/Id_.elm +++ b/client/src/Pages/Deck/Edit/Id_.elm @@ -12,8 +12,8 @@ import Html.Events exposing (onClick) import Page import Request import Shared +import UI.Deckbuilder as Deckbuilder import UI.Decklist -import UI.DecklistOptions as DecklistOptions import UI.Icon as Icon import UI.Layout.Template import View exposing (View) @@ -42,7 +42,7 @@ type Model type alias Data = { deck : DeckPostSave - , builderOptions : DecklistOptions.Model Msg + , builderOptions : Deckbuilder.Model Msg } @@ -55,7 +55,7 @@ init collection deckId = type Msg = FromShared Shared.Msg - | FromBuilderOptions DecklistOptions.Msg + | FromBuilderOptions Deckbuilder.Msg | ChoseLeader Cards.Faction | Save | SavedDecklist API.Decklist.ResultUpdate @@ -72,7 +72,7 @@ update user msg modelx = ( modelx, Effect.fromShared subMsg ) ( Loading, FetchedDecklist (Ok deck) ) -> - ( Editing { deck = deck, builderOptions = DecklistOptions.init }, Effect.none ) + ( Editing { deck = deck, builderOptions = Deckbuilder.init }, Effect.none ) ( _, FetchedDecklist (Err _) ) -> ( modelx, Effect.none ) @@ -83,7 +83,7 @@ update user msg modelx = ( Editing oldModel, FetchedDecklist (Ok deck) ) -> ( Editing { oldModel | deck = deck }, Effect.none ) - ( Editing oldModel, FromBuilderOptions (DecklistOptions.ChangedDecklist change) ) -> + ( Editing oldModel, FromBuilderOptions (Deckbuilder.ChangedDecklist change) ) -> let oldDeck = oldModel.deck @@ -91,7 +91,7 @@ update user msg modelx = ( Editing { oldModel | deck = { oldDeck | decklist = Deck.setCard oldDeck.decklist change } }, Effect.none ) ( Editing oldModel, FromBuilderOptions subMsg ) -> - ( Editing { oldModel | builderOptions = DecklistOptions.update subMsg oldModel.builderOptions }, Effect.none ) + ( Editing { oldModel | builderOptions = Deckbuilder.update subMsg oldModel.builderOptions }, Effect.none ) ( Editing model, ChoseLeader leader ) -> let @@ -180,7 +180,7 @@ view shared model = , div [ class "deckbldr-decklist" ] [ UI.Decklist.viewEdit decklistActions data.deck ] , div [ class "deckbldr-choices" ] <| - DecklistOptions.view shared.collection FromBuilderOptions data.builderOptions data.deck.decklist + Deckbuilder.view shared.collection FromBuilderOptions data.builderOptions data.deck.decklist ] ] diff --git a/client/src/Pages/Deck/New.elm b/client/src/Pages/Deck/New.elm index c6d51828..be625e0f 100644 --- a/client/src/Pages/Deck/New.elm +++ b/client/src/Pages/Deck/New.elm @@ -14,8 +14,8 @@ import Html.Events exposing (onClick) import Page import Request import Shared +import UI.Deckbuilder as Deckbuilder import UI.Decklist -import UI.DecklistOptions as DecklistOptions import UI.Icon as Icon import UI.Layout.Template import View exposing (View) @@ -40,7 +40,7 @@ page shared req = type alias Model = { key : Key , deck : DeckPreSave - , builderOptions : DecklistOptions.Model Msg + , builderOptions : Deckbuilder.Model Msg } @@ -48,7 +48,7 @@ init : Navigation.Key -> ( Model, Effect Msg ) init key = ( { key = key , deck = Deck.init - , builderOptions = DecklistOptions.init + , builderOptions = Deckbuilder.init } , Effect.none ) @@ -56,7 +56,7 @@ init key = type Msg = FromShared Shared.Msg - | FromBuilderOptions DecklistOptions.Msg + | FromBuilderOptions Deckbuilder.Msg | ChoseLeader Cards.Faction | Save | SavedDecklist API.Decklist.ResultCreate @@ -71,7 +71,7 @@ update user msg model = FromShared subMsg -> ( model, Effect.fromShared subMsg ) - FromBuilderOptions (DecklistOptions.ChangedDecklist change) -> + FromBuilderOptions (Deckbuilder.ChangedDecklist change) -> let oldDeck = model.deck @@ -79,7 +79,7 @@ update user msg model = ( { model | deck = { oldDeck | decklist = Deck.setCard oldDeck.decklist change } }, Effect.none ) FromBuilderOptions subMsg -> - ( { model | builderOptions = DecklistOptions.update subMsg model.builderOptions }, Effect.none ) + ( { model | builderOptions = Deckbuilder.update subMsg model.builderOptions }, Effect.none ) ChoseLeader leader -> let @@ -157,7 +157,7 @@ view shared model = , div [ class "deckbldr-decklist" ] [ UI.Decklist.viewCreate decklistActions model.deck ] , div [ class "deckbldr-choices" ] <| - DecklistOptions.view shared.collection FromBuilderOptions model.builderOptions model.deck.decklist + Deckbuilder.view shared.collection FromBuilderOptions model.builderOptions model.deck.decklist ] ] diff --git a/client/src/Pages/Search.sass b/client/src/Pages/Search.sass index 0836c76d..28c1e23e 100644 --- a/client/src/Pages/Search.sass +++ b/client/src/Pages/Search.sass @@ -6,7 +6,10 @@ overflow: hidden &-flaggroup + $margin: 8px flex: 0 0 max-content + margin-right: $margin + margin-bottom: $margin &-text margin-top: 10px diff --git a/client/src/UI/DecklistOptions.elm b/client/src/UI/Deckbuilder.elm similarity index 99% rename from client/src/UI/DecklistOptions.elm rename to client/src/UI/Deckbuilder.elm index bba2c374..bd63641c 100644 --- a/client/src/UI/DecklistOptions.elm +++ b/client/src/UI/Deckbuilder.elm @@ -1,4 +1,4 @@ -module UI.DecklistOptions exposing (Model, Msg(..), init, update, view) +module UI.Deckbuilder exposing (Model, Msg(..), init, update, view) import Cards exposing (Card) import Clan exposing (Clan) diff --git a/client/src/UI/FilterSelection.elm b/client/src/UI/FilterSelection.elm index d0ce2be4..42a49873 100644 --- a/client/src/UI/FilterSelection.elm +++ b/client/src/UI/FilterSelection.elm @@ -1,8 +1,8 @@ module UI.FilterSelection exposing (Model, Msg(..), attackTypes, clans, disciplines, isAllowed, primaryTraits, secondaryTraits, stacks, update, view) -import Cards +import Cards exposing (Card) import Clan exposing (Clan) -import Html exposing (Html, div, input, label, span) +import Html exposing (Html, div, input, label) import Html.Attributes exposing (class, classList, type_) import Html.Events exposing (onCheck) import UI.Icon as Icon @@ -15,81 +15,81 @@ type alias Model value msg = stacks : Model Cards.CardStack msg stacks = List.map modelHelper - [ ( Cards.AgendaStack, Icon.icon ( Icon.AgendaCard, Icon.Standard ) ) - , ( Cards.HavenStack, Icon.icon ( Icon.Haven, Icon.Standard ) ) - , ( Cards.FactionStack, Icon.icon ( Icon.Faction, Icon.Standard ) ) - , ( Cards.LibraryStack, Icon.icon ( Icon.Library, Icon.Standard ) ) + [ ( Cards.AgendaStack, Icon.AgendaCard ) + , ( Cards.HavenStack, Icon.Haven ) + , ( Cards.FactionStack, Icon.Faction ) + , ( Cards.LibraryStack, Icon.Library ) ] primaryTraits : Model Cards.Trait msg primaryTraits = List.map modelHelper - [ ( Cards.Action, Icon.icon ( Icon.Action, Icon.Standard ) ) - , ( Cards.UnhostedAction, Icon.icon ( Icon.UnhostedAction, Icon.Standard ) ) - , ( Cards.Attack, Icon.icon ( Icon.Attack, Icon.Standard ) ) - , ( Cards.Reaction, Icon.icon ( Icon.Reaction, Icon.Standard ) ) - , ( Cards.InfluenceModifier, Icon.icon ( Icon.InfluenceModifier, Icon.Standard ) ) + [ ( Cards.Action, Icon.Action ) + , ( Cards.UnhostedAction, Icon.UnhostedAction ) + , ( Cards.Attack, Icon.Attack ) + , ( Cards.Reaction, Icon.Reaction ) + , ( Cards.InfluenceModifier, Icon.InfluenceModifier ) ] secondaryTraits : Model Cards.Trait msg secondaryTraits = List.map modelHelper - [ ( Cards.Ongoing, Icon.icon ( Icon.Ongoing, Icon.Standard ) ) - , ( Cards.Scheme, Icon.icon ( Icon.Scheme, Icon.Standard ) ) - , ( Cards.Title, Icon.icon ( Icon.Title, Icon.Standard ) ) - , ( Cards.Conspiracy, Icon.icon ( Icon.Conspiracy, Icon.Standard ) ) - , ( Cards.Alchemy, Icon.icon ( Icon.Alchemy, Icon.Standard ) ) - , ( Cards.Ritual, Icon.icon ( Icon.Ritual, Icon.Standard ) ) - , ( Cards.Special, Icon.icon ( Icon.Special, Icon.Standard ) ) + [ ( Cards.Ongoing, Icon.Ongoing ) + , ( Cards.Scheme, Icon.Scheme ) + , ( Cards.Title, Icon.Title ) + , ( Cards.Conspiracy, Icon.Conspiracy ) + , ( Cards.Alchemy, Icon.Alchemy ) + , ( Cards.Ritual, Icon.Ritual ) + , ( Cards.Special, Icon.Special ) ] attackTypes : Model Cards.AttackType msg attackTypes = List.map modelHelper - [ ( Cards.Physical, Icon.icon ( Icon.Physical, Icon.Standard ) ) - , ( Cards.Social, Icon.icon ( Icon.Social, Icon.Standard ) ) - , ( Cards.Mental, Icon.icon ( Icon.Mental, Icon.Standard ) ) - , ( Cards.Ranged, Icon.icon ( Icon.Ranged, Icon.Standard ) ) + [ ( Cards.Physical, Icon.Physical ) + , ( Cards.Social, Icon.Social ) + , ( Cards.Mental, Icon.Mental ) + , ( Cards.Ranged, Icon.Ranged ) ] clans : Model Clan msg clans = List.map modelHelper - [ ( Clan.Brujah, Icon.icon ( Icon.Brujah, Icon.Standard ) ) - , ( Clan.Gangrel, Icon.icon ( Icon.Gangrel, Icon.Standard ) ) - , ( Clan.Malkavian, Icon.icon ( Icon.Malkavian, Icon.Standard ) ) - , ( Clan.Nosferatu, Icon.icon ( Icon.Nosferatu, Icon.Standard ) ) - , ( Clan.ThinBlood, Icon.icon ( Icon.ThinBlood, Icon.Standard ) ) - , ( Clan.Toreador, Icon.icon ( Icon.Toreador, Icon.Standard ) ) - , ( Clan.Tremere, Icon.icon ( Icon.Tremere, Icon.Standard ) ) - , ( Clan.Ventrue, Icon.icon ( Icon.Ventrue, Icon.Standard ) ) + [ ( Clan.Brujah, Icon.Brujah ) + , ( Clan.Gangrel, Icon.Gangrel ) + , ( Clan.Malkavian, Icon.Malkavian ) + , ( Clan.Nosferatu, Icon.Nosferatu ) + , ( Clan.ThinBlood, Icon.ThinBlood ) + , ( Clan.Toreador, Icon.Toreador ) + , ( Clan.Tremere, Icon.Tremere ) + , ( Clan.Ventrue, Icon.Ventrue ) ] disciplines : Model Cards.Discipline msg disciplines = List.map modelHelper - [ ( Cards.Animalism, Icon.icon ( Icon.Animalism, Icon.Standard ) ) - , ( Cards.Auspex, Icon.icon ( Icon.Auspex, Icon.Standard ) ) - , ( Cards.Celerity, Icon.icon ( Icon.Celerity, Icon.Standard ) ) - , ( Cards.Dominate, Icon.icon ( Icon.Dominate, Icon.Standard ) ) - , ( Cards.Fortitude, Icon.icon ( Icon.Fortitude, Icon.Standard ) ) - , ( Cards.Obfuscate, Icon.icon ( Icon.Obfuscate, Icon.Standard ) ) - , ( Cards.Potence, Icon.icon ( Icon.Potence, Icon.Standard ) ) - , ( Cards.Presence, Icon.icon ( Icon.Presence, Icon.Standard ) ) - , ( Cards.Protean, Icon.icon ( Icon.Protean, Icon.Standard ) ) - , ( Cards.BloodSorcery, Icon.icon ( Icon.BloodSorcery, Icon.Standard ) ) - , ( Cards.ThinBloodAlchemy, Icon.icon ( Icon.ThinBloodAlchemy, Icon.Standard ) ) + [ ( Cards.Animalism, Icon.Animalism ) + , ( Cards.Auspex, Icon.Auspex ) + , ( Cards.Celerity, Icon.Celerity ) + , ( Cards.Dominate, Icon.Dominate ) + , ( Cards.Fortitude, Icon.Fortitude ) + , ( Cards.Obfuscate, Icon.Obfuscate ) + , ( Cards.Potence, Icon.Potence ) + , ( Cards.Presence, Icon.Presence ) + , ( Cards.Protean, Icon.Protean ) + , ( Cards.BloodSorcery, Icon.BloodSorcery ) + , ( Cards.ThinBloodAlchemy, Icon.ThinBloodAlchemy ) ] -modelHelper : ( trait, Html msg ) -> ( trait, ( Html msg, Bool ) ) +modelHelper : ( trait, Icon.IconImage ) -> ( trait, ( Html msg, Bool ) ) modelHelper ( trait, icon ) = - ( trait, ( span [ class "fltrslct-icon_wrapper" ] [ icon ], False ) ) + ( trait, ( Icon.icon ( icon, Icon.Standard ), False ) ) type Msg value @@ -113,27 +113,31 @@ update msg model = view : (Msg value -> msg) -> Model value msg -> Html msg view msg options = - div [ class "fltrslct" ] <| - List.map - (\( value, ( icon, isActive ) ) -> - label - [ classList - [ ( "fltrslct-option", True ) - , ( "fltrslct-option--actv", isActive ) - ] - ] - [ div [ class "fltrslct-icon" ] [ icon ] - , input - [ type_ "checkbox" - , onCheck (ChangedValue value >> msg) - ] - [] - ] - ) - options - - -isAllowed : (Cards.Card -> List value) -> Model value msg -> Cards.Card -> Bool + div [ class "filterpicker" ] + (List.map (viewFilterOption msg) options) + + +viewFilterOption : (Msg value -> msg) -> ( value, ( Html msg, Bool ) ) -> Html msg +viewFilterOption msg ( value, ( icon, isActive ) ) = + label + [ class "filterpicker__option" + , classList [ ( "filterpicker__option--active", isActive ) ] + ] + [ div + [ class "filterpicker__box" + , classList [ ( "filterpicker__box--active", isActive ) ] + ] + [ icon ] + , input + [ class "filterpicker__checkbox" + , type_ "checkbox" + , onCheck (ChangedValue value >> msg) + ] + [] + ] + + +isAllowed : (Card -> List value) -> Model value msg -> Card -> Bool isAllowed toValues model card = let whitelist = diff --git a/client/src/UI/FilterSelection.sass b/client/src/UI/FilterSelection.sass index 78ede103..66e22c8c 100644 --- a/client/src/UI/FilterSelection.sass +++ b/client/src/UI/FilterSelection.sass @@ -1,33 +1,34 @@ -.fltrslct - margin: 5px +.filterpicker display: flex flex-wrap: wrap - &-option - $iconSize: 30px + $optionInner: 32px + &__option display: inline-block - height: $iconSize - width: $iconSize - padding: 5px - box-shadow: inset 0 0 2px var(--color-bg) + padding: 2px + height: $optionInner + width: $optionInner cursor: pointer text-align: center - background: var(--color-greylight) - input - display: none - &--actv - background: var(--color-greydeep) + background: var(--color-bg-farthest) - &-icon - height: 100% - width: 100% + &--active + background: var(--color-bg-closest) + + &__checkbox + display: none + + &__box + $padding: 4px + $size: $optionInner - (2 * $padding) + height: $size + width: $size + padding: $padding display: flex justify-content: center align-items: center - font-size: 24px - line-height: 1 - &-icon_wrapper - height: 100% - width: 100% - display: inline-block + background: var(--color-bg-closest) + + &--active + background: var(--color-bg-farthest)