Implemented houses

frontend/src/views/falukant/OverviewView.vue

@@ -91,6 +91,7 @@
         </div>
         <div class="imagecontainer">
             <div :style="getAvatarStyle" class="avatar"></div>
+            <div :style="getHouseStyle" class="house"></div>
         </div>
     </div>
 </template>
@@ -168,6 +169,24 @@ export default {
                 height: `${height}px`,
             };
         },
+        getHouseStyle() {
+            if (!this.falukantUser) 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);
+            return {
+                backgroundImage: `url(${imageUrl})`,
+                backgroundPosition: `-${x * 341}px -${y * 341}px`,
+                backgroundSize: "341px 341px",
+                width: "114px",
+                height: "114px",
+            };
+        },
+        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;
@@ -298,7 +317,16 @@ export default {
     image-rendering: crisp-edges;
 }
 
+.house {
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    background-repeat: no-repeat;
+    background-size: cover;
+    image-rendering: crisp-edges;
+}
+
 h2 {
     padding-top: 20px;
 }
+
 </style>