diff --git a/public/main.js b/public/main.js
index 354c26200d4889a362f846e696e8e8bfd44f8290..ab1ce6cd2bdd408822bce7246a81b853ea580e35 100644
--- a/public/main.js
+++ b/public/main.js
@@ -5892,37 +5892,52 @@ var $author$project$Main$viewDots = function (stat) {
A3($author$project$Main$toDotPosition, dotSize, dotGap, svgOutlineMargin),
rangeList)));
};
-var $author$project$Main$viewStat = function (stat) {
- return A2(
- $elm$html$Html$div,
- _List_fromArray(
- [
- $elm$html$Html$Attributes$class('notification')
- ]),
- _List_fromArray(
- [
- A2(
- $elm$html$Html$p,
- _List_fromArray(
- [
- $elm$html$Html$Attributes$class('block')
- ]),
- _List_fromArray(
- [
- $elm$html$Html$text(stat.name)
- ])),
- A2(
- $elm$html$Html$p,
- _List_fromArray(
- [
- $elm$html$Html$Attributes$class('block')
- ]),
- _List_fromArray(
- [
- $author$project$Main$viewDots(stat)
- ]))
- ]));
-};
+var $author$project$Main$viewStatInGrid = F2(
+ function (totalCount, indexedStat) {
+ var stat = indexedStat.b;
+ var offset = totalCount % 3;
+ var index = indexedStat.a;
+ var dif = totalCount - index;
+ var offsetString = _Utils_eq(dif, offset) ? (' is-col-start-' + $elm$core$String$fromInt(4 - dif)) : '';
+ return A2(
+ $elm$html$Html$div,
+ _List_fromArray(
+ [
+ $elm$html$Html$Attributes$class('cell is-col-span-2' + offsetString)
+ ]),
+ _List_fromArray(
+ [
+ A2(
+ $elm$html$Html$div,
+ _List_fromArray(
+ [
+ $elm$html$Html$Attributes$class('notification')
+ ]),
+ _List_fromArray(
+ [
+ A2(
+ $elm$html$Html$p,
+ _List_fromArray(
+ [
+ $elm$html$Html$Attributes$class('block')
+ ]),
+ _List_fromArray(
+ [
+ $elm$html$Html$text(stat.name)
+ ])),
+ A2(
+ $elm$html$Html$p,
+ _List_fromArray(
+ [
+ $elm$html$Html$Attributes$class('block')
+ ]),
+ _List_fromArray(
+ [
+ $author$project$Main$viewDots(stat)
+ ]))
+ ]))
+ ]));
+ });
var $author$project$Main$viewAbilityCol = F4(
function (oCat, name, category, abilities) {
var index = A2($author$project$OrderedCategories$indexOf, oCat.order, category);
@@ -5933,96 +5948,114 @@ var $author$project$Main$viewAbilityCol = F4(
$elm$html$Html$div,
_List_fromArray(
[
- $elm$html$Html$Attributes$class('column is-one-fifth')
+ $elm$html$Html$Attributes$class('column')
]),
- _Utils_ap(
- _List_fromArray(
- [
- A2(
- $elm$html$Html$p,
- _List_Nil,
- _List_fromArray(
- [
- $elm$html$Html$text(name)
- ])),
- $author$project$Main$creationInfo(points),
- A2(
- $elm$html$Html$div,
- _List_fromArray(
- [
- $elm$html$Html$Attributes$class('field has-addons is-fullwidth')
- ]),
- _List_fromArray(
- [
- A2(
- $elm$html$Html$p,
- _List_fromArray(
- [
- $elm$html$Html$Attributes$class('control is-expanded')
- ]),
- _List_fromArray(
- [
- A2(
- $elm$html$Html$button,
- _List_fromArray(
- [
- $elm$html$Html$Attributes$class(
- 'button is-small is-fullwidth' + ((!index) ? ' is-primary' : '')),
- $elm$html$Html$Events$onClick(
- A3($author$project$Main$ChangePriority, $author$project$OrderedCategories$Ability, category, 0))
- ]),
- _List_fromArray(
- [
- $elm$html$Html$text('I')
- ]))
- ])),
- A2(
- $elm$html$Html$p,
- _List_fromArray(
- [
- $elm$html$Html$Attributes$class('control is-expanded')
- ]),
- _List_fromArray(
- [
- A2(
- $elm$html$Html$button,
- _List_fromArray(
- [
- $elm$html$Html$Attributes$class(
- 'button is-small is-fullwidth' + ((index === 1) ? ' is-primary' : '')),
- $elm$html$Html$Events$onClick(
- A3($author$project$Main$ChangePriority, $author$project$OrderedCategories$Ability, category, 1))
- ]),
- _List_fromArray(
- [
- $elm$html$Html$text('II')
- ]))
- ])),
- A2(
- $elm$html$Html$p,
- _List_fromArray(
- [
- $elm$html$Html$Attributes$class('control is-expanded')
- ]),
- _List_fromArray(
- [
- A2(
- $elm$html$Html$button,
- _List_fromArray(
- [
- $elm$html$Html$Attributes$class(
- 'button is-small is-fullwidth' + ((index === 2) ? ' is-primary' : '')),
- $elm$html$Html$Events$onClick(
- A3($author$project$Main$ChangePriority, $author$project$OrderedCategories$Ability, category, 2))
- ]),
- _List_fromArray(
- [
- $elm$html$Html$text('III')
- ]))
- ]))
- ]))
- ]),
- A2($elm$core$List$map, $author$project$Main$viewStat, categoryAbilities)));
+ _List_fromArray(
+ [
+ A2(
+ $elm$html$Html$p,
+ _List_Nil,
+ _List_fromArray(
+ [
+ $elm$html$Html$text(name)
+ ])),
+ $author$project$Main$creationInfo(points),
+ A2(
+ $elm$html$Html$div,
+ _List_fromArray(
+ [
+ $elm$html$Html$Attributes$class('field has-addons is-desktop')
+ ]),
+ _List_fromArray(
+ [
+ A2(
+ $elm$html$Html$p,
+ _List_fromArray(
+ [
+ $elm$html$Html$Attributes$class('control is-expanded')
+ ]),
+ _List_fromArray(
+ [
+ A2(
+ $elm$html$Html$button,
+ _List_fromArray(
+ [
+ $elm$html$Html$Attributes$class(
+ 'button is-small is-fullwidth' + ((!index) ? ' is-primary' : '')),
+ $elm$html$Html$Events$onClick(
+ A3($author$project$Main$ChangePriority, $author$project$OrderedCategories$Ability, category, 0))
+ ]),
+ _List_fromArray(
+ [
+ $elm$html$Html$text('I')
+ ]))
+ ])),
+ A2(
+ $elm$html$Html$p,
+ _List_fromArray(
+ [
+ $elm$html$Html$Attributes$class('control is-expanded')
+ ]),
+ _List_fromArray(
+ [
+ A2(
+ $elm$html$Html$button,
+ _List_fromArray(
+ [
+ $elm$html$Html$Attributes$class(
+ 'button is-small is-fullwidth' + ((index === 1) ? ' is-primary' : '')),
+ $elm$html$Html$Events$onClick(
+ A3($author$project$Main$ChangePriority, $author$project$OrderedCategories$Ability, category, 1))
+ ]),
+ _List_fromArray(
+ [
+ $elm$html$Html$text('II')
+ ]))
+ ])),
+ A2(
+ $elm$html$Html$p,
+ _List_fromArray(
+ [
+ $elm$html$Html$Attributes$class('control is-expanded')
+ ]),
+ _List_fromArray(
+ [
+ A2(
+ $elm$html$Html$button,
+ _List_fromArray(
+ [
+ $elm$html$Html$Attributes$class(
+ 'button is-small is-fullwidth' + ((index === 2) ? ' is-primary' : '')),
+ $elm$html$Html$Events$onClick(
+ A3($author$project$Main$ChangePriority, $author$project$OrderedCategories$Ability, category, 2))
+ ]),
+ _List_fromArray(
+ [
+ $elm$html$Html$text('III')
+ ]))
+ ]))
+ ])),
+ A2(
+ $elm$html$Html$div,
+ _List_fromArray(
+ [
+ $elm$html$Html$Attributes$class('fixed-grid has-6-cols')
+ ]),
+ _List_fromArray(
+ [
+ A2(
+ $elm$html$Html$div,
+ _List_fromArray(
+ [
+ $elm$html$Html$Attributes$class('grid')
+ ]),
+ A2(
+ $elm$core$List$map,
+ $author$project$Main$viewStatInGrid(
+ $elm$core$List$length(categoryAbilities)),
+ A2($elm$core$List$indexedMap, $elm$core$Tuple$pair, categoryAbilities)))
+ ]))
+ ]));
});
var $author$project$Main$viewAbilities = F2(
function (oCat, abilities) {
@@ -6045,7 +6078,7 @@ var $author$project$Main$viewAbilities = F2(
$elm$html$Html$div,
_List_fromArray(
[
- $elm$html$Html$Attributes$class('columns is-centered is-mobile')
+ $elm$html$Html$Attributes$class('columns is-centered is-desktop')
]),
_List_fromArray(
[
@@ -6055,6 +6088,37 @@ var $author$project$Main$viewAbilities = F2(
]))
]));
});
+var $author$project$Main$viewStat = function (stat) {
+ return A2(
+ $elm$html$Html$div,
+ _List_fromArray(
+ [
+ $elm$html$Html$Attributes$class('notification')
+ ]),
+ _List_fromArray(
+ [
+ A2(
+ $elm$html$Html$p,
+ _List_fromArray(
+ [
+ $elm$html$Html$Attributes$class('block')
+ ]),
+ _List_fromArray(
+ [
+ $elm$html$Html$text(stat.name)
+ ])),
+ A2(
+ $elm$html$Html$p,
+ _List_fromArray(
+ [
+ $elm$html$Html$Attributes$class('block')
+ ]),
+ _List_fromArray(
+ [
+ $author$project$Main$viewDots(stat)
+ ]))
+ ]));
+};
var $author$project$Main$viewArete = function (arete) {
return A2(
$elm$html$Html$div,
@@ -6558,7 +6622,7 @@ var $author$project$Main$view = function (model) {
$elm$html$Html$div,
_List_fromArray(
[
- $elm$html$Html$Attributes$class('container is-max-desktop')
+ $elm$html$Html$Attributes$class('container')
]),
_List_fromArray(
[
diff --git a/src/Main.elm b/src/Main.elm
index c355f1194b91f6bf517ff77a224a4178b7e73125..823aca306c16144f3af88ded317442c8eb748325 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -92,7 +92,7 @@ view : Model -> Browser.Document Msg
view model =
{ title = "Character Sheet"
, body =
- [ div [ class "container is-max-desktop" ]
+ [ div [ class "container" ]
[ viewEditableText Name model.character.name
, viewAttributes model.character.creationPoints.attributes model.character.stats
, viewAbilities model.character.creationPoints.abilities model.character.stats
@@ -176,7 +176,7 @@ viewAbilities : OCat -> List Stat -> Html Msg
viewAbilities oCat abilities =
div [ class "has-text-centered" ]
[ p [] [ text "Abilities" ]
- , div [ class "columns is-centered is-mobile" ]
+ , div [ class "columns is-centered is-desktop" ]
[ viewAbilityCol oCat "Talents" Stats.Talent abilities
, viewAbilityCol oCat "Skills" Stats.Skill abilities
, viewAbilityCol oCat "Knowledges" Stats.Knowledge abilities
@@ -196,10 +196,10 @@ viewAbilityCol oCat name category abilities =
points : Int
points = basePoints - ( Stats.count categoryAbilities )
in
- div [ class "column is-one-fifth" ]
+ div [ class "column" ]
( [ p [] [ text name ]
, creationInfo points
- , div [ class "field has-addons is-fullwidth" ]
+ , div [ class "field has-addons is-desktop" ]
[ p [ class "control is-expanded" ]
[ button
[ class ( "button is-small is-fullwidth" ++ if index == 0 then " is-primary" else "" )
@@ -219,12 +219,40 @@ viewAbilityCol oCat name category abilities =
] [ text "III" ]
]
]
+ , div [ class "fixed-grid has-6-cols" ]
+ [ div [ class "grid" ]
+ ( List.map ( viewStatInGrid ( List.length categoryAbilities ) ) ( List.indexedMap Tuple.pair categoryAbilities )
+ )
+ ]
]
- ++
- ( List.map viewStat categoryAbilities
- )
)
+viewStatInGrid : Int -> ( Int, Stat ) -> Html Msg
+viewStatInGrid totalCount indexedStat =
+ let
+ index : Int
+ index = Tuple.first indexedStat
+ stat : Stat
+ stat = Tuple.second indexedStat
+
+ offset : Int
+ offset = Basics.remainderBy 3 totalCount
+ dif : Int
+ dif = totalCount - index
+
+ offsetString : String
+ offsetString =
+ if dif == offset
+ then " is-col-start-" ++ ( String.fromInt ( 4 - dif ) )
+ else ""
+ in
+ div [ class ( "cell is-col-span-2" ++ offsetString ) ]
+ [ div [ class "notification" ]
+ [ p [ class "block" ] [ text stat.name ]
+ , p [ class "block" ] [ viewDots stat ]
+ ]
+ ]
+
viewSpheres : CreationPoints -> List Stat -> Html Msg
viewSpheres cp spheres =