diff --git a/chatapp.svg b/chatapp.svg
index e288d2f..405b857 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"
>
@@ -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;
@@ -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 = (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 = 6;
+ 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}%`);
+ });
}
}
@@ -133,9 +161,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;
}
@@ -217,21 +247,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,30 +269,30 @@ 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)')
}
]]>
-
-
-
-loading...
+
+
+
+loading...
-
-
-
+
+
+
-
-
-Dine kontakter
-
+
+
+Dine kontakter
+
-Ven
-Mor
-Kæreste❤
+Ven
+Mor
+Kæreste❤