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