| summaryrefslogtreecommitdiff |
diff options
| -rwxr-xr-x | src/asset/www/svg/help-icon.svg | 74 | ||||
| -rw-r--r-- | src/battlemap/src/View/MessageBoard/Help.elm | 97 | ||||
| -rw-r--r-- | src/battlemap/www/style.css | 33 |
3 files changed, 184 insertions, 20 deletions
diff --git a/src/asset/www/svg/help-icon.svg b/src/asset/www/svg/help-icon.svg new file mode 100755 index 0000000..309e5e5 --- /dev/null +++ b/src/asset/www/svg/help-icon.svg @@ -0,0 +1,74 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- Created with Inkscape (http://www.inkscape.org/) --> + +<svg + xmlns:dc="http://purl.org/dc/elements/1.1/" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns="http://www.w3.org/2000/svg" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + width="32mm" + height="32mm" + viewBox="0 0 32 32" + version="1.1" + id="svg8" + inkscape:version="0.92.1 r15371" + sodipodi:docname="help-icon.svg"> + <defs + id="defs2" /> + <sodipodi:namedview + id="base" + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1.0" + inkscape:pageopacity="0.0" + inkscape:pageshadow="2" + inkscape:zoom="0.1" + inkscape:cx="-9.1331419" + inkscape:cy="65.083578" + inkscape:document-units="mm" + inkscape:current-layer="layer1" + showgrid="false" + inkscape:window-width="2560" + inkscape:window-height="1377" + inkscape:window-x="-8" + inkscape:window-y="-8" + inkscape:window-maximized="1" /> + <metadata + id="metadata5"> + <rdf:RDF> + <cc:Work + rdf:about=""> + <dc:format>image/svg+xml</dc:format> + <dc:type + rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> + <dc:title></dc:title> + </cc:Work> + </rdf:RDF> + </metadata> + <g + inkscape:label="Layer 1" + inkscape:groupmode="layer" + id="layer1" + transform="translate(0,-265)"> + <circle + style="fill:#483e37;fill-opacity:1;stroke:#6c5d53;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" + id="path4485" + cx="16" + cy="281" + r="15" /> + <g + aria-label="?" + style="font-style:normal;font-weight:normal;font-size:10.58333302px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#f4eed7;fill-opacity:1;stroke:#e9ddaf;stroke-width:0.26458332" + id="text4493" + transform="matrix(1.2904739,0,0,1.2904739,-4.6475837,-81.623166)"> + <path + d="m 20.514452,276.91964 q 0,1.57509 -0.992187,2.77812 -0.570508,0.68213 -1.872754,1.5627 -1.016993,0.68212 -1.0542,0.96738 -0.111621,0.83096 -0.08682,1.12861 0.03721,0.5209 0.37207,1.50069 h -0.644922 q -0.471289,0 -1.103808,0.0248 -0.310059,0.0124 -0.979785,0.0124 0.421679,-0.47129 0.421679,-1.0666 0,-0.19844 -0.07441,-0.59531 -0.07441,-0.39688 -0.07441,-0.59531 0,-0.59532 0.58291,-0.96739 1.599903,-1.00459 2.306836,-1.93476 0.917774,-1.20303 0.917774,-2.81533 0,-1.30225 -0.570508,-1.79834 -0.533301,-0.44649 -1.860352,-0.44649 -1.091406,0 -1.761132,0.84336 -0.620117,0.76895 -0.620117,1.89756 0,0.68213 0.434082,1.0418 0.347265,0.28525 1.37666,0.62011 -0.409278,0.0496 -0.768946,0.0496 -1.265039,0 -2.071191,-0.59531 -0.905371,-0.65732 -0.905371,-1.88516 0,-1.36425 1.426269,-2.22002 1.240235,-0.74414 2.691309,-0.74414 4.911328,0 4.911328,3.23702 z m -3.509863,10.0831 q 0,0.57051 -0.409278,0.94258 -0.396875,0.37207 -0.967382,0.37207 -0.595313,0 -0.992188,-0.35967 -0.384472,-0.35967 -0.384472,-0.95498 0,-1.32705 1.37666,-1.32705 0.58291,0 0.979785,0.37207 0.396875,0.37207 0.396875,0.95498 z" + style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:25.39999962px;font-family:'Dumbledor 1';-inkscape-font-specification:'Dumbledor 1, ';fill:#f4eed7;stroke:#e9ddaf;stroke-width:0.26458332" + id="path4495" + inkscape:connector-curvature="0" /> + </g> + </g> +</svg> diff --git a/src/battlemap/src/View/MessageBoard/Help.elm b/src/battlemap/src/View/MessageBoard/Help.elm index 26d820d..773210e 100644 --- a/src/battlemap/src/View/MessageBoard/Help.elm +++ b/src/battlemap/src/View/MessageBoard/Help.elm @@ -22,18 +22,27 @@ get_rank_help_message rank = case rank of Struct.Character.Target -> [ - (Html.h1 [] [(Html.text "Protected Character")]), - (Html.div + (Html.h1 + [] [ - (Html.Attributes.class - "battlemap-character-card-target-status" + (get_guide_icon), + (Html.text "Protected Character - "), + (Html.div + [ + (Html.Attributes.class + "battlemap-message-board-help-figure" + ), + (Html.Attributes.class + "battlemap-character-card-target-status" + ) + ] + [] ) ] - [] ), (Html.text ( - "Players that lost all of their Protected characters are" + "Players that lose all of their protected characters are" ++ " eliminated." ) ) @@ -41,18 +50,27 @@ get_rank_help_message rank = Struct.Character.Commander -> [ - (Html.h1 [] [(Html.text "Critical Character")]), - (Html.div + (Html.h1 + [] [ - (Html.Attributes.class - "battlemap-character-card-commander-status" + (get_guide_icon), + (Html.text "Critical Character - "), + (Html.div + [ + (Html.Attributes.class + "battlemap-message-board-help-figure" + ), + (Html.Attributes.class + "battlemap-character-card-commander-status" + ) + ] + [] ) ] - [] ), (Html.text ( - "Players that lost any of their Critical characters are" + "Players that lose any of their protected characters are" ++ " eliminated." ) ) @@ -60,15 +78,29 @@ get_rank_help_message rank = Struct.Character.Optional -> [ - (Html.h1 [] [(Html.text "Reinforcement Character")]), + (Html.h1 + [] + [ + (get_guide_icon), + (Html.text "Reinforcement Character") + ] + ), (Html.text ( - "Unless it is their last character, losing Reinforcement" - ++ " characters does not cause a player to be eliminated." + "Unless it is their very last character, losing a" + ++ " Reinforcement characters never causes a player to be" + ++ " eliminated." ) ) ] +get_guide_icon : (Html.Html Struct.Event.Type) +get_guide_icon = + (Html.div + [(Html.Attributes.class "battlemap-help-guide-icon")] + [] + ) + get_default_help_message : ( Struct.Model.Type -> (List (Html.Html Struct.Event.Type)) @@ -77,7 +109,13 @@ get_default_help_message model = case (Struct.CharacterTurn.get_state model.char_turn) of Struct.CharacterTurn.SelectedCharacter -> [ - (Html.h1 [] [(Html.text "Character Selected")]), + (Html.h1 + [] + [ + (get_guide_icon), + (Html.text "Character Selected") + ] + ), (Html.text ( "Click on a target tile to select a path or use the manual" @@ -89,7 +127,13 @@ get_default_help_message model = Struct.CharacterTurn.MovedCharacter -> [ - (Html.h1 [] [(Html.text "Character Moved")]), + (Html.h1 + [] + [ + (get_guide_icon), + (Html.text "Character Moved") + ] + ), (Html.text ( "You can now choose a target in range. Dashed tiles indicate" @@ -101,7 +145,13 @@ get_default_help_message model = Struct.CharacterTurn.ChoseTarget -> [ - (Html.h1 [] [(Html.text "Target Selected")]), + (Html.h1 + [] + [ + (get_guide_icon), + (Html.text "Target Selected") + ] + ), (Html.text ( "If you are satisfied with your choices, end the turn to" @@ -112,7 +162,13 @@ get_default_help_message model = _ -> [ - (Html.h1 [] [(Html.text "Selecting Character")]), + (Html.h1 + [] + [ + (get_guide_icon), + (Html.text "Selecting a Character") + ] + ), (Html.text ( "Click once on a character to focus them. This will show you" @@ -130,7 +186,8 @@ get_html : Struct.Model.Type -> (Html.Html Struct.Event.Type) get_html model = (Html.div [ - (Html.Attributes.class "battlemap-message-board") + (Html.Attributes.class "battlemap-message-board"), + (Html.Attributes.class "battlemap-message-board-help") ] ( case model.help_request of diff --git a/src/battlemap/www/style.css b/src/battlemap/www/style.css index 74ef048..8eb2d2f 100644 --- a/src/battlemap/www/style.css +++ b/src/battlemap/www/style.css @@ -148,6 +148,39 @@ font-size: 1.2em; } +.battlemap-message-board-help +{ + display: block; +} + +.battlemap-message-board-help h1 +{ + margin: 0; + margin-bottom: 0.3em; + font-size: 1.5em; + text-align: center; +} + +.battlemap-message-board-help-figure +{ + width: 1.5em; + height: 1.5em; + background-size: 100%; + display: inline-block; + vertical-align: middle; +} + +.battlemap-help-guide-icon +{ + margin-right: 0.5em; + width: 1.5em; + height: 1.5em; + background-image: url("/asset/svg/help-icon.svg"); + background-size: 100%; + display: inline-block; + vertical-align: middle; +} + /******************************************************************************/ /** CONTROLLED PANEL **********************************************************/ /******************************************************************************/ |
