Implement image messages

chatapp.svg

@@ -11,18 +11,26 @@
      overflow="auto"
      >
 <defs>
-  <symbol id="kaereste_foto">
+  <symbol id="kaereste_foto" width="60" height="200">
-    <circle cx="20" cy="20" r="20" fill="blue" />
+    <g style="fill: pink; stroke: pink;">
-    <line x1="20" y1="40" x2="20" y2="60" stroke="blue" />
+      <circle cx="20" cy="20" r="20" />
-    <ellipse cx="20" cy="110" rx="10" ry="50" fill="green" />
+      <line x1="20" y1="40" x2="20" y2="60" />
+      <ellipse cx="20" cy="110" rx="10" ry="50" />
       <!-- left arm -->
       <polyline fill="none"
-              stroke="blue"
+                points="15,70 5,50 0,40" />
-              points="15,70 5,50 0,30" />
       <!-- right arm -->
       <polyline fill="none"
-              stroke="blue"
+                points="25,70 35,50 40,40" />
-              points="25,70 35,50 40,30" />
+      <!-- left leg -->
+      <polyline fill="none"
+                points="15,155 5,135 0,125" />
+      <!-- right leg -->
+      <polyline fill="none"
+                points="25,155 35,135 40,125" />
+      <!-- the thing -->
+      <text x="14" y="160" style="font: bold 20px sans-serif" fill="black">?</text>
+    </g>
   </symbol>
 </defs>
 <script type="application/ecmascript">
@@ -79,7 +87,7 @@ function split_text_into_lines(text, upper_line_length) {
 /// *ChatMessages are owned by a Dialog.
 function TextChatMessage(message_text, is_myself) {
   let lines = split_text_into_lines(message_text, 28);
-  let bubble_color = (is_myself)? 'white': 'pink';
+  let bubble_color = (is_myself)? 'white': '#DDFF66';
   let container = document.getElementById('messages');
 
   // attributes
@@ -114,11 +122,10 @@ function TextChatMessage(message_text, is_myself) {
       height_so_far += line_height;
     });
 
-    container.appendChild(group);
     group.appendChild(text); // needs to be part of the DOM *now*
+    container.appendChild(group);
     let bubble = create_bubble(text, bubble_color);
     group.appendChild(bubble);
-    container.appendChild(group);
     redraw_on_top(text);
 
     this.height = bubble.getBBox().height + bubble_spacing;
@@ -136,16 +143,36 @@ function TextChatMessage(message_text, is_myself) {
 ///
 /// *ChatMessages are owned by a Dialog.
 function ImageChatMessage(symbol_id, is_myself) {
+  let container = document.getElementById('messages');
+  let bubble_color = (is_myself)? 'white': '#DDFF66';
+
   // attributes
   this.height = 0; // height on screen when fully visible
   this.group = null; // a <g> with a transform=translate(0,y_shift) attribute
 
   this.draw = function(y_offset, y_shift) {
-    console.error('draw() is not implemented yet');
+    let group = create_svg_node('g', {'transform': `translate(0, ${y_shift})`});
+
+    let x = (is_myself ? 190 : 110);
+    let img = create_svg_node('use', {
+        'href': symbol_id,
+        x: `${x}%`,
+        y: y_offset,
+    });
+
+    group.appendChild(img); // needs to be part of the DOM *now*
+    container.appendChild(group);
+    let bubble = create_bubble(img, bubble_color);
+    group.appendChild(bubble);
+    redraw_on_top(img);
+
+    this.height = bubble.getBBox().height + bubble_spacing;
+    this.group = group;
   }
 
   this.shift_y_pos = function(by) {
-    console.error('shift_y_pos() is not implemented yet');
+    redraw_on_top(document.getElementById('contact_name_box'));
+    this.group.setAttribute('transform', `translate(0, ${by})`);
   }
 }
 
@@ -314,7 +341,14 @@ async function dialog_kaereste() {
   await d.me('hej smukkeste');
   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('(silly naked stick figure image here)')
+  await d.you('#kaereste_foto');
+  await d.me('tak. Det har jeg savnet!');
+  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('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!');
 }
 
 ]]>