unifies styling with bulma

src/Bulma.elm

@@ -0,0 +1,68 @@
+module Bulma exposing (..)
+
+{-
+
+   Helper to style with Bulma.css
+
+-}
+
+import Html exposing (..)
+import Html.Attributes exposing (..)
+import Html.Events exposing (..)
+import Svg.Attributes
+
+
+
+-- ICONS
+
+
+icon : { icon : String, size : Maybe String, ratio : Maybe String } -> Html msg
+icon params =
+    span [ class <| "icon " ++ Maybe.withDefault "" params.size ]
+        [ i [ Svg.Attributes.class <| params.icon ++ " " ++ Maybe.withDefault "" params.ratio ] [] ]
+
+
+
+-- BUTTONS
+
+
+btn : msg -> { text : String, icon : String, color : String } -> Html msg
+btn msg params =
+    button
+        [ class <| "button is-medium level-item " ++ params.color
+        , onClick msg
+        ]
+        [ icon { icon = params.icon, size = Nothing, ratio = Nothing }
+        , p [] [ text params.text ]
+        ]
+
+
+buttons btns =
+    div [ class "buttons" ] btns
+
+
+confirmButtons confirm cancel =
+    buttons [ confirmBtn confirm, cancelBtn cancel ]
+
+
+confirmBtn msg =
+    btn msg { text = "Ok", icon = "fas fa-check", color = "is-primary" }
+
+
+cancelBtn msg =
+    btn msg { text = "Annuler", icon = "fas fa-times", color = "is-danger" }
+
+
+
+-- TABLES
+--
+
+
+datatable headers rows =
+    table [ class "table is-fullwidth is-striped" ]
+        [ thead [ class "table-header" ] <|
+            List.map
+                (\header -> th [] [ text header ])
+                headers
+        , tbody [] rows
+        ]

src/Page/Dashboard.elm

