From 27d7ca63b17505ea06a94e6963a7069790df30ca Mon Sep 17 00:00:00 2001 From: Artus Date: Wed, 20 Nov 2019 16:06:58 +0100 Subject: [PATCH] moves headerbar out of chest page --- src/Main.elm | 168 +++++++++++++++++++++++++++++++++++---------- src/Page/Chest.elm | 123 ++------------------------------- 2 files changed, 136 insertions(+), 155 deletions(-) diff --git a/src/Main.elm b/src/Main.elm index bfc9a39..c4550ac 100644 --- a/src/Main.elm +++ b/src/Main.elm @@ -36,11 +36,36 @@ main = -- Model -type Model +type alias Model = + { navbar : Navbar + , page : Page + } + + +type alias Navbar = + { menuOpen : Bool + , navKey : Nav.Key + } + + +initNavbar key = + Navbar False key + + +type Page = Chest Chest.Model -- | Admin Admin.Model | About - | Loading Nav.Key + | Loading + + +type alias HasPage r = + { r | page : Page } + + +setPage : Page -> HasPage r -> HasPage r +setPage page model = + { model | page = page } @@ -59,35 +84,34 @@ type Model init : () -> Url.Url -> Nav.Key -> ( Model, Cmd Msg ) init _ _ key = - ( Loading key, Session.init SessionLoaded key ) + ( { navbar = initNavbar key + , page = Loading + } + , Session.init SessionLoaded key + ) -{- - case flags of - Just id -> - let - session = - Session.playerSession key id - - ( chest, cmd ) = - Chest.init session - in - ( Chest chest, Cmd.map GotChestMsg cmd ) - - Nothing -> - ( About, Cmd.none ) --} ---- --- VIEWS ---- +-- VIEW view : Model -> Browser.Document Msg view model = + let + ( title, header, content ) = + viewPage model.page + in + { title = title + , body = + viewHeaderBar header.title header.links model.navbar + :: content + } + + +viewPage page = let ( title, content ) = - case model of + case page of Chest chest -> ( "Loot-a-lot", List.map (Html.map GotChestMsg) (Chest.view chest) ) @@ -96,38 +120,106 @@ view model = About -> ( "A propos", [ p [] [ text "A propos" ] ] ) - Loading _ -> - ( "Chargement...", [ p [] [ text "Chargement" ] ] ) + Loading -> + ( "Veuillez patienter...", [ p [] [ text "Chargement" ] ] ) + + navbarTitle = + case page of + Chest chest -> + chest.state.player.name + + About -> + "Loot-a-lot" + + Loading -> + "Loot-a-(...)" + + navbarLinks = + case page of + Chest chest -> + let + linkWithGem = + navLink "fas fa-gem" + in + [ navLink "fas fa-store-alt" "Marchand" "/marchand" + , if chest.state.player.id == 0 then + linkWithGem "Nouveau loot" "/nouveau-tresor" + + else + linkWithGem "Coffre de groupe" "/coffre" + ] + + _ -> + [] in - { title = title - , body = content - } + ( title, { title = navbarTitle, links = navbarLinks }, content ) + + + +-- HEADER SECTION + + +navLink icon linkText url = + a [ class "navbar-item", href url ] + [ renderIcon { icon = icon, ratio = "1x", size = "medium" } + , span [] [ text linkText ] + ] + + +viewHeaderBar : String -> List (Html Msg) -> Navbar -> Html Msg +viewHeaderBar navbarTitle navbarLinks navbar = + nav [ class "navbar", class "is-transparent" ] + [ div [ class "navbar-brand" ] + [ a [ class "navbar-item", href "/" ] + [ renderIcon { icon = "fab fa-d-and-d", size = "medium", ratio = "2x" } + , span [ class "title is-4", style "padding-left" "0.4em" ] [ text navbarTitle ] + ] + , a + [ class "navbar-burger" + , classList [ ( "is-active", navbar.menuOpen ) ] + , onClick SwitchMenuOpen + ] + [ span [ attribute "aria-hidden" "true" ] [] + , span [ attribute "aria-hidden" "true" ] [] + , span [ attribute "aria-hidden" "true" ] [] + ] + ] + , div [ class "navbar-menu", classList [ ( "is-active", navbar.menuOpen ) ] ] + [ div [ class "navbar-end" ] navbarLinks + ] + ] + + + +-- UPDATE type Msg = UrlChanged Url.Url | LinkClicked Browser.UrlRequest | SessionLoaded (Maybe Session) + | SwitchMenuOpen | GotChestMsg Chest.Msg --- | GotAdminMsg Admin.Msg +-- | GotAdminMsg Admin.Msg +update : Msg -> Model -> ( Model, Cmd Msg ) update msg model = let updateChest chestMsg = - case model of + case model.page of Chest chest -> let ( newChest, cmd ) = Chest.update chestMsg chest in - ( Chest newChest, Cmd.map GotChestMsg cmd ) + ( setPage (Chest newChest) model, Cmd.map GotChestMsg cmd ) _ -> - ( About, Cmd.none ) + ( model |> setPage About, Cmd.none ) in case msg of SessionLoaded session -> @@ -137,17 +229,17 @@ update msg model = ( chest, cmd ) = Chest.init logged in - ( Chest chest, Cmd.map GotChestMsg cmd ) + ( model |> setPage (Chest chest), Cmd.map GotChestMsg cmd ) Nothing -> - ( About, Cmd.none ) + ( model |> setPage About, Cmd.none ) LinkClicked urlRequest -> - case model of + case model.page of Chest chestModel -> case urlRequest of Browser.Internal url -> - ( model, Nav.pushUrl chestModel.navKey (Url.toString url) ) + ( model, Nav.pushUrl model.navbar.navKey (Url.toString url) ) Browser.External href -> ( model, Cmd.none ) @@ -165,14 +257,16 @@ update msg model = updateChest (Chest.SetContent content) _ -> - ( About, Cmd.none ) + ( model |> setPage About, Cmd.none ) GotChestMsg chestMsg -> updateChest chestMsg + SwitchMenuOpen -> + ( { model | navbar = Navbar (not model.navbar.menuOpen) model.navbar.navKey }, Cmd.none ) + --- STATE Utils -- SUBSCRIPTIONS -- diff --git a/src/Page/Chest.elm b/src/Page/Chest.elm index 3877325..6bc7237 100644 --- a/src/Page/Chest.elm +++ b/src/Page/Chest.elm @@ -27,8 +27,7 @@ import Utils exposing (..) type alias State = - { menuOpen : Bool - , mode : ActionMode + { mode : ActionMode , error : Maybe String , notification : Maybe String @@ -73,7 +72,6 @@ init (Player navKey playerId) = ( Model navKey (State - False View Nothing Nothing @@ -130,103 +128,6 @@ viewNotification model = --- DEBUG SECTION - - -viewDebugSection : Model -> Html Msg -viewDebugSection model = - div [ class "panel is-danger" ] - [ p [ class "panel-heading" ] [ text "Debug" ] - , p [ class "panel-block has-text-danger" ] [ text <| Maybe.withDefault "" model.state.error ] - , p [ class "panel-block" ] [ text ("Shown content : " ++ Debug.toString model.shown) ] - , p [ class "panel-block" ] [ text ("Active Mode : " ++ Debug.toString model.state.mode) ] - , p [ class "panel-block" ] [ text ("Selection : " ++ Debug.toString model.selection) ] - , p [ class "panel-block" ] [ text ("Claims : " ++ Debug.toString model.claims) ] - , p [] debugSandbox - ] - - -stackedIcon name = - span [ class "icon is-medium" ] - [ span [ class "fa-stack" ] - [ i [ class "fas fa-circle fa-stack-2x" ] [] - , i [ class (name ++ " fa-inverse fa-stack-1x") ] [] - , text "" - ] - ] - - -debugSandbox = - [ stackedIcon "fas fa-coins" - , stackedIcon "fab fa-d-and-d" - , stackedIcon "fas fa-praying-hands" - , stackedIcon "fas fa-gem" - , stackedIcon "fas fa-pen" - , stackedIcon "fas fa-percentage" - , stackedIcon "fas fa-store-alt" - , stackedIcon "fas fa-cart-plus" - , stackedIcon "fas fa-angry" - , stackedIcon "fas fa-plus" - , stackedIcon "fas fa-tools" - , stackedIcon "fas fa-search" - ] - - - --- HEADER SECTION - - -viewHeaderBar : String -> Model -> Html Msg -viewHeaderBar title model = - nav [ class "navbar", class "is-transparent" ] - [ div [ class "navbar-brand" ] - [ a [ class "navbar-item", href "/" ] - [ renderIcon { icon = "fab fa-d-and-d", size = "medium", ratio = "2x" } - , span [ class "title is-4", style "padding-left" "0.4em" ] [ text title ] - ] - , a - [ class "navbar-burger" - , classList [ ( "is-active", model.state.menuOpen ) ] - , onClick SwitchMenuOpen - ] - [ span [ attribute "aria-hidden" "true" ] [] - , span [ attribute "aria-hidden" "true" ] [] - , span [ attribute "aria-hidden" "true" ] [] - ] - ] - , div [ class "navbar-menu", classList [ ( "is-active", model.state.menuOpen ) ] ] - [ div [ class "navbar-end" ] - [ a [ class "navbar-item", href "/marchand" ] - [ renderIcon { icon = "fas fa-store-alt", ratio = "1x", size = "medium" } - , span [] [ text "Marchand" ] - ] - , a - [ class "navbar-item" - , href - (if model.state.player.id == 0 then - "/nouveau-tresor" - - else - "/coffre" - ) - ] - [ renderIcon { icon = "fas fa-gem", ratio = "1x", size = "medium" } - , span [] - [ text - (if model.state.player.id == 0 then - "Nouveau loot" - - else - "Coffre de groupe" - ) - ] - ] - ] - ] - ] - - - -- PLAYER BAR @@ -236,14 +137,11 @@ viewPlayerBar player actionControls ( editing, amount ) = [ div [ class "hero-body" ] [ div [ class "level container is-mobile" ] [ div [ class "level-left" ] - ([ div [ class "level-item" ] - [ p [ class "title is-3" ] [ text player.name ] ] - , div [ class "level-item" ] + (div [ class "level-item" ] [ span [ class "icon is-large" ] [ i [ class "fas fa-2x fa-piggy-bank" ] [] ] , span [ class "icon", onClick EditWealth ] [ i [ class "fas fa-tools" ] [] ] ] - ] - ++ (if editing then + :: (if editing then viewUpdateWealth amount else @@ -438,8 +336,7 @@ view model = |> List.filter (\i -> String.toLower i.name |> String.contains (String.toLower model.searchText)) in - [ viewHeaderBar "Mon coffre" model - , viewPlayerBar model.state.player renderControls ( model.state.editWealth, model.state.wealthAmount ) + [ viewPlayerBar model.state.player renderControls ( model.state.editWealth, model.state.wealthAmount ) , main_ [ class "container" ] [ viewNotification model @@ -864,7 +761,6 @@ type Msg | GotPlayer (HttpResult Api.Player) -- Chest UI | ClearNotification - | SwitchMenuOpen | SetContent ChestContent | SearchTextChanged String -- Selection @@ -896,7 +792,7 @@ switchEditWealth state = setWealthAmount state amount = { state - | wealthAmount = amount + | wealthAmount = String.replace "," "." amount } @@ -950,15 +846,6 @@ update msg model = , Cmd.none ) - SwitchMenuOpen -> - let - state = - model.state - in - ( { model | state = { state | menuOpen = not model.state.menuOpen } } - , Cmd.none - ) - AddMsg addMsg -> case addMsg of NewItemsFromList newLoot maybeErrors ->