elm/lootalot-client
1
0
Fork 0
Code Issues 3 Pull Requests Releases Wiki Activity

unifies styling with bulma

Browse Source
This commit is contained in:
Arthur Gerbaud
2019-12-05 21:19:05 +01:00
parent 2ec3e28f59
commit 2c3f4ffc57
4 changed files with 120 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/Bulma.elm Normal file
View File

@@ -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
]

13
src/Page/Dashboard.elm
View File

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

62
src/Page/GroupChest.elm
View File

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

57
src/Page/Shop.elm
View File

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