ycyxcx

2026-07-24 21:43:37 +02:00
parent 9a5f1b1a5d
commit 0956a984cb
31 changed files with 326 additions and 266 deletions
--- a/src/App/AccountPages.php
+++ b/src/App/AccountPages.php
@@ -348,12 +348,13 @@ final class AccountPages
            'avatar_head_shape' => 'round',
            'avatar_hat_style' => 'none',
            'avatar_hat_color' => 'navy',
+            'avatar_outfit_style' => 'tee',
            'avatar_outfit_color' => 'slate',
        ];
        if ($profileSettings) {
            $profileSettings->ensureSchema();
        }
-        $stmt = $pdo?->prepare('SELECT u.email, u.status, p.display_name, p.first_name, p.last_name, p.zip, p.city, p.profession, p.languages, p.about, p.contact_phone, p.location_tracking_preference, p.avatar_preset, p.avatar_skin_tone, p.avatar_hair_style, p.avatar_hair_color, p.avatar_eye_color, p.avatar_beard_style, p.avatar_glasses_style, p.avatar_head_shape, p.avatar_hat_style, p.avatar_hat_color, p.avatar_outfit_color FROM users u LEFT JOIN user_profiles p ON p.user_id = u.id WHERE u.id = :id LIMIT 1');
+        $stmt = $pdo?->prepare('SELECT u.email, u.status, p.display_name, p.first_name, p.last_name, p.zip, p.city, p.profession, p.languages, p.about, p.contact_phone, p.location_tracking_preference, p.avatar_preset, p.avatar_skin_tone, p.avatar_hair_style, p.avatar_hair_color, p.avatar_eye_color, p.avatar_beard_style, p.avatar_glasses_style, p.avatar_head_shape, p.avatar_hat_style, p.avatar_hat_color, p.avatar_outfit_style, p.avatar_outfit_color FROM users u LEFT JOIN user_profiles p ON p.user_id = u.id WHERE u.id = :id LIMIT 1');
        $stmt?->execute(['id' => $userId]);
        $row = $stmt?->fetch(\PDO::FETCH_ASSOC);
        if ($row) {
@@ -420,7 +421,6 @@ final class AccountPages
            $section = 'profile';
        }
        $avatarOptions = Avatar::options();
-        $avatarPresetOptions = Avatar::presetOptions();

        return compact(
            'flash',
@@ -438,7 +438,6 @@ final class AccountPages
            'communityCanApply',
            'communityRestrictions',
            'avatarOptions',
-            'avatarPresetOptions',
            'section',
            'allowedSections'
        );
--- a/src/App/Avatar.php
+++ b/src/App/Avatar.php
@@ -10,14 +10,15 @@ final class Avatar
        return [
            'avatar_preset' => 'modern_01',
            'avatar_skin_tone' => 'warm',
-            'avatar_hair_style' => 'short',
+            'avatar_hair_style' => 'parted',
            'avatar_hair_color' => 'brown',
            'avatar_eye_color' => 'brown',
-            'avatar_beard_style' => 'none',
+            'avatar_beard_style' => 'short',
            'avatar_glasses_style' => 'none',
-            'avatar_head_shape' => 'round',
+            'avatar_head_shape' => 'oval',
            'avatar_hat_style' => 'none',
            'avatar_hat_color' => 'navy',
+            'avatar_outfit_style' => 'tee',
            'avatar_outfit_color' => 'slate',
        ];
    }
