From 5f8e240c0fac5135cdb8cb629b96d53e4072023a Mon Sep 17 00:00:00 2001 From: om 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 Du kan bruge den blå pil for at åbne kontaktlisten

+

+ + + Hastighed +

@@ -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; +} 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. You can use the blue arrow to open the contact list

+

+ + + Speed +

@@ -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; +} 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" > @@ -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() { status - + SEND