From 06782135161c09c2bda818671f44bbc5adca96c7 Mon Sep 17 00:00:00 2001 From: AsbjornOlling Date: Tue, 16 Aug 2022 12:20:42 +0200 Subject: [PATCH 1/4] fix some small language things --- chatapp.svg | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/chatapp.svg b/chatapp.svg index e288d2f..d1f0bc6 100644 --- a/chatapp.svg +++ b/chatapp.svg @@ -217,21 +217,21 @@ async function dialog_ven() { await d.you('Har du hørt om den nye EU lov "ChatControl"?'); await d.me("nej, det har jeg ikke"); await d.me("hvad handler det om?"); - await d.you('EU comissionen planlægger at læse alle chatbeskeder i EUen'); + await d.you('EU kommissionen planlægger at læse alle chatbeskeder i EU'); await d.me('Ja, men vi krypterer jo vores beskeder? Tough luck!'); - await d.you('Det tager de højde for. Aflytningen vil ske før krypteringen på din lokale telefon!'); - await d.me('Det lyder overhoved ikke rart. Hvorfor vil de gøre det?'); + await d.you('Det tager de højde for. Aflytningen vil ske før krypteringen på din telefon!'); + 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.you('Her kan du finde mere informationer om det:'); + await d.you('Her kan du læse mere om det:'); await d.you('https://chatcontrol.eu'); } async function dialog_mor() { let d = new Dialog('Mor'); await d.you("Jeg har fundet nogle gamle familiebilleder fra vores ferie 10 år siden"); - await d.you("Her spiller du på stranden"); + await d.you("Her leger du på stranden"); await d.you("(naked stick figure image here)"); } @@ -239,7 +239,7 @@ async function dialog_kaereste() { let d = new Dialog('Kæreste'); await d.me('hej smukkeste'); await d.you('hej, jeg har lige tænkt på dig!'); - await d.you('og derfor har jeg lavet an sexy billede'); + await d.you('og derfor har jeg taget et sexet billede'); await d.you('(silly naked stick figure image here)') } -- 2.43.4 From 067afdb1872e2571c73d59a787e5931e89bb0bac Mon Sep 17 00:00:00 2001 From: AsbjornOlling Date: Tue, 16 Aug 2022 13:04:35 +0200 Subject: [PATCH 2/4] move contacts list to left of messages this is the common ui pattern in most chat apps. I think it feels more natural. --- chatapp.svg | 32 +++++++++++++++++--------------- 1 file changed, 17 insertions(+), 15 deletions(-) diff --git a/chatapp.svg b/chatapp.svg index d1f0bc6..7df9cb7 100644 --- a/chatapp.svg +++ b/chatapp.svg @@ -73,7 +73,7 @@ function ChatMessage(message_text, is_myself) { /// Render the chat message on the screen this.draw = function() { let text = document.createElementNS(svgns, 'text'); - let x = (is_myself)?10 :50; + let x = 100 + (is_myself ? 10 : 50); text.setAttribute('x', `${x}%`); lines.forEach(function(line) { @@ -133,9 +133,11 @@ function swipe_viewport() { let coords = svg.getAttribute('viewBox').split(' '); let x = parseInt(coords.shift()); if(x == 0) { + // moving from messages to contacts var step = 5; var end = width; } else { + // moving from contacts to messages var step = -5; var end = 0; } @@ -246,23 +248,23 @@ async function dialog_kaereste() { ]]> - - - -loading... + + + +loading... - - - + + + - - -Dine kontakter - + + +Dine kontakter + -Ven -Mor -Kæreste❤ +Ven +Mor +Kæreste❤ -- 2.43.4 From 4054d6ac48d7059a3fb190ee0d64a35b7d041579 Mon Sep 17 00:00:00 2001 From: AsbjornOlling Date: Tue, 16 Aug 2022 21:35:51 +0200 Subject: [PATCH 3/4] partially implemented chat bubbles --- chatapp.svg | 36 ++++++++++++++++++++++++++++++++---- 1 file changed, 32 insertions(+), 4 deletions(-) diff --git a/chatapp.svg b/chatapp.svg index 7df9cb7..4f25ba5 100644 --- a/chatapp.svg +++ b/chatapp.svg @@ -6,7 +6,7 @@ xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="500" - viewBox="300 0 300 500" + viewBox="0 0 300 500" onload="start_chat('Ven')" overflow="auto" > @@ -65,16 +65,19 @@ function split_text_into_lines(text, upper_line_length) { /// /// ChatMessages's are owned by a Dialog. function ChatMessage(message_text, is_myself) { - let lines = split_text_into_lines(message_text, 14); - let tspans = []; + let lines = split_text_into_lines(message_text, 28); + let tspans = [] + let bubbles = []; let container = document.getElementById('messages'); /// Render the chat message on the screen this.draw = function() { let text = document.createElementNS(svgns, 'text'); - let x = 100 + (is_myself ? 10 : 50); + let x = (is_myself ? 190 : 110); text.setAttribute('x', `${x}%`); + text.setAttribute('font-size', '14px'); + text.setAttribute('text-anchor', is_myself ? 'end' : 'start'); lines.forEach(function(line) { let y = tspan_y_pos(chat_lines_count++); @@ -90,6 +93,26 @@ function ChatMessage(message_text, is_myself) { tspans.push(tspan); }); + // done making text + // it must be in the DOM for getBBox() to work + container.appendChild(text); + + // make chat bubble + const padding = 7; + const textbox = text.getBBox(); + const y_percent = Math.round(((textbox.y - padding) / height) * 100); + const bubble = document.createElementNS(svgns, 'rect'); + bubble.setAttribute('x', textbox.x-padding); + bubble.setAttribute('y', `${y_percent}%`); + bubble.setAttribute('width', textbox.width + 2*padding); + bubble.setAttribute('height', textbox.height + 2*padding); + bubble.setAttribute('rx', 8); + bubble.setAttribute('fill', 'black'); + bubbles.push(bubble); + + // put stuff in dom in the right order + container.appendChild(bubble); + container.removeChild(text); container.appendChild(text); } @@ -115,6 +138,11 @@ function ChatMessage(message_text, is_myself) { } tspan.setAttribute('visibility', visibility); }); + bubbles.forEach(bubble => { + const old = parseInt(bubble.getAttribute('y').split('%')[0]); + const new_value = old + by; + bubble.setAttribute('y', `${new_value}%`); + }); } } -- 2.43.4 From f66a4d56ac2c04e2611e949c6c9454d38061ba9c Mon Sep 17 00:00:00 2001 From: AsbjornOlling Date: Wed, 17 Aug 2022 15:32:50 +0200 Subject: [PATCH 4/4] slightly prettier chat bubbles --- chatapp.svg | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/chatapp.svg b/chatapp.svg index 4f25ba5..405b857 100644 --- a/chatapp.svg +++ b/chatapp.svg @@ -22,7 +22,7 @@ const svgns = "http://www.w3.org/2000/svg"; const width = 300; const height = 500; -const line_height = 5; +const line_height = 6; const max_visible_lines = 10; const messages_y_offset = 20; const typing_speed = 70; @@ -98,7 +98,7 @@ function ChatMessage(message_text, is_myself) { container.appendChild(text); // make chat bubble - const padding = 7; + const padding = 6; const textbox = text.getBBox(); const y_percent = Math.round(((textbox.y - padding) / height) * 100); const bubble = document.createElementNS(svgns, 'rect'); -- 2.43.4