Start results div scrolled to bottom on page changes

2 files changed, 15 insertions, 0 deletions

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>