auto fill/fit, less intrusive hints controller

app/javascript/controllers/hints_controller.js

@@ -1,61 +1,35 @@
 import { Controller } from "@hotwired/stimulus";
-
-// Connects to data-controller="hints"
 export default class extends Controller {
   connect() {
-    const url = new URL(window.location.href);
-    const sessionId = url.searchParams.get("i");
-
-    // Check if the sessionId is present and if the hint has not been shown yet
-    if (sessionId && !sessionStorage.getItem(`hintShown-${sessionId}`)) {
-      this.showResizeHint();
-      sessionStorage.setItem(`hintShown-${sessionId}`, "true");
-    }
+    this.addHintMessage();
+    window.addEventListener("resize", this.updatePosition.bind(this));
   }
 
-  showResizeHint() {
-    // Create overlay div
-    const overlay = document.createElement("div");
-    overlay.style.position = "fixed";
-    overlay.style.top = "0";
-    overlay.style.left = "0";
-    overlay.style.width = "100%";
-    overlay.style.height = "100%";
-    overlay.style.backgroundColor = "rgba(0, 0, 0, 0.8)";
-    overlay.style.zIndex = "9999";
-    overlay.style.display = "flex";
-    overlay.style.justifyContent = "center";
-    overlay.style.alignItems = "center";
-
-    // Create text element
-    const text = document.createElement("div");
-    text.innerText =
-      "👋 EARTHLING. REMINDER! DRAG WINDOW CORNER ⇲ OR TURN PHONE TO RESIZE. CLICK TO SEE MORE. EOF. ENJOY ⇲ ⇲ ⇲ ⇲";
-    text.style.color = "magenta";
-    text.style.fontSize = "6em";
-    text.style.fontWeight = "1000"; // Heavy script
-    text.style.fontFamily = "system-ui, sans-serif"; // Optional: for better font rendering
-    text.style.animation = "flashing 1s infinite"; // Add animation
-
-    // Append text to overlay
-    overlay.appendChild(text);
-
-    // Append overlay to body
-    document.body.appendChild(overlay);
+  disconnect() {
+    window.removeEventListener("resize", this.updatePosition.bind(this));
+  }
 
-    // Remove the overlay after 4.5 seconds
-    setTimeout(() => {
-      document.body.removeChild(overlay);
-    }, 4500);
+  addHintMessage() {
+    this.hint = document.createElement("div");
+    this.hint.innerText = "drag corner to resize ⇲";
+    this.hint.style.position = "fixed";
+    this.hint.style.bottom = "10px";
+    this.hint.style.right = "10px";
+    this.hint.style.fontFamily = "monospace";
+    this.hint.style.mixBlendMode = "difference"; // For better visibility
+    this.hint.style.backgroundColor = "rgba(255, 0, 255, 100)"; // Fuchsia with opacity
+    this.hint.style.color = "white";
+    this.hint.style.padding = "5px";
+    this.hint.style.borderRadius = "5px";
+    this.hint.style.zIndex = "1000"; // Ensures it's on top of other elements if required
+
+    document.body.appendChild(this.hint);
+  }
 
-    // CSS Styles for flashing animation
-    const style = document.createElement("style");
-    style.innerHTML = `
-      @keyframes flashing {
-        0%, 100% { opacity: 1; }
-        50% { opacity: 0.1; }
-      }
-    `;
-    document.head.appendChild(style);
+  updatePosition() {
+    if (this.hint) {
+      this.hint.style.bottom = "10px";
+      this.hint.style.right = "10px";
+    }
   }
 }

app/views/layouts/application.html.erb

@@ -46,5 +46,6 @@
     >
     </div>
     <%= yield %>
+    <div data-controller="hints"></div>
   </body>
 </html>

db/seeds.rb

@@ -49,7 +49,7 @@ def go_seed
             slug_name,
             width: 3840,
             height: 2160,
-            resizing_type: :fit,
+            resizing_type: :auto,
             gravity: :sm,
             format: :avif
           ))