ycxc

public/assets/js/app.js

@@ -726,6 +726,51 @@ document.addEventListener('DOMContentLoaded', () => {
   });
   document.addEventListener('pkt:open-consent', openConsentModal);
 
+  const avatarPreviewClassPrefixes = [
+    'pkt-avatar--head-',
+    'pkt-avatar--hair-',
+    'pkt-avatar--beard-',
+    'pkt-avatar--glasses-',
+  ];
+
+  const updateAvatarPreview = (form) => {
+    const preview = form.querySelector('[data-avatar-preview] .pkt-avatar');
+    if (!preview) return;
+
+    const readValue = (field) => {
+      const checked = form.querySelector(`[data-avatar-field="${field}"]:checked`);
+      if (checked) return checked.value;
+      const input = form.querySelector(`[data-avatar-field="${field}"]`);
+      return input ? input.value : '';
+    };
+    const readColor = (field) => {
+      const checked = form.querySelector(`[data-avatar-field="${field}"]:checked`);
+      return checked ? checked.getAttribute('data-avatar-color') || '' : '';
+    };
+
+    avatarPreviewClassPrefixes.forEach((prefix) => {
+      Array.from(preview.classList)
+        .filter((className) => className.startsWith(prefix))
+        .forEach((className) => preview.classList.remove(className));
+    });
+
+    preview.classList.add(`pkt-avatar--head-${readValue('avatar_head_shape')}`);
+    preview.classList.add(`pkt-avatar--hair-${readValue('avatar_hair_style')}`);
+    preview.classList.add(`pkt-avatar--beard-${readValue('avatar_beard_style')}`);
+    preview.classList.add(`pkt-avatar--glasses-${readValue('avatar_glasses_style')}`);
+    preview.style.setProperty('--avatar-skin', readColor('avatar_skin_tone'));
+    preview.style.setProperty('--avatar-hair', readColor('avatar_hair_color'));
+    preview.style.setProperty('--avatar-eye', readColor('avatar_eye_color'));
+  };
+
+  document.querySelectorAll('[data-avatar-builder]').forEach((form) => {
+    updateAvatarPreview(form);
+    form.querySelectorAll('[data-avatar-field]').forEach((field) => {
+      field.addEventListener('change', () => updateAvatarPreview(form));
+      field.addEventListener('input', () => updateAvatarPreview(form));
+    });
+  });
+
   document.querySelectorAll('[data-nav-events]').forEach(link => {
     link.addEventListener('click', async () => {
       if (window.location.pathname === '/' && window.location.hash === '#events') {