Avatar

public/assets/js/app.js

@@ -762,11 +762,97 @@ document.addEventListener('DOMContentLoaded', () => {
     image.src = url;
   };
 
+  const updateAvatarOptionPreviews = (form) => {
+    const checked = form.querySelector('[data-avatar-field="avatar_preset"]:checked');
+    const baseSeed = checked?.value || '';
+    if (!baseSeed) return;
+
+    const currentValues = {};
+    [
+      'avatar_lorelei_eyes_variant',
+      'avatar_lorelei_eyebrows_variant',
+      'avatar_lorelei_mouth_variant',
+      'avatar_lorelei_glasses_variant',
+      'avatar_lorelei_hair_variant',
+      'avatar_lorelei_beard_variant',
+      'avatar_lorelei_earrings_variant',
+    ].forEach((field) => {
+      const checkedField = form.querySelector(`[data-avatar-field="${field}"]:checked`);
+      currentValues[field] = checkedField ? checkedField.value : '';
+    });
+
+    const fieldMap = {
+      avatar_lorelei_eyes_variant: 'eyesVariant',
+      avatar_lorelei_eyebrows_variant: 'eyebrowsVariant',
+      avatar_lorelei_mouth_variant: 'mouthVariant',
+      avatar_lorelei_glasses_variant: 'glassesVariant',
+      avatar_lorelei_hair_variant: 'hairVariant',
+      avatar_lorelei_beard_variant: 'beardVariant',
+      avatar_lorelei_earrings_variant: 'earringsVariant',
+    };
+
+    form.querySelectorAll('[data-avatar-option-thumb]').forEach((image) => {
+      const field = image.getAttribute('data-avatar-option-field') || '';
+      const value = image.getAttribute('data-avatar-option-value') || '';
+      const seed = field === 'avatar_preset' ? value : baseSeed;
+      if (!seed) return;
+
+      const params = new URLSearchParams({ seed });
+      Object.entries(currentValues).forEach(([currentField, currentValue]) => {
+        const param = fieldMap[currentField];
+        if (!param) return;
+        const appliedValue = currentField === field ? value : currentValue;
+        if (appliedValue) params.set(param, appliedValue);
+      });
+
+      image.src = `/api/avatar?${params.toString()}`;
+    });
+  };
+
   document.querySelectorAll('[data-avatar-builder]').forEach((form) => {
     updateAvatarPreview(form);
+    updateAvatarOptionPreviews(form);
     form.querySelectorAll('[data-avatar-field]').forEach((field) => {
-      field.addEventListener('change', () => updateAvatarPreview(form));
-      field.addEventListener('input', () => updateAvatarPreview(form));
+      field.addEventListener('change', () => {
+        updateAvatarPreview(form);
+        updateAvatarOptionPreviews(form);
+      });
+      field.addEventListener('input', () => {
+        updateAvatarPreview(form);
+        updateAvatarOptionPreviews(form);
+      });
+    });
+
+    const setActiveComponentPanel = (field) => {
+      form.querySelectorAll('[data-avatar-component-tab]').forEach((button) => {
+        const active = button.getAttribute('data-avatar-component-tab') === field;
+        button.classList.toggle('is-active', active);
+        button.setAttribute('aria-selected', active ? 'true' : 'false');
+      });
+      form.querySelectorAll('[data-avatar-component-panel]').forEach((panel) => {
+        panel.classList.toggle('is-active', panel.getAttribute('data-avatar-component-panel') === field);
+      });
+    };
+
+    form.querySelectorAll('[data-avatar-component-tab]').forEach((button) => {
+      button.addEventListener('click', () => {
+        const field = button.getAttribute('data-avatar-component-tab');
+        if (field) setActiveComponentPanel(field);
+      });
+    });
+
+    [
+      'avatar_lorelei_eyes_variant',
+      'avatar_lorelei_eyebrows_variant',
+      'avatar_lorelei_mouth_variant',
+      'avatar_lorelei_glasses_variant',
+      'avatar_lorelei_hair_variant',
+      'avatar_lorelei_beard_variant',
+      'avatar_lorelei_earrings_variant',
+    ].forEach((field) => {
+      form.querySelectorAll(`[data-avatar-field="${field}"]`).forEach((input) => {
+        input.addEventListener('change', () => setActiveComponentPanel(field));
+      });
     });
 
     const avatarPrefixes = [
@@ -812,6 +898,7 @@ document.addEventListener('DOMContentLoaded', () => {
         if (label) label.textContent = index === 0 ? 'Neue Auswahl' : `Variante ${index + 1}`;
       });
       updateAvatarPreview(form);
+      updateAvatarOptionPreviews(form);
     });
   });