3 files changed, 49 insertions, 13 deletions
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;
 }
 
 /******************************************************************************/