summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/asset/www/svg/arrowhead.svg38
-rw-r--r--src/battlemap/src/View/Controlled.elm2
-rw-r--r--src/battlemap/src/View/Controlled/ManualControls.elm16
-rw-r--r--src/battlemap/www/style.css44
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">
<defs
- id="defs2" />
+ id="defs1567" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
@@ -25,38 +25,38 @@
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
- inkscape:zoom="6.7521728"
- inkscape:cx="407.73028"
- inkscape:cy="525.60177"
+ inkscape:zoom="3.959798"
+ inkscape:cx="69.086105"
+ inkscape:cy="57.888568"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="false"
- inkscape:window-width="1678"
- inkscape:window-height="1029"
- inkscape:window-x="1051"
- inkscape:window-y="500"
+ inkscape:window-width="958"
+ inkscape:window-height="1078"
+ inkscape:window-x="1"
+ inkscape:window-y="1"
inkscape:window-maximized="0" />
<metadata
- id="metadata5">
+ id="metadata1570">
<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></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
- id="layer1">
+ id="layer1"
+ transform="translate(0,-233)">
<path
- style="fill:#000000;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
- d="m 100,147 v 5 c 2.27671,0.61004 4.38996,2.72329 5,5 -0.61004,2.27671 -2.72329,4.38996 -5,5 v 5 c 4.24918,-4.24918 11.99537,-4.79584 15,-10 -3.00463,-5.20416 -10.75082,-5.75082 -15,-10 z"
- id="path3705"
inkscape:connector-curvature="0"
- sodipodi:nodetypes="ccccccc" />
+ 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" />
</g>
</svg>
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;
}
/******************************************************************************/