small tweaks

elm.json

@@ -12,12 +12,12 @@
             "elm/http": "2.0.0",
             "elm/json": "1.1.3",
             "elm/svg": "1.0.1",
+            "elm/time": "1.0.0",
             "elm/url": "1.0.0"
         },
         "indirect": {
             "elm/bytes": "1.0.8",
             "elm/file": "1.0.5",
-            "elm/time": "1.0.0",
             "elm/virtual-dom": "1.0.2"
         }
     },

src/Chest.elm

@@ -1,11 +1,11 @@
 module Chest exposing (..)
 
 import Api exposing (Claims, Item, Loot)
+import Bulma as B
 import Chest.NewFromInventory as NewFromInventory
 import Chest.Selection as Selection
 import Html exposing (..)
 import Table
-import Utils
 
 
 type alias RowRenderer msg =
@@ -171,10 +171,10 @@ update msg model =
 
                         renderItem item =
                             [ if isClaimed item then
-                                Utils.renderIcon
+                                B.icon
                                     { icon = "fas fa-praying-hands"
-                                    , size = "small"
+                                    , size = Just "is-small"
-                                    , ratio = "1x"
+                                    , ratio = Just "fa-1x"
                                     }
 
                               else

src/Main.elm

@@ -2,6 +2,7 @@ module Main exposing (..)
 
 import Browser
 import Browser.Navigation as Nav
+import Bulma as B
 import Html exposing (..)
 import Html.Attributes exposing (..)
 import Html.Events exposing (..)
@@ -11,7 +12,6 @@ import Route exposing (..)
 import Session exposing (..)
 import Svg.Attributes
 import Url
-import Utils exposing (..)
 
 
 
@@ -91,7 +91,7 @@ view model =
 
 navLink icon linkText url =
     a [ class "navbar-item", href url ]
-        [ renderIcon { icon = icon, ratio = "1x", size = "medium" }
+        [ B.icon { icon = icon, ratio = Just "fa-1x", size = Just "is-medium" }
         , span [] [ text linkText ]
         ]
 
@@ -100,8 +100,8 @@ viewHeaderBar : String -> List (Html Msg) -> Navbar -> Html Msg
 viewHeaderBar navbarTitle navbarLinks navbar =
     nav [ class "navbar container is-transparent is-spaced " ]
         [ div [ class "navbar-brand" ]
-            [ a [ class "navbar-item", href "/" ]
+            [ p [ class "navbar-item" ]
-                [ renderIcon { icon = "fab fa-d-and-d", size = "medium", ratio = "2x" }
+                [ B.icon { icon = "fab fa-d-and-d", size = Just "is-medium", ratio = Just "fa-2x" }
                 , span [ class "title is-4", style "padding-left" "0.4em" ] [ text navbarTitle ]
                 ]
             , a

src/Page.elm

@@ -2,15 +2,17 @@ module Page exposing (Page(..), PageMsg, gotoGroupChest, gotoHome, gotoShop, ini
 
 import Api
 import Api.Player
+import Bulma as B
 import Html exposing (..)
 import Html.Attributes exposing (..)
 import Html.Events exposing (..)
 import Page.Dashboard as Home
 import Page.GroupChest as GroupChest
 import Page.Shop as Shop
+import Process
 import Route
 import Session exposing (Session)
-import Utils exposing (renderIcon)
+import Task
 import Wealth
 
 
@@ -49,16 +51,16 @@ maybeSession page =
 
 view page =
     let
-        ( title, ( controls, content ) ) =
+        ( pageTitle, ( controls, content ) ) =
             case page of
                 Home home ->
-                    ( "Lootalot"
+                    ( "Loot-a-lot"
                     , Home.view home
                         |> mapPageMsg GotHomeMsg
                     )
 
                 GroupChest chest ->
-                    ( "Lootalot"
+                    ( "Coffre de groupe"
                     , GroupChest.view chest
                         |> mapPageMsg GotGroupChestMsg
                     )
@@ -83,42 +85,38 @@ view page =
                       )
                     )
 
-        navbarTitle =
+        ( navbarTitle, navbarLinks ) =
             case maybeSession page of
                 Just session ->
                     case Session.user session of
                         Session.Player data ->
-                            data.player.name
+                            ( data.player.name
+                            , [ navLink "fas fa-home" Route.Home page
+                              , navLink "fas fa-store-alt" Route.Merchant page
+                              , if data.player.id /= 0 then
+                                    navLink "fas fa-gem" Route.GroupChest page
+
+                                else
+                                    text ""
+                              ]
+                            )
 
                         Session.Admin _ ->
-                            "Administration"
+                            ( "Administration"
+                            , [ navLink "fas fa-home" Route.Home page
+                              , navLink "fas fa-store-alt" Route.Merchant page
+                              ]
+                            )
 
                 Nothing ->
-                    "Loot-a-lot"
+                    ( "Loot-a-lot"
-
+                    , []
-        navbarLinks =
+                    )
-            case maybeSession page of
-                Just session ->
-                    case Session.user session of
-                        Session.Player data ->
-                            [ navLink "fas fa-store-alt" Route.Merchant page
-                            , if data.player.id /= 0 then
-                                navLink "fas fa-gem" Route.GroupChest page
-
-                              else
-                                text ""
-                            ]
-
-                        Session.Admin _ ->
-                            [ navLink "fas fa-store-alt" Route.Merchant page ]
-
-                Nothing ->
-                    []
     in
-    ( title
+    ( pageTitle
     , { title = navbarTitle, links = navbarLinks }
     , [ div [ class "container" ] <|
-            [ viewSessionBar (maybeSession page) [ controls ]
+            [ viewSessionBar (maybeSession page) pageTitle [ controls ]
             , div [ class "section" ]
                 content
             ]
@@ -141,40 +139,40 @@ viewNotification kind content =
                 NotifyError ->
                     "is-danger"
     in
-    div [ class "level-item" ]
+    div [ class ("level-item notification " ++ className) ]
-        [ span [ class ("tag " ++ className) ]
+        [ text content
-            [ text content
+        , a [ class "delete", onClick <| CloseNotification kind ] []
-            , a [ class "delete" ] []
-            ]
         ]
 
 
-viewSessionBar session controls =
+viewSessionBar session pageTitle pageControls =
     let
         user =
             case Maybe.map Session.user session of
                 Nothing ->
-                    [ text "" ]
+                    []
 
                 Just (Session.Player data) ->
                     -- TODO: Urgh ! When will this Wealth.Model move out of session !
-                    Wealth.view data.player.wealth data.wealth
+                    [ div [ class "level-item level is-mobile" ] <|
-                        ++ (if data.player.debt > 0 then
+                        List.map (Html.map Wealth) <|
-                                [ div [ class "level-item" ]
+                            Wealth.view data.player.wealth data.wealth
-                                    [ p [ class "has-text-right has-text-danger" ]
+                                ++ (if data.player.debt > 0 then
-                                        [ strong [ class "heading is-marginless has-text-danger" ] [ text "Dette" ]
+                                        [ div [ class "level-item" ]
-                                        , span [ class <| "is-size-4" ] [ text (String.fromInt data.player.debt ++ "po") ]
+                                            [ p [ class "has-text-right has-text-danger" ]
+                                                [ strong [ class "heading is-marginless has-text-danger" ] [ text "Dette" ]
+                                                , span [ class <| "is-size-4" ] [ text (String.fromInt data.player.debt ++ "po") ]
+                                                ]
+                                            ]
                                         ]
-                                    ]
-                                ]
 
-                            else
+                                    else
-                                []
+                                        []
-                           )
+                                   )
-                        |> List.map (Html.map Wealth)
+                    ]
 
                 Just (Session.Admin _) ->
-                    [ text "Admin" ]
+                    []
 
         notifications =
             [ case Maybe.map Session.notification session of
@@ -190,15 +188,20 @@ viewSessionBar session controls =
                 _ ->
                     text ""
             ]
+
+        title =
+            p [ class "title" ] [ text pageTitle ]
     in
     section [ class "hero is-dark is-bold" ]
         [ div [ class "hero-body" ]
-            [ renderLevel user (notifications ++ controls) ]
+            [ renderLevel notifications user
+            , renderLevel [ title ] pageControls
+            ]
         ]
 
 
 renderLevel left right =
-    div [ class "level container is-mobile" ]
+    div [ class "level container" ]
         [ div [ class "level-left" ] left
         , div [ class "level-right" ] right
         ]
@@ -219,7 +222,7 @@ navLink icon route page =
                     ( "Coffre de groupe", "/groupe" )
 
                 Route.Home ->
-                    ( "Home", "/" )
+                    ( "Accueil", "/" )
 
                 Route.About ->
                     ( "About", "/" )
@@ -242,7 +245,7 @@ navLink icon route page =
                     False
     in
     a [ class "navbar-item", classList [ ( "is-active", isActive ) ], href url ]
-        [ renderIcon { icon = icon, ratio = "1x", size = "medium" }
+        [ B.icon { icon = icon, ratio = Just "fa-1x", size = Just "is-medium" }
         , span [] [ text link ]
         ]
 
@@ -258,6 +261,7 @@ type PageMsg
     | GotHomeMsg Home.Msg
     | GotShopMsg Shop.Msg
     | Wealth Wealth.Msg
+    | CloseNotification NotificationKind
 
 
 
@@ -343,6 +347,21 @@ update msg page =
         ( GotShopMsg _, _, _ ) ->
             ( page, Cmd.none )
 
+        -- Notifications
+        --
+        ( CloseNotification kind, _, _ ) ->
+            ( map
+                (case kind of
+                    NotifySuccess ->
+                        Session.setNotification Nothing
+
+                    NotifyError ->
+                        Session.setError Nothing
+                )
+                page
+            , Cmd.none
+            )
+
         -- Wealth viewer/editor
         ( Wealth wealthMsg, _, Just session ) ->
             let
@@ -392,7 +411,14 @@ update msg page =
                     ( page
                         |> map (Session.updateUser updatedUser)
                         |> map (Session.updateNotifications ( result.notification, result.errors ))
-                    , Cmd.none
+                    , case result.notification of
+                        Just _ ->
+                            Process.sleep 5000.0
+                                |> Task.andThen (\_ -> Task.succeed <| CloseNotification NotifySuccess)
+                                |> Task.perform identity
+
+                        Nothing ->
+                            Cmd.none
                     )
 
                 -- |> setNotification notification

src/Session.elm

@@ -1,4 +1,19 @@
-module Session exposing (Session, User(..), error, getSession, init, key, notification, updateNotifications, updateUser, updateWealth, user, wealth)
+module Session exposing
+    ( Session
+    , User(..)
+    , error
+    , getSession
+    , init
+    , key
+    , notification
+    , setError
+    , setNotification
+    , updateNotifications
+    , updateUser
+    , updateWealth
+    , user
+    , wealth
+    )
 
 import Api exposing (Claims, Loot)
 import Api.Player as Player exposing (Player)
@@ -167,6 +182,14 @@ notification session =
     maybeNotification
 
 
+setNotification maybeNotification session =
+    let
+        (Session navKey ( _, maybeError ) loggedUser) =
+            session
+    in
+    Session navKey ( maybeNotification, maybeError ) loggedUser
+
+
 
 -- Retrieve the error or Nothing
 

src/Utils.elm

@@ -1,19 +0,0 @@
-module Utils exposing (renderIcon, actionButton)
-
-import Html exposing (..)
-import Html.Attributes exposing (..)
-import Html.Events exposing (..)
-import Svg.Attributes
-
-renderIcon params =
-    span [ class <| "icon is-" ++ params.size ]
-        [ i [ class <| params.icon ++ " fa-" ++ params.ratio ] [] ]
-
-actionButton msg t icon color =
-    button
-        [ class <| "button is-medium level-item is-" ++ color
-        , onClick msg
-        ]
-        [ span [ class "icon" ] [ i [ Svg.Attributes.class <| "fas fa-" ++ icon ] [] ]
-        , p [] [ text t ]
-        ]

src/Wealth.elm

@@ -34,12 +34,14 @@ view wealth model =
 viewUpdateWealth amount =
     [ input
         [ class "level-item"
-        , class "input"
+        , class "input has-text-right has-background-dark has-text-white"
         , classList
             [ ( "is-danger", (not << isValid) amount )
             , ( "is-success", isValid amount )
             ]
         , value amount
+        , placeholder "En pièces d'or..."
+        , style "width" "8em"
         , onInput AmountChanged
         ]
         []
@@ -77,7 +79,7 @@ update : Msg -> Model -> ( Model, Maybe Float )
 update msg model =
     case msg of
         StartEdit ->
-            ( Edit "0.0", Nothing )
+            ( Edit "", Nothing )
 
         QuitEdit ->
             ( View, Nothing )