refactors rowControls

This commit is contained in:
2019-11-03 22:01:45 +01:00
parent d415a92d41
commit c79b95e1d7
2 changed files with 456 additions and 319 deletions

View File

@@ -252,7 +252,8 @@ update msg model =
{ state | activeMode = nextMode
, selection = case nextMode of
Nothing -> Nothing
Just _ -> Just Set.empty
Just Grab -> Just (Set.fromList [34, 38])
Just others -> Just Set.empty
}}
, cmd)
@@ -303,9 +304,10 @@ type ViewMode
| Confirm -- Confirm action and exit mode
actionButton mode t icon color =
button [ class <| "button is-rounded is-" ++ color
button [ class <| "button is-" ++ color
, onClick (ModeSwitched mode) ]
[ span [ class "icon" ] [ i [ Svg.Attributes.class <| "fas fa-" ++ icon ] [] ]
, p [] [text t]
]
view : Model -> Browser.Document Msg
@@ -324,16 +326,17 @@ view model =
actionControls =
case model.state.activeMode of
Just mode -> -- When a mode is active
[ div [class "buttons"]
[actionButton (Just Confirm) "Valider" "plus" "primary"
, actionButton Nothing "Annuler" "coins" "danger"]
[ div [ class "buttons has-addons"]
[ actionButton (Just Confirm) "Valider" "plus" "primary"
, actionButton Nothing "Annuler" "times" "danger"
]
]
Nothing -> -- Buttons to enter mode
case model.state.route of
PlayerChest -> [actionButton (Just Sell) "" "coins" "danger"]
PlayerChest -> [actionButton (Just Sell) "Vendre" "coins" "danger"]
GroupLoot -> [actionButton (Just Grab) "Demander" "coins" "primary"]
Merchant -> [actionButton (Just Buy) "" "coins" "success"]
NewLoot -> []
Merchant -> [actionButton (Just Buy) "Acheter" "coins" "success"]
NewLoot -> [actionButton (Just Add) "Nouveau loot" "plus" "primary"]
in
{ title = "Loot-a-lot in ELM"
@@ -343,7 +346,7 @@ view model =
, article [class "section container"]
[ p [class "heading"] [text header]
, viewSearchBar
, viewLoot shownLoot model.state.selection model.state.activeMode
, viewChest shownLoot model
]
, hr [] []
, section [class "container"] [viewDebugSection model]
@@ -352,58 +355,76 @@ view model =
-- LOOT Views
isSelected id selection =
Set.member id selection
isSelected : Maybe Selection -> Item -> Bool
isSelected selection item =
case selection of
Just s ->
Set.member item.id s
Nothing ->
False
viewLoot : Loot -> Maybe Selection -> Maybe ViewMode -> Html Msg
viewLoot items selection activeMode =
table [ class "table is-fullwidth is-striped is-light"]
([ thead [class "table-header"]
[ th [] [text "Nom"] ]
]
++ List.map (viewItemTableRow selection activeMode) items
)
renderName item =
p [] [text item.name]
controlsRenderer : ViewMode -> Item -> Html Msg
controlsRenderer mode item =
case mode of
Buy -> p [class "level-item"] [ text (String.fromInt item.base_price ++ "po")]
Sell -> p [class "level-item"] [ text (String.fromFloat (toFloat item.base_price / 2) ++ "po")]
Grab -> p [class "level-item"] [ text "Grab" ]
Add -> p [class "level-item"] [ text "New !" ]
Confirm -> text ""
viewItemTableRow : Maybe Selection -> Maybe ViewMode -> Item -> Html Msg
viewItemTableRow selection activeMode item =
viewChest : Loot -> Model -> Html Msg
viewChest items model =
let
selected =
case selection of
Just s ->
isSelected item.id s
Nothing ->
False
levelRight =
case activeMode of
Nothing -> []
Just mode -> List.singleton (
div [ class "level-right" ]
[ controlsRenderer mode item
, input [ class "checkbox level-item"
, type_ "checkbox"
, onCheck (\v -> LootViewItemSwitched item.id)
] []
])
-- If a mode is active, render its controls
-- Otherwise, controls may be rendered depending on current route
rowControls = case model.state.activeMode of
Just mode -> Just (rowModeControlsRenderer mode)
Nothing ->
case model.state.route of
GroupLoot -> Just renderName
others -> Nothing
in
tr [ classList [ ("is-selected", selected) ] ]
table [ class "table is-fullwidth is-striped is-light"]
<| thead [ class "table-header" ]
[ th [] [ text "Nom" ] ]
:: List.map (viewItemTableRow (isSelected model.state.selection) rowControls) items
-- Renders controls for a specific mode
rowModeControlsRenderer : ViewMode -> Item -> Html Msg
rowModeControlsRenderer mode item =
let
(itemInfo, canSelect) = case mode of
Buy ->
( p [class "level-item"] [ text (String.fromInt item.base_price ++ "po")]
, True )
Sell ->
( p [class "level-item"] [ text (String.fromFloat (toFloat item.base_price / 2) ++ "po")]
, True )
Grab ->
( p [class "level-item"] [ text "Grab" ]
, True )
Add ->
( p [class "level-item"] [ text "New !" ]
, False )
Confirm ->
(text ""
, False )
in
div [ class "level-right" ]
<| itemInfo
:: if canSelect then
[input [ class "checkbox level-item"
, type_ "checkbox"
, onCheck (\v -> LootViewItemSwitched item.id)
] [] ]
else
[]
viewItemTableRow : (Item -> Bool) -> Maybe (Item -> Html Msg) -> Item -> Html Msg
viewItemTableRow selected rowControls item =
tr [ classList [ ("is-selected", selected item) ] ]
[ td []
[ label [ class "level checkbox" ]
(List.concat [[
div [ class "level-left" ]
[ p [class "level-item"] [ text item.name ]]
]
, levelRight
])
<| div [ class "level-left" ]
[ p [class "level-item"] [ text item.name ]]
:: case rowControls of
Just render -> List.singleton (render item)
Nothing -> []
]
]
@@ -452,6 +473,12 @@ debugSwitchPlayers =
, a [ onClick (PlayerChanged 2) ] [text "Fefi"]
]
renderIcon name size =
span [ class <| "icon is-medium"]
[ i [ class <| name ++ " fa-" ++ size] [] ]
-- HEADER SECTION
viewHeaderBar : Model -> Html Msg
@@ -459,7 +486,9 @@ viewHeaderBar model =
nav [ class "navbar container", class "is-info" ]
[ div [ class "navbar-brand" ]
[ a [ class "navbar-item", href "/"]
[ text model.player.name ]
[ renderIcon "fab fa-d-and-d" "2x"
, span [] [ text model.player.name ]
]
, a [class "navbar-burger is-active"]
[ span [attribute "aria-hidden" "true"] []
, span [attribute "aria-hidden" "true"] []
@@ -468,7 +497,10 @@ viewHeaderBar model =
]
, div [ class "navbar-menu is-active" ]
[ div [class "navbar-end"]
[ a [class "navbar-item", href "/marchand"] [text "Marchand"]
[ a [class "navbar-item", href "/marchand"]
[ renderIcon "fas fa-store-alt" "1x"
, span [] [text "Marchand"]
]
, a
[ class "navbar-item"
, href (if model.player.id == 0
@@ -477,7 +509,9 @@ viewHeaderBar model =
else
"/coffre")
]
[text (if model.player.id == 0 then "Nouveau loot" else "Coffre de groupe")]
[ renderIcon "fas fa-gem" "1x"
, span [] [text (if model.player.id == 0 then "Nouveau loot" else "Coffre de groupe")]
]
]
]