Add stats / word count box

3 files changed, 24 insertions, 3 deletions

diff --git a/index.html b/index.html
index 8b3c895..11566ac 100644
--- a/index.html
+++ b/index.html
@@ -21,7 +21,10 @@
       <div id="enable-edit" class="material-icons">edit</div>
     </div>
     <div id="main"></div>
-    <div id="unreachable"></div>
+    <div id="stats">
+      <div id="word-count">Word Count: <span></span></div>
+      <div id="unreachable"></div>
+    </div>
 
     <template id="view-entry">
       <a class="edit-btn material-icons">edit</a>
diff --git a/main.js b/main.js
index 9e27824..83d1a6a 100644
--- a/main.js
+++ b/main.js
@@ -16,6 +16,11 @@ let state = {
   path: ""
 };
 
+const wordCount = () =>
+  document.querySelector("#word-count span").innerText =
+    data.pages.reduce((a,p) => a + p.body.trim().split(/\s+/).length +
+      p.choices.reduce((a,c) => a + c[1].trim().split(/\s+/).length, 0), 0);
+
 const db = new Dexie("vanguard-editor");
 db.version(1).stores({files:"name"});
 db.on("populate", () => db.files.add({name: "main", data}));
@@ -23,6 +28,7 @@ if (!/^#[0-9a-z.-]+\.json$/i.test(location.hash)) {
   db.files.get("main").then(d => { data = d.data;
     if (!location.hash || /^#\/?$/.test(location.hash))
       location.hash = "#/"+data.current;
+    wordCount();
     state.path = renderPath();
     setTimeout(() => document.documentElement.scrollTop =
       document.getElementById("main").lastChild.offsetTop);
@@ -54,6 +60,7 @@ document.getElementById("open-file").addEventListener("change", e => {
     data = JSON.parse(r.result);
     db.files.put({name:"main",data});
     location.hash = "#/"+data.current;
+    wordCount();
     state.path = renderPath();
     setTimeout(() => document.documentElement.scrollTop =
       document.getElementById("main").lastChild.offsetTop);
@@ -67,6 +74,7 @@ function loadFile(path) {
     db.files.put({name:"main",data:(data=d)});
     //location.hash = "#/"+data.current;
     location.hash = "#/";
+    wordCount();
     state.path = renderPath();
     //setTimeout(() => document.documentElement.scrollTop =
     //  document.getElementById("main").lastChild.offsetTop);
@@ -264,6 +272,8 @@ window.addEventListener("hashchange", () => {
 
       data.paths = newpaths;
 
+      wordCount();
+
       db.files.put({name:"main",data});
     }
 
diff --git a/style.css b/style.css
index cc8a29b..e628265 100644
--- a/style.css
+++ b/style.css
@@ -99,6 +99,7 @@ div.material-icons {
 
 html.read-only #open { display: none; }
 html.read-only #save { display: none; }
+html.read-only #stats { display: none; }
 html.read-only .edit-btn { display: none; }
 html.read-only #disable-edit { display: none; }
 html:not(.read-only) #enable-edit { display: none; }
@@ -266,8 +267,15 @@ section textarea:focus {
   content: "◈"; /* ◆ ◇ ◈ */
 }
 
+#stats {
+  padding: 1em;
+  font-size: 16px;
+  border-radius: 6px;
+  border: 1px solid var(--border);
+  background-color: var(--selbg);
+}
+
 #unreachable {
-  font-size: 14px;
-  font-style: oblique;
+  font-weight: 600;
   color: var(--red);
 }