From 5f8e240c0fac5135cdb8cb629b96d53e4072023a Mon Sep 17 00:00:00 2001
From: om <om@nospam>
Date: Sat, 26 Nov 2022 11:27:06 +0100
Subject: [PATCH] Add speed adjustment slider

---
 da/index.html   | 16 ++++++++++++++++
 en/index.html   | 16 ++++++++++++++++
 img/chatapp.svg | 30 +++++++++++++++++++-----------
 3 files changed, 51 insertions(+), 11 deletions(-)

diff --git a/da/index.html b/da/index.html
index 43afee9..25b3081 100644
--- a/da/index.html
+++ b/da/index.html
@@ -67,6 +67,18 @@ Lær mere om ChatControllen og hvorfor det er en dårlig idé, i vores interakti
   </svg>
   Du kan bruge den blå pil for at åbne kontaktlisten
   </p>
+  <p>
+  <input type="range"
+         name="typing_speed"
+         id="typing_speed"
+         title="hastighed"
+         onChange="adjust_typing_speed(this.value)"
+         value="50"
+         min="0"
+         max="100" />
+  <input type="text" value="50" id="speed_indicator" readonly size="1" />
+  Hastighed
+  </p>
 </div>
 </div><!-- end #app-area -->
 
@@ -156,6 +168,10 @@ og følger instrukserne.
 function swipe_viewport() {
     document.getElementById('movie').contentDocument.getElementById('to_contact_list_button').onclick();
 }
+function adjust_typing_speed(new_value) {
+    document.getElementById('movie').contentDocument.getElementById('message_input_box').onclick()(100 - new_value);
+    document.getElementById('speed_indicator').value = new_value;
+}
 </script>
 </body>
 </html>
diff --git a/en/index.html b/en/index.html
index a63b0a1..899f6cc 100644
--- a/en/index.html
+++ b/en/index.html
@@ -68,6 +68,18 @@ interactive film on the left.
   </svg>
   You can use the blue arrow to open the contact list
   </p>
+  <p>
+  <input type="range"
+         name="typing_speed"
+         id="typing_speed"
+         title="typing speed"
+         onChange="adjust_typing_speed(this.value)"
+         value="50"
+         min="0"
+         max="100" />
+  <input type="text" value="50" id="speed_indicator" readonly size="1" />
+  Speed
+  </p>
 </div>
 </div><!-- end #app-area -->
 
@@ -160,6 +172,10 @@ and follow the instructions.
 function swipe_viewport() {
     document.getElementById('movie').contentDocument.getElementById('to_contact_list_button').onclick();
 }
+function adjust_typing_speed(new_value) {
+    document.getElementById('movie').contentDocument.getElementById('message_input_box').onclick()(100 - new_value);
+    document.getElementById('speed_indicator').value = new_value;
+}
 </script>
 </body>
 </html>
diff --git a/img/chatapp.svg b/img/chatapp.svg
index 9508da7..28df351 100644
--- a/img/chatapp.svg
+++ b/img/chatapp.svg
@@ -10,6 +10,7 @@
      onload="run()"
      overflow="auto"
      style="font-family: sans; border-radius: 10px;"
+     id="movie"
      >
 <defs>
   <symbol id="kaereste_foto" width="60" height="200">
@@ -85,7 +86,14 @@ const bubble_spacing = 5;
 const visible_chat_area = {'top': 60,
                            'bottom': height - 100 // minus status & input areas
 };
-const typing_speed = 50;
+
+var typing_speed = 50;
+function set_typing_speed(new_speed) {
+    typing_speed = new_speed;
+}
+function get_typing_speed() {
+    return typing_speed; // prevent closure capture
+}
 
 var conversation_count = 0;
 var current_dialog = null;
@@ -417,7 +425,7 @@ function Dialog() {
 
   async function post_message(dialog, message, is_myself) {
     if(!is_myself && dialog.messages.length) {
-      await wait(message.length * typing_speed);
+      await wait(message.length * get_typing_speed());
     } // first message should be instant
 
     if(!dialog.is_active()) {
@@ -435,7 +443,7 @@ function Dialog() {
     while(scroll > line_height) {
       dialog.scroll_by(-line_height);
       scroll -= line_height;
-      await wait(50);
+      await wait(get_typing_speed());
     }
   }
 
@@ -445,7 +453,7 @@ function Dialog() {
   }
 
   this.me = async function(message, will_be_flagged) {
-    await wait(1500); // give me some time to read
+    await wait(30 * get_typing_speed()); // give me some time to read
     if(!this.is_active()) return;
     await type_message(this, message);
     if(!this.is_active()) return;
@@ -473,11 +481,11 @@ async function type_message(dialog, message) {
   for(let line of lines) {
     text.data = '';
     for(let c of line) {
-      await wait(typing_speed);
+      await wait(get_typing_speed());
       text.data += c;
     }
     if(!dialog.is_active()) break;
-    await wait(20); // otherwise it's too fast
+    await wait(0.4 * get_typing_speed()); // otherwise it's too fast
   }
 }
 
@@ -501,20 +509,20 @@ async function local_message_processing(will_be_flagged) {
   let text_element = document.getElementById('message_status');
   let indicator = text_element.childNodes[0];
   indicator.data = 'scanning for illegal content';
-  await wait(800);
+  await wait(16 * get_typing_speed());
   if(will_be_flagged) {
     let box = document.getElementById('message_status_box');
     text_element.setAttribute('fill', 'red');
     box.setAttribute('fill', 'yellow');
     indicator.data = 'Reporting suspicious content';
-    await wait(1000);
+    await wait(20 * get_typing_speed());
     text_element.setAttribute('fill', 'white');
     box.setAttribute('fill', '#FF7B00');
   }
   indicator.data = 'encrypting message';
-  await wait(550);
+  await wait(11 * get_typing_speed());
   indicator.data = 'sending message';
-  await wait(500);
+  await wait(10 * get_typing_speed());
   indicator.data = 'message was sent';
 }
 
@@ -898,7 +906,7 @@ function run() {
 <text id="message_status" x="310" y="540" fill="white">status</text>
 
 <!-- [right] text input -->
-<rect id="message_input_box" x="300" y="550" stroke="black" fill="white" width="250" height="50" />
+<rect id="message_input_box" x="300" y="550" stroke="black" fill="white" width="250" height="50" onclick="return set_typing_speed" />
 <rect id="message_submit_box" x="550" y="550" stroke="black" fill="#CCCCCC" width="50" height="50" />
 <text id="message_input_data" x="310" y="575" fill="black"></text>
 <text id="message_submit_button" x="555" y="580" fill="black">SEND</text>