Start results div scrolled to bottom on page changes

3 files changed, 25 insertions, 0 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8e99480..b5a36e6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,16 @@
 # Changelog
 All notable changes to this project will be documented in this file.
 
+## [0.1.10.1] - 2021-06-10
+
+### UI
+- Results box now insta-scrolls to bottom on any page change. Previously it would be back at the top again if you
+  clicked a menu link or something. This meant that auto-scroll wouldn't be working on page change due to the
+  scroll changes in 0.1.10.
+
+### Fixed
+- Fatal bug when trying to access the New Character screen, introduced by the recent major UI changes.
+
 ## [0.1.10] - 2021-06-09
 
 ### Leviathans
diff --git a/app/javascript/controllers/results_controller.js b/app/javascript/controllers/results_controller.js
new file mode 100644
index 0000000..266b80c
--- /dev/null
+++ b/app/javascript/controllers/results_controller.js
@@ -0,0 +1,13 @@
+import { Controller } from "stimulus";
+
+export default class extends Controller {
+  static targets = [ "output" ];
+
+  connect() {
+    this.scrollToBottom();
+  }
+
+  scrollToBottom() {
+    this.outputTarget.scrollTop = this.outputTarget.scrollHeight;
+  }
+}
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 309dc29..048a6ed 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -40,6 +40,8 @@
             </div>
             <div class="game-container-box overflow-auto text-sm p-2 flex-grow" id="result_output"
                  style="max-height: 60%"
+                 data-controller="results"
+                 data-results-target="output"
                  data-turbolinks-permanent>
             </div>
           </div>