From 30e1df0dd86cf767929d4cf5acde1a017589bd94 Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Thu, 22 Jan 2026 12:39:24 +0100
Subject: [PATCH] Enhance deployment scripts and frontend components for
 improved functionality and styling

- Added dependency installation step in deploy-frontend.sh and update-frontend.sh to ensure all required packages are available before building the frontend.
- Updated AppNavigation.vue to change background color for better visual appeal.
- Refactored FamilyView.vue to include 3D character models for both the user and their relationships, enhancing the visual representation of family dynamics.
- Modified OverviewView.vue to switch from 3D character rendering to a 2D avatar display, improving loading performance and user experience.
---
 deploy-frontend.sh                           |  10 ++
 frontend/src/components/AppNavigation.vue    |   6 +-
 frontend/src/views/falukant/FamilyView.vue   | 103 ++++++++++++++++++-
 frontend/src/views/falukant/OverviewView.vue |  20 ++--
 update-frontend.sh                           |  12 +++
 5 files changed, 136 insertions(+), 15 deletions(-)

diff --git a/deploy-frontend.sh b/deploy-frontend.sh
index 7cde2b0..3ad9b70 100755
--- a/deploy-frontend.sh
+++ b/deploy-frontend.sh
@@ -34,6 +34,16 @@ echo "VITE_API_BASE_URL=$VITE_API_BASE_URL"
 echo "VITE_DAEMON_SOCKET=$VITE_DAEMON_SOCKET"
 echo "VITE_CHAT_WS_URL=$VITE_CHAT_WS_URL"
 
+# 5a. Dependencies installieren
+echo "Installiere Dependencies..."
+npm install
+
+if [ $? -ne 0 ]; then
+    echo "❌ npm install fehlgeschlagen!"
+    exit 1
+fi
+
+# 5b. Frontend neu bauen
 npm run build
 
 if [ $? -ne 0 ]; then
