Implement noBackground prop in Character3D component: Add functionality to conditionally render the background and background image based on the noBackground prop. Update OverviewView to utilize the new prop, enhancing the character display logic and improving visual customization options.

frontend/src/views/falukant/OverviewView.vue

@@ -117,58 +117,31 @@
             </div>
         </div>
         <div v-if="falukantUser?.character" class="imagecontainer">
-            <div :style="getAvatarStyle" class="avatar"></div>
-            <div :style="getHouseStyle" class="house"></div>
+            <div class="house-with-character">
+                <div :style="getHouseStyle" class="house"></div>
+                <div class="character-foreground">
+                    <Character3D
+                        :gender="falukantUser.character.gender"
+                        :age="falukantUser.character.age"
+                        :no-background="true"
+                    />
+                </div>
+            </div>
         </div>
     </div>
 </template>
 
 <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,25 +154,7 @@ 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 {};
             const imageUrl = '/images/falukant/houses.png';
             const pos = this.falukantUser.userHouse.houseType.position;
@@ -307,19 +262,6 @@ 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 } });
         },
@@ -393,21 +335,32 @@ 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 {
+    position: relative;
+    width: 300px;
+    height: 300px;
 }
 
 .house {
+    position: absolute;
+    inset: 0;
     border: 1px solid #ccc;
     border-radius: 4px;
     background-repeat: no-repeat;
     image-rendering: crisp-edges;
+    z-index: 1;
+}
+
+.character-foreground {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 200px;
+    height: 300px;
+    z-index: 2;
 }
 
 h2 {