diff --git a/public/main.js b/public/main.js
index 08f6e45918b7b881d94ce087fdd613b9e04b0fb3..fee6ad3e7fdc33ba43f433ea7ef8ba7b955dd72e 100644
--- a/public/main.js
+++ b/public/main.js
@@ -5159,11 +5159,12 @@ var $elm$core$Task$perform = F2(
A2($elm$core$Task$map, toMessage, task)));
});
var $elm$browser$Browser$document = _Browser_document;
+var $author$project$Character$new = {name: 'Default Name'};
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: ''},
$elm$core$Platform$Cmd$none);
};
var $elm$core$Platform$Sub$batch = _Platform_batch;
@@ -5171,13 +5172,270 @@ var $elm$core$Platform$Sub$none = $elm$core$Platform$Sub$batch(_List_Nil);
var $author$project$Main$subscriptions = function (_v0) {
return $elm$core$Platform$Sub$none;
};
+var $author$project$Character$changeName = F2(
+ function (character, newName) {
+ return (newName === '') ? character : _Utils_update(
+ character,
+ {name: newName});
+ });
+var $author$project$Main$modalValue = F2(
+ function (modalType, character) {
+ return character.name;
+ });
var $author$project$Main$update = F2(
function (msg, model) {
- return _Utils_Tuple2(model, $elm$core$Platform$Cmd$none);
+ switch (msg.$) {
+ case 'OpenModal':
+ var modalType = msg.a;
+ return _Utils_Tuple2(
+ _Utils_update(
+ model,
+ {
+ modal: $elm$core$Maybe$Just(modalType),
+ modalValue: A2($author$project$Main$modalValue, modalType, model.character)
+ }),
+ $elm$core$Platform$Cmd$none);
+ case 'CloseModal':
+ return _Utils_Tuple2(
+ _Utils_update(
+ model,
+ {modal: $elm$core$Maybe$Nothing}),
+ $elm$core$Platform$Cmd$none);
+ case 'ChangeModalValue':
+ var value = msg.a;
+ return _Utils_Tuple2(
+ _Utils_update(
+ model,
+ {modalValue: value}),
+ $elm$core$Platform$Cmd$none);
+ default:
+ var modalType = msg.a;
+ return _Utils_Tuple2(
+ _Utils_update(
+ model,
+ {
+ character: A2($author$project$Character$changeName, model.character, model.modalValue),
+ modal: $elm$core$Maybe$Nothing
+ }),
+ $elm$core$Platform$Cmd$none);
+ }
+ });
+var $author$project$Main$Name = {$: 'Name'};
+var $author$project$Main$OpenModal = function (a) {
+ return {$: 'OpenModal', a: a};
+};
+var $elm$html$Html$button = _VirtualDom_node('button');
+var $elm$json$Json$Encode$string = _Json_wrap;
+var $elm$html$Html$Attributes$stringProperty = F2(
+ function (key, string) {
+ return A2(
+ _VirtualDom_property,
+ key,
+ $elm$json$Json$Encode$string(string));
});
+var $elm$html$Html$Attributes$class = $elm$html$Html$Attributes$stringProperty('className');
var $elm$html$Html$div = _VirtualDom_node('div');
+var $elm$virtual_dom$VirtualDom$Normal = function (a) {
+ return {$: 'Normal', a: a};
+};
+var $elm$virtual_dom$VirtualDom$on = _VirtualDom_on;
+var $elm$html$Html$Events$on = F2(
+ function (event, decoder) {
+ return A2(
+ $elm$virtual_dom$VirtualDom$on,
+ event,
+ $elm$virtual_dom$VirtualDom$Normal(decoder));
+ });
+var $elm$html$Html$Events$onClick = function (msg) {
+ return A2(
+ $elm$html$Html$Events$on,
+ 'click',
+ $elm$json$Json$Decode$succeed(msg));
+};
var $elm$virtual_dom$VirtualDom$text = _VirtualDom_text;
var $elm$html$Html$text = $elm$virtual_dom$VirtualDom$text;
+var $author$project$Main$ChangeModalValue = function (a) {
+ return {$: 'ChangeModalValue', a: a};
+};
+var $author$project$Main$CloseModal = {$: 'CloseModal'};
+var $author$project$Main$SaveModalChange = function (a) {
+ return {$: 'SaveModalChange', a: a};
+};
+var $elm$html$Html$footer = _VirtualDom_node('footer');
+var $elm$html$Html$header = _VirtualDom_node('header');
+var $elm$html$Html$input = _VirtualDom_node('input');
+var $author$project$Main$modalTitle = function (modalType) {
+ return 'Character Name';
+};
+var $elm$html$Html$Events$alwaysStop = function (x) {
+ return _Utils_Tuple2(x, true);
+};
+var $elm$virtual_dom$VirtualDom$MayStopPropagation = function (a) {
+ return {$: 'MayStopPropagation', a: a};
+};
+var $elm$html$Html$Events$stopPropagationOn = F2(
+ function (event, decoder) {
+ return A2(
+ $elm$virtual_dom$VirtualDom$on,
+ event,
+ $elm$virtual_dom$VirtualDom$MayStopPropagation(decoder));
+ });
+var $elm$json$Json$Decode$field = _Json_decodeField;
+var $elm$json$Json$Decode$at = F2(
+ function (fields, decoder) {
+ return A3($elm$core$List$foldr, $elm$json$Json$Decode$field, decoder, fields);
+ });
+var $elm$json$Json$Decode$string = _Json_decodeString;
+var $elm$html$Html$Events$targetValue = A2(
+ $elm$json$Json$Decode$at,
+ _List_fromArray(
+ ['target', 'value']),
+ $elm$json$Json$Decode$string);
+var $elm$html$Html$Events$onInput = function (tagger) {
+ return A2(
+ $elm$html$Html$Events$stopPropagationOn,
+ 'input',
+ A2(
+ $elm$json$Json$Decode$map,
+ $elm$html$Html$Events$alwaysStop,
+ A2($elm$json$Json$Decode$map, tagger, $elm$html$Html$Events$targetValue)));
+};
+var $elm$html$Html$p = _VirtualDom_node('p');
+var $elm$html$Html$Attributes$placeholder = $elm$html$Html$Attributes$stringProperty('placeholder');
+var $elm$html$Html$section = _VirtualDom_node('section');
+var $elm$html$Html$Attributes$type_ = $elm$html$Html$Attributes$stringProperty('type');
+var $elm$html$Html$Attributes$value = $elm$html$Html$Attributes$stringProperty('value');
+var $author$project$Main$viewModal = function (model) {
+ var _v0 = model.modal;
+ if (_v0.$ === 'Nothing') {
+ return A2(
+ $elm$html$Html$div,
+ _List_fromArray(
+ [
+ $elm$html$Html$Attributes$class('modal')
+ ]),
+ _List_Nil);
+ } else {
+ var modalType = _v0.a;
+ return A2(
+ $elm$html$Html$div,
+ _List_fromArray(
+ [
+ $elm$html$Html$Attributes$class('modal is-active')
+ ]),
+ _List_fromArray(
+ [
+ A2(
+ $elm$html$Html$div,
+ _List_fromArray(
+ [
+ $elm$html$Html$Attributes$class('modal-background'),
+ $elm$html$Html$Events$onClick($author$project$Main$CloseModal)
+ ]),
+ _List_Nil),
+ A2(
+ $elm$html$Html$div,
+ _List_fromArray(
+ [
+ $elm$html$Html$Attributes$class('modal-card')
+ ]),
+ _List_fromArray(
+ [
+ A2(
+ $elm$html$Html$header,
+ _List_fromArray(
+ [
+ $elm$html$Html$Attributes$class('modal-card-head')
+ ]),
+ _List_fromArray(
+ [
+ A2(
+ $elm$html$Html$p,
+ _List_fromArray(
+ [
+ $elm$html$Html$Attributes$class('modal-card-title')
+ ]),
+ _List_fromArray(
+ [
+ $elm$html$Html$text(
+ 'Change ' + $author$project$Main$modalTitle(modalType))
+ ]))
+ ])),
+ A2(
+ $elm$html$Html$section,
+ _List_fromArray(
+ [
+ $elm$html$Html$Attributes$class('modal-card-body')
+ ]),
+ _List_fromArray(
+ [
+ A2(
+ $elm$html$Html$p,
+ _List_Nil,
+ _List_fromArray(
+ [
+ A2(
+ $elm$html$Html$input,
+ _List_fromArray(
+ [
+ $elm$html$Html$Attributes$class('input'),
+ $elm$html$Html$Attributes$type_('text'),
+ $elm$html$Html$Attributes$placeholder(
+ 'Enter New ' + $author$project$Main$modalTitle(modalType)),
+ $elm$html$Html$Attributes$value(model.modalValue),
+ $elm$html$Html$Events$onInput(
+ function (x) {
+ return $author$project$Main$ChangeModalValue(x);
+ })
+ ]),
+ _List_Nil)
+ ]))
+ ])),
+ A2(
+ $elm$html$Html$footer,
+ _List_fromArray(
+ [
+ $elm$html$Html$Attributes$class('modal-card-foot')
+ ]),
+ _List_fromArray(
+ [
+ A2(
+ $elm$html$Html$div,
+ _List_fromArray(
+ [
+ $elm$html$Html$Attributes$class('buttons')
+ ]),
+ _List_fromArray(
+ [
+ A2(
+ $elm$html$Html$button,
+ _List_fromArray(
+ [
+ $elm$html$Html$Attributes$class('button is-success'),
+ $elm$html$Html$Events$onClick(
+ $author$project$Main$SaveModalChange(modalType))
+ ]),
+ _List_fromArray(
+ [
+ $elm$html$Html$text('Save Changes')
+ ])),
+ A2(
+ $elm$html$Html$button,
+ _List_fromArray(
+ [
+ $elm$html$Html$Attributes$class('button'),
+ $elm$html$Html$Events$onClick($author$project$Main$CloseModal)
+ ]),
+ _List_fromArray(
+ [
+ $elm$html$Html$text('Cancel')
+ ]))
+ ]))
+ ]))
+ ]))
+ ]));
+ }
+};
var $author$project$Main$view = function (model) {
return {
body: _List_fromArray(
@@ -5187,10 +5445,22 @@ var $author$project$Main$view = function (model) {
_List_Nil,
_List_fromArray(
[
- $elm$html$Html$text('Test')
- ]))
+ A2(
+ $elm$html$Html$button,
+ _List_fromArray(
+ [
+ $elm$html$Html$Attributes$class('button'),
+ $elm$html$Html$Events$onClick(
+ $author$project$Main$OpenModal($author$project$Main$Name))
+ ]),
+ _List_fromArray(
+ [
+ $elm$html$Html$text(model.character.name)
+ ]))
+ ])),
+ $author$project$Main$viewModal(model)
]),
- title: 'TBD'
+ title: 'Character Sheet'
};
};
var $author$project$Main$main = $elm$browser$Browser$document(
diff --git a/src/Character.elm b/src/Character.elm
new file mode 100644
index 0000000000000000000000000000000000000000..104c923d2d2d59a30ac06f43019089b1a7a5450a
--- /dev/null
+++ b/src/Character.elm
@@ -0,0 +1,21 @@
+module Character exposing (..)
+
+type alias Character =
+ { name : String
+ }
+
+type CharacterField
+ = Name
+
+changeName : Character -> String -> Character
+changeName character newName =
+ if ( newName == "")
+ then
+ character
+ else
+ { character | name = newName }
+
+new : Character
+new =
+ { name = "Default Name"
+ }
\ No newline at end of file
diff --git a/src/Main.elm b/src/Main.elm
index 8ac41125d28cfe14c8cb0103a2d2bba3c36c9249..df96306d5a6e89f23260ffe6144d355a48961f9c 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -3,6 +3,8 @@ module Main exposing (..)
import Browser
import Html exposing (..)
import Html.Attributes exposing (..)
+import Html.Events exposing (..)
+import Character exposing (..)
main : Program () Model Msg
main =
@@ -15,27 +17,124 @@ main =
init : () -> ( Model, Cmd Msg )
init _ =
- ( {}
+ ( { character = new
+ , modal = Nothing
+ , modalValue = ""
+ }
, Cmd.none
)
-type alias Model = {}
+type alias Model =
+ { character : Character
+ , modal : Maybe ModalType
+ , modalValue : String
+ }
type Msg
- = Nothing
+ = OpenModal ModalType
+ | CloseModal
+ | ChangeModalValue String
+ | SaveModalChange ModalType
+
+type ModalType
+ = Name
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
- ( model, Cmd.none )
+ case msg of
+ OpenModal modalType ->
+ ( { model
+ | modal = ( Just modalType )
+ , modalValue = modalValue modalType model.character
+ }
+ , Cmd.none
+ )
+ CloseModal ->
+ ( { model | modal = Nothing }
+ , Cmd.none
+ )
+ ChangeModalValue value ->
+ ( { model | modalValue = value }
+ , Cmd.none
+ )
+ SaveModalChange modalType ->
+ case modalType of
+ Name ->
+ ( { model
+ | character = changeName model.character model.modalValue
+ , modal = Nothing
+ }
+ , Cmd.none
+ )
view : Model -> Browser.Document Msg
view model =
- { title = "TBD"
+ { title = "Character Sheet"
, body =
- [ div [] [ text "Test" ]
+ [ div []
+ [ button
+ [ class "button"
+ , onClick ( OpenModal Name )
+ ] [ text model.character.name ]
+ ]
+ , viewModal model
]
}
+viewModal : Model -> Html Msg
+viewModal model =
+ case model.modal of
+ Nothing -> div [ class "modal" ] []
+ Just modalType ->
+ div [ class "modal is-active" ]
+ [ div
+ [ class "modal-background"
+ , onClick CloseModal
+ ] []
+ , div [ class "modal-card" ]
+ [ header [ class "modal-card-head" ]
+ [ p [ class "modal-card-title" ] [ text ( "Change " ++ ( modalTitle modalType ) ) ]
+ ]
+ , section [ class "modal-card-body" ]
+ [ p []
+ [ input
+ [ class "input"
+ , type_ "text"
+ , placeholder ( "Enter New " ++ ( modalTitle modalType ) )
+ , value model.modalValue
+ , onInput ( \x -> ChangeModalValue x )
+ ] []
+ ]
+ ]
+ , footer [ class "modal-card-foot" ]
+ [ div [ class "buttons" ]
+ [ button
+ [ class "button is-success"
+ , onClick ( SaveModalChange modalType )
+ ] [ text "Save Changes" ]
+ , button
+ [ class "button"
+ , onClick CloseModal
+ ] [ text "Cancel" ]
+ ]
+ ]
+ ]
+ ]
+
+modalTitle : ModalType -> String
+modalTitle modalType =
+ case modalType of
+ Name -> "Character Name"
+
+modalValue : ModalType -> Character -> String
+modalValue modalType character =
+ case modalType of
+ Name -> character.name
+
subscriptions : Model -> Sub Msg
subscriptions _ =
- Sub.none
\ No newline at end of file
+ Sub.none
+
+ariaLabel : String -> Attribute msg
+ariaLabel value =
+ Html.Attributes.attribute "aria-label" value
\ No newline at end of file