From 1979d54acfe844c2a444d445fe73a35820accce8 Mon Sep 17 00:00:00 2001 From: nsensfel Date: Tue, 24 Apr 2018 13:52:19 +0200 Subject: More cats, meh selection/target indicators. --- src/battlemap/src/View/Battlemap.elm | 2 +- src/battlemap/src/View/Battlemap/Character.elm | 119 ++++++++++++++------- .../src/View/Controlled/CharacterCard.elm | 12 ++- src/battlemap/www/style.css | 55 ++++++++-- 4 files changed, 140 insertions(+), 48 deletions(-) (limited to 'src/battlemap') diff --git a/src/battlemap/src/View/Battlemap.elm b/src/battlemap/src/View/Battlemap.elm index 6bac42e..db62722 100644 --- a/src/battlemap/src/View/Battlemap.elm +++ b/src/battlemap/src/View/Battlemap.elm @@ -104,7 +104,7 @@ get_html model = (Html.Lazy.lazy (get_tiles_html) model.battlemap) :: (List.map - (View.Battlemap.Character.get_html model.player_id) + (View.Battlemap.Character.get_html model) (Dict.values model.characters) ) ++ diff --git a/src/battlemap/src/View/Battlemap/Character.elm b/src/battlemap/src/View/Battlemap/Character.elm index e70c1e9..4dbb5a4 100644 --- a/src/battlemap/src/View/Battlemap/Character.elm +++ b/src/battlemap/src/View/Battlemap/Character.elm @@ -11,60 +11,97 @@ import Constants.UI import Util.Html import Struct.Character +import Struct.CharacterTurn import Struct.Event +import Struct.Model +import Struct.UI -------------------------------------------------------------------------------- -- LOCAL ----------------------------------------------------------------------- -------------------------------------------------------------------------------- +get_activation_level_class : ( + Struct.Character.Type -> + (Html.Attribute Struct.Event.Type) + ) +get_activation_level_class char = + if (Struct.Character.is_enabled char) + then + (Html.Attributes.class "battlemap-character-icon-enabled") + else + (Html.Attributes.class "battlemap-character-icon-disabled") + +get_alliance_class : ( + Struct.Model.Type -> + Struct.Character.Type -> + (Html.Attribute Struct.Event.Type) + ) +get_alliance_class model char = + if ((Struct.Character.get_player_id char) == model.player_id) + then + (Html.Attributes.class "battlemap-character-ally") + else + (Html.Attributes.class "battlemap-character-enemy") + +get_position_style : ( + Struct.Character.Type -> + (Html.Attribute Struct.Event.Type) + ) +get_position_style char = + let char_loc = (Struct.Character.get_location char) in + (Html.Attributes.style + [ + ("top", ((toString (char_loc.y * Constants.UI.tile_size)) ++ "px")), + ("left", ((toString (char_loc.x * Constants.UI.tile_size)) ++ "px")) + ] + ) + +get_focus_class : ( + Struct.Model.Type -> + Struct.Character.Type -> + (Html.Attribute Struct.Event.Type) + ) +get_focus_class model char = + if + ( + (Struct.UI.get_previous_action model.ui) + == + (Just (Struct.UI.SelectedCharacter (Struct.Character.get_ref char))) + ) + then + (Html.Attributes.class "battlemap-character-selected") + else + if + ( + (Struct.CharacterTurn.try_getting_target model.char_turn) + == + (Just (Struct.Character.get_ref char)) + ) + then + (Html.Attributes.class "battlemap-character-targeted") + else + (Html.Attributes.class "") + + get_actual_html : ( - String -> + Struct.Model.Type -> Struct.Character.Type -> (Html.Html Struct.Event.Type) ) -get_actual_html viewer_id char = - let - char_loc = (Struct.Character.get_location char) - in +get_actual_html model char = (Html.div [ - (Html.Attributes.class "battlemap-character-icon"), - (Html.Attributes.class - ( - if (Struct.Character.is_enabled char) - then - "battlemap-character-icon-enabled" - else - "battlemap-character-icon-disabled" - ) - ), - (Html.Attributes.class - ( - if ((Struct.Character.get_player_id char) == viewer_id) - then - "battlemap-character-ally" - else - "battlemap-character-enemy" - ) - ), (Html.Attributes.class "battlemap-tiled"), + (Html.Attributes.class "battlemap-character-icon"), + (get_activation_level_class char), + (get_alliance_class model char), + (get_position_style char), + (get_focus_class model char), (Html.Attributes.class ("asset-character-icon-" ++ (Struct.Character.get_icon_id char)) ), (Html.Attributes.class "clickable"), (Html.Events.onClick (Struct.Event.CharacterSelected (Struct.Character.get_ref char)) - ), - (Html.Attributes.style - [ - ( - "top", - ((toString (char_loc.y * Constants.UI.tile_size)) ++ "px") - ), - ( - "left", - ((toString (char_loc.x * Constants.UI.tile_size)) ++ "px") - ) - ] ) ] [ @@ -74,10 +111,14 @@ get_actual_html viewer_id char = -------------------------------------------------------------------------------- -- EXPORTED -------------------------------------------------------------------- -------------------------------------------------------------------------------- -get_html : String -> Struct.Character.Type -> (Html.Html Struct.Event.Type) -get_html viewer_id char = +get_html : ( + Struct.Model.Type -> + Struct.Character.Type -> + (Html.Html Struct.Event.Type) + ) +get_html model char = if (Struct.Character.is_alive char) then - (get_actual_html viewer_id char) + (get_actual_html model char) else (Util.Html.nothing) diff --git a/src/battlemap/src/View/Controlled/CharacterCard.elm b/src/battlemap/src/View/Controlled/CharacterCard.elm index b93c0c8..290db65 100644 --- a/src/battlemap/src/View/Controlled/CharacterCard.elm +++ b/src/battlemap/src/View/Controlled/CharacterCard.elm @@ -15,10 +15,11 @@ import Struct.Weapon -- LOCAL ----------------------------------------------------------------------- -------------------------------------------------------------------------------- get_portrait : ( + Struct.Model.Type -> Struct.Character.Type -> (Html.Html Struct.Event.Type) ) -get_portrait char = +get_portrait model char = (Html.div [ (Html.Attributes.class @@ -27,6 +28,13 @@ get_portrait char = ++ (Struct.Character.get_portrait_id char) ) ), + ( + if (model.player_id == (Struct.Character.get_player_id char)) + then + (Html.Attributes.class "") + else + (Html.Attributes.class "battlemap-character-enemy") + ), (Html.Attributes.class "battlemap-character-portrait"), (Html.Attributes.class "battlemap-character-card-portrait") ] @@ -212,7 +220,7 @@ get_html model char weapon = (Html.Attributes.class "battlemap-character-card-top") ] [ - (get_portrait char), + (get_portrait model char), (get_name char), (get_health_bar char) ] diff --git a/src/battlemap/www/style.css b/src/battlemap/www/style.css index 66ecd12..96c7317 100644 --- a/src/battlemap/www/style.css +++ b/src/battlemap/www/style.css @@ -219,7 +219,8 @@ { margin: 0.5em; box-sizing: border-box; - border: 2px solid rgba(0,0,0,0.5); + border-radius: 5px; + background-size: 100% 100%; width: 100px; height: 100px; } @@ -308,17 +309,17 @@ .battlemap-character-icon { box-sizing: border-box; - border: 2px solid rgba(0,0,0,0.5); + border-radius: 5px; + background-size: 100% 100%; } .battlemap-character-ally { - border-radius: 25px 25px 0 25px; } .battlemap-character-enemy { - border-radius: 25px 25px 25px 0; + transform: scale(-1, 1); } .battlemap-marker-icon @@ -376,8 +377,50 @@ .battlemap-character-icon-disabled { opacity: 0.4; - filter: grayscale(50%); - border: 2px dotted rgba(0,0,0,0.7); +} + +@keyframes red-alarm-bg { + 0% {background-color: rgba(255,0,0,0.25);} + 75% {background-color: rgba(255,0,0,1);} + 100% {background-color: rgba(255,0,0,0.25);} +} + +@keyframes blue-alarm-bg { + 0% {background-color: rgba(0,0,255,0.25);} + 75% {background-color: rgba(0,0,255,1);} + 100% {background-color: rgba(0,0,255,0.25);} +} + +@keyframes blue-alarm-bd { + 0% {border-color: rgba(0,0,255,0.25);} + 75% {border-color: rgba(0,0,255,1);} + 100% {border-color: rgba(0,0,255,0.25);} +} + +.battlemap-character-targeted +{ + background-color: rgba(255,0,0,0.7); + animation-name: red-alarm-bg; + animation-duration: 2s; + animation-iteration-count: infinite; +} + +.battlemap-character-selected +{ + background-color: rgba(0,0,255,0.7); + animation-name: blue-alarm-bg; + animation-duration: 2s; + animation-iteration-count: infinite; +} + +.battlemap-tile-selected +{ + box-sizing: border-box; + border-size: 2px solid; + border-color: rgba(0,0,255,0.7); + animation-name: blue-alarm-bg; + animation-duration: 2s; + animation-iteration-count: infinite; } /**** Path Icons **************************************************************/ -- cgit v1.2.3-70-g09d2