From aca88b346a1e7e6fe9f68df47d5e8ba3af38cd34 Mon Sep 17 00:00:00 2001 From: om Date: Sun, 21 Aug 2022 17:53:31 +0200 Subject: [PATCH] Add status bar and input box --- chatapp.svg | 103 +++++++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 89 insertions(+), 14 deletions(-) diff --git a/chatapp.svg b/chatapp.svg index 6802b56..542ff78 100644 --- a/chatapp.svg +++ b/chatapp.svg @@ -5,8 +5,8 @@ xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" - height="500" - viewBox="0 0 300 500" + height="600" + viewBox="0 0 300 600" onload="start_chat('Ven')" overflow="auto" > @@ -41,13 +41,15 @@ const svgns = "http://www.w3.org/2000/svg"; // must be the same as the SVG dimensions const width = 300; -const height = 500; +const height = 550; const line_height = 14; const bubble_padding = 6; const bubble_spacing = 5; -const visible_chat_area = {'top': 60, 'bottom': 500}; -const typing_speed = 7; +const visible_chat_area = {'top': 60, + 'bottom': height - 100 // minus status & input areas +}; +const typing_speed = 50; var conversation_count = 0; @@ -219,10 +221,9 @@ function swipe_viewport() { // The element must already be inside the DOM for this to work. function create_bubble(inner_element, color) { const bbox = inner_element.getBBox(); - const y_percent = Math.round(((bbox.y - bubble_padding) / height) * 100); let bubble = create_svg_node('rect', { 'x': bbox.x - bubble_padding, - 'y': `${y_percent}%`, + 'y': bbox.y - bubble_padding, 'width': bbox.width + 2 * bubble_padding, 'height': bbox.height + 2 * bubble_padding, 'rx': 8, @@ -270,7 +271,7 @@ function start_chat(who) { dialog_kaereste(); break; default: - alert(`Unknown contact: ${who}`); + alert(`kontakten ${who} er ikke implementeret endnu`); } } @@ -281,7 +282,9 @@ function Dialog(chat_partner) { this.all_elements_height = 0; // also for scrolling async function post_message(dialog, message, is_myself) { - if(dialog.messages.length) await wait(message.length * typing_speed); // first message should be instant + if(!is_myself && dialog.messages.length) { + await wait(message.length * typing_speed); + } // first message should be instant if(conversation_id != conversation_count) { return; // Do not add messages to old conversation @@ -303,7 +306,13 @@ function Dialog(chat_partner) { } } - this.me = async function(message) { + this.me = async function(message, will_be_flagged) { + await wait(1500); // give me some time to read + await type_message(message); + hit_send_button(); + await local_message_processing(will_be_flagged); + clear_input_field(); + release_send_button(); await post_message(this, message, true); } this.you = async function(message) { @@ -311,6 +320,58 @@ function Dialog(chat_partner) { } } +async function type_message(message) { + clear_input_field(); // just to be sure + let text = document.getElementById('message_input_data').firstChild; + + let lines = split_text_into_lines(message, 22); + for(let line of lines) { + text.data = ''; + for(let c of line) { + await wait(typing_speed); + text.data += c; + } + await wait(20); // otherwise it's too fast + } +} + +function hit_send_button() { + document.getElementById('message_submit_button').setAttribute('fill', 'white'); + document.getElementById('message_submit_box').setAttribute('fill', '#888888'); +} + +function release_send_button() { + document.getElementById('message_submit_button').setAttribute('fill', 'black'); + document.getElementById('message_submit_box').setAttribute('fill', '#CCCCCC'); +} + +function clear_input_field() { + let element = document.getElementById('message_input_data') + removeAllChildren(element); + element.appendChild(document.createTextNode('')); +} + +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(1500); + 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(1500); + text_element.setAttribute('fill', 'white'); + box.setAttribute('fill', 'blue'); + } + indicator.data = 'encrypting message'; + await wait(200); + indicator.data = 'sending message'; + await wait(200); + indicator.data = 'message was sent'; +} + async function dialog_ven() { let d = new Dialog('Ven'); await d.me("hej"); @@ -324,7 +385,7 @@ async function dialog_ven() { await d.me('Det lyder overhovedet ikke rart. Hvorfor vil de gøre det?'); await d.you('De siger at det er for at beskytte børn på nettet.'); await d.you('Men det giver ikke meget mening'); - await d.me('Alle vores beskeder skal scannes på grund af børn på nettet? Det lyder dumt!'); + await d.me('Alle vores beskeder skal scannes på grund af børn på nettet? Det lyder dumt!', true); await d.you('Her kan du læse mere om det:'); await d.you('https://chatcontrol.eu'); } @@ -342,11 +403,12 @@ async function dialog_kaereste() { await d.you('hej, jeg har lige tænkt på dig!'); await d.you('og derfor har jeg taget et sexet billede'); await d.you('#kaereste_foto'); - await d.me('tak. Det har jeg savnet!'); + await d.me('tak. Det har jeg savnet!', true); await d.me('du ser stadig så ung ud.'); await d.me('Jeg tror at vi skal være forsigtige, fordi der er en overvågning af vores beskeder'); await d.you('What the fuck??? Hvem overvågner os?????'); - await d.me('Ingen lige nu. Men EU\'en vil forpligte tilbyderne af messagingtjenester til at scanne alle beskeder'); + await d.me('Det kan være at chattilbyderen gør det, fordi de har lov til det'); + await d.me('Men i fremtiden vil det faktisk blive forpligtende at scanne beskeder i EU\'en'); await d.me('Og hvis der er beskeder som "ligner" børneborno får politiet en kopi af dem'); await d.you('Jeg vil hellere ikke at politiet får mine nøgenbilleder. Det er min krop og jeg vil selv bestemme over det!'); } @@ -365,13 +427,26 @@ async function dialog_kaereste() { + + +status + + + + + +SEND + Dine kontakter - + Ven Mor Kæreste❤ +Politi +Chat Support +nabopige