diff --git a/frontend/src/components/AppNavigation.vue b/frontend/src/components/AppNavigation.vue
index a1b8bf3..9950b0f 100644
--- a/frontend/src/components/AppNavigation.vue
+++ b/frontend/src/components/AppNavigation.vue
@@ -295,7 +295,7 @@ nav,
 nav > ul {
   display: flex;
   justify-content: space-between;
-  background-color: #FF6B35;
+  background-color: #FF8C5A;
   color: #000;
   padding: 0;
   margin: 0;
@@ -364,7 +364,7 @@ a {
 .submenu1 {
   position: absolute;
   border: 1px solid #5D4037;
-  background-color: #FF6B35;
+  background-color: #FF8C5A;
   left: 0;
   top: 2.5em;
   max-height: 0;
@@ -419,7 +419,7 @@ a {
 
 .submenu2 {
   position: absolute;
-  background-color: #FF6B35;
+  background-color: #FF8C5A;
   left: 100%;
   top: 0;
   border: 1px solid #5D4037;
diff --git a/frontend/src/views/falukant/FamilyView.vue b/frontend/src/views/falukant/FamilyView.vue
index 2ba237d..8f9c391 100644
--- a/frontend/src/views/falukant/FamilyView.vue
+++ b/frontend/src/views/falukant/FamilyView.vue
@@ -1,13 +1,28 @@
 <template>
     <div class="contenthidden">
         <StatusBar />
-        <div class="contentscroll">
+        <div class="contentscroll family-layout">
+            <!-- 3D-Modell für man selbst links -->
+            <div class="self-character-3d" v-if="ownCharacter">
+                <Character3D 
+                    :gender="ownCharacter.gender" 
+                    :age="ownCharacter.age" 
+                />
+            </div>
 
+            <div class="family-content">
             <h2>{{ $t('falukant.family.title') }}</h2>
 
             <div class="spouse-section">
                 <h3>{{ $t('falukant.family.spouse.title') }}</h3>
-                <div v-if="relationships.length > 0">
+                <div v-if="relationships.length > 0" class="relationship-container">
+                    <!-- 3D-Modell für Partner rechts neben Beziehung -->
+                    <div class="partner-character-3d">
+                        <Character3D 
+                            :gender="relationships[0].character2.gender" 
+                            :age="relationships[0].character2.age" 
+                        />
+                    </div>
                     <div class="relationship">
                         <table>
                             <tr>
@@ -111,7 +126,9 @@
 
             <div class="children-section">
                 <h3>{{ $t('falukant.family.children.title') }}</h3>
-                <div v-if="children && children.length > 0">
+                <div v-if="children && children.length > 0" class="children-container">
+                    <!-- 3D-Modell für ausgewähltes Kind rechts neben Liste -->
+                    <div class="children-list">
                     <table>
                         <thead>
                             <tr>
@@ -145,6 +162,13 @@
                             </tr>
                         </tbody>
                     </table>
+                    </div>
+                    <div class="child-character-3d" v-if="selectedChild">
+                        <Character3D 
+                            :gender="selectedChild.gender" 
+                            :age="selectedChild.age" 
+                        />
+                    </div>
                 </div>
                 <div v-else>
                     <p>{{ $t('falukant.family.children.none') }}</p>
@@ -167,6 +191,7 @@
                 </div>
             </div>
 
+            </div>
         </div>
         <ChildDetailsDialog ref="childDetailsDialog" />
     </div>
@@ -177,6 +202,7 @@ import StatusBar from '@/components/falukant/StatusBar.vue'
 import MessageDialog from '@/dialogues/standard/MessageDialog.vue'
 import ErrorDialog from '@/dialogues/standard/ErrorDialog.vue'
 import ChildDetailsDialog from '@/dialogues/falukant/ChildDetailsDialog.vue'
+import Character3D from '@/components/Character3D.vue'
 
 import apiClient from '@/utils/axios.js'
 import { mapState } from 'vuex'
@@ -187,7 +213,8 @@ export default {
         StatusBar,
         MessageDialog,
         ErrorDialog,
-        ChildDetailsDialog
+        ChildDetailsDialog,
+        Character3D
     },
     data() {
         return {
@@ -200,13 +227,16 @@ export default {
             gifts: [],
             selectedGiftId: null,
             moodAffects: [],
-            characterAffects: []
+            characterAffects: [],
+            ownCharacter: null,
+            selectedChild: null
         }
     },
     computed: {
         ...mapState(['socket'])
     },
     async mounted() {
+        await this.loadOwnCharacter();
         await this.loadFamilyData();
         await this.loadGifts();
         await this.loadMoodAffects();
@@ -247,7 +277,17 @@ export default {
             }
         },
 
+        async loadOwnCharacter() {
+            try {
+                const response = await apiClient.get('/api/falukant/user');
+                this.ownCharacter = response.data.character;
+            } catch (error) {
+                console.error('Error loading own character:', error);
+            }
+        },
+
         showChildDetails(child) {
+            this.selectedChild = child;
             this.$refs.childDetailsDialog?.open(child);
         },
 
@@ -403,6 +443,25 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.family-layout {
+    display: flex;
+    gap: 20px;
+    align-items: flex-start;
+}
+
+.self-character-3d {
+    width: 250px;
+    height: 350px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    background-color: #fdf1db;
+    flex-shrink: 0;
+}
+
+.family-content {
+    flex: 1;
+}
+
 .spouse-section,
 .children-section,
 .lovers-section {
@@ -412,6 +471,40 @@ export default {
     padding: 10px;
 }
 
+.relationship-container {
+    display: flex;
+    gap: 20px;
+    align-items: flex-start;
+}
+
+.partner-character-3d {
+    width: 200px;
+    height: 280px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    background-color: #fdf1db;
+    flex-shrink: 0;
+}
+
+.children-container {
+    display: flex;
+    gap: 20px;
+    align-items: flex-start;
+}
+
+.children-list {
+    flex: 1;
+}
+
+.child-character-3d {
+    width: 200px;
+    height: 280px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    background-color: #fdf1db;
+    flex-shrink: 0;
+}
+
 .spouse-section table,
 .children-section table {
     margin-top: 10px;
diff --git a/frontend/src/views/falukant/OverviewView.vue b/frontend/src/views/falukant/OverviewView.vue
index 24184a6..b2800c3 100644
--- a/frontend/src/views/falukant/OverviewView.vue
+++ b/frontend/src/views/falukant/OverviewView.vue
@@ -117,10 +117,11 @@
             </div>
         </div>
         <div v-if="falukantUser?.character" class="imagecontainer">
-            <div class="character-3d-wrapper">
-                <Character3D 
-                    :gender="falukantUser.character.gender" 
-                    :age="falukantUser.character.age" 
+            <div class="character-2d-wrapper">
+                <img 
+                    :src="`/images/falukant/avatar/${falukantUser.character.gender}.png`"
+                    :alt="falukantUser.character.gender"
+                    class="character-2d-image"
                 />
             </div>
             <div :style="getHouseStyle" class="house"></div>
@@ -130,7 +131,6 @@
 
 <script>
 import StatusBar from '@/components/falukant/StatusBar.vue';
-import Character3D from '@/components/Character3D.vue';
 import apiClient from '@/utils/axios.js';
 import { mapState } from 'vuex';
 
@@ -139,7 +139,6 @@ export default {
     name: 'FalukantOverviewView',
     components: {
         StatusBar,
-        Character3D,
     },
     data() {
         return {
@@ -337,7 +336,7 @@ export default {
     gap: 20px;
 }
 
-.character-3d-wrapper {
+.character-2d-wrapper {
     width: 300px;
     height: 400px;
     border: 1px solid #ccc;
@@ -346,6 +345,13 @@ export default {
     display: flex;
     justify-content: center;
     align-items: center;
+    overflow: hidden;
+}
+
+.character-2d-image {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
 }
 
 .house {
diff --git a/update-frontend.sh b/update-frontend.sh
index 472df69..441de6e 100755
--- a/update-frontend.sh
+++ b/update-frontend.sh
@@ -45,6 +45,18 @@ echo "VITE_API_BASE_URL=$VITE_API_BASE_URL"
 echo "VITE_DAEMON_SOCKET=$VITE_DAEMON_SOCKET"
 echo "VITE_CHAT_WS_URL=$VITE_CHAT_WS_URL"
 
+# 5a. Dependencies installieren
+echo "Installiere Dependencies..."
+npm install
+
+if [ $? -ne 0 ]; then
+    echo "❌ npm install fehlgeschlagen!"
+    # Temporäre .env-Datei aufräumen
+    rm -f "$TEMP_ENV"
+    exit 1
+fi
+
+# 5b. Frontend neu bauen
 npm run build
 
 if [ $? -ne 0 ]; then