Fix P5.js initialization

MaMpf-HD · Oct 25, 2023 · 8dddcc8 · 8dddcc8
1 parent 4d83f19
commit 8dddcc8
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 4 deletions.
diff --git a/app/assets/javascripts/monotile/hat.js b/app/assets/javascripts/monotile/hat.js
@@ -6,7 +6,23 @@
 // useful in combination with turbolinks.
 // see more here:
 // https://github.com/processing/p5.js/wiki/p5.js-overview#why-cant-i-assign-variables-using-p5-functions-and-variables-before-setup
-new p5();
+
+// A bit of a "hacky" fix. This is the only way I found that works
+// so that the canvas is loaded even if the site is left
+// e.g. user clicks on "Register" or changes language from "De" to "En"
+// with the button on the landing page.
+$(document).on('turbolinks:load', () => {
+	try {
+		setup();
+	} catch (err) {
+		if (err instanceof ReferenceError) {
+			console.log('Setup P5.js');
+			return;
+		}
+		console.error(err);
+	}
+});
+
 
 const INITIAL_TO_SCREEN = [20, 0, 0, 0, -20, 0];
 let to_screen = INITIAL_TO_SCREEN;

diff --git a/app/views/layouts/devise.html.erb b/app/views/layouts/devise.html.erb
@@ -14,9 +14,9 @@
     <!-- Play around with it: https://cs.uwaterloo.ca/~csk/hat/app.html -->
     <!-- App source code licensed under BSD-3-Clause by Craig S. Kaplan -->
     <!-- adapted from: https://github.com/isohedral/hatviz -->
-    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.min.js"></script>
-    <%= javascript_include_tag 'monotile/geometry', defer: true %>
-    <%= javascript_include_tag 'monotile/hat', defer: true %>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.min.js"></script>
+    <%= javascript_include_tag 'monotile/geometry' %>
+    <%= javascript_include_tag 'monotile/hat' %>
   </head>
 
   <body data-locale="<%= I18n.locale %>"