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/asset/Makefile | 17 +- src/asset/www/characters.css | 48 ++++ src/asset/www/svg/icon/cat.svg | 15 +- src/asset/www/svg/icon/grey_cat.svg | 181 +++++++++++++++ src/asset/www/svg/icon/orange_cat.svg | 13 +- src/asset/www/svg/portrait/cat.svg | 10 +- src/asset/www/svg/portrait/grey_cat.svg | 251 +++++++++++++++++++++ src/asset/www/svg/portrait/orange_cat.svg | 93 +++++--- 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 ++++- 12 files changed, 707 insertions(+), 109 deletions(-) create mode 100644 src/asset/www/characters.css create mode 100644 src/asset/www/svg/icon/grey_cat.svg create mode 100644 src/asset/www/svg/portrait/grey_cat.svg diff --git a/src/asset/Makefile b/src/asset/Makefile index 0c22bfa..b02b4e9 100644 --- a/src/asset/Makefile +++ b/src/asset/Makefile @@ -43,28 +43,15 @@ $(error\ ) endif -ifeq ($(wildcard $(CHAR_STYLE_TEMPLATE)),) -$(error\ - "Could not find template for character styles (CHAR_STYLE_TEMPLATE="\ - "$(CHAR_STYLE_TEMPLATE))."\ -) -endif - ################################################################################ ## TARGET RULES ################################################################ ################################################################################ -build: $(CHAR_STYLE_CSS) +build: clean: - rm -f $(CHAR_STYLE_CSS) -reset: clean +reset: ################################################################################ ## INTERNAL RULES ############################################################## ################################################################################ -$(CHAR_STYLE_CSS): $(SENSITIVITY_LIST) $(CHAR_STYLE_TEMPLATE) - $(GENERATE_N_COLORS_SCRIPT) $(TOTAL_NUMBER_OF_COLORS) \ - 0 | \ - $(GENERATE_N_ENTITIES) $(NUMBER_OF_CHAR_TYPES) $(CHAR_STYLE_TEMPLATE) > \ - $(CHAR_STYLE_CSS) diff --git a/src/asset/www/characters.css b/src/asset/www/characters.css new file mode 100644 index 0000000..a118036 --- /dev/null +++ b/src/asset/www/characters.css @@ -0,0 +1,48 @@ +.asset-character-icon-0{background-image: url(/asset/svg/icon/cat.svg);} +.asset-character-portrait-0{background-image: url(/asset/svg/portrait/cat.svg);} + +.asset-character-icon-1{background-image: url(/asset/svg/icon/orange_cat.svg);} +.asset-character-portrait-1{background-image: url(/asset/svg/portrait/orange_cat.svg);} + +.asset-character-icon-2{background-image: url(/asset/svg/icon/grey_cat.svg);} +.asset-character-portrait-2{background-image: url(/asset/svg/portrait/grey_cat.svg);} + +.asset-character-icon-3{background-image: url(/asset/svg/icon/cat.svg);} +.asset-character-portrait-3{background-image: url(/asset/svg/portrait/cat.svg);} + +.asset-character-icon-4{background-image: url(/asset/svg/icon/orange_cat.svg);} +.asset-character-portrait-4{background-image: url(/asset/svg/portrait/orange_cat.svg);} + +.asset-character-icon-5{background-image: url(/asset/svg/icon/grey_cat.svg);} +.asset-character-portrait-5{background-image: url(/asset/svg/portrait/grey_cat.svg);} + +.asset-character-icon-6{background-image: url(/asset/svg/icon/cat.svg);} +.asset-character-portrait-6{background-image: url(/asset/svg/portrait/cat.svg);} + +.asset-character-icon-7{background-image: url(/asset/svg/icon/orange_cat.svg);} +.asset-character-portrait-7{background-image: url(/asset/svg/portrait/orange_cat.svg);} + +.asset-character-icon-8{background-image: url(/asset/svg/icon/grey_cat.svg);} +.asset-character-portrait-8{background-image: url(/asset/svg/portrait/grey_cat.svg);} + +.asset-character-icon-9{background-image: url(/asset/svg/icon/cat.svg);} +.asset-character-portrait-9{background-image: url(/asset/svg/portrait/cat.svg);} + +.asset-character-icon-10{background-image: url(/asset/svg/icon/orange_cat.svg);} +.asset-character-portrait-10{background-image: url(/asset/svg/portrait/orange_cat.svg);} + +.asset-character-icon-11{background-image: url(/asset/svg/icon/grey_cat.svg);} +.asset-character-portrait-11{background-image: url(/asset/svg/portrait/grey_cat.svg);} + +.asset-character-icon-12{background-image: url(/asset/svg/icon/cat.svg);} +.asset-character-portrait-12{background-image: url(/asset/svg/portrait/cat.svg);} + +.asset-character-icon-13{background-image: url(/asset/svg/icon/orange_cat.svg);} +.asset-character-portrait-13{background-image: url(/asset/svg/portrait/orange_cat.svg);} + +.asset-character-icon-14{background-image: url(/asset/svg/icon/grey_cat.svg);} +.asset-character-portrait-14{background-image: url(/asset/svg/portrait/grey_cat.svg);} + +.asset-character-icon-15{background-image: url(/asset/svg/icon/cat.svg);} +.asset-character-portrait-15{background-image: url(/asset/svg/portrait/cat.svg);} + diff --git a/src/asset/www/svg/icon/cat.svg b/src/asset/www/svg/icon/cat.svg index b8a9b2b..2c1dc36 100644 --- a/src/asset/www/svg/icon/cat.svg +++ b/src/asset/www/svg/icon/cat.svg @@ -15,7 +15,7 @@ version="1.1" id="svg8" inkscape:version="0.92.2 5c3e80d, 2017-08-06" - sodipodi:docname="black_cat_icon_large.svg"> + sodipodi:docname="cat.svg"> + showguides="false" /> @@ -48,7 +48,7 @@ image/svg+xml - + @@ -67,11 +67,10 @@ + inkscape:label="armor"> diff --git a/src/asset/www/svg/icon/grey_cat.svg b/src/asset/www/svg/icon/grey_cat.svg new file mode 100644 index 0000000..f2b69e5 --- /dev/null +++ b/src/asset/www/svg/icon/grey_cat.svg @@ -0,0 +1,181 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/asset/www/svg/icon/orange_cat.svg b/src/asset/www/svg/icon/orange_cat.svg index 0df3f2d..d9415be 100644 --- a/src/asset/www/svg/icon/orange_cat.svg +++ b/src/asset/www/svg/icon/orange_cat.svg @@ -25,11 +25,11 @@ borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" - inkscape:zoom="2.2627417" - inkscape:cx="106.7749" - inkscape:cy="142.96429" + inkscape:zoom="4.5254834" + inkscape:cx="119.69711" + inkscape:cy="66.448043" inkscape:document-units="mm" - inkscape:current-layer="layer3" + inkscape:current-layer="layer6" showgrid="false" inkscape:window-width="1678" inkscape:window-height="1029" @@ -67,11 +67,10 @@ + inkscape:label="armor"> diff --git a/src/asset/www/svg/portrait/cat.svg b/src/asset/www/svg/portrait/cat.svg index 7250a1d..52864be 100644 --- a/src/asset/www/svg/portrait/cat.svg +++ b/src/asset/www/svg/portrait/cat.svg @@ -25,9 +25,9 @@ borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" - inkscape:zoom="2.2627417" - inkscape:cx="180.44832" - inkscape:cy="31.880017" + inkscape:zoom="4.5254834" + inkscape:cx="127.65957" + inkscape:cy="124.0717" inkscape:document-units="mm" inkscape:current-layer="layer5" showgrid="false" @@ -46,7 +46,7 @@ image/svg+xml - + @@ -57,7 +57,7 @@ style="display:inline"> diff --git a/src/asset/www/svg/portrait/grey_cat.svg b/src/asset/www/svg/portrait/grey_cat.svg new file mode 100644 index 0000000..eb2e12c --- /dev/null +++ b/src/asset/www/svg/portrait/grey_cat.svg @@ -0,0 +1,251 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/asset/www/svg/portrait/orange_cat.svg b/src/asset/www/svg/portrait/orange_cat.svg index 6fd25e7..e3c7249 100644 --- a/src/asset/www/svg/portrait/orange_cat.svg +++ b/src/asset/www/svg/portrait/orange_cat.svg @@ -25,11 +25,11 @@ borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" - inkscape:zoom="2.8284271" - inkscape:cx="130.23299" - inkscape:cy="100.76724" + inkscape:zoom="4" + inkscape:cx="91.798208" + inkscape:cy="71.821001" inkscape:document-units="mm" - inkscape:current-layer="layer3" + inkscape:current-layer="layer5" showgrid="false" inkscape:window-width="1678" inkscape:window-height="1029" @@ -38,7 +38,8 @@ inkscape:window-maximized="0" inkscape:measure-start="0,0" inkscape:measure-end="0,0" - inkscape:snap-global="false" /> + inkscape:snap-global="false" + showguides="false" /> @@ -58,7 +59,7 @@ style="display:inline"> @@ -68,7 +69,8 @@ inkscape:groupmode="layer" id="layer1" transform="translate(0,-233)" - style="display:inline;opacity:1"> + style="display:inline;opacity:1" + sodipodi:insensitive="true"> + + + + + sodipodi:nodetypes="ccc" /> + sodipodi:nodetypes="ccc" /> + sodipodi:nodetypes="ccc" /> + sodipodi:nodetypes="ccc" /> + sodipodi:nodetypes="ccc" /> + + + + 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