Refactor character avatar rendering in OverviewView.vue

- Replaced 3D character rendering with a 2D avatar display for improved performance.
- Introduced dynamic avatar styling based on user gender and age group.
- Added computed properties for avatar and house styles to enhance visual representation.
- Cleaned up CSS to support the new avatar display structure.

frontend/src/views/falukant/OverviewView.vue

@@ -117,13 +117,7 @@
             </div>
         </div>
         <div v-if="falukantUser?.character" class="imagecontainer">
-            <div class="character-2d-wrapper">
+            <div :style="getAvatarStyle" class="avatar"></div>
-                <img 
-                    :src="`/images/falukant/avatar/${falukantUser.character.gender}.png`"
-                    :alt="falukantUser.character.gender"
-                    class="character-2d-image"
-                />
-            </div>
             <div :style="getHouseStyle" class="house"></div>
         </div>
     </div>
@@ -134,6 +128,42 @@ import StatusBar from '@/components/falukant/StatusBar.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',
@@ -151,6 +181,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() {
             console.log(this.falukantUser);
             if (!this.falukantUser || !this.falukantUser.userHouse?.houseType) return {};
@@ -260,6 +307,19 @@ export default {
             this.fetchAllStock();
             this.fetchProductions();
         },
+        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+';
+        },
         openBranch(branchId) {
             this.$router.push({ name: 'BranchView', params: { branchId } });
         },
@@ -336,22 +396,11 @@ export default {
     gap: 20px;
 }
 
-.character-2d-wrapper {
+.avatar {
-    width: 300px;
-    height: 400px;
     border: 1px solid #ccc;
     border-radius: 4px;
-    background-color: #fdf1db;
+    background-repeat: no-repeat;
-    display: flex;
+    image-rendering: crisp-edges;
-    justify-content: center;
-    align-items: center;
-    overflow: hidden;
-}
-
-.character-2d-image {
-    max-width: 100%;
-    max-height: 100%;
-    object-fit: contain;
 }
 
 .house {