From ed0a0286a6bc1772c0bace457e900bf7123cb39e Mon Sep 17 00:00:00 2001 From: Nathanael Sensfelder Date: Mon, 25 May 2020 09:28:58 +0200 Subject: Displays some of the effects using the new approach. --- src/asset/www/characters.css | 9 ----- src/battle/src/Constants/DisplayEffects.elm | 31 +++++++++++---- src/battle/src/Struct/Character.elm | 20 ++++++---- src/battle/src/Update/CharacterTurn.elm | 2 +- src/battle/src/Update/CharacterTurn/AbortTurn.elm | 6 +-- src/battle/src/Update/CharacterTurn/EndTurn.elm | 2 +- .../src/Update/CharacterTurn/ToggleTarget.elm | 4 +- src/battle/src/View/Character.elm | 4 +- src/battle/src/View/Map.elm | 1 + src/battle/src/View/Map/Character.elm | 6 ++- src/css/src/battle/map/character.scss | 17 +++++++-- .../src/shared/battle-characters/info-card.scss | 44 ++++++++++++++++++---- 12 files changed, 102 insertions(+), 44 deletions(-) diff --git a/src/asset/www/characters.css b/src/asset/www/characters.css index ad75e69..a21f43b 100644 --- a/src/asset/www/characters.css +++ b/src/asset/www/characters.css @@ -57,14 +57,5 @@ .asset-character-icon-15{background-image: url(/asset/svg/icon/cat.svg);} .asset-character-portrait-15{background-image: url(/asset/svg/portrait/cat.svg);} -.asset-character-team-body-0{background-image: url(/asset/svg/icon/body_team_0.svg);} -.asset-character-team-body-1{background-image: url(/asset/svg/icon/body_team_1.svg);} -.asset-character-team-body-2{background-image: url(/asset/svg/icon/body_team_2.svg);} -.asset-character-team-body-3{background-image: url(/asset/svg/icon/body_team_3.svg);} -.asset-character-team-body-4{background-image: url(/asset/svg/icon/body_team_4.svg);} -.asset-character-team-body-5{background-image: url(/asset/svg/icon/body_team_5.svg);} -.asset-character-team-body-6{background-image: url(/asset/svg/icon/body_team_6.svg);} -.asset-character-team-body-7{background-image: url(/asset/svg/icon/body_team_7.svg);} - .asset-character-icon-commander-banner{background-image: url(/asset/svg/icon/commander_banner.svg);} .asset-character-icon-target-banner{background-image: url(/asset/svg/icon/target_banner.svg);} diff --git a/src/battle/src/Constants/DisplayEffects.elm b/src/battle/src/Constants/DisplayEffects.elm index da9db9a..2b02163 100644 --- a/src/battle/src/Constants/DisplayEffects.elm +++ b/src/battle/src/Constants/DisplayEffects.elm @@ -1,13 +1,28 @@ module Constants.DisplayEffects exposing (..) -active_character : String -active_character = "active" +null : String +null = "" -enabled_character : String -enabled_character = "enabled" +active : String +active = "active" -target_character : String -target_character = "target" +dead : String +dead = "dead" -target_tile : String -target_tile = "target" +enabled : String +enabled = "enabled" + +target : String +target = "target" + +ally : String +ally = "ally" + +enemy : String +enemy = "ally" + +in_team : String +in_team = "team-" + +css_class_prefix : String +css_class_prefix = "display-effect-" diff --git a/src/battle/src/Struct/Character.elm b/src/battle/src/Struct/Character.elm index df78ff3..d1ccedf 100644 --- a/src/battle/src/Struct/Character.elm +++ b/src/battle/src/Struct/Character.elm @@ -53,6 +53,9 @@ import BattleCharacters.Struct.Weapon -- Battle Map ------------------------------------------------------------------ import BattleMap.Struct.Location +-- Local Module ---------------------------------------------------------------- +import Constants.DisplayEffects + -------------------------------------------------------------------------------- -- TYPES ----------------------------------------------------------------------- -------------------------------------------------------------------------------- @@ -275,19 +278,22 @@ reset_extra_display_effects viewer_ix char = [ ( if (viewer_ix == char.player_ix) - then "ally" - else "enemy" + then Constants.DisplayEffects.ally + else Constants.DisplayEffects.enemy + ), + ( + Constants.DisplayEffects.in_team + ++ (String.fromInt char.player_ix) ), - ("team-" ++ (String.fromInt char.player_ix)), ( if (char.enabled) - then "enabled" - else "disabled" + then Constants.DisplayEffects.enabled + else Constants.DisplayEffects.null ), ( if (is_alive char) - then "alive" - else "dead" + then Constants.DisplayEffects.null + else Constants.DisplayEffects.dead ) ] ) diff --git a/src/battle/src/Update/CharacterTurn.elm b/src/battle/src/Update/CharacterTurn.elm index 694bb5d..9f1483a 100644 --- a/src/battle/src/Update/CharacterTurn.elm +++ b/src/battle/src/Update/CharacterTurn.elm @@ -52,7 +52,7 @@ apply_to target_char model = (Struct.Battle.update_character (Struct.Character.get_index target_char) (Struct.Character.add_extra_display_effect - Constants.DisplayEffects.active_character + Constants.DisplayEffects.active ) model.battle ), diff --git a/src/battle/src/Update/CharacterTurn/AbortTurn.elm b/src/battle/src/Update/CharacterTurn/AbortTurn.elm index fbcbfc2..1f69836 100644 --- a/src/battle/src/Update/CharacterTurn/AbortTurn.elm +++ b/src/battle/src/Update/CharacterTurn/AbortTurn.elm @@ -32,7 +32,7 @@ remove_active_character_effects char_turn battle = (Struct.Battle.update_character (Struct.Character.get_index char) (Struct.Character.remove_extra_display_effect - Constants.DisplayEffects.active_character + Constants.DisplayEffects.active ) battle ) @@ -49,7 +49,7 @@ remove_target_effects char_turn battle = (Struct.Battle.update_character target_index (Struct.Character.remove_extra_display_effect - Constants.DisplayEffects.target_character + Constants.DisplayEffects.target ) current_battle ) @@ -72,7 +72,7 @@ remove_location_effects char_turn battle = (BattleMap.Struct.Map.update_tile_at (BattleMap.Struct.Location.from_ref location_ref) (BattleMap.Struct.TileInstance.remove_extra_display_effect - Constants.DisplayEffects.target_tile + Constants.DisplayEffects.target ) current_map ) diff --git a/src/battle/src/Update/CharacterTurn/EndTurn.elm b/src/battle/src/Update/CharacterTurn/EndTurn.elm index c2348ec..99cb8bf 100644 --- a/src/battle/src/Update/CharacterTurn/EndTurn.elm +++ b/src/battle/src/Update/CharacterTurn/EndTurn.elm @@ -41,7 +41,7 @@ apply_to model = (Struct.Character.get_index char) ( (Struct.Character.remove_extra_display_effect - Constants.DisplayEffects.enabled_character + Constants.DisplayEffects.enabled ) >> (Struct.Character.set_enabled False) diff --git a/src/battle/src/Update/CharacterTurn/ToggleTarget.elm b/src/battle/src/Update/CharacterTurn/ToggleTarget.elm index 1fb69da..8dfeb75 100644 --- a/src/battle/src/Update/CharacterTurn/ToggleTarget.elm +++ b/src/battle/src/Update/CharacterTurn/ToggleTarget.elm @@ -65,7 +65,7 @@ toggle_attack_character model target_char_id = (Struct.Battle.update_character target_char_id (Struct.Character.toggle_extra_display_effect - Constants.DisplayEffects.target_character + Constants.DisplayEffects.target ) model.battle ), @@ -93,7 +93,7 @@ undo_attack_character model target_char_id = (Struct.Battle.update_character target_char_id (Struct.Character.remove_extra_display_effect - Constants.DisplayEffects.target_character + Constants.DisplayEffects.target ) model.battle ), diff --git a/src/battle/src/View/Character.elm b/src/battle/src/View/Character.elm index dac5989..1b2d2e4 100644 --- a/src/battle/src/View/Character.elm +++ b/src/battle/src/View/Character.elm @@ -11,6 +11,8 @@ import BattleCharacters.Struct.Character import BattleCharacters.View.Portrait -- Local Module ---------------------------------------------------------------- +import Constants.DisplayEffects + import Struct.Character import Struct.Event @@ -33,7 +35,7 @@ get_portrait_html char = ( \effect_name -> (Html.Attributes.class - ("character-portrait-effect-" ++ effect_name) + (Constants.DisplayEffects.css_class_prefix ++ effect_name) ) ) (Struct.Character.get_extra_display_effects_list char) diff --git a/src/battle/src/View/Map.elm b/src/battle/src/View/Map.elm index 5b0182e..f6e6c28 100644 --- a/src/battle/src/View/Map.elm +++ b/src/battle/src/View/Map.elm @@ -18,6 +18,7 @@ import BattleMap.Struct.Map import BattleMap.View.Tile -- Local Module ---------------------------------------------------------------- +import Constants.DisplayEffects import Constants.UI import Struct.Battle diff --git a/src/battle/src/View/Map/Character.elm b/src/battle/src/View/Map/Character.elm index 49150eb..67a165b 100644 --- a/src/battle/src/View/Map/Character.elm +++ b/src/battle/src/View/Map/Character.elm @@ -14,6 +14,7 @@ import BattleCharacters.Struct.Character import BattleCharacters.Struct.Equipment -- Local Module ---------------------------------------------------------------- +import Constants.DisplayEffects import Constants.UI import Struct.Character @@ -101,7 +102,10 @@ get_actual_html char = ( \effect_name -> (Html.Attributes.class - ("character-icon-effect-" ++ effect_name) + ( + Constants.DisplayEffects.css_class_prefix + ++ effect_name + ) ) ) (Struct.Character.get_extra_display_effects_list char) diff --git a/src/css/src/battle/map/character.scss b/src/css/src/battle/map/character.scss index 0f07dad..2ba519b 100644 --- a/src/css/src/battle/map/character.scss +++ b/src/css/src/battle/map/character.scss @@ -15,7 +15,7 @@ height: inherit; } -.character-icon-effect-enabled, +.character-icon.display-effect-enabled, .character-icon-enabled { animation-name: pulsating; @@ -28,21 +28,24 @@ .character-icon-head { z-index: 1; } .character-icon-body { z-index: 0; } +.character-icon.display-effect-ally, .character-ally { } +.character-icon.display-effect-enemy, .character-enemy { transform: scale(-1, 1); } +.character-icon.display-effect-ally.character-icon-effect-disabled, .character-ally.character-icon-disabled { filter: contrast(35%); } -.character-icon-effect-target, +.character-icon.display-effect-target, .character-targeted { background-color: rgba(255,0,0,0.7); @@ -51,7 +54,7 @@ animation-iteration-count: infinite; } -.character-icon-effect-active, +.character-icon.display-effect-active, .character-selected { animation-name: strongly-pulsating; @@ -59,3 +62,11 @@ animation-iteration-count: infinite; } +.display-effect-team-0 .character-icon-body{background-image: url(/asset/svg/icon/body_team_0.svg);} +.display-effect-team-1 .character-icon-body{background-image: url(/asset/svg/icon/body_team_1.svg);} +.display-effect-team-2 .character-icon-body{background-image: url(/asset/svg/icon/body_team_2.svg);} +.display-effect-team-3 .character-icon-body{background-image: url(/asset/svg/icon/body_team_3.svg);} +.display-effect-team-4 .character-icon-body{background-image: url(/asset/svg/icon/body_team_4.svg);} +.display-effect-team-5 .character-icon-body{background-image: url(/asset/svg/icon/body_team_5.svg);} +.display-effect-team-6 .character-icon-body{background-image: url(/asset/svg/icon/body_team_6.svg);} +.display-effect-team-7 .character-icon-body{background-image: url(/asset/svg/icon/body_team_7.svg);} diff --git a/src/css/src/shared/battle-characters/info-card.scss b/src/css/src/shared/battle-characters/info-card.scss index 5529a74..52f7f3a 100644 --- a/src/css/src/shared/battle-characters/info-card.scss +++ b/src/css/src/shared/battle-characters/info-card.scss @@ -38,14 +38,42 @@ background-size: 200% 100%; } -.character-portrait-team-0 { background-color: rgba(57, 106, 177, 0.3); } -.character-portrait-team-1 { background-color: rgba(204, 37, 41, 0.3); } -.character-portrait-team-2 { background-color: rgba(62, 150, 81, 0.3); } -.character-portrait-team-3 { background-color: rgba(218, 124, 48, 0.3); } -.character-portrait-team-4 { background-color: rgba(83, 81, 84, 0.3); } -.character-portrait-team-5 { background-color: rgba(107, 76, 154, 0.3); } -.character-portrait-team-6 { background-color: rgba(127, 167, 169, 0.3); } -.character-portrait-team-7 { background-color: rgba(231, 167, 169, 0.3); } +/* + * no space between the class names because the effect is directly applied to + * the div with the "character-portrait" class. + */ +.character-portrait.display-effect-team-0 +{ + background-color: rgba(57, 106, 177, 0.3); +} +.character-portrait.display-effect-team-1 +{ + background-color: rgba(204, 37, 41, 0.3); +} +.character-portrait.display-effect-team-2 +{ + background-color: rgba(62, 150, 81, 0.3); +} +.character-portrait.display-effect-team-3 +{ + background-color: rgba(218, 124, 48, 0.3); +} +.character-portrait.display-effect-team-4 +{ + background-color: rgba(83, 81, 84, 0.3); +} +.character-portrait.display-effect-team-5 +{ + background-color: rgba(107, 76, 154, 0.3); +} +.character-portrait.display-effect-team-6 +{ + background-color: rgba(127, 167, 169, 0.3); +} +.character-portrait.display-effect-team-7 +{ + background-color: rgba(231, 167, 169, 0.3); +} .character-card-statuses { -- cgit v1.2.3-70-g09d2