From 7eab9be9c5dd7931575b58a08f8f343cc434096d Mon Sep 17 00:00:00 2001
From: Oskar Marquardt <oskar.marquardt@student.uni-halle.de>
Date: Mon, 1 Jul 2024 17:16:11 +0200
Subject: [PATCH] Added navbar
---
public/index.html | 88 ++++-----
public/main.js | 477 +++++++++++++++++++++++++++++++---------------
src/Main.elm | 171 +++++++++++------
3 files changed, 487 insertions(+), 249 deletions(-)
diff --git a/public/index.html b/public/index.html
index 88f6363..2aa3992 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,48 +1,48 @@
<!DOCTYPE HTML>
-<html>
-<head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <script src="main.js"></script>
- <link
- rel="stylesheet"
- href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css"
- >
- <link
- rel="stylesheet"
- href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
- integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
- crossorigin="anonymous"
- >
- <style>
- .dropdown-content {
- max-height: 13em;
- overflow: auto;
- }
+<html class="has-navbar-fixed-top">
+ <head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <script src="main.js"></script>
+ <link
+ rel="stylesheet"
+ href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css"
+ >
+ <link
+ rel="stylesheet"
+ href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
+ integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
+ crossorigin="anonymous"
+ >
+ <style>
+ .dropdown-content {
+ max-height: 13em;
+ overflow: auto;
+ }
- .delete.is-not-delete {
- background-color: hsla(0, 0%, 0%, 0);
- }
- .delete.is-not-delete::after {
- background-color: hsla(0, 0%, 0%, 0);
- }
- .delete.is-not-delete::before {
- background-color: hsla(0, 0%, 0%, 0);
- }
+ .delete.is-not-delete {
+ background-color: hsla(0, 0%, 0%, 0);
+ }
+ .delete.is-not-delete::after {
+ background-color: hsla(0, 0%, 0%, 0);
+ }
+ .delete.is-not-delete::before {
+ background-color: hsla(0, 0%, 0%, 0);
+ }
- /* 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>
- <script>
- var app = Elm.Main.init();
- </script>
-</body>
+ /* 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>
+ <script>
+ var app = Elm.Main.init();
+ </script>
+ </body>
</html>
\ No newline at end of file
diff --git a/public/main.js b/public/main.js
index 3cfa443..a695e48 100644
--- a/public/main.js
+++ b/public/main.js
@@ -4545,7 +4545,13 @@ function _Http_track(router, xhr, tracker)
size: event.lengthComputable ? $elm$core$Maybe$Just(event.total) : $elm$core$Maybe$Nothing
}))));
});
-}var $elm$core$Basics$EQ = {$: 'EQ'};
+}var $author$project$Main$LinkClicked = function (a) {
+ return {$: 'LinkClicked', a: a};
+};
+var $author$project$Main$UrlChanged = function (a) {
+ return {$: 'UrlChanged', a: a};
+};
+var $elm$core$Basics$EQ = {$: 'EQ'};
var $elm$core$Basics$GT = {$: 'GT'};
var $elm$core$Basics$LT = {$: 'LT'};
var $elm$core$List$cons = _List_cons;
@@ -5333,7 +5339,7 @@ var $elm$core$Task$perform = F2(
$elm$core$Task$Perform(
A2($elm$core$Task$map, toMessage, task)));
});
-var $elm$browser$Browser$document = _Browser_document;
+var $elm$browser$Browser$application = _Browser_application;
var $author$project$OrderedCategories$Ability = {$: 'Ability'};
var $author$project$OrderedCategories$Attribute = {$: 'Attribute'};
var $author$project$Stats$Knowledge = {$: 'Knowledge'};
@@ -5508,11 +5514,12 @@ var $author$project$Stats$new = _List_fromArray(
var $author$project$Character$new = {creationPoints: $author$project$Creation$new, name: 'Default Name', stats: $author$project$Stats$new};
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(
- {activeDropdown: $elm$core$Maybe$Nothing, character: $author$project$Character$new, modal: $elm$core$Maybe$Nothing, modalValue: ''},
- $elm$core$Platform$Cmd$none);
-};
+var $author$project$Main$init = F3(
+ function (_v0, url, key) {
+ return _Utils_Tuple2(
+ {activeDropdown: $elm$core$Maybe$Nothing, character: $author$project$Character$new, key: key, modal: $elm$core$Maybe$Nothing, modalValue: '', url: url},
+ $elm$core$Platform$Cmd$none);
+ });
var $elm$core$Platform$Sub$batch = _Platform_batch;
var $elm$core$Platform$Sub$none = $elm$core$Platform$Sub$batch(_List_Nil);
var $author$project$Main$subscriptions = function (_v0) {
@@ -6756,10 +6763,12 @@ var $author$project$Main$jsonDecoder = A4(
A2($elm$json$Json$Decode$field, 'name', $elm$json$Json$Decode$string),
$elm$json$Json$Decode$succeed($author$project$Creation$new),
A2($elm$json$Json$Decode$field, 'stats', $author$project$Main$jsonStatsDecoder));
+var $elm$browser$Browser$Navigation$load = _Browser_load;
var $author$project$Main$modalValue = F2(
function (modalType, character) {
return character.name;
});
+var $elm$browser$Browser$Navigation$pushUrl = _Browser_pushUrl;
var $author$project$Stats$setAffinityIfSame = F2(
function (sphere, stat) {
var _v0 = stat.statType;
@@ -6807,6 +6816,50 @@ var $author$project$Character$setAffinity = F2(
stats: A2($author$project$Stats$setAffinity, character.stats, stat)
});
});
+var $elm$url$Url$addPort = F2(
+ function (maybePort, starter) {
+ if (maybePort.$ === 'Nothing') {
+ return starter;
+ } else {
+ var port_ = maybePort.a;
+ return starter + (':' + $elm$core$String$fromInt(port_));
+ }
+ });
+var $elm$url$Url$addPrefixed = F3(
+ function (prefix, maybeSegment, starter) {
+ if (maybeSegment.$ === 'Nothing') {
+ return starter;
+ } else {
+ var segment = maybeSegment.a;
+ return _Utils_ap(
+ starter,
+ _Utils_ap(prefix, segment));
+ }
+ });
+var $elm$url$Url$toString = function (url) {
+ var http = function () {
+ var _v0 = url.protocol;
+ if (_v0.$ === 'Http') {
+ return 'http://';
+ } else {
+ return 'https://';
+ }
+ }();
+ return A3(
+ $elm$url$Url$addPrefixed,
+ '#',
+ url.fragment,
+ A3(
+ $elm$url$Url$addPrefixed,
+ '?',
+ url.query,
+ _Utils_ap(
+ A2(
+ $elm$url$Url$addPort,
+ url.port_,
+ _Utils_ap(http, url.host)),
+ url.path)));
+};
var $author$project$Main$update = F2(
function (msg, model) {
switch (msg.$) {
@@ -6893,7 +6946,7 @@ var $author$project$Main$update = F2(
expect: A2($elm$http$Http$expectJson, $author$project$Main$JsonContent, $author$project$Main$jsonDecoder),
url: url
}));
- default:
+ case 'JsonContent':
var content = msg.a;
return _Utils_Tuple2(
_Utils_update(
@@ -6909,6 +6962,29 @@ var $author$project$Main$update = F2(
}()
}),
$elm$core$Platform$Cmd$none);
+ case 'LinkClicked':
+ var urlRequest = msg.a;
+ if (urlRequest.$ === 'Internal') {
+ var url = urlRequest.a;
+ return _Utils_Tuple2(
+ model,
+ A2(
+ $elm$browser$Browser$Navigation$pushUrl,
+ model.key,
+ $elm$url$Url$toString(url)));
+ } else {
+ var href = urlRequest.a;
+ return _Utils_Tuple2(
+ model,
+ $elm$browser$Browser$Navigation$load(href));
+ }
+ default:
+ var url = msg.a;
+ return _Utils_Tuple2(
+ _Utils_update(
+ model,
+ {url: url}),
+ $elm$core$Platform$Cmd$none);
}
});
var $author$project$Main$Name = {$: 'Name'};
@@ -7613,6 +7689,12 @@ var $author$project$Main$switchDropdownActive = F2(
$elm$core$Maybe$Just(dropdownAction)) ? $elm$core$Maybe$Nothing : $elm$core$Maybe$Just(dropdownAction);
});
var $elm$html$Html$a = _VirtualDom_node('a');
+var $elm$html$Html$Attributes$href = function (url) {
+ return A2(
+ $elm$html$Html$Attributes$stringProperty,
+ 'href',
+ _VirtualDom_noJavaScriptUri(url));
+};
var $author$project$Main$viewStatDropdown = function (stat) {
return A2(
$elm$html$Html$a,
@@ -7625,7 +7707,8 @@ var $author$project$Main$viewStatDropdown = function (stat) {
stat,
{
dots: A2($author$project$BoundedInt$changeTo, stat.dots, 1)
- })))
+ }))),
+ $elm$html$Html$Attributes$href('#')
]),
_List_fromArray(
[
@@ -7842,127 +7925,6 @@ var $author$project$Main$viewEditableText = F2(
]))
]));
});
-var $author$project$Main$Import = {$: 'Import'};
-var $author$project$Main$ImportCharacter = function (a) {
- return {$: 'ImportCharacter', a: a};
-};
-var $author$project$Main$viewImport = function (activeDropdown) {
- return A2(
- $elm$html$Html$div,
- _List_fromArray(
- [
- $elm$html$Html$Attributes$class(
- 'block dropdown' + (_Utils_eq(
- activeDropdown,
- $elm$core$Maybe$Just($author$project$Main$Import)) ? ' 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(
- A2($author$project$Main$switchDropdownActive, activeDropdown, $author$project$Main$Import)))
- ]),
- _List_fromArray(
- [
- A2(
- $elm$html$Html$span,
- _List_Nil,
- _List_fromArray(
- [
- $elm$html$Html$text('Import Character')
- ])),
- 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')
- ]),
- _List_fromArray(
- [
- A2(
- $elm$html$Html$a,
- _List_fromArray(
- [
- $elm$html$Html$Attributes$class('dropdown-item'),
- $elm$html$Html$Events$onClick(
- $author$project$Main$ImportCharacter('./characters/empty.json'))
- ]),
- _List_fromArray(
- [
- $elm$html$Html$text('Empty')
- ])),
- A2(
- $elm$html$Html$a,
- _List_fromArray(
- [
- $elm$html$Html$Attributes$class('dropdown-item'),
- $elm$html$Html$Events$onClick(
- $author$project$Main$ImportCharacter('./characters/john_doe.json'))
- ]),
- _List_fromArray(
- [
- $elm$html$Html$text('John Doe')
- ])),
- A2(
- $elm$html$Html$a,
- _List_fromArray(
- [
- $elm$html$Html$Attributes$class('dropdown-item'),
- $elm$html$Html$Events$onClick(
- $author$project$Main$ImportCharacter('./characters/jane_doe.json'))
- ]),
- _List_fromArray(
- [
- $elm$html$Html$text('Jane Doe')
- ]))
- ]))
- ]))
- ]));
-};
var $author$project$Main$ChangeModalValue = function (a) {
return {$: 'ChangeModalValue', a: a};
};
@@ -8142,6 +8104,217 @@ var $author$project$Main$viewModal = function (model) {
]));
}
};
+var $author$project$Main$ariaExpanded = function (value) {
+ return A2($elm$html$Html$Attributes$attribute, 'aria-expanded', value);
+};
+var $author$project$Main$ariaLabel = function (value) {
+ return A2($elm$html$Html$Attributes$attribute, 'aria-label', value);
+};
+var $elm$html$Html$nav = _VirtualDom_node('nav');
+var $author$project$Main$ImportCharacter = function (a) {
+ return {$: 'ImportCharacter', a: a};
+};
+var $author$project$Main$viewImport = A2(
+ $elm$html$Html$div,
+ _List_fromArray(
+ [
+ $elm$html$Html$Attributes$class('navbar-item has-dropdown is-hoverable')
+ ]),
+ _List_fromArray(
+ [
+ A2(
+ $elm$html$Html$a,
+ _List_fromArray(
+ [
+ $elm$html$Html$Attributes$class('navbar-link'),
+ $elm$html$Html$Attributes$href('#')
+ ]),
+ _List_fromArray(
+ [
+ $elm$html$Html$text('Import Character')
+ ])),
+ A2(
+ $elm$html$Html$div,
+ _List_fromArray(
+ [
+ $elm$html$Html$Attributes$class('navbar-dropdown')
+ ]),
+ _List_fromArray(
+ [
+ A2(
+ $elm$html$Html$a,
+ _List_fromArray(
+ [
+ $elm$html$Html$Attributes$class('navbar-item'),
+ $elm$html$Html$Events$onClick(
+ $author$project$Main$ImportCharacter('./characters/empty.json')),
+ $elm$html$Html$Attributes$href('#')
+ ]),
+ _List_fromArray(
+ [
+ $elm$html$Html$text('Empty')
+ ])),
+ A2(
+ $elm$html$Html$a,
+ _List_fromArray(
+ [
+ $elm$html$Html$Attributes$class('navbar-item'),
+ $elm$html$Html$Events$onClick(
+ $author$project$Main$ImportCharacter('./characters/john_doe.json')),
+ $elm$html$Html$Attributes$href('#')
+ ]),
+ _List_fromArray(
+ [
+ $elm$html$Html$text('John Doe')
+ ])),
+ A2(
+ $elm$html$Html$a,
+ _List_fromArray(
+ [
+ $elm$html$Html$Attributes$class('navbar-item'),
+ $elm$html$Html$Events$onClick(
+ $author$project$Main$ImportCharacter('./characters/jane_doe.json')),
+ $elm$html$Html$Attributes$href('#')
+ ]),
+ _List_fromArray(
+ [
+ $elm$html$Html$text('Jane Doe')
+ ]))
+ ]))
+ ]));
+var $author$project$Main$viewNavbar = function (model) {
+ return A2(
+ $elm$html$Html$nav,
+ _List_fromArray(
+ [
+ $elm$html$Html$Attributes$class('navbar is-fixed-top'),
+ $author$project$Main$ariaRole('navigation'),
+ $author$project$Main$ariaLabel('main navigation')
+ ]),
+ _List_fromArray(
+ [
+ A2(
+ $elm$html$Html$div,
+ _List_fromArray(
+ [
+ $elm$html$Html$Attributes$class('navbar-brand')
+ ]),
+ _List_fromArray(
+ [
+ A2(
+ $elm$html$Html$p,
+ _List_fromArray(
+ [
+ $elm$html$Html$Attributes$class('navbar-item')
+ ]),
+ _List_fromArray(
+ [
+ $elm$html$Html$text('MtA Character Creator')
+ ])),
+ A2(
+ $elm$html$Html$a,
+ _List_fromArray(
+ [
+ $author$project$Main$ariaRole('button'),
+ $elm$html$Html$Attributes$class('navbar-burger'),
+ $author$project$Main$ariaLabel('menu'),
+ $author$project$Main$ariaExpanded('false'),
+ $elm$html$Html$Attributes$href('#')
+ ]),
+ _List_fromArray(
+ [
+ A2(
+ $elm$html$Html$span,
+ _List_fromArray(
+ [
+ $author$project$Main$ariaHidden('true')
+ ]),
+ _List_Nil),
+ A2(
+ $elm$html$Html$span,
+ _List_fromArray(
+ [
+ $author$project$Main$ariaHidden('true')
+ ]),
+ _List_Nil),
+ A2(
+ $elm$html$Html$span,
+ _List_fromArray(
+ [
+ $author$project$Main$ariaHidden('true')
+ ]),
+ _List_Nil),
+ A2(
+ $elm$html$Html$span,
+ _List_fromArray(
+ [
+ $author$project$Main$ariaHidden('true')
+ ]),
+ _List_Nil)
+ ]))
+ ])),
+ A2(
+ $elm$html$Html$div,
+ _List_fromArray(
+ [
+ $elm$html$Html$Attributes$id('navbar'),
+ $elm$html$Html$Attributes$class('navbar-menu')
+ ]),
+ _List_fromArray(
+ [
+ A2(
+ $elm$html$Html$div,
+ _List_fromArray(
+ [
+ $elm$html$Html$Attributes$class('navbar-start')
+ ]),
+ _List_fromArray(
+ [
+ A2(
+ $elm$html$Html$a,
+ _List_fromArray(
+ [
+ $elm$html$Html$Attributes$class('navbar-item'),
+ $elm$html$Html$Attributes$href('#')
+ ]),
+ _List_fromArray(
+ [
+ $elm$html$Html$text('New Character')
+ ])),
+ $author$project$Main$viewImport
+ ])),
+ A2(
+ $elm$html$Html$div,
+ _List_fromArray(
+ [
+ $elm$html$Html$Attributes$class('navbar-end')
+ ]),
+ _List_fromArray(
+ [
+ A2(
+ $elm$html$Html$div,
+ _List_fromArray(
+ [
+ $elm$html$Html$Attributes$class('navbar-item')
+ ]),
+ _List_fromArray(
+ [
+ A2(
+ $elm$html$Html$a,
+ _List_fromArray(
+ [
+ $elm$html$Html$Attributes$class('button is-primary'),
+ $elm$html$Html$Attributes$href('#')
+ ]),
+ _List_fromArray(
+ [
+ $elm$html$Html$text('Finish Character')
+ ]))
+ ]))
+ ]))
+ ]))
+ ]));
+};
var $elm$core$Basics$neq = _Utils_notEqual;
var $author$project$Stats$hasSetAffinity = function (spheres) {
var affinityCount = $elm$core$List$length(
@@ -8337,32 +8510,38 @@ var $author$project$Main$view = function (model) {
[
A2(
$elm$html$Html$div,
+ _List_Nil,
_List_fromArray(
[
- $elm$html$Html$Attributes$class('container')
- ]),
- _List_fromArray(
- [
- $author$project$Main$viewImport(model.activeDropdown),
- 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),
- A3(
- $author$project$Main$viewBackgrounds,
- model.activeDropdown,
- model.character.creationPoints,
- $author$project$Stats$backgroundsInList(model.character.stats)),
+ $author$project$Main$viewNavbar(model),
A2(
- $author$project$Main$viewSpheres,
- model.character.creationPoints,
- $author$project$Stats$spheresInList(model.character.stats)),
- $author$project$Main$viewModal(model)
+ $elm$html$Html$div,
+ _List_fromArray(
+ [
+ $elm$html$Html$Attributes$class('container')
+ ]),
+ _List_fromArray(
+ [
+ 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),
+ A3(
+ $author$project$Main$viewBackgrounds,
+ model.activeDropdown,
+ model.character.creationPoints,
+ $author$project$Stats$backgroundsInList(model.character.stats)),
+ A2(
+ $author$project$Main$viewSpheres,
+ model.character.creationPoints,
+ $author$project$Stats$spheresInList(model.character.stats)),
+ $author$project$Main$viewModal(model)
+ ]))
]))
]),
title: 'Character Sheet'
};
};
-var $author$project$Main$main = $elm$browser$Browser$document(
- {init: $author$project$Main$init, subscriptions: $author$project$Main$subscriptions, update: $author$project$Main$update, view: $author$project$Main$view});
+var $author$project$Main$main = $elm$browser$Browser$application(
+ {init: $author$project$Main$init, onUrlChange: $author$project$Main$UrlChanged, onUrlRequest: $author$project$Main$LinkClicked, subscriptions: $author$project$Main$subscriptions, update: $author$project$Main$update, view: $author$project$Main$view});
_Platform_export({'Main':{'init':$author$project$Main$main(
$elm$json$Json$Decode$succeed(_Utils_Tuple0))(0)}});}(this));
\ No newline at end of file
diff --git a/src/Main.elm b/src/Main.elm
index 32a4c45..c16669c 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -14,24 +14,28 @@ import Creation exposing (CreationPoints)
import OrderedCategories as OCat exposing (OCat, CategoriesType)
import Http
import Json.Decode
-import Platform.Cmd exposing (none)
-import Svg exposing (switch)
+import Url
+import Browser.Navigation as Nav
main : Program () Model Msg
main =
- Browser.document
+ Browser.application
{ init = init
, view = view
, update = update
, subscriptions = subscriptions
+ , onUrlChange = UrlChanged
+ , onUrlRequest = LinkClicked
}
-init : () -> ( Model, Cmd Msg )
-init _ =
+init : () -> Url.Url -> Nav.Key -> ( Model, Cmd Msg )
+init _ url key =
( { character = Character.new
, modal = Nothing
, modalValue = ""
, activeDropdown = Nothing
+ , key = key
+ , url = url
}
, Cmd.none
)
@@ -41,11 +45,12 @@ type alias Model =
, modal : Maybe ModalType
, modalValue : String
, activeDropdown : Maybe ActiveDropdown
+ , key : Nav.Key
+ , url : Url.Url
}
type ActiveDropdown
= Backgrounds
- | Import
type Msg
= OpenModal ModalType
@@ -58,6 +63,8 @@ type Msg
| SetAffinity Stat
| ImportCharacter String
| JsonContent ( Result Http.Error Character )
+ | LinkClicked Browser.UrlRequest
+ | UrlChanged Url.Url
type ModalType
= Name
@@ -133,24 +140,112 @@ update msg model =
}
, Cmd.none
)
+ LinkClicked urlRequest ->
+ case urlRequest of
+ Browser.Internal url ->
+ ( model
+ , Nav.pushUrl model.key ( Url.toString url )
+ )
+ Browser.External href ->
+ ( model
+ , Nav.load href
+ )
+ UrlChanged url ->
+ ( { model | url = url }
+ , Cmd.none -- this is where changing the url should have some effect on the model
+ )
view : Model -> Browser.Document Msg
view model =
{ title = "Character Sheet"
, body =
- [ div
- [ class "container" ]
- [ viewImport model.activeDropdown
- , viewEditableText Name model.character.name
- , viewAttributes model.character.creationPoints.attributes model.character.stats
- , viewAbilities model.character.creationPoints.abilities model.character.stats
- , viewBackgrounds model.activeDropdown model.character.creationPoints ( Stats.backgroundsInList model.character.stats )
- , viewSpheres model.character.creationPoints ( Stats.spheresInList model.character.stats )
- , viewModal model
+ [ div []
+ [ viewNavbar model
+ , 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.activeDropdown model.character.creationPoints ( Stats.backgroundsInList model.character.stats )
+ , viewSpheres model.character.creationPoints ( Stats.spheresInList model.character.stats )
+ , viewModal model
+ ]
]
]
}
+viewNavbar : Model -> Html Msg
+viewNavbar model =
+ nav
+ [ class "navbar is-fixed-top"
+ , ariaRole "navigation"
+ , ariaLabel "main navigation"
+ ]
+ [ div [ class "navbar-brand" ]
+ [ p [ class "navbar-item" ] [ text "MtA Character Creator" ]
+ , a
+ [ ariaRole "button"
+ , class "navbar-burger"
+ , ariaLabel "menu"
+ , ariaExpanded "false"
+ , href "#"
+ ]
+ [ span [ ariaHidden "true" ] []
+ , span [ ariaHidden "true" ] []
+ , span [ ariaHidden "true" ] []
+ , span [ ariaHidden "true" ] []
+ ]
+ ]
+ , div
+ [ id "navbar"
+ , class "navbar-menu"
+ ]
+ [ div [ class "navbar-start" ]
+ [ a
+ [ class "navbar-item"
+ , href "#"
+ ]
+ [ text "New Character" ]
+ , viewImport
+ ]
+ , div [ class "navbar-end" ]
+ [ div [ class "navbar-item" ]
+ [ a
+ [ class "button is-primary"
+ , href "#"
+ ]
+ [ text "Finish Character" ]
+ ]
+ ]
+ ]
+ ]
+
+viewImport : Html Msg
+viewImport =
+ div [ class "navbar-item has-dropdown is-hoverable" ]
+ [ a
+ [ class "navbar-link"
+ , href "#"
+ ] [ text "Import Character" ]
+ , div [ class "navbar-dropdown" ]
+ [ a
+ [ class "navbar-item"
+ , onClick ( ImportCharacter "./characters/empty.json" )
+ , href "#"
+ ] [ text "Empty" ]
+ , a
+ [ class "navbar-item"
+ , onClick ( ImportCharacter "./characters/john_doe.json" )
+ , href "#"
+ ] [ text "John Doe" ]
+ , a
+ [ class "navbar-item"
+ , onClick ( ImportCharacter "./characters/jane_doe.json" )
+ , href "#"
+ ] [ text "Jane Doe" ]
+ ]
+ ]
+
viewEditableText : ModalType -> String -> Html Msg
viewEditableText modalType content =
div []
@@ -369,6 +464,7 @@ viewStatDropdown stat =
a
[ class "dropdown-item"
, onClick ( ChangeStat { stat | dots = BoundedInt.changeTo stat.dots 1 } )
+ , href "#"
] [ text stat.name ]
@@ -524,47 +620,6 @@ valueOrReset dots value =
then dots.min
else value
-viewImport : Maybe ActiveDropdown -> Html Msg
-viewImport activeDropdown =
- div [ class ( "block dropdown" ++ if activeDropdown == Just Import then " is-active" else "" ) ]
- [ div [ class "dropdown-trigger" ]
- [ div
- [ class "button"
- , ariaHaspopup "true"
- , ariaControls "dropdown-menu"
- , onClick ( SetDropDownActive ( switchDropdownActive activeDropdown Import ) )
- ]
- [ span [] [ text "Import Character" ]
- , 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" ]
- [ a
- [ class "dropdown-item"
- , onClick ( ImportCharacter "./characters/empty.json" )
- ] [ text "Empty" ]
- , a
- [ class "dropdown-item"
- , onClick ( ImportCharacter "./characters/john_doe.json" )
- ] [ text "John Doe" ]
- , a
- [ class "dropdown-item"
- , onClick ( ImportCharacter "./characters/jane_doe.json" )
- ] [ text "Jane Doe" ]
- ]
- ]
- ]
-
switchDropdownActive : Maybe ActiveDropdown -> ActiveDropdown -> Maybe ActiveDropdown
switchDropdownActive activeDropdown dropdownAction =
if activeDropdown == Just dropdownAction
@@ -647,6 +702,10 @@ ariaRole : String -> Attribute msg
ariaRole value =
Html.Attributes.attribute "role" value
+ariaExpanded : String -> Attribute msg
+ariaExpanded value =
+ Html.Attributes.attribute "aria-expanded" value
+
-- json decoder
jsonDecoder : Json.Decode.Decoder Character
--
GitLab