additional new face stuff

face/var/www/html/face.js

@@ -26,6 +26,7 @@
   const eyeR = document.getElementById("eyeR");
   const eyesGroup = document.getElementById("eyesGroup");
   const mouth = document.getElementById("mouth");
+  const mouthHi = document.getElementById("mouthHi");
 
   // Touch overlay show
   let overlayTimer = null;
@@ -46,6 +47,12 @@
     el.setAttribute("stroke-linecap", "round");
   }
 
+  function applyHighlightStyle(el) {
+    // Inlay/Highlight wie Vorlage (heller, ohne Stroke)
+    el.setAttribute("fill", "rgba(230,255,255,0.35)");
+    el.setAttribute("stroke", "none");
+  }
+
   // Helpers: Ellipse path (absolute, clean)
   function ellipsePath(cx, cy, rx, ry) {
     return `M ${cx-rx},${cy}
@@ -93,38 +100,90 @@
 
 
     happy: {
-      // Eyes: thick, filled, closed (no "eyebrow" look), positioned lower
+      // Augen: Außen-U minus Innen-U (evenodd) -> echtes "U-Modul" wie Vorlage
-      eyeL: `M 350,308
+      eyeL: `M 345,230
-	     Q 395,252 440,308
+	     Q 395,185 445,230
-	     Q 395,276 350,308 Z`,
+	     L 445,312
+	     Q 395,285 345,312
+	     Z
+	     M 368,240
+	     Q 395,214 422,240
+	     L 422,296
+	     Q 395,276 368,296
+	     Z`,
 
-      eyeR: `M 560,308
+      eyeR: `M 555,230
-	     Q 605,252 650,308
+	     Q 605,185 655,230
-	     Q 605,276 560,308 Z`,
+	     L 655,312
+	     Q 605,285 555,312
+	     Z
+	     M 578,240
+	     Q 605,214 632,240
+	     L 632,296
+	     Q 605,276 578,296
+	     Z`,
 
+      // Mund: Banana-Band (Außen) wie Vorlage (kleiner, bis etwa Augenmitte)
+      mouth: `M 395,360
+	      Q 500,344 605,360
+	      Q 640,410 610,468
+	      Q 500,520 390,468
+	      Q 360,410 395,360
+	      Z`,
 
-      // Mouth: smaller + centered (about "up to mid-eye width")
+      // Mund-Highlight (Inlay): kleiner, etwas höher
-      mouth: `M 410,392
+      mouthHi: `M 415,382
-	      Q 500,475 590,392
+		Q 500,368 585,382
-	      Q 565,452 500,452
+		Q 610,412 592,446
-	      Q 435,452 410,392 Z`,
+		Q 500,476 408,446
+		Q 390,412 415,382
+		Z`,
 
-      // Speaking visemes: same style family, not oversized
+      // Sprechen: gleiche Familie, nur etwas "tiefer" öffnen
       visemes: [
-	`M 410,392
+	`M 395,360
-	 Q 500,475 590,392
+	 Q 500,344 605,360
-	 Q 565,452 500,452
+	 Q 640,410 610,468
-	 Q 435,452 410,392 Z`,
+	 Q 500,520 390,468
+	 Q 360,410 395,360
+	 Z`,
 
-	`M 402,384
+	`M 388,354
-	 Q 500,492 598,384
+	 Q 500,336 612,354
-	 Q 570,466 500,466
+	 Q 652,414 618,484
-	 Q 430,466 402,384 Z`,
+	 Q 500,546 382,484
+	 Q 348,414 388,354
+	 Z`,
 
-	`M 392,374
+	`M 380,346
-	 Q 500,512 608,374
+	 Q 500,328 620,346
-	 Q 575,484 500,484
+	 Q 665,420 625,505
-	 Q 425,484 392,374 Z`,
+	 Q 500,575 375,505
+	 Q 335,420 380,346
+	 Z`,
+      ],
+
+      visemesHi: [
+	`M 415,382
+	 Q 500,368 585,382
+	 Q 610,412 592,446
+	 Q 500,476 408,446
+	 Q 390,412 415,382
+	 Z`,
+
+	`M 410,378
+	 Q 500,362 590,378
+	 Q 620,414 600,456
+	 Q 500,492 400,456
+	 Q 380,414 410,378
+	 Z`,
+
+	`M 405,372
+	 Q 500,354 595,372
+	 Q 632,418 608,470
+	 Q 500,510 392,470
+	 Q 368,418 405,372
+	 Z`,
       ],
 
       allowLook: false,
@@ -294,6 +353,12 @@
   function render() {
     const cfg = ICONS[state.emotion] ?? ICONS.neutral;
 
+    // evenodd erlaubt "Aussparungen" (Innenpfade) in Augen/Mund
+    eyeL.setAttribute("fill-rule", "evenodd");
+    eyeR.setAttribute("fill-rule", "evenodd");
+    mouth.setAttribute("fill-rule", "evenodd");
+    mouthHi.setAttribute("fill-rule", "evenodd");>
+
     applyStyle(eyeL);
     applyStyle(eyeR);
     applyStyle(mouth);
@@ -304,6 +369,16 @@
     const mouthPath = (state.speaking && cfg.visemes) ? cfg.visemes[visemeIndex] : cfg.mouth;
     mouth.setAttribute("d", mouthPath);
 
+    // Highlight/Inlay
+    if (cfg.mouthHi) {
+      const mouthHiPath = (state.speaking && cfg.visemesHi) ? cfg.visemesHi[visemeIndex] : cfg.mouthHi;
+      mouthHi.style.display = "";
+      applyHighlightStyle(mouthHi);
+      mouthHi.setAttribute("d", mouthHiPath);
+    } else {
+      mouthHi.style.display = "none";
+    }
+
     applyLook();
   }
 

face/var/www/html/index.html

@@ -25,6 +25,7 @@
           <path id="eyeR" d="" />
         </g>
         <path id="mouth" d="" />
+        <path id="mouthHi" d="" />
       </g>
     </svg>