@@ -2,6 +2,7 @@ module Page.Dashboard exposing (Model, Msg(..), getSession, init, update, update
 
 import Api
 import Api.Player as Player exposing (Player, Wealth)
+import Bulma as B
 import Html exposing (..)
 import Html.Attributes exposing (..)
 import Html.Events exposing (..)
@@ -125,10 +126,10 @@ view model =
         Admin (AdminConfig session players playerForm) ->
             ( case playerForm of
                 Nothing ->
-                    modeButton "Ajouter un joueur" (AdminViewer EditPlayer)
+                    B.btn (AdminViewer EditPlayer) { text = "Ajouter un joueur", icon = "fas fa-plus", color = "is-primary" }
 
                 Just _ ->
-                    buttons [ modeButton "Ok" ConfirmNewPlayer, modeButton "Annuler" CloseEdit ]
+                    B.confirmButtons ConfirmNewPlayer CloseEdit
                         |> Html.map AdminViewer
             , [ div [ class "section" ]
                     [ case playerForm of
@@ -137,11 +138,9 @@ view model =
 
                         Just form ->
                             editNewPlayer form
-                    , table [ class "table is-fullwidth is-striped" ]
+                    , B.datatable
-                        [ thead [ class "table-header" ]
+                        [ "Joueurs" ]
-                            [ th [] [ text "Joueurs" ] ]
+                        (List.map viewPlayer players)
-                        , tbody [] <| List.map viewPlayer players
-                        ]
                     ]
               ]
             )

src/Page/GroupChest.elm

@@ -1,14 +1,12 @@
-module Page.GroupChest exposing (Model, Msg(..), init, refresh, update, view)
+module Page.GroupChest exposing (Model, Msg(..), init, update, view)
 
 import Api exposing (HttpResult, Loot)
+import Bulma as B
 import Html exposing (..)
 import Html.Attributes exposing (..)
 import Html.Events exposing (..)
 import Page.Chest as Chest exposing (Chest)
 import Session exposing (Session, User(..))
-import Set
-import Table
-import Utils exposing (renderIcon)
 
 
 type alias Model =
@@ -26,7 +24,7 @@ type State
 
 getClaimsFromSession session =
     case Session.user session of
-        Session.Player data ->
+        Player data ->
             if data.player.id /= 0 then
                 data.claims
                 -- TODO: The group and admin case should be impossible !
@@ -34,7 +32,7 @@ getClaimsFromSession session =
             else
                 []
 
-        Session.Admin _ ->
+        Admin _ ->
             []
 
 
@@ -66,23 +64,20 @@ view model =
                 let
                     ( isPlayer, isGroup ) =
                         case Session.user model.session of
-                            Session.Admin _ ->
+                            Admin _ ->
                                 ( False, False )
 
-                            Session.Player data ->
+                            Player data ->
                                 ( True, data.player.id == 0 )
                 in
                 case ( model.chest, isPlayer && not isGroup ) of
                     ( Chest.View _, True ) ->
-                        button
+                        B.btn
-                            [ class "button"
-                            , onClick
                             (GotChestMsg <| Chest.claim (getClaimsFromSession model.session))
-                            ]
+                            { text = "Demander", icon = "fas fa-praying-hands", color = "is-primary" }
-                            [ text "Demander" ]
 
                     ( Chest.Claim _, True ) ->
-                        button [ class "button", onClick ConfirmGrab ] [ text "Valider" ]
+                        B.confirmButtons ConfirmGrab (GotChestMsg Chest.show)
 
                     ( _, _ ) ->
                         text ""
@@ -103,10 +98,6 @@ type InnerMsg
     | ConfirmGrab
 
 
-refresh model =
-    update (Internal <| GotChestMsg (Chest.intoMode (Chest.IntoViewWithClaims (getClaimsFromSession model.session)))) model
-
-
 update : Msg -> Model -> ( Model, Cmd Msg )
 update msg model =
     case msg of
@@ -115,7 +106,7 @@ update msg model =
 
         Internal ConfirmGrab ->
             case ( Session.user model.session, model.loot, model.chest ) of
-                ( Session.Player data, Loaded loot, Chest.Claim _ ) ->
+                ( Player data, Loaded loot, Chest.Claim _ ) ->
                     ( model
                     , Chest.confirmGrab
                         data.player.id
@@ -128,7 +119,8 @@ update msg model =
                     ( model, Cmd.none )
 
         Internal innerMsg ->
-            (case innerMsg of
+            Tuple.mapSecond (Cmd.map Internal) <|
+                case innerMsg of
                     GotLoot _ (Ok loot) ->
                         ( { model | loot = Loaded loot }, Cmd.none )
 
@@ -137,15 +129,9 @@ update msg model =
 
                     GotChestMsg chestMsg ->
                         Chest.update chestMsg model.chest
-                        |> updateChest model
+                            |> Tuple.mapBoth
+                                (\chest -> { model | chest = chest })
+                                (Cmd.map GotChestMsg)
 
                     _ ->
                         ( model, Cmd.none )
-            )
-                |> Tuple.mapSecond (Cmd.map Internal)
-
-
-updateChest model ( chestModel, chestCmd ) =
-    ( { model | chest = chestModel }
-    , Cmd.map GotChestMsg chestCmd
-    )

src/Page/Shop.elm

@@ -1,15 +1,13 @@
 module Page.Shop exposing (Model, Msg(..), init, update, view)
 
 import Api exposing (HttpResult, Item, Loot)
-import Dict exposing (Dict)
+import Bulma as B
 import Html exposing (..)
 import Html.Attributes exposing (..)
 import Html.Events exposing (..)
 import Page.Chest as Chest exposing (Chest)
 import Page.Chest.NewFromInventory as NewChest
 import Session exposing (Session, getSession)
-import Set exposing (Set)
-import Table
 
 
 type alias Model =
@@ -29,21 +27,6 @@ init session =
     ( Model session Loading Chest.init, fetchShopItems )
 
 
-fetchShopItems =
-    Api.fetchLoot GotLoot Api.OfShop
-        |> Cmd.map Internal
-
-
-btn : String -> msg -> Html msg
-btn t msg =
-    button [ class "button", onClick msg ] [ text t ]
-
-
-buttons : List (Html msg) -> Html msg
-buttons bs =
-    div [ class "buttons" ] bs
-
-
 view : Model -> ( Html Msg, List (Html Msg) )
 view model =
     case model.loot of
@@ -58,27 +41,26 @@ view model =
             )
 
         Loaded loot ->
-            let
+            ( Html.map Internal <|
-                controls =
-                    Html.map Internal <|
                 case ( model.chest, Session.user model.session ) of
                     ( Chest.View _, Session.Admin _ ) ->
-                                btn "Remplacer" (GotChestMsg Chest.new)
+                        B.btn (GotChestMsg Chest.new) { text = "Remplacer", icon = "fas fa-refresh", color = "is-primary" }
 
                     ( Chest.View _, Session.Player _ ) ->
-                                btn "Acheter" (GotChestMsg Chest.buy)
+                        B.btn (GotChestMsg Chest.buy) { text = "Acheter", icon = "fas fa-coins", color = "is-primary" }
 
                     ( Chest.Buy _, Session.Player _ ) ->
-                                buttons [ btn "Ok" ConfirmBuy, btn "Annuler" (GotChestMsg Chest.show) ]
+                        B.confirmButtons ConfirmBuy (GotChestMsg Chest.show)
 
                     ( Chest.New _, Session.Admin _ ) ->
-                                buttons [ btn "Ok" ConfirmRefresh, btn "Annuler" (GotChestMsg Chest.show) ]
+                        B.confirmButtons ConfirmRefresh (GotChestMsg Chest.show)
 
                     _ ->
                         text ""
-            in
+            , List.map
-            ( controls
+                (Html.map Internal)
-            , [ Chest.view model.chest loot |> Html.map (Internal << GotChestMsg) ]
+                [ Chest.view model.chest loot |> Html.map GotChestMsg
+                ]
             )
 
 
@@ -180,3 +162,8 @@ update msg model =
 
         _ ->
             ( model, Cmd.none )
+
+
+fetchShopItems =
+    Api.fetchLoot GotLoot Api.OfShop
+        |> Cmd.map Internal