From 49a65625e7a3728a34b7a252af1811cbf40c0a17 Mon Sep 17 00:00:00 2001 From: Nathanael Sensfelder Date: Tue, 29 May 2018 20:55:09 +0200 Subject: Restores manual controls. --- src/asset/www/svg/arrowhead.svg | 38 +++++++++---------- src/battlemap/src/View/Controlled.elm | 2 + .../src/View/Controlled/ManualControls.elm | 16 ++++---- src/battlemap/www/style.css | 44 +++++++++++++++++++--- 4 files changed, 68 insertions(+), 32 deletions(-) diff --git a/src/asset/www/svg/arrowhead.svg b/src/asset/www/svg/arrowhead.svg index 8cee23f..d76e0eb 100644 --- a/src/asset/www/svg/arrowhead.svg +++ b/src/asset/www/svg/arrowhead.svg @@ -9,15 +9,15 @@ 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="210mm" - height="297mm" - viewBox="0 0 210 297" + width="64mm" + height="64mm" + viewBox="0 0 64 64" version="1.1" - id="svg8" + id="svg1573" inkscape:version="0.92.2 5c3e80d, 2017-08-06" sodipodi:docname="arrowhead.svg"> + id="defs1567" /> + id="metadata1570"> image/svg+xml - + + id="layer1" + transform="translate(0,-233)"> + style="fill:#ffeeaa;fill-opacity:1;stroke:#000000;stroke-width:0.2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" + d="m 21.341836,233.43957 c -10.047518,5.80092 -20.77608289,21.14309 -20.77608289,31.56235 0,10.63288 10.02442589,27.97845 20.77608289,31.56235 15.896191,-1.44511 34.964896,-19.23473 42.082239,-31.56235 -7.343797,-12.71983 -26.803708,-27.46849 -42.082239,-31.56235 z m -1.609219,10.34318 c 10.228471,2.74072 23.256137,12.61391 28.172585,21.12946 -4.764847,8.25299 -17.530553,20.16201 -28.172585,21.12946 -7.19793,-2.39931 -13.9069192,-14.01106 -13.9069192,-21.12946 0,-6.97539 7.1804132,-17.2459 13.9069192,-21.12946 z" + id="path4515" /> diff --git a/src/battlemap/src/View/Controlled.elm b/src/battlemap/src/View/Controlled.elm index 4b467b5..a0046e6 100644 --- a/src/battlemap/src/View/Controlled.elm +++ b/src/battlemap/src/View/Controlled.elm @@ -16,6 +16,7 @@ import Struct.WeaponSet import Util.Html import View.Controlled.CharacterCard +import View.Controlled.ManualControls -------------------------------------------------------------------------------- -- LOCAL ----------------------------------------------------------------------- @@ -112,6 +113,7 @@ get_html model = (Struct.Character.get_weapons char) ) ), + (View.Controlled.ManualControls.get_html), (Html.div [(Html.Attributes.class "battlemap-controlled-actions")] (get_available_actions model) diff --git a/src/battlemap/src/View/Controlled/ManualControls.elm b/src/battlemap/src/View/Controlled/ManualControls.elm index 8d37333..9f1685d 100644 --- a/src/battlemap/src/View/Controlled/ManualControls.elm +++ b/src/battlemap/src/View/Controlled/ManualControls.elm @@ -1,4 +1,4 @@ -module View.ManualControls exposing (get_html) +module View.Controlled.ManualControls exposing (get_html) -- Elm ------------------------------------------------------------------------- import Html @@ -18,13 +18,15 @@ direction_button : ( (Html.Html Struct.Event.Type) ) direction_button dir label = - (Html.button + (Html.div [ + (Html.Attributes.class ("battlemap-manual-controls-" ++ label)), + (Html.Attributes.class "clickable"), (Html.Events.onClick (Struct.Event.DirectionRequested dir) ) ] - [ (Html.text label) ] + [] ) -------------------------------------------------------------------------------- @@ -37,9 +39,9 @@ get_html = (Html.Attributes.class "battlemap-manual-controls") ] [ - (direction_button Struct.Direction.Left "Left"), - (direction_button Struct.Direction.Down "Down"), - (direction_button Struct.Direction.Up "Up"), - (direction_button Struct.Direction.Right "Right") + (direction_button Struct.Direction.Left "left"), + (direction_button Struct.Direction.Down "down"), + (direction_button Struct.Direction.Up "up"), + (direction_button Struct.Direction.Right "right") ] ) diff --git a/src/battlemap/www/style.css b/src/battlemap/www/style.css index 25e6b52..e714f83 100644 --- a/src/battlemap/www/style.css +++ b/src/battlemap/www/style.css @@ -108,13 +108,45 @@ .battlemap-manual-controls { - max-height: 30%; - width: inherit; - flex: initial; + width: 96px; + height: 96px; + display: grid; + grid-template: + '. top .' + 'left . right' + '. bottom .'; + margin: auto; +} - display: flex; - flex-direction: row; - flex-wrap: wrap; +.battlemap-manual-controls > * +{ + background-image: url(/asset/svg/arrowhead.svg); + background-size: 100%; + width: 32px; + height: 32px; +} + +.battlemap-manual-controls-up +{ + transform: rotate(-90deg); + grid-area: top; +} + +.battlemap-manual-controls-down +{ + transform: rotate(90deg); + grid-area: bottom; +} + +.battlemap-manual-controls-left +{ + transform: rotate(180deg); + grid-area: left; +} + +.battlemap-manual-controls-right +{ + grid-area: right; } /******************************************************************************/ -- cgit v1.2.3-70-g09d2