From 99ae9db56df692441b236991c0b726545ce145b2 Mon Sep 17 00:00:00 2001 From: nsensfel Date: Tue, 5 Feb 2019 10:42:06 +0100 Subject: Adds max {H,M}P icons, +- mod visual separation. Using colors (hue) shift doesn't work well enough. I'm pretty sure it won't work for colorblind people, and it kind of messes with the current color theme. Having a visual separation for the positive and negative effects does help, though... --- src/asset/www/svg/damage_type/mhealth.svg | 83 +++++++++++++++++++++++++++ src/asset/www/svg/damage_type/mmovpts.svg | 86 ++++++++++++++++++++++++++++ src/css/src/shared/omnimod-icons.scss | 20 +++++++ src/roster-editor/src/View/CharacterCard.elm | 28 ++++++--- src/roster-editor/src/View/Omnimods.elm | 27 +++++++-- 5 files changed, 231 insertions(+), 13 deletions(-) create mode 100644 src/asset/www/svg/damage_type/mhealth.svg create mode 100644 src/asset/www/svg/damage_type/mmovpts.svg diff --git a/src/asset/www/svg/damage_type/mhealth.svg b/src/asset/www/svg/damage_type/mhealth.svg new file mode 100644 index 0000000..ea6c5ce --- /dev/null +++ b/src/asset/www/svg/damage_type/mhealth.svg @@ -0,0 +1,83 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + diff --git a/src/asset/www/svg/damage_type/mmovpts.svg b/src/asset/www/svg/damage_type/mmovpts.svg new file mode 100644 index 0000000..123def7 --- /dev/null +++ b/src/asset/www/svg/damage_type/mmovpts.svg @@ -0,0 +1,86 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + diff --git a/src/css/src/shared/omnimod-icons.scss b/src/css/src/shared/omnimod-icons.scss index 546b7b6..99ad7fe 100644 --- a/src/css/src/shared/omnimod-icons.scss +++ b/src/css/src/shared/omnimod-icons.scss @@ -114,3 +114,23 @@ { background-image: url(/asset/svg/damage_type/strength.svg); } + +.omnimod-icon-mheal +{ + background-image: url(/asset/svg/damage_type/mhealth.svg); +} + +.omnimod-icon-mpts +{ + background-image: url(/asset/svg/damage_type/mmovpts.svg); +} + +.omnimod-icon-negative +{ + filter: hue-rotate(310deg); +} + +.omnimod-icon-positive +{ + filter: hue-rotate(30deg); +} diff --git a/src/roster-editor/src/View/CharacterCard.elm b/src/roster-editor/src/View/CharacterCard.elm index 569a97b..d99003b 100644 --- a/src/roster-editor/src/View/CharacterCard.elm +++ b/src/roster-editor/src/View/CharacterCard.elm @@ -246,7 +246,7 @@ get_weapon_details damage_multiplier weapon is_active_wp = ] [ (get_weapon_field_header damage_multiplier weapon), - (View.Omnimods.get_html_for_main_weapon + (View.Omnimods.get_html_with_modifier damage_multiplier (Struct.Weapon.get_omnimods weapon) ) @@ -265,10 +265,11 @@ get_weapon_details damage_multiplier weapon is_active_wp = ) get_armor_details : ( + Float -> Struct.Armor.Type -> (Html.Html Struct.Event.Type) ) -get_armor_details armor = +get_armor_details damage_modifier armor = (Html.div [ (Html.Attributes.class "character-card-armor"), @@ -286,15 +287,19 @@ get_armor_details armor = (Html.text (Struct.Armor.get_name armor)) ] ), - (View.Omnimods.get_html (Struct.Armor.get_omnimods armor)) + (View.Omnimods.get_html_with_modifier + damage_modifier + (Struct.Armor.get_omnimods armor) + ) ] ) get_glyph_board_details : ( + Float -> Struct.GlyphBoard.Type -> (Html.Html Struct.Event.Type) ) -get_glyph_board_details board = +get_glyph_board_details damage_modifier board = (Html.div [ (Html.Attributes.class "character-card-glyph-board"), @@ -312,7 +317,10 @@ get_glyph_board_details board = (Html.text (Struct.GlyphBoard.get_name board)) ] ), - (View.Omnimods.get_html (Struct.GlyphBoard.get_omnimods board)) + (View.Omnimods.get_html_with_modifier + damage_modifier + (Struct.GlyphBoard.get_omnimods board) + ) ] ) @@ -493,8 +501,14 @@ get_full_html char = (Struct.Character.get_primary_weapon char) (not is_using_secondary) ), - (get_armor_details armor), - (get_glyph_board_details (Struct.Character.get_glyph_board char)), + (get_armor_details + damage_modifier + armor + ), + (get_glyph_board_details + damage_modifier + (Struct.Character.get_glyph_board char) + ), (get_relevant_stats char_statistics), (get_attributes (Struct.Character.get_attributes char)), (get_weapon_details diff --git a/src/roster-editor/src/View/Omnimods.elm b/src/roster-editor/src/View/Omnimods.elm index 3856347..35f9606 100644 --- a/src/roster-editor/src/View/Omnimods.elm +++ b/src/roster-editor/src/View/Omnimods.elm @@ -1,6 +1,6 @@ module View.Omnimods exposing ( - get_html_for_main_weapon, + get_html_with_modifier, get_html ) @@ -31,7 +31,12 @@ get_mod_html mod = (Html.div [ (Html.Attributes.class "omnimod-icon"), - (Html.Attributes.class ("omnimod-icon-" ++ category)) + (Html.Attributes.class ("omnimod-icon-" ++ category)), + ( + if (value < 0) + then (Html.Attributes.class "omnimod-icon-negative") + else (Html.Attributes.class "omnimod-icon-positive") + ) ] [ ] @@ -53,13 +58,23 @@ get_multiplied_mod_html multiplier mod = (Html.div [ (Html.Attributes.class "omnimod-icon"), - (Html.Attributes.class ("omnimod-icon-" ++ category)) + (Html.Attributes.class ("omnimod-icon-" ++ category)), + ( + if (value < 0) + then (Html.Attributes.class "omnimod-icon-negative") + else (Html.Attributes.class "omnimod-icon-positive") + ) ] [ ] ), (Html.text - (String.fromInt (ceiling ((toFloat value) * multiplier))) + ( + (String.fromInt value) + ++ " (" + ++(String.fromInt (ceiling ((toFloat value) * multiplier))) + ++ ")" + ) ) ] ) @@ -67,12 +82,12 @@ get_multiplied_mod_html multiplier mod = -------------------------------------------------------------------------------- -- EXPORTED -------------------------------------------------------------------- -------------------------------------------------------------------------------- -get_html_for_main_weapon : ( +get_html_with_modifier : ( Float -> Struct.Omnimods.Type -> (Html.Html Struct.Event.Type) ) -get_html_for_main_weapon attack_multiplier omnimods = +get_html_with_modifier attack_multiplier omnimods = (Html.div [ (Html.Attributes.class "omnimod-listing") -- cgit v1.2.3-70-g09d2