Put contact list into json structure

img/chatapp.svg

@@ -7,7 +7,7 @@
      width="300"
      height="600" 
      viewBox="0 0 300 600"
-     onload="start_chat('Ven')"
+     onload="run()"
      overflow="auto"
      style="font-family: sans; border-radius: 10px;"
      >
@@ -90,10 +90,9 @@ const typing_speed = 50;
 var conversation_count = 0;
 var current_dialog = null;
 
+var current_discussion_index = parseInt(new URLSearchParams(location.search).get('discussion') ?? 0);
 var current_language = new URLSearchParams(location.search).get('lang') ?? 'da';
 
-var current_dialog_fn = null;
-
 /// SVG 1.1 doesn't do proper text splitting into several lines.
 /// we need to do it ourselves.
 function split_text_into_lines(text, upper_line_length) {
@@ -393,36 +392,17 @@ function removeAllChildren(parentNode) {
   }
 }
 
-function start_chat(who) {
+function start_chat(index) {
+  current_discussion_index = index;
+
+  let contact = contact_list[current_language][index];
+  let who = contact.name;
   let indicator = document.getElementById('contact_indicator');
   indicator.childNodes[0].data = `Kontakt: ${who}`;
   removeAllChildren(document.getElementById('messages'));
   swipe_viewport();
 
-  switch(who) {
+  contact.dialog();
-    case 'Ven':
-      current_dialog_fn = dialog_ven;
-      break;
-    case 'Mor':
-      current_dialog_fn = dialog_mor;
-      break;
-    case 'Kæreste':
-      current_dialog_fn = dialog_kaereste;
-      break;
-    case 'Politiven':
-      current_dialog_fn = dialog_politi;
-      break;
-    case 'ChatSupport':
-      current_dialog_fn = dialog_support;
-      break;
-    case 'Nabopige':
-      current_dialog_fn = dialog_nabopige;
-      break;
-    default:
-      alert(`kontakten ${who} er ikke implementeret endnu`);
-      return;
-  }
-  current_dialog_fn();
 }
 
 function Dialog() {
@@ -557,17 +537,10 @@ document.addEventListener(
 )
 
 async function switch_language(language_code) {
-  current_language = language_code;
+  let url = new URL(document.location);
-  removeAllChildren(document.getElementById('messages'));
+  url.searchParams.set('lang', language_code);
-  await current_dialog_fn();
+  url.searchParams.set('discussion', current_discussion_index);
-}
+  location.href = url;
-
-async function dialog_ven() {
-  if(current_language == "da") {
-    await dialog_ven_da();
-  } else {
-    await dialog_ven_en();
-  }
 }
 
 async function dialog_ven_da() {
@@ -610,14 +583,6 @@ async function dialog_ven_en() {
   await d.end('Your friend is offline now');
   }
 
-async function dialog_mor() {
-  if(current_language == "da") {
-    await dialog_mor_da();
-  } else {
-    await dialog_mor_en();
-  }
-}
-
 async function dialog_mor_da() {
   let d = new Dialog();
   current_dialog = d;
@@ -656,14 +621,6 @@ async function dialog_mor_en() {
   await d.end('Your mom is offline now');
 }
 
-async function dialog_kaereste() {
-  if(current_language == "da") {
-    await dialog_kaereste_da();
-  } else {
-    await dialog_kaereste_en();
-  }
-}
-
 async function dialog_kaereste_da() {
   let d = new Dialog();
   current_dialog = d;
@@ -700,14 +657,6 @@ async function dialog_kaereste_en() {
   await d.end('Your better half is offline now');
 }
 
-async function dialog_politi() {
-  if(current_language == "da") {
-    await dialog_politi_da();
-  } else {
-    await dialog_politi_en();
-  }
-}
-
 async function dialog_politi_da() {
   let d = new Dialog();
   current_dialog = d;
@@ -736,14 +685,6 @@ async function dialog_politi_en() {
   await d.end('The police officer is offline now');
 }
 
-async function dialog_support() {
-  if(current_language == "da") {
-    await dialog_support_da();
-  } else {
-    await dialog_support_en();
-  }
-}
-
 async function dialog_support_da() {
   let d = new Dialog();
   current_dialog = d;
@@ -778,14 +719,6 @@ async function dialog_support_en() {
   await d.end('The chat support is offline now');
 }
 
-async function dialog_nabopige() {
-  if(current_language == "da") {
-    await dialog_nabopige_da();
-  } else {
-    await dialog_nabopige_en();
-  }
-}
-
 async function dialog_nabopige_da() {
   let d = new Dialog();
   current_dialog = d;
@@ -832,7 +765,62 @@ async function dialog_nabopige_en() {
   await d.end('The girl is gone now');
 }
 
+const contact_list = {
+  "da": [
+    {name: "Ven",
+     dialog: dialog_ven_da},
+    {name: "Mor",
+     dialog: dialog_mor_da},
+    {name: "Kæreste ❤️",
+     dialog: dialog_kaereste_da},
+    {name: "Politiven",
+     dialog: dialog_politi_da},
+    {name: "Chat support",
+     dialog: dialog_support_da},
+    {name: "Nabopige",
+     dialog: dialog_nabopige_da}
+  ],
+  "en": [
+    {name: "Friend",
+     dialog: dialog_ven_en},
+    {name: "Mom",
+     dialog: dialog_mor_en},
+    {name: "Sweetheart ❤️",
+     dialog: dialog_kaereste_en},
+    {name: "Police friend",
+     dialog: dialog_politi_en},
+    {name: "Chat support",
+     dialog: dialog_support_en},
+    {name: "Neighborhood girl",
+     dialog: dialog_nabopige_en}
+  ]
+};
 
+function fill_contact_list(lang) {
+  let x = 15;
+  let y = 75;
+  let y_step = 25;
+  let group = document.getElementById('contacts');
+  removeAllChildren(group);
+
+  let contacts = contact_list[lang];
+  for(let i=0; i < contacts.length; i++) {
+    let text = create_svg_node('text', {
+      x: x,
+      y: y
+    });
+    y += y_step;
+    let contact = contacts[i];
+    text.onclick = function() { start_chat(i) };
+    text.appendChild(document.createTextNode(contact.name));
+    group.appendChild(text);
+  }
+}
+
+function run() {
+   fill_contact_list(current_language);
+   start_chat(current_discussion_index);
+}
 ]]>
 </script>
 
@@ -868,11 +856,7 @@ async function dialog_nabopige_en() {
 <text x="60" y="30">Dine kontakter</text>
 <rect x="0" y="50" width="300" height="550" style="stroke: green; stroke-width: 0px" fill="white" />
 
-<text x="15" y="75" onclick="start_chat('Ven')">Ven</text>
+<!-- contact list -->
-<text x="15" y="100" onclick="start_chat('Mor')">Mor</text>
+<g id="contacts"></g>
-<text x="15" y="125" onclick="start_chat('Kæreste')">Kæreste&#10084;</text>
-<text x="15" y="150" onclick="start_chat('Politiven')">Politiven</text>
-<text x="15" y="175" onclick="start_chat('ChatSupport')">Chat Support</text>
-<text x="15" y="200" onclick="start_chat('Nabopige')">nabopige</text>
 
 </svg>