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.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" ]
[ thead [ class "table-header" ]
[ th [] [ text "Joueurs" ] ]
, tbody [] <| List.map viewPlayer players
]
, B.datatable
[ "Joueurs" ]
(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 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
[ class "button"
, onClick
(GotChestMsg <| Chest.claim (getClaimsFromSession model.session))
]
[ text "Demander" ]
B.btn
(GotChestMsg <| Chest.claim (getClaimsFromSession model.session))
{ text = "Demander", icon = "fas fa-praying-hands", color = "is-primary" }
( 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,24 +119,19 @@ update msg model =
( model, Cmd.none )
Internal innerMsg ->
(case innerMsg of
GotLoot _ (Ok loot) ->
( { model | loot = Loaded loot }, Cmd.none )
Tuple.mapSecond (Cmd.map Internal) <|
case innerMsg of
GotLoot _ (Ok loot) ->
( { model | loot = Loaded loot }, Cmd.none )
GotLoot _ (Err _) ->
( { model | loot = LoadError "Le chargement a échoué" }, Cmd.none )
GotLoot _ (Err _) ->
( { model | loot = LoadError "Le chargement a échoué" }, Cmd.none )
GotChestMsg chestMsg ->
Chest.update chestMsg model.chest
|> updateChest model
GotChestMsg chestMsg ->
Chest.update chestMsg model.chest
|> 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
)
_ ->
( model, Cmd.none )

57
src/Page/Shop.elm
View File

@@ -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
controls =
Html.map Internal <|
case ( model.chest, Session.user model.session ) of
( Chest.View _, Session.Admin _ ) ->
btn "Remplacer" (GotChestMsg Chest.new)
( Html.map Internal <|
case ( model.chest, Session.user model.session ) of
( Chest.View _, Session.Admin _ ) ->
B.btn (GotChestMsg Chest.new) { text = "Remplacer", icon = "fas fa-refresh", color = "is-primary" }
( Chest.View _, Session.Player _ ) ->
btn "Acheter" (GotChestMsg Chest.buy)
( Chest.View _, Session.Player _ ) ->
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) ]
( Chest.Buy _, Session.Player _ ) ->
B.confirmButtons ConfirmBuy (GotChestMsg Chest.show)
( Chest.New _, Session.Admin _ ) ->
buttons [ btn "Ok" ConfirmRefresh, btn "Annuler" (GotChestMsg Chest.show) ]
( Chest.New _, Session.Admin _ ) ->
B.confirmButtons ConfirmRefresh (GotChestMsg Chest.show)
_ ->
text ""
in
( controls
, [ Chest.view model.chest loot |> Html.map (Internal << GotChestMsg) ]
_ ->
text ""
, List.map
(Html.map Internal)
[ 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