Add speed adjustment slider

This commit is contained in:
om 2022-11-26 11:27:06 +01:00
parent 71e782088e
commit 5f8e240c0f
3 changed files with 51 additions and 11 deletions

View file

@ -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>

View file

@ -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>

View file

@ -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>

Before

Width:  |  Height:  |  Size: 35 KiB

After

Width:  |  Height:  |  Size: 36 KiB