Refactor OverviewView and NoLoginView to integrate Character3D component

- Replaced avatar display logic in OverviewView with a 3D character representation based on user gender and age.
- Updated NoLoginView to utilize Character3D for displaying mascots, enhancing visual consistency.
- Removed outdated avatar positioning logic and related computed properties for improved code clarity and maintainability.
- Adjusted CSS styles for better layout and responsiveness of character displays.

frontend/src/views/falukant/OverviewView.vue

@@ -117,7 +117,12 @@
             </div>
         </div>
         <div v-if="falukantUser?.character" class="imagecontainer">
-            <div :style="getAvatarStyle" class="avatar"></div>
+            <div class="character-3d-wrapper">
+                <Character3D 
+                    :gender="falukantUser.character.gender" 
+                    :age="falukantUser.character.age" 
+                />
+            </div>
             <div :style="getHouseStyle" class="house"></div>
         </div>
     </div>
@@ -125,50 +130,16 @@
 
 <script>
 import StatusBar from '@/components/falukant/StatusBar.vue';
+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: {
         StatusBar,
+        Character3D,
     },
     data() {
         return {
@@ -181,23 +152,6 @@ 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 {};
@@ -219,10 +173,6 @@ export default {
                 imageRendering: 'crisp-edges',
             };
         },
-        getAgeColor(age) {
-            const ageGroup = this.getAgeGroup(age);
-            return ageGroup === 'child' ? 'blue' : ageGroup === 'teen' ? 'green' : ageGroup === 'adult' ? 'red' : 'gray';
-        },
         moneyValue() {
             const m = this.falukantUser?.money;
             return typeof m === 'string' ? parseFloat(m) : m;
@@ -282,19 +232,6 @@ export default {
                     break;
             }
         },
-        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+";
-        },
         async fetchFalukantUser() {
             const falukantUser = await apiClient.get('/api/falukant/user');
             if (!falukantUser.data) {
@@ -397,14 +334,18 @@ export default {
     display: flex;
     justify-content: center;
     align-items: center;
+    gap: 20px;
 }
 
-.avatar {
+.character-3d-wrapper {
+    width: 300px;
+    height: 400px;
     border: 1px solid #ccc;
     border-radius: 4px;
-    background-repeat: no-repeat;
-    background-size: cover;
-    image-rendering: crisp-edges;
+    background-color: #fdf1db;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
 .house {