feat(falukant): render houses with 3D models

frontend/src/views/falukant/HouseView.vue

@@ -19,7 +19,12 @@
             </p>
         </section>
         <div class="existing-house">
-            <div :style="houseType ? houseStyle(houseType.position, 341) : {}" class="house"></div>
+            <House3D
+                v-if="houseType?.labelTr"
+                class="house"
+                :model="houseModel(houseType)"
+                :label="$t(`falukant.house.type.${houseType.labelTr}`)"
+            />
             <div class="status-panel surface-card">
                 <h3>{{ $t('falukant.house.statusreport') }}</h3>
                 <div class="status-cards">
@@ -128,8 +133,12 @@
             <h3>{{ $t('falukant.house.buyablehouses') }}</h3>
             <div class="houses-list">
                 <div v-for="house in buyableHouses" :key="house.id" class="house-item">
-                    <div :style="house.houseType ? houseStyle(house.houseType.position, 114) : {}"
-                        class="house-preview"></div>
+                    <House3D
+                        v-if="house.houseType?.labelTr"
+                        class="house-preview"
+                        :model="houseModel(house.houseType)"
+                        :label="$t(`falukant.house.type.${house.houseType.labelTr}`)"
+                    />
                     <div class="house-info">
                         <h4>{{ $t(`falukant.house.type.${house.houseType.labelTr}`) }}</h4>
                         <div class="buyable-house-stats">
@@ -155,13 +164,15 @@
 
 <script>
 import StatusBar from '@/components/falukant/StatusBar.vue';
+import House3D from '@/components/falukant/House3D.vue';
 import apiClient from '@/utils/axios.js';
 import { mapState } from 'vuex';
 import { showError, showSuccess, confirmAction } from '@/utils/feedback.js';
+import { getFalukantHouseModel } from '@/utils/falukantHouseModels.js';
 
 export default {
     name: 'HouseView',
-    components: { StatusBar },
+    components: { StatusBar, House3D },
     data() {
         return {
             userHouse: null,
@@ -222,17 +233,8 @@ export default {
             if (v >= 1) return this.$t('falukant.conditionBand.catastrophic');
             return this.$t('falukant.conditionBand.unknown');
         },
-        houseStyle(position, picSize) {
-            const columns = 3;
-            const size = picSize;
-            const index = position - 1;
-            const x = (index % columns) * size;
-            const y = Math.floor(index / columns) * size;
-            return {
-                backgroundImage: 'url("/images/falukant/houses.png")',
-                backgroundPosition: `-${x}px -${y}px`,
-                backgroundSize: `${columns * size}px auto`
-            };
+        houseModel(houseType) {
+            return getFalukantHouseModel(houseType);
         },
         formatPrice(value) {
             return new Intl.NumberFormat('de-DE', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(value);
@@ -456,9 +458,6 @@ h2 {
 .house {
     width: 341px;
     height: 341px;
-    background-repeat: no-repeat;
-    image-rendering: crisp-edges;
-    border: 1px solid var(--color-border);
     border-radius: 4px;
 }
 
@@ -597,14 +596,7 @@ h2 {
 .house-preview {
     width: 100px;
     height: 100px;
-    background-repeat: no-repeat;
-    image-rendering: crisp-edges;
-    border: 1px solid var(--color-border);
     border-radius: 4px;
-    background-size: contain;
-    /* scale image to container */
-    background-position: center;
-    /* center sprite */
 }
 
 .house-info {