Some fixes and additions

frontend/src/views/falukant/OverviewView.vue

@@ -13,14 +13,15 @@
                     </tr>
                     <tr>
                         <td>{{ $t('falukant.overview.metadata.nobleTitle') }}</td>
-                        <td>{{ $t('falukant.titles.' + falukantUser?.character.gender + '.' + falukantUser?.character.nobleTitle.labelTr) }}</td>
+                        <td>{{ $t('falukant.titles.' + falukantUser?.character.gender + '.' +
+                            falukantUser?.character.nobleTitle.labelTr) }}</td>
                     </tr>
                     <tr>
                         <td>{{ $t('falukant.overview.metadata.money') }}</td>
                         <td>
                             {{ moneyValue != null
                                 ? moneyValue.toLocaleString(locale, { style: 'currency', currency: 'EUR' })
-                            : '---' }}
+                                : '---' }}
                         </td>
                     </tr>
                     <tr>
@@ -170,17 +171,24 @@ export default {
             };
         },
         getHouseStyle() {
-            if (!this.falukantUser) return {};
+            console.log(this.falukantUser);
+            if (!this.falukantUser || !this.falukantUser.userHouse?.houseType) return {};
             const imageUrl = '/images/falukant/houses.png';
-            const housePosition = this.falukantUser.house ? this.falukantUser.house.type.position : 0;
-            const x = housePosition % 3;
-            const y = Math.floor(housePosition / 3);
+            const pos = this.falukantUser.userHouse.houseType.position;
+            const index = pos - 1;
+            const columns = 3;
+            const spriteSize = 300;
+            const x = (index % columns) * spriteSize;
+            const y = Math.floor(index / columns) * spriteSize;
             return {
                 backgroundImage: `url(${imageUrl})`,
-                backgroundPosition: `-${x * 341}px -${y * 341}px`,
-                backgroundSize: "341px 341px",
-                width: "114px",
-                height: "114px",
+                backgroundPosition: `-${x}px -${y}px`,
+                backgroundSize: `${columns * spriteSize}px auto`,
+                width: `300px`,
+                height: `300px`,
+                border: '1px solid #ccc',
+                borderRadius: '4px',
+                imageRendering: 'crisp-edges',
             };
         },
         getAgeColor(age) {
@@ -321,12 +329,10 @@ export default {
     border: 1px solid #ccc;
     border-radius: 4px;
     background-repeat: no-repeat;
-    background-size: cover;
     image-rendering: crisp-edges;
 }
 
 h2 {
     padding-top: 20px;
 }
-
 </style>