Add avatar display logic in OverviewView: Introduce dynamic avatar styling based on user gender and age, enhancing character representation. Implement age group categorization for precise avatar positioning and dimensions, improving visual consistency in the user interface.

frontend/src/views/falukant/OverviewView.vue

@@ -117,6 +117,7 @@
             </div>
         </div>
         <div v-if="falukantUser?.character" class="imagecontainer">
+            <div :style="getAvatarStyle" class="avatar"></div>
             <div class="house-with-character">
                 <div :style="getHouseStyle" class="house"></div>
                 <div class="character-foreground">
@@ -137,6 +138,43 @@ import Character3D from '@/components/Character3D.vue';
 import apiClient from '@/utils/axios.js';
 import { mapState } from 'vuex';
 
+const AVATAR_POSITIONS = {
+    male: {
+        width: 195,
+        height: 300,
+        positions: {
+            "0-1": { x: 161, y: 28 },
+            "2-3": { x: 802, y: 28 },
+            "4-6": { x: 1014, y: 28 },
+            "7-10": { x: 800, y: 368 },
+            "11-13": { x: 373, y: 368 },
+            "14-16": { x: 1441, y: 28 },
+            "17-20": { x: 1441, y: 368 },
+            "21-30": { x: 1014, y: 368 },
+            "31-45": { x: 1227, y: 368 },
+            "45-55": { x: 803, y: 687 },
+            "55+": { x: 1441, y: 687 },
+        },
+    },
+    female: {
+        width: 223,
+        height: 298,
+        positions: {
+            "0-1": { x: 302, y: 66 },
+            "2-3": { x: 792, y: 66 },
+            "4-6": { x: 62, y: 66 },
+            "7-10": { x: 1034, y: 66 },
+            "11-13": { x: 1278, y: 66 },
+            "14-16": { x: 303, y: 392 },
+            "17-20": { x: 1525, y: 392 },
+            "21-30": { x: 1278, y: 392 },
+            "31-45": { x: 547, y: 718 },
+            "45-55": { x: 1034, y: 718 },
+            "55+": { x: 1525, y: 718 },
+        },
+    },
+};
+
 export default {
     name: 'FalukantOverviewView',
     components: {
@@ -154,6 +192,23 @@ export default {
     },
     computed: {
         ...mapState(['socket']),
+        getAvatarStyle() {
+            if (!this.falukantUser || !this.falukantUser.character) return {};
+            const { gender, age } = this.falukantUser.character;
+            const imageUrl = `/images/falukant/avatar/${gender}.png`;
+            const ageGroup = this.getAgeGroup(age);
+            const genderData = AVATAR_POSITIONS[gender] || {};
+            const position = genderData.positions?.[ageGroup] || { x: 0, y: 0 };
+            const width = genderData.width || 100;
+            const height = genderData.height || 100;
+            return {
+                backgroundImage: `url(${imageUrl})`,
+                backgroundPosition: `-${position.x}px -${position.y}px`,
+                backgroundSize: '1792px 1024px',
+                width: `${width}px`,
+                height: `${height}px`,
+            };
+        },
         getHouseStyle() {
             if (!this.falukantUser || !this.falukantUser.userHouse?.houseType) return {};
             const imageUrl = '/images/falukant/houses.png';
@@ -225,6 +280,19 @@ export default {
                 }, 1000);
             }
         },
+        getAgeGroup(age) {
+            if (age <= 1) return '0-1';
+            if (age <= 3) return '2-3';
+            if (age <= 6) return '4-6';
+            if (age <= 10) return '7-10';
+            if (age <= 13) return '11-13';
+            if (age <= 16) return '14-16';
+            if (age <= 20) return '17-20';
+            if (age <= 30) return '21-30';
+            if (age <= 45) return '31-45';
+            if (age <= 55) return '45-55';
+            return '55+';
+        },
         handleEvent(eventData) {
             switch (eventData.event) {
                 case 'falukantUpdateStatus':
@@ -335,6 +403,14 @@ export default {
     display: flex;
     justify-content: center;
     align-items: center;
+    gap: 20px;
+}
+
+.avatar {
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    background-repeat: no-repeat;
+    image-rendering: crisp-edges;
 }
 
 .house-with-character {
@@ -355,11 +431,11 @@ export default {
 
 .character-foreground {
     position: absolute;
-    bottom: 0;
+    bottom: 5%;
     left: 50%;
     transform: translateX(-50%);
-    width: 200px;
-    height: 300px;
+    width: 33%;
+    height: 33%;
     z-index: 2;
 }