Trying to prevent runes from breaking up mid-word, unsuccesful, but s…

…till functional
zalbright90 · Jul 30, 2024 · b56c8f6 · b56c8f6
1 parent 14256a1
commit b56c8f6
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 32 deletions.
diff --git a/huginn.js b/huginn.js
@@ -73,46 +73,47 @@ function toggleTranslation() {
 function updateRunicTranslation() {
     const stanzaElement = document.getElementById("stanza");
     const runicTranslationElement = document.getElementById("runic-translation");
-    const text = stanzaElement.textContent;
+    const fullText = stanzaElement.textContent;
+
+    const runicText = convertToRunes(fullText);
 
-    runicTranslationElement.textContent = convertToRunes(text);
-    addRunicFunctionality();
+    runicTranslationElement.textContent = runicText;
 }
 
 function addRunicFunctionality() {
     const stanzaElement = document.getElementById("stanza");
     const text = stanzaElement.textContent;
-    const words = text.split(/\s+/);
+    const fullRunicText = convertToRunes(text);
+    const originalWords = text.split(/\s+/);
+    const runicWords = fullRunicText.split('·');
 
     stanzaElement.innerHTML = '';
 
-    words.forEach((word, index) => {
+    originalWords.forEach((word, index) => {
         const wordSpan = document.createElement('span');
         wordSpan.className = 'word';
 
-        for (let i = 0; i < word.length; i++) {
-            const char = word[i];
-            const span = document.createElement('span');
-            span.textContent = char;
-
-            const lowerChar = char.toLowerCase();
-            const currentRune = runeMap[lowerChar];
-
-            if (currentRune) {
-                span.className = 'runic-text';
-                span.setAttribute('data-latin', currentRune);
-                addTouchEventListeners(span);
-            }
-
-            wordSpan.appendChild(span);
-        }
+        const originalSpan = document.createElement('span');
+        originalSpan.className = 'original-text';
+        originalSpan.textContent = word;
+
+        const runicSpan = document.createElement('span');
+        runicSpan.className = 'runic-text';
+        runicSpan.textContent = runicWords[index] || '';
+
+        wordSpan.appendChild(originalSpan);
+        wordSpan.appendChild(runicSpan);
+
+        addTouchEventListeners(wordSpan);
 
         stanzaElement.appendChild(wordSpan);
 
-        if (index < words.length - 1) {
+        if (index < originalWords.length - 1) {
             stanzaElement.appendChild(document.createTextNode(' '));
         }
     });
+
+    updateRunicTranslation();
 }
 
 function convertToRunes(text) {
@@ -176,7 +177,7 @@ function addTouchEventListeners(element) {
 }
 
 document.addEventListener('DOMContentLoaded', () => {
-    loadStanzas();  // This will load stanzas and then display one
+    loadStanzas();
 
     const container = document.querySelector('.container');
 

diff --git a/muninn.css b/muninn.css
@@ -34,20 +34,19 @@ body {
     border-radius: 12px;
     width: 90%;
     max-width: 600px;
-    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.5);
+    box-shadow: 15px 15px 16px rgba(0, 0, 0, 0.8);
     flex-grow: 1;
 }
 
 #stanza {
     font-size: 1.4em;
     color: #5c0101;
     min-height: 100px;
-    margin-bottom: 1rem;
+    margin-bottom: 1.5rem;
     padding: 15px;
     cursor: pointer;
-    white-space: pre-wrap;
-    word-break: keep-all;
     line-height: 1.8;
+    text-align: left;
 }
 
 #runic-translation {
@@ -63,9 +62,22 @@ body {
 }
 
 .runic-text {
-    position: relative;
-    display: inline-block;
-    margin-right: 2px;
+    position: absolute;
+    top: -1.5em;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: rgba(0, 0, 0, 0.8);
+    color: white;
+    padding: 5px 10px;
+    border-radius: 4px;
+    font-size: 0.8em;
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity 0.3s, visibility 0.3s;
+    white-space: nowrap;
+    z-index: 2;
+    font-family: "Noto Sans Runic", sans-serif;
+    width: max-content;
 }
 
 .runic-text::after {
@@ -123,7 +135,6 @@ h1, h2, h3 {
 }
 
 h1 { font-size: 2.5rem; }
-
 h2 { font-size: 2rem; }
 h3 { font-size: 1.5rem; }
 
@@ -141,7 +152,7 @@ h3 { font-size: 1.5rem; }
     max-width: 325px;
     border-radius: 12px;
     border: 9px ridge rgb(92, 1, 1);
-    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
+    box-shadow: 15px 15px 16px rgba(0, 0, 0, 0.8);
     overflow: hidden;
     margin: 0 !important;
     padding: 0 !important;
@@ -165,6 +176,33 @@ h3 { font-size: 1.5rem; }
 .word {
     display: inline-block;
     margin-right: 0.2em;
+    position: relative;
+    cursor: pointer;
+}
+
+.word::after {
+    content: attr(data-runes);
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: rgba(0, 0, 0, 0.8);
+    color: white;
+    padding: 5px 10px;
+    border-radius: 4px;
+    font-size: 0.8em;
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity 0.3s, visibility 0.3s;
+    white-space: nowrap;
+    z-index: 10;
+    font-family: "Noto Sans Runic", sans-serif;
+}
+
+.word:hover::after,
+.word.touch-active::after {
+    visibility: visible;
+    opacity: 1;
 }
 
 footer {