+
+
+
+
+
{{ $t('falukant.titles.' + lover.gender + '.' + lover.title) }} {{ lover.name }}
@@ -512,6 +540,42 @@ const MARRIAGE_GIFT_COSTS = {
lavish: 180
}
const LOVER_AFFECTION_ACTION_COST = 60
+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: 'FamilyView',
@@ -920,6 +984,36 @@ export default {
return this.candidateRoles[characterId] || 'secret_affair';
},
+ getAgeGroup(ageRaw) {
+ const age = Number(ageRaw || 0);
+ 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+';
+ },
+
+ getCharacterAvatarStyle(character, scale = 1) {
+ const gender = String(character?.gender || 'male');
+ const ageGroup = this.getAgeGroup(character?.age);
+ const genderData = AVATAR_POSITIONS[gender] || AVATAR_POSITIONS.male;
+ const position = genderData.positions?.[ageGroup] || { x: 0, y: 0 };
+ const safeScale = Number(scale) > 0 ? Number(scale) : 1;
+ return {
+ backgroundImage: `url(/images/falukant/avatar/${gender}.png)`,
+ backgroundPosition: `-${Math.round(position.x * safeScale)}px -${Math.round(position.y * safeScale)}px`,
+ backgroundSize: `${Math.round(1792 * safeScale)}px ${Math.round(1024 * safeScale)}px`,
+ width: `${Math.round(genderData.width * safeScale)}px`,
+ height: `${Math.round(genderData.height * safeScale)}px`,
+ };
+ },
+
formatCost(value) {
return new Intl.NumberFormat(navigator.language, { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(value);
},
@@ -1377,11 +1471,16 @@ export default {
.lover-card__header {
display: flex;
align-items: flex-start;
- justify-content: space-between;
+ justify-content: flex-start;
+ flex-wrap: wrap;
gap: 10px;
margin-bottom: 12px;
}
+.lover-character-media {
+ margin-right: 6px;
+}
+
.lover-card__age {
font-size: 0.9rem;
color: rgba(0, 0, 0, 0.62);
@@ -1572,15 +1671,6 @@ export default {
flex: 0 1 auto;
}
-.partner-character-3d {
- width: 200px;
- height: 280px;
- border: 1px solid var(--color-border);
- border-radius: var(--radius-lg);
- background-color: #fdf1db;
- flex-shrink: 0;
-}
-
.gifts-section {
width: 100%;
margin-top: 10px;
@@ -1596,15 +1686,60 @@ export default {
flex: 1;
}
-.child-character-3d {
- width: 200px;
- height: 280px;
+.character-media {
+ display: flex;
+ gap: 10px;
+ align-items: flex-start;
+}
+
+.character-media--spouse {
+ min-width: 260px;
+}
+
+.character-media--compact {
+ gap: 8px;
+}
+
+.character-avatar {
+ border: 1px solid var(--color-border);
+ border-radius: var(--radius-md);
+ background-repeat: no-repeat;
+ background-color: #fdf1db;
+ box-shadow: var(--shadow-soft);
+ flex: 0 0 auto;
+}
+
+.character-avatar--compact {
+ border-radius: var(--radius-sm);
+}
+
+.character-3d-frame {
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background-color: #fdf1db;
flex-shrink: 0;
}
+.character-3d-frame--spouse {
+ width: 150px;
+ height: 220px;
+}
+
+.character-3d-frame--compact {
+ width: 95px;
+ height: 140px;
+}
+
+.child-name-cell {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
+.child-character-media {
+ width: fit-content;
+}
+
.spouse-section table,
.children-section table {
margin-top: 10px;