* common.js: add function to put placeholders of elements to their titles

Cosmatevs · Cosmatevs · commit 5eb3e97a2741 · 2025-06-24T16:27:08.000+02:00
* tweak description of BHAV to diagram
* tweak index page styles
diff --git a/README.md b/README.md
@@ -3,6 +3,6 @@ https://cosmatevs.github.io/bhav-to-diagram.html
 
 A web tool for The Sims 2 modders that converts [SimPe](https://modthesims.info/showthread.php?t=630456) [BHAV](https://modthesims.info/wiki.php?title=BHAV) code to [Mermaid](https://mermaid.live/edit) diagrams. It's intended to make BHAV functions easier to understand, especially the big ones.
 
-Hover over interface elements (e.g. buttons, text areas) to see explanations of what they do.
+Hover over interface elements (e.g. buttons, icons, text areas) to see explanations of what they do.
 
 ![BHAV to Mermaid diagram tool appearance](readme-images/bhav-to-diagram.png)
diff --git a/assets/common.js b/assets/common.js
@@ -1,17 +1,23 @@
 function debounce(callback, wait) {
-    let timeoutId = null;
-    return (...args) => {
-        window.clearTimeout(timeoutId);
-        timeoutId = window.setTimeout(
-            () => callback(...args), wait
-        );
-    };
+	let timeoutId = null;
+	return (...args) => {
+		window.clearTimeout(timeoutId);
+		timeoutId = window.setTimeout(
+			() => callback(...args), wait
+		);
+	};
 }
 
 function removeFromArray(array, object) {
-    array.splice(array.indexOf(object), 1);
+	array.splice(array.indexOf(object), 1);
 }
 
 function distinctFilter(value, index, array) {
-    return array.indexOf(value) === index;
+	return array.indexOf(value) === index;
+}
+
+function putPlaceholdersInTitles() {
+	document.querySelectorAll('*[placeholder]').forEach(element => {
+		element.setAttribute('title', element.getAttribute('placeholder'));
+	})
 }
diff --git a/bhav-to-diagram.html b/bhav-to-diagram.html
@@ -7,7 +7,7 @@
 	<title>The Sims 2 BHAV to Mermaid diagram</title>
 	<link rel="icon" type="image/x-icon" href="assets/favicon.svg">
 	<link rel="stylesheet" href="assets/style.css?v=4" />
-	<script src="assets/common.js?v=2"></script>
+	<script src="assets/common.js?v=3"></script>
 	<script src="assets/svg-pan-zoom-container.js?v=0.6.1"></script> <!-- https://github.com/luncheon/svg-pan-zoom-container -->
 	<style>
 		:root {
@@ -128,8 +128,7 @@
 
 <body>
 	<section id="textareas">
-		<textarea id="input-code" spellcheck="false" placeholder="Here goes your BHAV code"
-			title="Here goes your BHAV code"></textarea>
+		<textarea id="input-code" spellcheck="false" placeholder="Here goes your BHAV code"></textarea>
 		<section id="settings">
 			<button id="tutorial-button" title="Replace the code in the BHAV textbox with a tutorial code">
 				Show tutorial
@@ -166,7 +165,7 @@
 				</a>
 			</div>
 		</section>
-		<textarea id="output-code" readonly title="The BHAV code translated into Mermaid diagram code"></textarea>
+		<textarea id="output-code" readonly placeholder="The BHAV code translated into Mermaid diagram code"></textarea>
 	</section>
 	<section id="visual-output">
 		<div id="diagram-wrapper" data-zoom-on-wheel="zoom-amount: 0.001; min-scale: 0.9; max-scale: 20;" data-pan-on-drag>
@@ -202,6 +201,7 @@
 	tutorialButton.addEventListener('click', () => showTutorial());
 	diagramResetViewButton.addEventListener('click', () => resetView());
 	
+	putPlaceholdersInTitles();
 	setTheme();
 
 	function handleInput(input) {
diff --git a/index.html b/index.html
@@ -10,6 +10,7 @@
     <style>
         body {
             --body-padding: 1.5rem;
+            min-height: max-content;
             max-width: 30rem;
             margin: auto;
             box-shadow: 0 0 1rem #0004;
@@ -21,6 +22,8 @@
 
         dt {
             font-weight: bold;
+            font-size: 1.25rem;
+            margin-block-start: 1rem;
         }
 
         dd {
@@ -44,7 +47,7 @@ <h1>The Sims 2 tools</h1>
                 especially the big ones.
             </p>
             <p>
-                Hover over interface elements (e.g. buttons, text areas)
+                Hover over interface elements (e.g. buttons, icons, text areas)
                 to see explanations of what they do.
             </p>
         </dd>
