From 0bbcb6c8429bb9a25aafe5595129470f1c30ced9 Mon Sep 17 00:00:00 2001 From: nsensfel Date: Tue, 17 Apr 2018 18:57:52 +0200 Subject: Changing the layout... --- src/battlemap/src/ElmModule/View.elm | 19 ++-- src/battlemap/src/View/Controlled.elm | 142 +++++++++++++++++++++++++++++ src/battlemap/src/View/Footer.elm | 142 ----------------------------- src/battlemap/src/View/Help.elm | 142 +++++++++++++++++++++++++++++ src/battlemap/src/View/MainMenu.elm | 54 +++++++++++ src/battlemap/src/View/SideBar/TabMenu.elm | 124 ------------------------- src/battlemap/www/style.css | 50 ++++++---- 7 files changed, 375 insertions(+), 298 deletions(-) create mode 100644 src/battlemap/src/View/Controlled.elm delete mode 100644 src/battlemap/src/View/Footer.elm create mode 100644 src/battlemap/src/View/Help.elm create mode 100644 src/battlemap/src/View/MainMenu.elm delete mode 100644 src/battlemap/src/View/SideBar/TabMenu.elm diff --git a/src/battlemap/src/ElmModule/View.elm b/src/battlemap/src/ElmModule/View.elm index 63e382f..aa3929c 100644 --- a/src/battlemap/src/ElmModule/View.elm +++ b/src/battlemap/src/ElmModule/View.elm @@ -26,29 +26,22 @@ view model = (Html.Attributes.class "fullscreen-module") ] [ + (View.MainMenu.get_html model), (Html.div [ - (Html.Attributes.class "battlemap-left-panel") + (Html.Attributes.class "battlemap-main-content") ] [ + (View.Controlled.get_html model), (Html.div [ (Html.Attributes.class "battlemap-container") ] - [ - (View.Battlemap.get_html model) - ] + [(View.Battlemap.get_html model)] ), - (View.Footer.get_html model) + (View.SubMenu.get_html model) ] ), - (Html.div - [ - (Html.Attributes.class "battlemap-right-panel") - ] - [ - (View.SideBar.get_html model) - ] - ) + (View.Help.get_html model) ] ) diff --git a/src/battlemap/src/View/Controlled.elm b/src/battlemap/src/View/Controlled.elm new file mode 100644 index 0000000..890b59a --- /dev/null +++ b/src/battlemap/src/View/Controlled.elm @@ -0,0 +1,142 @@ +module View.Footer exposing (get_html) + +-- Elm ------------------------------------------------------------------------- +import Html +import Html.Attributes +import Html.Events + +-- Struct.Battlemap ------------------------------------------------------------------- +import Struct.Character +import Struct.CharacterTurn +import Struct.Event +import Struct.Model +import Struct.Navigator +import Struct.Statistics + +import Util.Html + +-------------------------------------------------------------------------------- +-- LOCAL ----------------------------------------------------------------------- +-------------------------------------------------------------------------------- +attack_button : (Html.Html Struct.Event.Type) +attack_button = + (Html.button + [ (Html.Events.onClick Struct.Event.AttackWithoutMovingRequest) ] + [ (Html.text "Select Target") ] + ) + +end_turn_button : (Html.Html Struct.Event.Type) +end_turn_button = + (Html.button + [ (Html.Events.onClick Struct.Event.TurnEnded) ] + [ (Html.text "End Turn") ] + ) + +inventory_button : (Html.Html Struct.Event.Type) +inventory_button = + (Html.button + [ (Html.Events.onClick Struct.Event.WeaponSwitchRequest) ] + [ (Html.text "Switch Weapon") ] + ) + +get_navigator_info : ( + Struct.Model.Type -> + Struct.Character.Type -> + String + ) +get_navigator_info model char = + case + (Struct.CharacterTurn.try_getting_navigator model.char_turn) + of + (Just nav) -> + ( + (toString (Struct.Navigator.get_remaining_points nav)) + ++ "/" + ++ + (toString + (Struct.Statistics.get_movement_points + (Struct.Character.get_statistics char) + ) + ) + ++ " movement points remaining" + ) + + _ -> + "[Error: Character selected yet navigator undefined.]" + +get_curr_char_info_htmls : ( + Struct.Model.Type -> + Struct.Character.Type -> + (List (Html.Html Struct.Event.Type)) + ) +get_curr_char_info_htmls model char = + case + (Struct.CharacterTurn.get_state model.char_turn) + of + Struct.CharacterTurn.SelectedCharacter -> + [ + (Html.text + ( + "Controlling " + ++ char.name + ++ ". Move (" + ++ (get_navigator_info model char) + ++ "), " + ) + ), + (attack_button), + (Html.text ", or "), + (inventory_button) + ] + + Struct.CharacterTurn.MovedCharacter -> + [ + (Html.text + ( + "Controlling " + ++ char.name + ++ ". Moved. Select a target, or " + ) + ), + (end_turn_button) + ] + + Struct.CharacterTurn.ChoseTarget -> + [ + (Html.text + ( + "Controlling " + ++ char.name + ++ ". Moved. Chose a target. Click on " + ) + ), + (end_turn_button), + (Html.text "to end turn.") + ] + + _ -> + [ + (Html.text + ( + "Error: CharacterTurn structure in an inconsistent state:" + ++ " Has an active character yet the 'state' is not any of" + ++ " those expected in such cases." + ) + ) + ] + +-------------------------------------------------------------------------------- +-- EXPORTED -------------------------------------------------------------------- +-------------------------------------------------------------------------------- +get_html : Struct.Model.Type -> (Html.Html Struct.Event.Type) +get_html model = + case + (Struct.CharacterTurn.try_getting_active_character model.char_turn) + of + (Just char) -> + (Html.div + [(Html.Attributes.class "battlemap-footer")] + (get_curr_char_info_htmls model char) + ) + + Nothing -> (Util.Html.nothing) diff --git a/src/battlemap/src/View/Footer.elm b/src/battlemap/src/View/Footer.elm deleted file mode 100644 index 6a95aa9..0000000 --- a/src/battlemap/src/View/Footer.elm +++ /dev/null @@ -1,142 +0,0 @@ -module View.Footer exposing (get_html) - --- Elm ------------------------------------------------------------------------- -import Html -import Html.Attributes -import Html.Events - --- Struct.Battlemap ------------------------------------------------------------------- -import Struct.Character -import Struct.CharacterTurn -import Struct.Event -import Struct.Model -import Struct.Navigator -import Struct.Statistics - -import Util.Html - --------------------------------------------------------------------------------- --- LOCAL ----------------------------------------------------------------------- --------------------------------------------------------------------------------- -attack_button : (Html.Html Struct.Event.Type) -attack_button = - (Html.button - [ (Html.Events.onClick Struct.Event.AttackWithoutMovingRequest) ] - [ (Html.text "Attack Without Moving") ] - ) - -end_turn_button : (Html.Html Struct.Event.Type) -end_turn_button = - (Html.button - [ (Html.Events.onClick Struct.Event.TurnEnded) ] - [ (Html.text "End Turn") ] - ) - -inventory_button : (Html.Html Struct.Event.Type) -inventory_button = - (Html.button - [ (Html.Events.onClick Struct.Event.WeaponSwitchRequest) ] - [ (Html.text "Switch Weapon") ] - ) - -get_navigator_info : ( - Struct.Model.Type -> - Struct.Character.Type -> - String - ) -get_navigator_info model char = - case - (Struct.CharacterTurn.try_getting_navigator model.char_turn) - of - (Just nav) -> - ( - (toString (Struct.Navigator.get_remaining_points nav)) - ++ "/" - ++ - (toString - (Struct.Statistics.get_movement_points - (Struct.Character.get_statistics char) - ) - ) - ++ " movement points remaining" - ) - - _ -> - "[Error: Character selected yet navigator undefined.]" - -get_curr_char_info_htmls : ( - Struct.Model.Type -> - Struct.Character.Type -> - (List (Html.Html Struct.Event.Type)) - ) -get_curr_char_info_htmls model char = - case - (Struct.CharacterTurn.get_state model.char_turn) - of - Struct.CharacterTurn.SelectedCharacter -> - [ - (Html.text - ( - "Controlling " - ++ char.name - ++ ". Move (" - ++ (get_navigator_info model char) - ++ "), " - ) - ), - (attack_button), - (Html.text ", or "), - (inventory_button) - ] - - Struct.CharacterTurn.MovedCharacter -> - [ - (Html.text - ( - "Controlling " - ++ char.name - ++ ". Moved. Select a target, or " - ) - ), - (end_turn_button) - ] - - Struct.CharacterTurn.ChoseTarget -> - [ - (Html.text - ( - "Controlling " - ++ char.name - ++ ". Moved. Chose a target. Click on " - ) - ), - (end_turn_button), - (Html.text "to end turn.") - ] - - _ -> - [ - (Html.text - ( - "Error: CharacterTurn structure in an inconsistent state:" - ++ " Has an active character yet the 'state' is not any of" - ++ " those expected in such cases." - ) - ) - ] - --------------------------------------------------------------------------------- --- EXPORTED -------------------------------------------------------------------- --------------------------------------------------------------------------------- -get_html : Struct.Model.Type -> (Html.Html Struct.Event.Type) -get_html model = - case - (Struct.CharacterTurn.try_getting_active_character model.char_turn) - of - (Just char) -> - (Html.div - [(Html.Attributes.class "battlemap-footer")] - (get_curr_char_info_htmls model char) - ) - - Nothing -> (Util.Html.nothing) diff --git a/src/battlemap/src/View/Help.elm b/src/battlemap/src/View/Help.elm new file mode 100644 index 0000000..6a95aa9 --- /dev/null +++ b/src/battlemap/src/View/Help.elm @@ -0,0 +1,142 @@ +module View.Footer exposing (get_html) + +-- Elm ------------------------------------------------------------------------- +import Html +import Html.Attributes +import Html.Events + +-- Struct.Battlemap ------------------------------------------------------------------- +import Struct.Character +import Struct.CharacterTurn +import Struct.Event +import Struct.Model +import Struct.Navigator +import Struct.Statistics + +import Util.Html + +-------------------------------------------------------------------------------- +-- LOCAL ----------------------------------------------------------------------- +-------------------------------------------------------------------------------- +attack_button : (Html.Html Struct.Event.Type) +attack_button = + (Html.button + [ (Html.Events.onClick Struct.Event.AttackWithoutMovingRequest) ] + [ (Html.text "Attack Without Moving") ] + ) + +end_turn_button : (Html.Html Struct.Event.Type) +end_turn_button = + (Html.button + [ (Html.Events.onClick Struct.Event.TurnEnded) ] + [ (Html.text "End Turn") ] + ) + +inventory_button : (Html.Html Struct.Event.Type) +inventory_button = + (Html.button + [ (Html.Events.onClick Struct.Event.WeaponSwitchRequest) ] + [ (Html.text "Switch Weapon") ] + ) + +get_navigator_info : ( + Struct.Model.Type -> + Struct.Character.Type -> + String + ) +get_navigator_info model char = + case + (Struct.CharacterTurn.try_getting_navigator model.char_turn) + of + (Just nav) -> + ( + (toString (Struct.Navigator.get_remaining_points nav)) + ++ "/" + ++ + (toString + (Struct.Statistics.get_movement_points + (Struct.Character.get_statistics char) + ) + ) + ++ " movement points remaining" + ) + + _ -> + "[Error: Character selected yet navigator undefined.]" + +get_curr_char_info_htmls : ( + Struct.Model.Type -> + Struct.Character.Type -> + (List (Html.Html Struct.Event.Type)) + ) +get_curr_char_info_htmls model char = + case + (Struct.CharacterTurn.get_state model.char_turn) + of + Struct.CharacterTurn.SelectedCharacter -> + [ + (Html.text + ( + "Controlling " + ++ char.name + ++ ". Move (" + ++ (get_navigator_info model char) + ++ "), " + ) + ), + (attack_button), + (Html.text ", or "), + (inventory_button) + ] + + Struct.CharacterTurn.MovedCharacter -> + [ + (Html.text + ( + "Controlling " + ++ char.name + ++ ". Moved. Select a target, or " + ) + ), + (end_turn_button) + ] + + Struct.CharacterTurn.ChoseTarget -> + [ + (Html.text + ( + "Controlling " + ++ char.name + ++ ". Moved. Chose a target. Click on " + ) + ), + (end_turn_button), + (Html.text "to end turn.") + ] + + _ -> + [ + (Html.text + ( + "Error: CharacterTurn structure in an inconsistent state:" + ++ " Has an active character yet the 'state' is not any of" + ++ " those expected in such cases." + ) + ) + ] + +-------------------------------------------------------------------------------- +-- EXPORTED -------------------------------------------------------------------- +-------------------------------------------------------------------------------- +get_html : Struct.Model.Type -> (Html.Html Struct.Event.Type) +get_html model = + case + (Struct.CharacterTurn.try_getting_active_character model.char_turn) + of + (Just char) -> + (Html.div + [(Html.Attributes.class "battlemap-footer")] + (get_curr_char_info_htmls model char) + ) + + Nothing -> (Util.Html.nothing) diff --git a/src/battlemap/src/View/MainMenu.elm b/src/battlemap/src/View/MainMenu.elm new file mode 100644 index 0000000..c5c4eee --- /dev/null +++ b/src/battlemap/src/View/MainMenu.elm @@ -0,0 +1,54 @@ +module View.MainMenu exposing (get_html) + +-- Elm ------------------------------------------------------------------------- +import Html +import Html.Attributes +import Html.Events + +-- Battlemap ------------------------------------------------------------------- +import Struct.Error +import Struct.Event +import Struct.Model +import Struct.UI + +import Util.Html + +import View.SubMenu.Characters +import View.SubMenu.Settings +import View.SubMenu.Status +import View.SubMenu.Timeline + +-------------------------------------------------------------------------------- +-- LOCAL ----------------------------------------------------------------------- +-------------------------------------------------------------------------------- +get_menu_button_html : ( + (Maybe Struct.UI.Tab) -> + Struct.UI.Tab -> + (Html.Html Struct.Event.Type) + ) +get_menu_button_html selected_tab tab = + (Html.button + ( + if ((Just tab) == selected_tab) + then + [ (Html.Attributes.disabled True) ] + else + [ (Html.Events.onClick (Struct.Event.TabSelected tab)) ] + ) + [ (Html.text (Struct.UI.to_string tab)) ] + ) + +-------------------------------------------------------------------------------- +-- EXPORTED -------------------------------------------------------------------- +-------------------------------------------------------------------------------- +get_html : Struct.Model.Type -> (Html.Html Struct.Event.Type) +get_html model = + (Html.div + [ + (Html.Attributes.class "battlemap-main-menu") + ] + (List.map + (get_menu_button_html (Struct.UI.try_getting_displayed_tab model.ui)) + (Struct.UI.get_all_tabs) + ) + ) diff --git a/src/battlemap/src/View/SideBar/TabMenu.elm b/src/battlemap/src/View/SideBar/TabMenu.elm deleted file mode 100644 index 3cca9ea..0000000 --- a/src/battlemap/src/View/SideBar/TabMenu.elm +++ /dev/null @@ -1,124 +0,0 @@ -module View.SideBar.TabMenu exposing (get_html) - --- Elm ------------------------------------------------------------------------- -import Html -import Html.Attributes -import Html.Events - --- Battlemap ------------------------------------------------------------------- -import Struct.Error -import Struct.Event -import Struct.Model -import Struct.UI - -import Util.Html - -import View.SideBar.TabMenu.Characters -import View.SideBar.TabMenu.Settings -import View.SideBar.TabMenu.Status -import View.SideBar.TabMenu.Timeline - --------------------------------------------------------------------------------- --- LOCAL ----------------------------------------------------------------------- --------------------------------------------------------------------------------- -get_basic_button_html : Struct.UI.Tab -> (Html.Html Struct.Event.Type) -get_basic_button_html tab = - (Html.button - [ (Html.Events.onClick (Struct.Event.TabSelected tab)) ] - [ (Html.text (Struct.UI.to_string tab)) ] - ) - -get_menu_button_html : ( - Struct.UI.Tab -> - Struct.UI.Tab -> - (Html.Html Struct.Event.Type) - ) -get_menu_button_html selected_tab tab = - (Html.button - ( - if (tab == selected_tab) - then - [ (Html.Attributes.disabled True) ] - else - [ (Html.Events.onClick (Struct.Event.TabSelected tab)) ] - ) - [ (Html.text (Struct.UI.to_string tab)) ] - ) - -get_active_tab_selector_html : Struct.UI.Tab -> (Html.Html Struct.Event.Type) -get_active_tab_selector_html selected_tab = - (Html.div - [ - (Html.Attributes.class "battlemap-tabmenu-selector") - ] - (List.map (get_menu_button_html selected_tab) (Struct.UI.get_all_tabs)) - ) - -get_inactive_tab_selector_html : (Html.Html Struct.Event.Type) -get_inactive_tab_selector_html = - (Html.div - [ - (Html.Attributes.class "battlemap-tabmenu-selector") - ] - (List.map (get_basic_button_html) (Struct.UI.get_all_tabs)) - ) - -get_error_message_html : Struct.Model.Type -> (Html.Html Struct.Event.Type) -get_error_message_html model = - case model.error of - (Just error) -> - (Html.div - [ - (Html.Attributes.class "battlemap-tabmenu-error-message") - ] - [ - (Html.text (Struct.Error.to_string error)) - ] - ) - - Nothing -> Util.Html.nothing --------------------------------------------------------------------------------- --- EXPORTED -------------------------------------------------------------------- --------------------------------------------------------------------------------- -get_html : Struct.Model.Type -> (Html.Html Struct.Event.Type) -get_html model = - (Html.div - [ - (Html.Attributes.class "battlemap-tabmenu") - ] - ( - (get_error_message_html model) - :: - ( - let - displayed_tab = (Struct.UI.try_getting_displayed_tab model.ui) - in - case displayed_tab of - (Just Struct.UI.StatusTab) -> - [ - (get_active_tab_selector_html Struct.UI.StatusTab), - (View.SideBar.TabMenu.Status.get_html model) - ] - - (Just Struct.UI.CharactersTab) -> - [ - (get_active_tab_selector_html Struct.UI.CharactersTab), - (View.SideBar.TabMenu.Characters.get_html model) - ] - - (Just Struct.UI.SettingsTab) -> - [ - (get_active_tab_selector_html Struct.UI.SettingsTab), - (View.SideBar.TabMenu.Settings.get_html model) - ] - - (Just Struct.UI.TimelineTab) -> - [ - (get_active_tab_selector_html Struct.UI.TimelineTab), - (View.SideBar.TabMenu.Timeline.get_html model) - ] - - Nothing -> [(get_inactive_tab_selector_html)] - ) - ) - ) diff --git a/src/battlemap/www/style.css b/src/battlemap/www/style.css index 4fcf666..b3a9e46 100644 --- a/src/battlemap/www/style.css +++ b/src/battlemap/www/style.css @@ -1,45 +1,57 @@ /******************************************************************************/ /** LAYOUT ********************************************************************/ /******************************************************************************/ -.battlemap-left-panel + +.fullscreen-module { - flex-grow: 1; - min-width: 70%; + display: grid; + + grid-template-columns: 1fr; + grid-template-rows: 2em calc(100% - 4em) 2em; +} + +.battlemap-main-menu +{ + grid-row: 1 + display: flex; - flex-direction: column; + + flex-direction: row; + flex-wrap: wrap; } -.battlemap-right-panel +.battlemap-main-content { - height: inherit; - max-width: 30%; + grid-row: 2; display: flex; + flex-direction: row; } -/** Left Panel ****************************************************************/ +.battlemap-help +{ + grid-row: 3 + +} + +/** Main Content **************************************************************/ .battlemap-container { flex-grow: 1; - min-height: 70%; overflow: auto; - width: inherit; /*** Otherwise, it won't display correctly without 'transform: scale' ***/ position: relative; } -.battlemap-footer +.battlemap-controlled { - max-height: 30%; + width: 15em; +} - overflow-y: auto; - width: inherit; - word-wrap: break-word; - border-top: 1px solid #502D16; - box-shadow: 0px -1px 2px #502D16; - padding: 0.5em; - padding-bottom: 1em; +.battlemap-sub-menu +{ + width: 20em; } /*** Main View ****************************************************************/ -- cgit v1.2.3-70-g09d2