diff --git a/public/index.html b/public/index.html
index d28a0cf2214ddc74b501084cdc79a9e83c30cff9..d11f072e082d88b0b99794b77e93a1d9c61f47a3 100644
--- a/public/index.html
+++ b/public/index.html
@@ -14,6 +14,15 @@
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
crossorigin="anonymous"
>
+ <style>
+ /* https://github.com/jgthms/bulma/issues/2055#issuecomment-438588152 */
+ .dropdown.is-fullwidth {
+ display: flex;
+ }
+ .dropdown.is-fullwidth * {
+ width: 100%;
+ }
+ </style>
</head>
<body>
<div id="myapp"></div>
diff --git a/public/main.js b/public/main.js
index 294778ff5bbdc8430e8cc88653bb7c32854ce53d..54a2a576bf4eb25ce3c69fe939a2272914d32698 100644
--- a/public/main.js
+++ b/public/main.js
@@ -5333,7 +5333,7 @@ var $elm$core$Platform$Cmd$batch = _Platform_batch;
var $elm$core$Platform$Cmd$none = $elm$core$Platform$Cmd$batch(_List_Nil);
var $author$project$Main$init = function (_v0) {
return _Utils_Tuple2(
- {character: $author$project$Character$new, modal: $elm$core$Maybe$Nothing, modalValue: ''},
+ {character: $author$project$Character$new, dropdownActive: false, modal: $elm$core$Maybe$Nothing, modalValue: ''},
$elm$core$Platform$Cmd$none);
};
var $elm$core$Platform$Sub$batch = _Platform_batch;
@@ -5626,6 +5626,7 @@ var $author$project$Main$update = F2(
_Utils_update(
model,
{
+ dropdownActive: false,
modal: $elm$core$Maybe$Just(modalType),
modalValue: A2($author$project$Main$modalValue, modalType, model.character)
}),
@@ -5659,10 +5660,11 @@ var $author$project$Main$update = F2(
_Utils_update(
model,
{
- character: A2($author$project$Character$changeStat, model.character, stat)
+ character: A2($author$project$Character$changeStat, model.character, stat),
+ dropdownActive: false
}),
$elm$core$Platform$Cmd$none);
- default:
+ case 'ChangePriority':
var catType = msg.a;
var category = msg.b;
var value = msg.c;
@@ -5670,9 +5672,17 @@ var $author$project$Main$update = F2(
_Utils_update(
model,
{
- character: A4($author$project$Character$changeOrder, model.character, catType, category, value)
+ character: A4($author$project$Character$changeOrder, model.character, catType, category, value),
+ dropdownActive: false
}),
$elm$core$Platform$Cmd$none);
+ default:
+ var value = msg.a;
+ return _Utils_Tuple2(
+ _Utils_update(
+ model,
+ {dropdownActive: value}),
+ $elm$core$Platform$Cmd$none);
}
});
var $author$project$Main$Name = {$: 'Name'};
@@ -5944,13 +5954,13 @@ var $author$project$Main$viewDots = function (stat) {
A3($author$project$Main$toDotPosition, dotSize, dotGap, svgOutlineMargin),
rangeList)));
};
-var $author$project$Main$viewStatInGrid = F2(
- function (totalCount, indexedStat) {
+var $author$project$Main$viewStatInGrid = F3(
+ function (cols, totalCount, indexedStat) {
var stat = indexedStat.b;
- var offset = totalCount % 3;
+ var offset = totalCount % cols;
var index = indexedStat.a;
var dif = totalCount - index;
- var offsetString = _Utils_eq(dif, offset) ? (' is-col-start-' + $elm$core$String$fromInt(4 - dif)) : '';
+ var offsetString = _Utils_eq(dif, offset) ? (' is-col-start-' + $elm$core$String$fromInt((1 + cols) - dif)) : '';
return A2(
$elm$html$Html$div,
_List_fromArray(
@@ -6103,7 +6113,9 @@ var $author$project$Main$viewAbilityCol = F4(
]),
A2(
$elm$core$List$map,
- $author$project$Main$viewStatInGrid(
+ A2(
+ $author$project$Main$viewStatInGrid,
+ 3,
$elm$core$List$length(categoryAbilities)),
A2($elm$core$List$indexedMap, $elm$core$Tuple$pair, categoryAbilities)))
]))
@@ -6346,8 +6358,199 @@ var $author$project$Main$viewAttributes = F2(
]))
]));
});
-var $author$project$Main$viewBackgrounds = F2(
- function (cp, backgrounds) {
+var $elm$core$List$partition = F2(
+ function (pred, list) {
+ var step = F2(
+ function (x, _v0) {
+ var trues = _v0.a;
+ var falses = _v0.b;
+ return pred(x) ? _Utils_Tuple2(
+ A2($elm$core$List$cons, x, trues),
+ falses) : _Utils_Tuple2(
+ trues,
+ A2($elm$core$List$cons, x, falses));
+ });
+ return A3(
+ $elm$core$List$foldr,
+ step,
+ _Utils_Tuple2(_List_Nil, _List_Nil),
+ list);
+ });
+var $author$project$Stats$splitZero = function (stats) {
+ return A2(
+ $elm$core$List$partition,
+ function (x) {
+ return x.dots.value > 0;
+ },
+ stats);
+};
+var $author$project$Main$SetDropDownActive = function (a) {
+ return {$: 'SetDropDownActive', a: a};
+};
+var $elm$virtual_dom$VirtualDom$attribute = F2(
+ function (key, value) {
+ return A2(
+ _VirtualDom_attribute,
+ _VirtualDom_noOnOrFormAction(key),
+ _VirtualDom_noJavaScriptOrHtmlUri(value));
+ });
+var $elm$html$Html$Attributes$attribute = $elm$virtual_dom$VirtualDom$attribute;
+var $author$project$Main$ariaControls = function (value) {
+ return A2($elm$html$Html$Attributes$attribute, 'aria-controls', value);
+};
+var $author$project$Main$ariaHaspopup = function (value) {
+ return A2($elm$html$Html$Attributes$attribute, 'aria-haspopup', value);
+};
+var $author$project$Main$ariaHidden = function (value) {
+ return A2($elm$html$Html$Attributes$attribute, 'aria-hidden', value);
+};
+var $author$project$Main$ariaRole = function (value) {
+ return A2($elm$html$Html$Attributes$attribute, 'role', value);
+};
+var $elm$html$Html$i = _VirtualDom_node('i');
+var $elm$html$Html$Attributes$id = $elm$html$Html$Attributes$stringProperty('id');
+var $elm$core$Basics$not = _Basics_not;
+var $elm$html$Html$span = _VirtualDom_node('span');
+var $elm$html$Html$a = _VirtualDom_node('a');
+var $author$project$Main$viewStatDropdown = function (stat) {
+ return A2(
+ $elm$html$Html$a,
+ _List_fromArray(
+ [
+ $elm$html$Html$Attributes$class('dropdown-item'),
+ $elm$html$Html$Events$onClick(
+ $author$project$Main$ChangeStat(
+ _Utils_update(
+ stat,
+ {
+ dots: A2($author$project$BoundedInt$changeTo, stat.dots, 1)
+ })))
+ ]),
+ _List_fromArray(
+ [
+ $elm$html$Html$text(stat.name)
+ ]));
+};
+var $author$project$Main$viewOtherBackgrounds = F2(
+ function (dropdownActive, backgrounds) {
+ return A2(
+ $elm$html$Html$div,
+ _List_fromArray(
+ [
+ $elm$html$Html$Attributes$class(
+ 'block dropdown is-fullwidth' + (dropdownActive ? ' is-active' : ''))
+ ]),
+ _List_fromArray(
+ [
+ A2(
+ $elm$html$Html$div,
+ _List_fromArray(
+ [
+ $elm$html$Html$Attributes$class('dropdown-trigger')
+ ]),
+ _List_fromArray(
+ [
+ A2(
+ $elm$html$Html$div,
+ _List_fromArray(
+ [
+ $elm$html$Html$Attributes$class('button'),
+ $author$project$Main$ariaHaspopup('true'),
+ $author$project$Main$ariaControls('dropdown-menu'),
+ $elm$html$Html$Events$onClick(
+ $author$project$Main$SetDropDownActive(!dropdownActive))
+ ]),
+ _List_fromArray(
+ [
+ A2(
+ $elm$html$Html$span,
+ _List_Nil,
+ _List_fromArray(
+ [
+ $elm$html$Html$text('Add a Background')
+ ])),
+ A2(
+ $elm$html$Html$span,
+ _List_fromArray(
+ [
+ $elm$html$Html$Attributes$class('icon is-small')
+ ]),
+ _List_fromArray(
+ [
+ A2(
+ $elm$html$Html$i,
+ _List_fromArray(
+ [
+ $elm$html$Html$Attributes$class('fas fa-angle-down'),
+ $author$project$Main$ariaHidden('true')
+ ]),
+ _List_Nil)
+ ]))
+ ]))
+ ])),
+ A2(
+ $elm$html$Html$div,
+ _List_fromArray(
+ [
+ $elm$html$Html$Attributes$class('dropdown-menu'),
+ $elm$html$Html$Attributes$id('dropdown-menu'),
+ $author$project$Main$ariaRole('menu')
+ ]),
+ _List_fromArray(
+ [
+ A2(
+ $elm$html$Html$div,
+ _List_fromArray(
+ [
+ $elm$html$Html$Attributes$class('dropdown-content has-text-left')
+ ]),
+ A2($elm$core$List$map, $author$project$Main$viewStatDropdown, backgrounds))
+ ]))
+ ]));
+ });
+var $author$project$Main$viewStatHorizontal = function (stat) {
+ return A2(
+ $elm$html$Html$div,
+ _List_fromArray(
+ [
+ $elm$html$Html$Attributes$class('notification is-narrow')
+ ]),
+ _List_fromArray(
+ [
+ A2(
+ $elm$html$Html$div,
+ _List_fromArray(
+ [
+ $elm$html$Html$Attributes$class('columns is-centered is-vcentered is-mobile')
+ ]),
+ _List_fromArray(
+ [
+ A2(
+ $elm$html$Html$div,
+ _List_fromArray(
+ [
+ $elm$html$Html$Attributes$class('column has-text-right')
+ ]),
+ _List_fromArray(
+ [
+ $elm$html$Html$text(stat.name)
+ ])),
+ A2(
+ $elm$html$Html$div,
+ _List_fromArray(
+ [
+ $elm$html$Html$Attributes$class('column has-text-left')
+ ]),
+ _List_fromArray(
+ [
+ $author$project$Main$viewDots(stat)
+ ]))
+ ]))
+ ]));
+};
+var $author$project$Main$viewBackgrounds = F3(
+ function (dropdownActive, cp, backgrounds) {
+ var separatedBackgrounds = $author$project$Stats$splitZero(backgrounds);
var basePoints = cp.backgrounds;
var points = basePoints - $author$project$Stats$count(backgrounds);
return A2(
@@ -6365,12 +6568,11 @@ var $author$project$Main$viewBackgrounds = F2(
[
$elm$html$Html$text('Backgrounds')
])),
- $author$project$Main$creationInfo(points),
A2(
$elm$html$Html$div,
_List_fromArray(
[
- $elm$html$Html$Attributes$class('fixed-grid has-6-cols')
+ $elm$html$Html$Attributes$class('columns is-centered is-mobile')
]),
_List_fromArray(
[
@@ -6378,21 +6580,21 @@ var $author$project$Main$viewBackgrounds = F2(
$elm$html$Html$div,
_List_fromArray(
[
- $elm$html$Html$Attributes$class('grid')
+ $elm$html$Html$Attributes$class('column is-two-fifths')
]),
- A2(
- $elm$core$List$map,
- $author$project$Main$viewStatInGrid(
- $elm$core$List$length(backgrounds)),
- A2($elm$core$List$indexedMap, $elm$core$Tuple$pair, backgrounds)))
+ _Utils_ap(
+ _List_fromArray(
+ [
+ $author$project$Main$creationInfo(points),
+ A2($author$project$Main$viewOtherBackgrounds, dropdownActive, separatedBackgrounds.b)
+ ]),
+ A2($elm$core$List$map, $author$project$Main$viewStatHorizontal, separatedBackgrounds.a)))
]))
]));
});
var $author$project$Main$OpenModal = function (a) {
return {$: 'OpenModal', a: a};
};
-var $elm$html$Html$i = _VirtualDom_node('i');
-var $elm$html$Html$span = _VirtualDom_node('span');
var $author$project$Main$viewEditableText = F2(
function (modalType, content) {
return A2(
@@ -6723,8 +6925,9 @@ var $author$project$Main$view = function (model) {
A2($author$project$Main$viewEditableText, $author$project$Main$Name, model.character.name),
A2($author$project$Main$viewAttributes, model.character.creationPoints.attributes, model.character.stats),
A2($author$project$Main$viewAbilities, model.character.creationPoints.abilities, model.character.stats),
- A2(
+ A3(
$author$project$Main$viewBackgrounds,
+ model.dropdownActive,
model.character.creationPoints,
$author$project$Stats$backgroundsInList(model.character.stats)),
A2(
diff --git a/src/Main.elm b/src/Main.elm
index ed73c48e91a6cd356b6a8837f3fc49fe18083f7d..39c1d63161dee88a208f9e0e734ca848604c6f5f 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -27,6 +27,7 @@ init _ =
( { character = Character.new
, modal = Nothing
, modalValue = ""
+ , dropdownActive = False
}
, Cmd.none
)
@@ -35,6 +36,7 @@ type alias Model =
{ character : Character
, modal : Maybe ModalType
, modalValue : String
+ , dropdownActive : Bool
}
type Msg
@@ -44,6 +46,7 @@ type Msg
| SaveModalChange ModalType
| ChangeStat Stat
| ChangePriority CategoriesType Category Int
+ | SetDropDownActive Bool
type ModalType
= Name
@@ -55,6 +58,7 @@ update msg model =
( { model
| modal = ( Just modalType )
, modalValue = modalValue modalType model.character
+ , dropdownActive = False
}
, Cmd.none
)
@@ -77,13 +81,21 @@ update msg model =
)
ChangeStat stat ->
( { model
- | character = Character.changeStat model.character stat
+ | character = Character.changeStat model.character stat
+ , dropdownActive = False
}
, Cmd.none
)
ChangePriority catType category value ->
( { model
| character = Character.changeOrder model.character catType category value
+ , dropdownActive = False
+ }
+ , Cmd.none
+ )
+ SetDropDownActive value ->
+ ( { model
+ | dropdownActive = value
}
, Cmd.none
)
@@ -92,11 +104,12 @@ view : Model -> Browser.Document Msg
view model =
{ title = "Character Sheet"
, body =
- [ div [ class "container" ]
+ [ div
+ [ class "container" ]
[ viewEditableText Name model.character.name
, viewAttributes model.character.creationPoints.attributes model.character.stats
, viewAbilities model.character.creationPoints.abilities model.character.stats
- , viewBackgrounds model.character.creationPoints ( Stats.backgroundsInList model.character.stats )
+ , viewBackgrounds model.dropdownActive model.character.creationPoints ( Stats.backgroundsInList model.character.stats )
, viewSpheres model.character.creationPoints ( Stats.spheresInList model.character.stats )
, viewArete ( Stats.areteInList model.character.stats )
, viewModal model
@@ -222,14 +235,14 @@ viewAbilityCol oCat name category abilities =
]
, div [ class "fixed-grid has-6-cols" ]
[ div [ class "grid" ]
- ( List.map ( viewStatInGrid ( List.length categoryAbilities ) ) ( List.indexedMap Tuple.pair categoryAbilities )
+ ( List.map ( viewStatInGrid 3 ( List.length categoryAbilities ) ) ( List.indexedMap Tuple.pair categoryAbilities )
)
]
]
)
-viewStatInGrid : Int -> ( Int, Stat ) -> Html Msg
-viewStatInGrid totalCount indexedStat =
+viewStatInGrid : Int -> Int -> ( Int, Stat ) -> Html Msg
+viewStatInGrid cols totalCount indexedStat =
let
index : Int
index = Tuple.first indexedStat
@@ -237,14 +250,14 @@ viewStatInGrid totalCount indexedStat =
stat = Tuple.second indexedStat
offset : Int
- offset = Basics.remainderBy 3 totalCount
+ offset = Basics.remainderBy cols totalCount
dif : Int
dif = totalCount - index
offsetString : String
offsetString =
if dif == offset
- then " is-col-start-" ++ ( String.fromInt ( 4 - dif ) )
+ then " is-col-start-" ++ ( String.fromInt ( 1 + cols - dif ) )
else ""
in
div [ class ( "cell is-col-span-2" ++ offsetString ) ]
@@ -254,23 +267,76 @@ viewStatInGrid totalCount indexedStat =
]
]
-viewBackgrounds : CreationPoints -> List Stat -> Html Msg
-viewBackgrounds cp backgrounds =
+viewBackgrounds : Bool -> CreationPoints -> List Stat -> Html Msg
+viewBackgrounds dropdownActive cp backgrounds =
let
basePoints : Int
basePoints = cp.backgrounds
points : Int
points = basePoints - ( Stats.count backgrounds )
+
+ separatedBackgrounds : ( List Stat, List Stat )
+ separatedBackgrounds = Stats.splitZero backgrounds
in
div [ class "has-text-centered" ]
- [ p [] [ text "Backgrounds" ]
- , creationInfo points
- , div [ class "fixed-grid has-6-cols" ]
- [ div [ class "grid" ]
- ( List.map ( viewStatInGrid ( List.length backgrounds ) ) ( List.indexedMap Tuple.pair backgrounds )
- )
+ ( [ p [] [ text "Backgrounds" ]
+ , div [ class "columns is-centered is-mobile" ]
+ [ div [ class "column is-two-fifths" ]
+ ( [ creationInfo points
+ , viewOtherBackgrounds dropdownActive ( Tuple.second separatedBackgrounds )
+ ]
+ ++
+ ( List.map viewStatHorizontal ( Tuple.first separatedBackgrounds ) )
+ )
+ ]
+ ]
+ )
+
+viewOtherBackgrounds : Bool -> List Stat -> Html Msg
+viewOtherBackgrounds dropdownActive backgrounds =
+ div [ class ( "block dropdown is-fullwidth" ++ if dropdownActive then " is-active" else "" ) ]
+ [ div [ class "dropdown-trigger" ]
+ [ div
+ [ class "button"
+ , ariaHaspopup "true"
+ , ariaControls "dropdown-menu"
+ , onClick ( SetDropDownActive ( not dropdownActive ) )
+ ]
+ [ span [] [ text "Add a Background" ]
+ , span [ class "icon is-small" ]
+ [ i
+ [ class "fas fa-angle-down"
+ , ariaHidden "true"
+ ] []
+ ]
]
]
+ , div
+ [ class "dropdown-menu"
+ , id "dropdown-menu"
+ , ariaRole "menu"
+ ]
+ [ div [ class "dropdown-content has-text-left" ]
+ ( List.map viewStatDropdown backgrounds )
+ ]
+ ]
+
+viewStatHorizontal : Stat -> Html Msg
+viewStatHorizontal stat =
+ div [ class "notification is-narrow" ]
+ [ div [ class "columns is-centered is-vcentered is-mobile" ]
+ [ div [ class "column has-text-right" ] [ text stat.name ]
+ , div [ class "column has-text-left" ] [ viewDots stat ]
+ ]
+ ]
+
+viewStatDropdown : Stat -> Html Msg
+viewStatDropdown stat =
+ a
+ [ class "dropdown-item"
+ , onClick ( ChangeStat { stat | dots = BoundedInt.changeTo stat.dots 1 } )
+ ] [ text stat.name ]
+
viewSpheres : CreationPoints -> List Stat -> Html Msg
viewSpheres cp spheres =
diff --git a/src/Stats.elm b/src/Stats.elm
index 374a1127046572fed63d95f78307821a75b379a0..35e6cd63c583873a339b418e123e1fef2e682b3c 100644
--- a/src/Stats.elm
+++ b/src/Stats.elm
@@ -258,4 +258,8 @@ count stats =
stats
|> List.map .dots
|> List.map .value
- |> List.sum
\ No newline at end of file
+ |> List.sum
+
+splitZero : List Stat -> ( List Stat, List Stat )
+splitZero stats =
+ List.partition ( \x -> x.dots.value > 0 ) stats
\ No newline at end of file