Improved usability and description of the grid alignment tool.

src/main/ogres/app/component/panel.css

@@ -221,13 +221,6 @@
   margin-top: auto;
   padding: 10px;
   position: relative;
-
-  svg {
-    fill: var(--color-blues-100);
-    inset: 0 auto auto 0;
-    position: absolute;
-    transform: translate(-25%, -25%);
-  }
 }
 
 .panel-status {

src/main/ogres/app/component/panel_scene.cljs

@@ -246,4 +246,23 @@
           "When set to " ($ :strong "Obscured") " or " ($ :strong "Hidden")
           ", the scene will be shrouded in darkness and tokens will emit a
            radius of light around themselves. The light radius of each token
-           can be customized.")))))
+           can be customized."))
+      ($ :fieldset.fieldset.scene-gallery-grid-align
+        ($ :legend "Grid alignment")
+        ($ :div.form-notice
+          ($ :button
+            {:on-click #(dispatch :camera/change-mode :grid)}
+            ($ icon {:name "compass" :size 22}))
+          "Use the grid alignment tool to manually pick a point that will serve
+           as the origin of the grid. Use this tool when the grid in your scene
+           image is offset from the edges or is unevenly distributed.")
+        ($ :details
+          ($ :summary "How To Use")
+          ($ :ol
+            ($ :li "Select the grid alignment tool.")
+            ($ :li "Select a corner of one of the tiles in the scene.")
+            ($ :li "Adjust its position carefully if necessary.")
+            ($ :li "Adjust the tile size until the grid lines match up with the lines on the scene."))
+          "Sometimes the widths of the tiles in the image are not whole
+           numbers; it may be necessary to use this tool again in another
+           part of the image as the adventure progresses there.")))))

src/main/ogres/app/component/panel_scene.css

@@ -187,3 +187,31 @@
   background-color: var(--color-blues-700);
   padding: 16px;
 }
+
+.scene-gallery-grid-align {
+  button {
+    align-items: center;
+    background-color: var(--color-blues-700);
+    border-radius: 3px;
+    border: none;
+    color: var(--color-black-100);
+    cursor: pointer;
+    display: flex;
+    float: left;
+    justify-content: center;
+    margin: 0 4px 2px 0;
+    padding: 4px;
+    width: 28px;
+    height: 28px;
+    box-sizing: border-box;
+
+    &:hover {
+      background-color: var(--color-blues-500);
+    }
+  }
+
+  ol li {
+    list-style-type: decimal;
+    margin-left: 1rem;
+  }
+}

src/main/ogres/app/component/scene.cljs

@@ -541,7 +541,7 @@
     ($ :svg.scene
       {:key id
        :data-user   (name user)
-       :data-grid   (or (= mode :grid) (:scene/show-grid scene))
+       :data-grid   (and (not= mode :grid) (:scene/show-grid scene))
        :data-theme  (if (:scene/dark-mode scene) "dark" "light")
        :data-light  (name (:scene/lighting scene))
        :data-masked (:scene/masked scene)}

src/main/ogres/app/component/scene_draw.cljs

@@ -270,12 +270,7 @@
                 {:on-submit
                  (fn [event]
                    (.preventDefault event)
-                   (let [xf (comp (+' (- ox) (- oy))
-                                  (*' (/ scale))
-                                  (+' tx ty)
-                                  (*' (/ prev-size next-size))
-                                  round
-                                  cat)]
+                   (let [xf (comp (+' (- ox) (- oy)) (*' (/ scale)) (+' tx ty) (*' (/ prev-size next-size)) round cat)]
                      (dispatch :scene/apply-grid-options (convert next-origin xf) next-size)))}
                 ($ :fieldset.grid-align-origin
                   ($ :button
@@ -312,7 +307,7 @@
                          (if (number? n)
                            (set-size n))))})
                   ($ :button {:type "submit" :data-name "submit"}
-                    ($ icon {:name "check"}) "Submit"))))))))))
+                    ($ icon {:name "check"})))))))))))
 
 (defui draw [{:keys [mode] :as props}]
   ($ dnd-context

src/main/ogres/app/component/scene_draw.css

@@ -33,8 +33,9 @@
 
 .grid-align path,
 .grid-align circle {
-  stroke-dasharray: 1px;
   pointer-events: none;
+  stroke-dasharray: 1px 3px;
+  stroke-opacity: 0.7;
 }
 
 .grid-align-form {
@@ -47,14 +48,18 @@
     border-radius: 3px;
     border: 1px solid var(--color-blues-500);
     border: none;
-    color: var(--color-paper-500);
+    color: var(--color-black-400);
     cursor: pointer;
     display: flex;
     font-size: 12px;
     gap: 4px;
     justify-content: center;
     pointer-events: all;
     text-transform: uppercase;
+
+    &:hover {
+      color: white;
+    }
   }
 }
 
@@ -67,9 +72,10 @@
   width: 128px;
 
   button {
+    aspect-ratio: 1;
+    border: 1px solid var(--color-blues-800);
     box-shadow: 2px 2px 0 0 rgba(0, 0, 0, 0.35);
     position: absolute;
-    aspect-ratio: 1;
 
     &[data-name="up"] {
       inset: 0 auto auto 50%;
@@ -83,7 +89,7 @@
 
     &[data-name="down"] {
       inset: auto 50% 0 auto;
-      transform: translate(-50%, 0);
+      transform: translate(50%, 0);
     }
 
     &[data-name="left"] {
@@ -102,21 +108,30 @@
   align-items: stretch;
   background-color: var(--color-blues-900);
   border-radius: 2px;
+  border: 1px solid var(--color-blues-800);
   box-shadow: 2px 2px 0 0 rgba(0, 0, 0, 0.35);
+  box-sizing: border-box;
   cursor: default;
   display: flex;
   gap: 4px;
-  inset: auto 0 0 auto;
+  height: 40px;
+  inset: auto 0 0 0;
   margin: 4px;
   padding: 4px;
   pointer-events: all;
   position: absolute;
 
-  button {
+  button[type="button"] {
+    aspect-ratio: 1;
+  }
+
+  button[type="submit"] {
     background-color: var(--color-blues-500);
+    padding: 0 4px;
   }
 
   input {
+    background-color: var(--color-blues-500);
     border-radius: 2px;
     pointer-events: all;
   }

src/main/ogres/app/component/toolbar.cljs

@@ -22,7 +22,7 @@
    "mask-show"    {:label "Reveal the entire scene." :args [:scene/reveal]}
    "mask-toggle"  {:label "Toggle a mask on and off." :args [:camera/change-mode :mask-toggle]}
    "scene-focus"  {:label "Focus the current view." :args [:session/focus]}
-   "scene-grid"   {:label "Set the grid origin." :args [:camera/change-mode :grid]}
+   "scene-grid"   {:label "Grid alignment tool." :args [:camera/change-mode :grid]}
    "scene-ruler"  {:label "Measure distance." :args [:camera/change-mode :ruler]}
    "scene-select" {:label "Hold shift to select multiple tokens." :args [:camera/change-mode :select]}
    "scene-window" {:label "Open the player window." :args [:share/initiate]}