From b16249e7c2d3657a95d38fa3c41286afcfe08764 Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Mon, 2 Feb 2026 08:46:12 +0100
Subject: [PATCH] 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/components/Character3D.vue      |  13 ++-
 frontend/src/views/falukant/OverviewView.vue | 105 +++++--------------
 2 files changed, 37 insertions(+), 81 deletions(-)

diff --git a/frontend/src/components/Character3D.vue b/frontend/src/components/Character3D.vue
index deda777..5b8dc82 100644
--- a/frontend/src/components/Character3D.vue
+++ b/frontend/src/components/Character3D.vue
@@ -24,6 +24,10 @@ export default {
       type: Number,
       default: null,
       validator: (value) => value === null || (value >= 0 && value <= 120)
+    },
+    noBackground: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -114,11 +118,10 @@ export default {
 
       // Scene erstellen - markRaw verwenden, um Vue's Reactivity zu vermeiden
       this.scene = markRaw(new THREE.Scene());
-      // Hintergrund wird später geladen
-      this.scene.background = new THREE.Color(0xf0f0f0);
-      
-      // Hintergrundbild laden
-      this.loadBackground();
+      if (!this.noBackground) {
+        this.scene.background = new THREE.Color(0xf0f0f0);
+        this.loadBackground();
+      }
 
       // Camera erstellen
       const aspect = container.clientWidth / container.clientHeight;
diff --git a/frontend/src/views/falukant/OverviewView.vue b/frontend/src/views/falukant/OverviewView.vue
index d5c987a..010e9d9 100644
--- a/frontend/src/views/falukant/OverviewView.vue
+++ b/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 {