@@ -25,34 +26,33 @@ final class Avatar
    public static function options(): array
    {
        return [
-            'avatar_preset' => self::presetOptions(),
            'avatar_skin_tone' => [
-                'fair' => ['label' => 'Hell', 'color' => '#f5d7c2'],
-                'warm' => ['label' => 'Warm', 'color' => '#efc1a3'],
-                'golden' => ['label' => 'Gold', 'color' => '#dca57f'],
-                'deep' => ['label' => 'Tief', 'color' => '#a86d49'],
-                'rich' => ['label' => 'Kräftig', 'color' => '#7d4d31'],
+                'fair' => ['label' => 'Hell', 'color' => '#f6d7c1'],
+                'warm' => ['label' => 'Warm', 'color' => '#eec0a0'],
+                'golden' => ['label' => 'Gold', 'color' => '#d7a179'],
+                'deep' => ['label' => 'Tief', 'color' => '#9c633e'],
+                'rich' => ['label' => 'Kräftig', 'color' => '#6f432b'],
            ],
            'avatar_hair_style' => [
+                'parted' => 'Seitenscheitel',
                'short' => 'Kurz',
                'fade' => 'Fade',
-                'parted' => 'Seitlich',
                'curly' => 'Lockig',
-                'waves' => 'Wellen',
+                'waves' => 'Wellig',
                'bald' => 'Kahl',
            ],
            'avatar_hair_color' => [
-                'black' => ['label' => 'Schwarz', 'color' => '#1d1b1b'],
-                'brown' => ['label' => 'Braun', 'color' => '#5b392b'],
-                'blonde' => ['label' => 'Blond', 'color' => '#d7b15f'],
-                'red' => ['label' => 'Rot', 'color' => '#9e4f35'],
-                'gray' => ['label' => 'Grau', 'color' => '#767676'],
+                'black' => ['label' => 'Schwarz', 'color' => '#191919'],
+                'brown' => ['label' => 'Braun', 'color' => '#65442f'],
+                'blonde' => ['label' => 'Blond', 'color' => '#d3a053'],
+                'red' => ['label' => 'Rot', 'color' => '#9f5a34'],
+                'gray' => ['label' => 'Grau', 'color' => '#8f8c87'],
            ],
            'avatar_eye_color' => [
-                'brown' => ['label' => 'Braun', 'color' => '#5f4431'],
-                'hazel' => ['label' => 'Hasel', 'color' => '#7f6845'],
-                'green' => ['label' => 'Grün', 'color' => '#54704e'],
-                'blue' => ['label' => 'Blau', 'color' => '#4d6e92'],
+                'brown' => ['label' => 'Braun', 'color' => '#5e4330'],
+                'hazel' => ['label' => 'Hasel', 'color' => '#7c6848'],
+                'green' => ['label' => 'Grün', 'color' => '#4f6c52'],
+                'blue' => ['label' => 'Blau', 'color' => '#507196'],
            ],
            'avatar_beard_style' => [
                'none' => 'Ohne',
@@ -76,11 +76,17 @@ final class Avatar
                'cap' => 'Cap',
            ],
            'avatar_hat_color' => [
-                'navy' => ['label' => 'Navy', 'color' => '#38475f'],
-                'charcoal' => ['label' => 'Anthrazit', 'color' => '#3c3f45'],
-                'forest' => ['label' => 'Waldgrün', 'color' => '#48614d'],
-                'brick' => ['label' => 'Ziegel', 'color' => '#975244'],
-                'sand' => ['label' => 'Sand', 'color' => '#b79e79'],
+                'navy' => ['label' => 'Navy', 'color' => '#42526a'],
+                'charcoal' => ['label' => 'Anthrazit', 'color' => '#43464d'],
+                'forest' => ['label' => 'Waldgrün', 'color' => '#51634f'],
+                'brick' => ['label' => 'Ziegel', 'color' => '#9a5a47'],
+                'sand' => ['label' => 'Sand', 'color' => '#baa078'],
+            ],
+            'avatar_outfit_style' => [
+                'tee' => 'T-Shirt',
+                'hoodie' => 'Hoodie',
+                'polo' => 'Polo',
+                'crew' => 'Pullover',
            ],
            'avatar_outfit_color' => [
                'slate' => ['label' => 'Schiefer', 'color' => '#5f7387'],
@@ -92,29 +98,6 @@ final class Avatar
        ];
    }

-    public static function presetOptions(): array
-    {
-        $options = [];
-        for ($i = 1; $i <= 30; $i++) {
-            $id = sprintf('modern_%02d', $i);
-            $options[$id] = [
-                'label' => 'Modern ' . str_pad((string)$i, 2, '0', STR_PAD_LEFT),
-                'src' => self::presetPublicPath($id),
-            ];
-        }
-        return $options;
-    }
-
-    public static function presetPublicPath(string $preset): string
-    {
-        return '/assets/avatars/presets/' . rawurlencode($preset) . '.png';
-    }
-
-    public static function presetFilePath(string $preset): string
-    {
-        return dirname(__DIR__, 2) . '/public/assets/avatars/presets/' . $preset . '.png';
-    }
-
    public static function selectColumns(string $alias = 'p'): string
    {
        $columns = array_keys(self::defaults());
@@ -132,7 +115,7 @@ final class Avatar

        foreach ($defaults as $key => $defaultValue) {
            $value = (string)($input[$key] ?? $defaultValue);
-            if (!array_key_exists($value, $options[$key])) {
+            if (isset($options[$key]) && !array_key_exists($value, $options[$key])) {
                $value = $defaultValue;
            }
            $normalized[$key] = $value;
@@ -143,117 +126,70 @@ final class Avatar

    public static function render(array $row, string $name = 'Mitglied', string $size = 'md'): string
    {
-        static $instanceCounter = 0;
-        $instanceCounter++;
        $avatar = self::normalize($row);
        $options = self::options();
-        $preset = (string)($avatar['avatar_preset'] ?? '');
-
-        if ($preset !== '' && is_file(self::presetFilePath($preset))) {
-            $classes = [
-                'pkt-avatar',
-                'pkt-avatar--' . preg_replace('/[^a-z0-9\-]/', '', strtolower($size)),
-                'pkt-avatar--preset',
-            ];
-
-            return sprintf(
-                '<span class="%s" role="img" aria-label="%s"><img class="pkt-avatar__img" src="%s" alt=""></span>',
-                htmlspecialchars(implode(' ', $classes), ENT_QUOTES),
-                htmlspecialchars('Avatar von ' . $name, ENT_QUOTES),
-                htmlspecialchars(self::presetPublicPath($preset), ENT_QUOTES)
-            );
-        }
-
-        $skin = $options['avatar_skin_tone'][$avatar['avatar_skin_tone']]['color'];
-        $hair = $options['avatar_hair_color'][$avatar['avatar_hair_color']]['color'];
-        $eyes = $options['avatar_eye_color'][$avatar['avatar_eye_color']]['color'];
-        $hat = $options['avatar_hat_color'][$avatar['avatar_hat_color']]['color'];
-        $outfit = $options['avatar_outfit_color'][$avatar['avatar_outfit_color']]['color'];

        $classes = [
            'pkt-avatar',
            'pkt-avatar--' . preg_replace('/[^a-z0-9\-]/', '', strtolower($size)),
+            'pkt-avatar--layered',
            'pkt-avatar--head-' . $avatar['avatar_head_shape'],
            'pkt-avatar--hair-' . $avatar['avatar_hair_style'],
            'pkt-avatar--beard-' . $avatar['avatar_beard_style'],
            'pkt-avatar--glasses-' . $avatar['avatar_glasses_style'],
            'pkt-avatar--hat-' . $avatar['avatar_hat_style'],
+            'pkt-avatar--outfit-' . $avatar['avatar_outfit_style'],
        ];

        $style = sprintf(
            '--avatar-skin:%s;--avatar-hair:%s;--avatar-eye:%s;--avatar-hat:%s;--avatar-outfit:%s;',
-            $skin,
-            $hair,
-            $eyes,
-            $hat,
-            $outfit
+            $options['avatar_skin_tone'][$avatar['avatar_skin_tone']]['color'],
+            $options['avatar_hair_color'][$avatar['avatar_hair_color']]['color'],
+            $options['avatar_eye_color'][$avatar['avatar_eye_color']]['color'],
+            $options['avatar_hat_color'][$avatar['avatar_hat_color']]['color'],
+            $options['avatar_outfit_color'][$avatar['avatar_outfit_color']]['color']
        );

-        $label = htmlspecialchars('Avatar von ' . $name, ENT_QUOTES);
-        $clipId = 'pktAvatarClip' . $instanceCounter;
+        $layers = [
+            self::renderLayer('outfit', $avatar['avatar_outfit_style']),
+            self::renderLayer('head', $avatar['avatar_head_shape']),
+            self::renderLayer('hair', $avatar['avatar_hair_style']),
+            self::renderLayer('hat', $avatar['avatar_hat_style']),
+            self::renderLayer('features', 'default'),
+            self::renderLayer('beard', $avatar['avatar_beard_style']),
+            self::renderLayer('glasses', $avatar['avatar_glasses_style']),
+        ];

        return sprintf(
-            '<span class="%s" style="%s" role="img" aria-label="%s">' .
-            '<svg class="pkt-avatar__svg" viewBox="0 0 160 160" aria-hidden="true">' .
-            '<defs>' .
-            '<clipPath id="%s"><rect x="0" y="0" width="160" height="160" rx="32" ry="32"></rect></clipPath>' .
-            '</defs>' .
-            '<g clip-path="url(#%s)">' .
-            '<rect class="pkt-avatar__bg" x="0" y="0" width="160" height="160"></rect>' .
-            '<ellipse class="pkt-avatar__shadow" cx="80" cy="150" rx="62" ry="18"></ellipse>' .
-            '<path class="pkt-avatar__outfit" d="M22 164c2-30 22-46 58-46s56 16 58 46H22z"></path>' .
-            '<path class="pkt-avatar__outfit-detail" d="M48 126c8 14 18 20 32 20s24-6 32-20"></path>' .
-            '<path class="pkt-avatar__neck" d="M68 98h24v20c0 8-6 14-12 14s-12-6-12-14V98z"></path>' .
-            '<path class="pkt-avatar__ear" d="M48 76c0-7 5-12 11-12v24c-6 0-11-5-11-12z"></path>' .
-            '<path class="pkt-avatar__ear" d="M112 64c6 0 11 5 11 12s-5 12-11 12V64z"></path>' .
-            '<path class="pkt-avatar__face" d="M80 28c-24 0-39 17-39 40v18c0 28 17 45 39 45s39-17 39-45V68c0-23-15-40-39-40z"></path>' .
-            '<path class="pkt-avatar__face-shade" d="M46 90c5 24 20 38 34 38 15 0 31-15 36-40-2 27-18 43-36 43-17 0-32-12-34-41z"></path>' .
-            '<ellipse class="pkt-avatar__cheek" cx="60" cy="90" rx="9" ry="5"></ellipse>' .
-            '<ellipse class="pkt-avatar__cheek" cx="100" cy="90" rx="9" ry="5"></ellipse>' .
-            '<g class="pkt-avatar__hair-set">' .
-            '<path class="pkt-avatar__hair-base" d="M40 70c0-31 17-48 40-48s40 17 40 48c0 0-2-20-10-30-9-11-22-16-30-16s-21 5-30 16c-8 10-10 30-10 30z"></path>' .
-            '<path class="pkt-avatar__hair-short" d="M42 69c2-18 12-30 22-36 7-5 18-8 28-5 14 4 24 16 26 41-7-8-14-15-23-20-8-4-16-6-24-5-11 1-20 5-29 25z"></path>' .
-            '<path class="pkt-avatar__hair-fade" d="M44 70c4-24 18-38 36-38 19 0 33 13 36 38-10-8-17-12-24-14-10-3-21-3-31 0-6 2-12 6-17 14z"></path>' .
-            '<path class="pkt-avatar__hair-parted" d="M42 69c3-18 13-29 24-35 13-7 30-6 42 6 7 7 10 17 10 29-7-10-12-17-19-20-11-5-21 0-26 7-3-6-9-10-15-10-8 0-12 4-16 8z"></path>' .
-            '<path class="pkt-avatar__hair-curly" d="M38 72c3-14 8-24 15-31 8-8 16-12 27-12 12 0 22 4 30 13 7 7 11 17 12 30-5-6-9-9-13-10-1 0-4 2-7 1-3-1-4-5-7-5s-5 5-8 4c-3 0-4-4-7-4-4 0-6 6-11 5-4 0-6-5-10-4-5 1-9 5-14 13z"></path>' .
-            '<path class="pkt-avatar__hair-waves" d="M41 70c2-14 8-24 17-32 8-7 17-10 28-10 17 0 31 12 34 41-5-8-10-12-16-15-4-1-7-2-11-3-3 0-6 6-10 6s-7-7-11-7c-12 0-21 8-31 20z"></path>' .
-            '</g>' .
-            '<g class="pkt-avatar__hat-set">' .
-            '<path class="pkt-avatar__hat-beanie" d="M36 63c2-24 18-40 44-40 24 0 40 14 44 40H36z"></path>' .
-            '<path class="pkt-avatar__hat-beanie-rib" d="M38 61h84c0 10-6 18-14 18H52c-8 0-14-8-14-18z"></path>' .
-            '<path class="pkt-avatar__hat-cap" d="M40 63c5-19 18-30 40-30 23 0 35 10 40 30H40z"></path>' .
-            '<path class="pkt-avatar__hat-cap-brim" d="M80 63c15 0 31 5 44 14-6 3-14 6-26 8-17 2-28 1-39-4 3-7 9-18 21-18z"></path>' .
-            '</g>' .
-            '<path class="pkt-avatar__brow pkt-avatar__brow--left" d="M58 67c5-4 12-5 19-2"></path>' .
-            '<path class="pkt-avatar__brow pkt-avatar__brow--right" d="M83 65c7-3 14-2 19 2"></path>' .
-            '<ellipse class="pkt-avatar__eye-shell" cx="66" cy="77" rx="8" ry="5"></ellipse>' .
-            '<ellipse class="pkt-avatar__eye-shell" cx="94" cy="77" rx="8" ry="5"></ellipse>' .
-            '<circle class="pkt-avatar__eye" cx="66" cy="77" r="3.4"></circle>' .
-            '<circle class="pkt-avatar__eye" cx="94" cy="77" r="3.4"></circle>' .
-            '<circle class="pkt-avatar__eye-highlight" cx="65" cy="76" r="1.1"></circle>' .
-            '<circle class="pkt-avatar__eye-highlight" cx="93" cy="76" r="1.1"></circle>' .
-            '<path class="pkt-avatar__nose" d="M80 78c-2 5-3 9-3 15 0 3 2 5 5 5"></path>' .
-            '<path class="pkt-avatar__mouth" d="M69 102c7 5 15 5 22 0"></path>' .
-            '<g class="pkt-avatar__beard-set">' .
-            '<path class="pkt-avatar__beard-mustache" d="M64 97c4-4 9-5 16-5 6 0 11 1 16 5-5 1-8 4-10 8-2-3-4-4-6-4s-4 1-6 4c-2-4-5-7-10-8z"></path>' .
-            '<path class="pkt-avatar__beard-short" d="M60 93c3 4 10 7 20 7s17-3 20-7c0 16-6 27-20 29-14-2-20-13-20-29z"></path>' .
-            '<path class="pkt-avatar__beard-full" d="M55 90c5 6 13 10 25 10 11 0 20-4 25-10-1 22-9 36-25 38-16-2-24-16-25-38z"></path>' .
-            '</g>' .
-            '<g class="pkt-avatar__glasses-set">' .
-            '<rect class="pkt-avatar__glasses-round-left" x="54" y="70" width="22" height="16" rx="8"></rect>' .
-            '<rect class="pkt-avatar__glasses-round-right" x="84" y="70" width="22" height="16" rx="8"></rect>' .
-            '<rect class="pkt-avatar__glasses-square-left" x="54" y="70" width="22" height="16" rx="4"></rect>' .
-            '<rect class="pkt-avatar__glasses-square-right" x="84" y="70" width="22" height="16" rx="4"></rect>' .
-            '<path class="pkt-avatar__glasses-bridge" d="M76 78h8"></path>' .
-            '</g>' .
-            '</g>' .
-            '</svg>' .
-            '</span>',
+            '<span class="%s" style="%s" role="img" aria-label="%s">%s</span>',
            htmlspecialchars(implode(' ', $classes), ENT_QUOTES),
            htmlspecialchars($style, ENT_QUOTES),
-            $label,
-            htmlspecialchars($clipId, ENT_QUOTES),
-            htmlspecialchars($clipId, ENT_QUOTES)
+            htmlspecialchars('Avatar von ' . $name, ENT_QUOTES),
+            implode('', array_filter($layers))
        );
    }
+
+    private static function renderLayer(string $category, string $variant): string
+    {
+        if ($variant === 'none') {
+            return '';
+        }
+
+        $file = self::layerFilePath($category, $variant);
+        if (!is_file($file)) {
+            return '';
+        }
+
+        $svg = file_get_contents($file);
+        if ($svg === false) {
+            return '';
+        }
+
+        return '<span class="pkt-avatar__layer pkt-avatar__layer--' . htmlspecialchars($category, ENT_QUOTES) . '">' . $svg . '</span>';
+    }
+
+    public static function layerFilePath(string $category, string $variant): string
+    {
+        return dirname(__DIR__, 2) . '/public/assets/avatars/layers/modern/' . $category . '/' . $variant . '.svg';
+    }
 }
--- a/src/App/ProfileSettings.php
+++ b/src/App/ProfileSettings.php
@@ -39,6 +39,7 @@ final class ProfileSettings
            'avatar_head_shape' => "ALTER TABLE user_profiles ADD COLUMN avatar_head_shape VARCHAR(24) NOT NULL DEFAULT 'round' AFTER avatar_glasses_style",
            'avatar_hat_style' => "ALTER TABLE user_profiles ADD COLUMN avatar_hat_style VARCHAR(24) NOT NULL DEFAULT 'none' AFTER avatar_head_shape",
            'avatar_hat_color' => "ALTER TABLE user_profiles ADD COLUMN avatar_hat_color VARCHAR(24) NOT NULL DEFAULT 'navy' AFTER avatar_hat_style",
+            'avatar_outfit_style' => "ALTER TABLE user_profiles ADD COLUMN avatar_outfit_style VARCHAR(24) NOT NULL DEFAULT 'tee' AFTER avatar_hat_color",
            'avatar_outfit_color' => "ALTER TABLE user_profiles ADD COLUMN avatar_outfit_color VARCHAR(24) NOT NULL DEFAULT 'slate' AFTER avatar_hat_color",
        ];
        foreach ($avatarColumns as $column => $sql) {
@@ -86,27 +87,11 @@ final class ProfileSettings
        }

        $this->ensureSchema();
-        $preset = (string)($avatarConfig['avatar_preset'] ?? '');
-        if ($preset !== '') {
-            $options = Avatar::presetOptions();
-            $preset = array_key_exists($preset, $options) ? $preset : 'modern_01';
-            $stmt = $this->pdo->prepare(
-                'UPDATE user_profiles
-                 SET avatar_preset = :preset,
-                     updated_at = NOW()
-                 WHERE user_id = :id'
-            );
-            $stmt->execute([
-                'preset' => $preset,
-                'id' => $userId,
-            ]);
-            return;
-        }
-
        $avatar = Avatar::normalize($avatarConfig);
        $stmt = $this->pdo->prepare(
            'UPDATE user_profiles
-             SET avatar_skin_tone = :skin,
+             SET avatar_preset = :preset,
+                 avatar_skin_tone = :skin,
                 avatar_hair_style = :hairStyle,
                 avatar_hair_color = :hairColor,
                 avatar_eye_color = :eyeColor,
@@ -115,11 +100,13 @@ final class ProfileSettings
                 avatar_head_shape = :headShape,
                 avatar_hat_style = :hatStyle,
                 avatar_hat_color = :hatColor,
+                 avatar_outfit_style = :outfitStyle,
                 avatar_outfit_color = :outfitColor,
                 updated_at = NOW()
             WHERE user_id = :id'
        );
        $stmt->execute([
+            'preset' => $avatar['avatar_preset'],
            'skin' => $avatar['avatar_skin_tone'],
            'hairStyle' => $avatar['avatar_hair_style'],
            'hairColor' => $avatar['avatar_hair_color'],
@@ -129,6 +116,7 @@ final class ProfileSettings
            'headShape' => $avatar['avatar_head_shape'],
            'hatStyle' => $avatar['avatar_hat_style'],
            'hatColor' => $avatar['avatar_hat_color'],
+            'outfitStyle' => $avatar['avatar_outfit_style'],
            'outfitColor' => $avatar['avatar_outfit_color'],
            'id' => $userId,
        ]);