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

@@ -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;
   }
@@ -217,21 +219,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.you('Det tager de højde for. Aflytningen vil ske før krypteringen på din telefon!');
-  await d.me('Det lyder overhoved ikke rart. Hvorfor vil de gøre det?');
+  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 +241,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)')
 }
 
 ]]>
 </script>
 
-<!-- [left] contact name view -->
+<!-- [right] contact name view -->
-<rect x="0" y="0" width="100%" height="10%" fill="yellow" />
+<rect x="100%" y="0" width="100%" height="10%" fill="yellow" />
-<polyline points="0,20 20,0 20,40" fill="blue" onclick="swipe_viewport()" />
+<polyline points="300,20 320,0 320,40" fill="blue" onclick="swipe_viewport()" /> <!-- XXX: these polyline points depend on the svg width -->
-<text x="50" y="30" id="contact_indicator">loading...</text>
+<text x="125%" y="30" id="contact_indicator">loading...</text>
 
-<!-- [left] messages view -->
+<!-- [right] messages view -->
-<rect x="0" y="10%" width="100%" height="90%" style="stroke: green; stroke-width: 10px" fill="blue" />
+<rect x="100%" y="10%" width="100%" height="90%" style="stroke: green; stroke-width: 10px" fill="blue" />
-<rect id="messages_background" x="5%" y="15%" z="2" width="90%" height="85%" fill="pink" />
+<rect id="messages_background" x="105%" y="15%" z="2" width="90%" height="85%" fill="pink" />
 <g id="messages"></g>
 
-<!-- [right] contact list -->
+<!-- [left] contact list -->
-<rect x="100%" y="0" width="100%" height="10%" fill="yellow" />
+<rect x="0" y="0" width="100%" height="10%" fill="yellow" />
-<text x="120%" y="30">Dine kontakter</text>
+<text x="20%" y="30">Dine kontakter</text>
-<rect x="100%" y="10%" width="100%" height="100%" style="stroke: green; stroke-width: 10px" fill="aqua" />
+<rect x="0" y="10%" width="100%" height="100%" style="stroke: green; stroke-width: 10px" fill="aqua" />
 
-<text x="105%" y="15%" onclick="start_chat('Ven')">Ven</text>
+<text x="5%" y="15%" onclick="start_chat('Ven')">Ven</text>
-<text x="105%" y="20%" onclick="start_chat('Mor')">Mor</text>
+<text x="5%" y="20%" onclick="start_chat('Mor')">Mor</text>
-<text x="105%" y="25%" onclick="start_chat('Kæreste')">Kæreste&#10084;</text>
+<text x="5%" y="25%" onclick="start_chat('Kæreste')">Kæreste&#10084;</text>
 
 </svg>