Create book-recitable.html

jonobr1 · Apr 5, 2020 · e2d5748 · e2d5748
1 parent 325dc3d
commit e2d5748
Showing 1 changed file with 177 additions and 0 deletions.
diff --git a/book-recitable.html b/book-recitable.html
@@ -0,0 +1,177 @@
+<!doctype html>
+<html>
+  <head>
+
+    <meta charset="utf-8">
+    <title>PERDITIS 🏺INVENTIS</title>
+
+    <!-- iOS specific catches -->
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="viewport" content="width=device-width, user-scalable=no">
+    <meta name="format-detection" content="telephone=no">
+
+
+    <link rel="stylesheet" href="https://use.typekit.net/uhv1skr.css">
+    <style>
+      * { margin: 0; padding: 0; }
+      h1, h2,
+      div.chapter {
+        padding: 0 40px;
+      }
+      body {
+        font-family: mrs-eaves, times, serif;
+        font-size: 20px;
+        line-height: 40px;
+        font-weight: 400;
+        font-style: normal;
+        max-width: 710px;
+        margin: 0 auto;
+      }
+      h1, div.chapter {
+        margin-top: 40px;
+      }
+      div.chapter:last-child {
+        margin-bottom: 40px;
+      }
+      h1, h2, h3, h4, h5, h6 {
+        font-family: mrs-eaves-roman-petite-caps, sans-serif;
+        font-weight: 400;
+        font-style: normal;
+        letter-spacing: 1px;
+        text-transform: lowercase;
+        text-align: center;
+        margin-bottom: 10px;
+      }
+    </style>
+
+  </head>
+  <body>
+    <h1 id="title"></h1>
+    <h2><span id="author"></span></h2>
+    <div id="content"></div>
+    <div class="scripts">
+      <script src="./third-party/xhr.js"></script>
+      <script>
+
+        var story;
+        var wordlist;
+        var emoji_regex = /(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff]|[\u0023-\u0039]\ufe0f?\u20e3|\u3299|\u3297|\u303d|\u3030|\u24c2|\ud83c[\udd70-\udd71]|\ud83c[\udd7e-\udd7f]|\ud83c\udd8e|\ud83c[\udd91-\udd9a]|\ud83c[\udde6-\uddff]|[\ud83c[\ude01-\ude02]|\ud83c\ude1a|\ud83c\ude2f|[\ud83c[\ude32-\ude3a]|[\ud83c[\ude50-\ude51]|\u203c|\u2049|[\u25aa-\u25ab]|\u25b6|\u25c0|[\u25fb-\u25fe]|\u00a9|\u00ae|\u2122|\u2139|\ud83c\udc04|[\u2600-\u26FF]|\u2b05|\u2b06|\u2b07|\u2b1b|\u2b1c|\u2b50|\u2b55|\u231a|\u231b|\u2328|\u23cf|[\u23e9-\u23f3]|[\u23f8-\u23fa]|\ud83c\udccf|\u2934|\u2935|[\u2190-\u21ff])/;
+
+        xhr.get('./assets/satyricon.json', function(resp) {
+
+          story = JSON.parse(resp);
+          setup();
+
+        });
+
+        xhr.get('./assets/latin-emoji.json', function(resp) {
+
+          wordlist = JSON.parse(resp);
+          setup();
+
+        });
+
+        function setup() {
+          setup.index++;
+          if (!setup.initialized && setup.index >= 2) {
+            setup.initialized = true;
+            document.body.querySelector('#title').textContent = '...' + story.title + '...';
+            document.body.querySelector('#author').textContent = '...' + story.author + '...';
+            transcribe(0);
+          }
+        }
+
+        setup.index = 0;
+        setup.initialized = false;
+
+        function transcribe(i) {
+
+          var chapter = story.book[i];
+
+          if (!chapter) {
+            console.log('Done');
+            return;
+          }
+
+          var lines = chapter.body.join(' ');//.replace(/[\’\‘\”\“\,]/ig, '');
+          var sentences = lines.split(/[\?\.\!\;]/i).filter(empty);
+          var domElement = document.createElement('div');
+
+          domElement.innerHTML = '<h3>...' + romanNumeralToArabicNumber(chapter.chapter) + '...</h3>';
+          domElement.classList.add('chapter');
+
+          document.querySelector('#content').appendChild(domElement);
+
+          var id = Math.floor(Math.random() * sentences.length);
+          loop(id);
+
+          function loop(j) {
+
+            var line = sentences[j];
+
+            if (!line) {
+              console.log('Done with Chapter', chapter.chapter);
+              setTimeout(transcribe, 10, i + 1);
+              return;
+            }
+
+            var paragraph = document.createElement('p');
+            domElement.appendChild(paragraph);
+
+            var words = line.split(/\s/i).filter(empty);
+
+            paragraph.innerHTML += '...';
+            iterate(0);
+
+            function iterate(k) {
+
+              var word = words[k];
+
+              if (!word) {
+                paragraph.innerHTML += '...';
+                setTimeout(loop, 0, sentences.length);
+                return;
+              }
+
+              var string = word.replace(/\W/g, '').toLowerCase();
+              var emoji = wordlist[string];
+
+              if (!emoji) {
+                paragraph.innerHTML += word + ' ';
+              } else {
+                paragraph.innerHTML += word.replace(string, emoji) + ' ';
+              }
+
+              iterate(k + 1);
+
+            }
+
+          }
+
+        }
+
+        function empty(v) {
+          return v.length > 1;
+        }
+
+        function romanNumeralToArabicNumber(romanNumber) {
+          romanNumber = romanNumber.toUpperCase();
+          const romanNumList = ["CM","M","CD","D","XC","C","XL","L","IX","X","IV","V","I"];
+          const corresp = [900,1000,400,500,90,100,40,50,9,10,4,5,1];
+          let index =  0, num = 0;
+          for(let rn in romanNumList){
+            index = romanNumber.indexOf(romanNumList[rn]);
+            while(index != -1){
+              num += parseInt(corresp[rn]);
+              romanNumber = romanNumber.replace(romanNumList[rn],"-");
+              index = romanNumber.indexOf(romanNumList[rn]);
+            }
+          }
+          return num;
+        }
+
+
+      </script>
+    </div>
+  </body>
+</html>