802 lines
27 KiB
Vue
802 lines
27 KiB
Vue
<template>
|
|
<div class="falukant-overview">
|
|
<StatusBar />
|
|
<section class="falukant-hero surface-card">
|
|
<div>
|
|
<span class="falukant-kicker">Falukant</span>
|
|
<h2>{{ $t('falukant.overview.title') }}</h2>
|
|
<p>Dein Stand in Wirtschaft, Familie und Besitz in einer verdichteten Übersicht.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<div v-if="falukantUser?.character" class="imagecontainer">
|
|
<div :style="getAvatarStyle" class="avatar"></div>
|
|
<div class="house-with-character">
|
|
<div :style="getHouseStyle" class="house"></div>
|
|
<div class="character-foreground">
|
|
<Character3D
|
|
:gender="falukantUser.character.gender"
|
|
:age="falukantUser.character.age"
|
|
:no-background="true"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<section v-if="falukantUser?.character" class="falukant-summary-grid">
|
|
<article class="summary-card surface-card">
|
|
<span class="summary-card__label">Niederlassungen</span>
|
|
<strong>{{ branchCount }}</strong>
|
|
<p>Direkter Zugriff auf deine wichtigsten Geschäftsstandorte.</p>
|
|
</article>
|
|
<article class="summary-card surface-card">
|
|
<span class="summary-card__label">Produktionen aktiv</span>
|
|
<strong>{{ productionCount }}</strong>
|
|
<p>Laufende Produktionen, die zeitnah Abschluss oder Kontrolle brauchen.</p>
|
|
</article>
|
|
<article class="summary-card surface-card">
|
|
<span class="summary-card__label">Lagerpositionen</span>
|
|
<strong>{{ stockEntryCount }}</strong>
|
|
<p>Verdichteter Blick auf Warenbestand über alle Regionen.</p>
|
|
</article>
|
|
</section>
|
|
|
|
<section v-if="falukantUser?.character" class="falukant-routine-grid">
|
|
<article
|
|
v-for="action in routineActions"
|
|
:key="action.title"
|
|
class="routine-card surface-card"
|
|
>
|
|
<span class="routine-card__eyebrow">{{ action.kicker }}</span>
|
|
<h3>{{ action.title }}</h3>
|
|
<p>{{ action.description }}</p>
|
|
<button type="button" :class="action.secondary ? 'button-secondary' : ''" @click="openRoute(action.route)">
|
|
{{ action.cta }}
|
|
</button>
|
|
</article>
|
|
</section>
|
|
|
|
<!-- Erben-Auswahl wenn kein Charakter vorhanden -->
|
|
<div v-if="!falukantUser?.character" class="heir-selection-container">
|
|
<h3>{{ $t('falukant.overview.heirSelection.title') }}</h3>
|
|
<p>{{ $t('falukant.overview.heirSelection.description') }}</p>
|
|
<div v-if="loadingHeirs" class="loading">{{ $t('falukant.overview.heirSelection.loading') }}</div>
|
|
<div v-else-if="potentialHeirs.length === 0" class="no-heirs">
|
|
{{ $t('falukant.overview.heirSelection.noHeirs') }}
|
|
</div>
|
|
<div v-else class="heirs-list">
|
|
<div v-for="heir in potentialHeirs" :key="heir.id" class="heir-card">
|
|
<div class="heir-info">
|
|
<div class="heir-name">
|
|
{{ $t(`falukant.titles.${heir.gender}.noncivil`) }}
|
|
{{ heir.definedFirstName?.name || '---' }} {{ heir.definedLastName?.name || '' }}
|
|
</div>
|
|
<div class="heir-age">{{ $t('falukant.overview.metadata.age') }}: {{ heir.age }}</div>
|
|
</div>
|
|
<button @click="selectHeir(heir.id)" class="select-heir-button">
|
|
{{ $t('falukant.overview.heirSelection.select') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Normale Übersicht wenn Charakter vorhanden -->
|
|
<div v-if="falukantUser?.character" class="overviewcontainer">
|
|
<section class="overview-panel surface-card">
|
|
<h3>{{ $t('falukant.overview.metadata.title') }}</h3>
|
|
<div class="detail-list">
|
|
<div class="detail-list__item">
|
|
<span>{{ $t('falukant.overview.metadata.name') }}</span>
|
|
<strong>{{ falukantUser?.character?.definedFirstName?.name }} {{ falukantUser?.character?.definedLastName?.name }}</strong>
|
|
</div>
|
|
<div class="detail-list__item">
|
|
<span>{{ $t('falukant.overview.metadata.nobleTitle') }}</span>
|
|
<strong>{{ $t('falukant.titles.' + falukantUser?.character?.gender + '.' + falukantUser?.character?.nobleTitle?.labelTr) }}</strong>
|
|
</div>
|
|
<div class="detail-list__item">
|
|
<span>{{ $t('falukant.overview.metadata.money') }}</span>
|
|
<strong>
|
|
{{ moneyValue != null
|
|
? moneyValue.toLocaleString(locale, { style: 'currency', currency: 'EUR' })
|
|
: '---' }}
|
|
</strong>
|
|
</div>
|
|
<div class="detail-list__item">
|
|
<span>{{ $t('falukant.overview.metadata.age') }}</span>
|
|
<strong>{{ falukantUser?.character?.age }}</strong>
|
|
</div>
|
|
<div class="detail-list__item">
|
|
<span>{{ $t('falukant.overview.metadata.mainbranch') }}</span>
|
|
<strong>{{ falukantUser?.mainBranchRegion?.name }}</strong>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="overview-panel surface-card">
|
|
<h3>{{ $t('falukant.overview.productions.title') }}</h3>
|
|
<div v-if="productions.length > 0" class="overview-card-list">
|
|
<article v-for="(production, index) in productions" :key="index" class="overview-entry-card">
|
|
<strong>{{ $t(`falukant.product.${production.productName}`) }}</strong>
|
|
<div class="overview-entry-card__meta">
|
|
<span>{{ $t('falukant.branch.sale.region') }}: {{ production.cityName }}</span>
|
|
<span>{{ $t('falukant.branch.production.quantity') }}: {{ production.quantity }}</span>
|
|
<span>{{ $t('falukant.branch.production.ending') }}: {{ formatDate(production.endTimestamp) }}</span>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
<p v-else>{{ $t('falukant.branch.production.noProductions') }}</p>
|
|
</section>
|
|
<section class="overview-panel surface-card">
|
|
<h3>{{ $t('falukant.overview.stock.title') }}</h3>
|
|
<div v-if="allStock.length > 0" class="overview-card-list">
|
|
<article v-for="(item, index) in allStock" :key="index" class="overview-entry-card">
|
|
<strong>{{ $t(`falukant.product.${item.productLabelTr}`) }}</strong>
|
|
<div class="overview-entry-card__meta">
|
|
<span>{{ $t('falukant.branch.sale.region') }}: {{ item.regionName }}</span>
|
|
<span>{{ $t('falukant.branch.sale.quantity') }}: {{ item.quantity }}</span>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
<p v-else>{{ $t('falukant.branch.sale.noInventory') }}</p>
|
|
</section>
|
|
<section class="overview-panel surface-card">
|
|
<h3>{{ $t('falukant.overview.branches.title') }}</h3>
|
|
<div class="overview-card-list">
|
|
<article v-for="branch in falukantUser?.branches" :key="branch.id" class="overview-entry-card overview-entry-card--action">
|
|
<div>
|
|
<strong>{{ branch.region.name }}</strong>
|
|
<div class="overview-entry-card__meta">
|
|
<span>{{ $t(`falukant.overview.branches.level.${branch.branchType.labelTr}`) }}</span>
|
|
</div>
|
|
</div>
|
|
<button type="button" class="button-secondary" @click="openBranch(branch.id)">Öffnen</button>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import StatusBar from '@/components/falukant/StatusBar.vue';
|
|
import Character3D from '@/components/Character3D.vue';
|
|
import apiClient from '@/utils/axios.js';
|
|
import { showError, showSuccess } from '@/utils/feedback.js';
|
|
import { mapState } from 'vuex';
|
|
|
|
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: 'FalukantOverviewView',
|
|
components: {
|
|
StatusBar,
|
|
Character3D,
|
|
},
|
|
data() {
|
|
return {
|
|
falukantUser: null,
|
|
allStock: [],
|
|
productions: [],
|
|
potentialHeirs: [],
|
|
loadingHeirs: false,
|
|
pendingOverviewRefresh: null,
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState(['socket', 'daemonSocket', 'user']),
|
|
getAvatarStyle() {
|
|
if (!this.falukantUser || !this.falukantUser.character) return {};
|
|
const { gender, age } = this.falukantUser.character;
|
|
const imageUrl = `/images/falukant/avatar/${gender}.png`;
|
|
const ageGroup = this.getAgeGroup(age);
|
|
const genderData = AVATAR_POSITIONS[gender] || {};
|
|
const position = genderData.positions?.[ageGroup] || { x: 0, y: 0 };
|
|
const width = genderData.width || 100;
|
|
const height = genderData.height || 100;
|
|
return {
|
|
backgroundImage: `url(${imageUrl})`,
|
|
backgroundPosition: `-${position.x}px -${position.y}px`,
|
|
backgroundSize: '1792px 1024px',
|
|
width: `${width}px`,
|
|
height: `${height}px`,
|
|
};
|
|
},
|
|
getHouseStyle() {
|
|
if (!this.falukantUser || !this.falukantUser.userHouse?.houseType) return {};
|
|
const imageUrl = '/images/falukant/houses.png';
|
|
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}px -${y}px`,
|
|
backgroundSize: `${columns * spriteSize}px auto`,
|
|
width: `300px`,
|
|
height: `300px`,
|
|
border: '1px solid #ccc',
|
|
borderRadius: '4px',
|
|
imageRendering: 'crisp-edges',
|
|
};
|
|
},
|
|
moneyValue() {
|
|
const m = this.falukantUser?.money;
|
|
return typeof m === 'string' ? parseFloat(m) : m;
|
|
},
|
|
branchCount() {
|
|
return this.falukantUser?.branches?.length || 0;
|
|
},
|
|
productionCount() {
|
|
return this.productions.length;
|
|
},
|
|
stockEntryCount() {
|
|
return this.allStock.length;
|
|
},
|
|
routineActions() {
|
|
return [
|
|
{
|
|
kicker: 'Routine',
|
|
title: 'Niederlassung öffnen',
|
|
description: 'Die schnellste Route zu Produktion, Lager, Verkauf und Transport.',
|
|
cta: 'Zu den Betrieben',
|
|
route: 'BranchView',
|
|
},
|
|
{
|
|
kicker: 'Überblick',
|
|
title: 'Finanzen pruefen',
|
|
description: 'Kontostand, Verlauf und wirtschaftliche Entwicklung ohne lange Suche.',
|
|
cta: 'Geldhistorie',
|
|
route: 'MoneyHistoryView',
|
|
secondary: true,
|
|
},
|
|
{
|
|
kicker: 'Charakter',
|
|
title: 'Familie und Nachfolge',
|
|
description: 'Wichtige persönliche Entscheidungen und Haushaltsstatus gesammelt.',
|
|
cta: 'Familie öffnen',
|
|
route: 'FalukantFamily',
|
|
secondary: true,
|
|
},
|
|
{
|
|
kicker: 'Besitz',
|
|
title: 'Haus und Umfeld',
|
|
description: 'Wohnsitz und alltaeglicher Status als eigener Arbeitsbereich.',
|
|
cta: 'Zum Haus',
|
|
route: 'HouseView',
|
|
secondary: true,
|
|
},
|
|
];
|
|
},
|
|
locale() {
|
|
return window.navigator.language || 'en-US';
|
|
},
|
|
},
|
|
watch: {
|
|
socket(newSocket) {
|
|
if (newSocket) {
|
|
this.setupSocketEvents();
|
|
}
|
|
},
|
|
daemonSocket(newSocket, oldSocket) {
|
|
if (oldSocket) {
|
|
oldSocket.removeEventListener('message', this.handleDaemonMessage);
|
|
}
|
|
if (newSocket) {
|
|
newSocket.addEventListener('message', this.handleDaemonMessage);
|
|
}
|
|
},
|
|
},
|
|
async mounted() {
|
|
await this.fetchFalukantUser();
|
|
if (!this.falukantUser?.character) {
|
|
await this.fetchPotentialHeirs();
|
|
} else {
|
|
await this.fetchAllStock();
|
|
await this.fetchProductions();
|
|
}
|
|
this.setupSocketEvents();
|
|
if (this.daemonSocket) {
|
|
this.daemonSocket.addEventListener('message', this.handleDaemonMessage);
|
|
}
|
|
},
|
|
beforeUnmount() {
|
|
if (this.pendingOverviewRefresh) {
|
|
clearTimeout(this.pendingOverviewRefresh);
|
|
this.pendingOverviewRefresh = null;
|
|
}
|
|
if (this.daemonSocket) {
|
|
this.daemonSocket.removeEventListener('message', this.handleDaemonMessage);
|
|
}
|
|
if (this.socket) {
|
|
this.socket.off("falukantUserUpdated", this.fetchFalukantUser);
|
|
this.socket.off("falukantUpdateStatus");
|
|
this.socket.off("falukantUpdateFamily");
|
|
this.socket.off("children_update");
|
|
this.socket.off("falukantBranchUpdate");
|
|
this.socket.off("stock_change");
|
|
}
|
|
},
|
|
methods: {
|
|
setupSocketEvents() {
|
|
if (this.socket) {
|
|
this.socket.on("falukantUserUpdated", this.fetchFalukantUser);
|
|
this.socket.on("falukantUpdateStatus", (data) => {
|
|
this.handleEvent({ event: 'falukantUpdateStatus', ...data });
|
|
});
|
|
this.socket.on("falukantUpdateFamily", (data) => {
|
|
this.handleEvent({ event: 'falukantUpdateFamily', ...data });
|
|
});
|
|
this.socket.on("children_update", (data) => {
|
|
this.handleEvent({ event: 'children_update', ...data });
|
|
});
|
|
this.socket.on("falukantBranchUpdate", (data) => {
|
|
this.handleEvent({ event: 'falukantBranchUpdate', ...data });
|
|
});
|
|
this.socket.on("stock_change", (data) => {
|
|
this.handleEvent({ event: 'stock_change', ...data });
|
|
});
|
|
} else {
|
|
// Versuche es nach kurzer Verzögerung erneut
|
|
setTimeout(() => {
|
|
this.setupSocketEvents();
|
|
}, 1000);
|
|
}
|
|
},
|
|
getAgeGroup(age) {
|
|
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+';
|
|
},
|
|
handleDaemonMessage(event) {
|
|
if (event.data === 'ping') return;
|
|
try {
|
|
const message = JSON.parse(event.data);
|
|
this.handleEvent(message);
|
|
} catch (err) {
|
|
console.error('Overview: Error processing daemon message:', err);
|
|
}
|
|
},
|
|
matchesCurrentUser(eventData) {
|
|
if (eventData?.user_id == null) {
|
|
return true;
|
|
}
|
|
const currentIds = [this.user?.id, this.user?.hashedId]
|
|
.filter(Boolean)
|
|
.map((value) => String(value));
|
|
return currentIds.includes(String(eventData.user_id));
|
|
},
|
|
queueOverviewRefresh() {
|
|
if (this.pendingOverviewRefresh) {
|
|
clearTimeout(this.pendingOverviewRefresh);
|
|
}
|
|
this.pendingOverviewRefresh = setTimeout(async () => {
|
|
this.pendingOverviewRefresh = null;
|
|
await this.fetchFalukantUser();
|
|
if (this.falukantUser?.character) {
|
|
await this.fetchProductions();
|
|
await this.fetchAllStock();
|
|
}
|
|
}, 120);
|
|
},
|
|
async handleEvent(eventData) {
|
|
if (!this.falukantUser?.character) return;
|
|
if (!this.matchesCurrentUser(eventData)) return;
|
|
switch (eventData.event) {
|
|
case 'falukantUpdateStatus':
|
|
case 'falukantUpdateFamily':
|
|
case 'children_update':
|
|
case 'falukantBranchUpdate':
|
|
this.queueOverviewRefresh();
|
|
break;
|
|
case 'production_ready':
|
|
case 'production_started':
|
|
await this.fetchProductions();
|
|
await this.fetchAllStock();
|
|
break;
|
|
case 'stock_change':
|
|
case 'selled_items':
|
|
await this.fetchProductions();
|
|
await this.fetchAllStock();
|
|
break;
|
|
}
|
|
},
|
|
async fetchFalukantUser() {
|
|
const falukantUser = await apiClient.get('/api/falukant/user');
|
|
if (!falukantUser.data) {
|
|
this.$router.push({ name: 'FalukantCreate' });
|
|
return;
|
|
}
|
|
this.falukantUser = falukantUser.data;
|
|
},
|
|
async fetchAllStock() {
|
|
const response = await apiClient.get('/api/falukant/stockoverview');
|
|
const rawData = response.data;
|
|
const aggregated = {};
|
|
for (const item of rawData) {
|
|
const key = `${item.regionName}__${item.productLabelTr}`;
|
|
if (!aggregated[key]) {
|
|
aggregated[key] = {
|
|
regionName: item.regionName,
|
|
productLabelTr: item.productLabelTr,
|
|
quantity: 0,
|
|
};
|
|
}
|
|
aggregated[key].quantity += item.quantity;
|
|
}
|
|
this.allStock = Object.values(aggregated);
|
|
},
|
|
openBranch(branchId) {
|
|
this.$router.push({ name: 'BranchView', params: { branchId } });
|
|
},
|
|
openRoute(routeName) {
|
|
if (routeName === 'BranchView') {
|
|
const firstBranch = this.falukantUser?.branches?.[0];
|
|
if (firstBranch?.id) {
|
|
this.openBranch(firstBranch.id);
|
|
}
|
|
return;
|
|
}
|
|
this.$router.push({ name: routeName });
|
|
},
|
|
async fetchProductions() {
|
|
try {
|
|
const response = await apiClient.get('/api/falukant/productions');
|
|
this.productions = response.data;
|
|
} catch (error) {
|
|
console.error('Error fetching productions:', error);
|
|
}
|
|
},
|
|
formatDate(timestamp) {
|
|
return new Date(timestamp).toLocaleString();
|
|
},
|
|
async fetchPotentialHeirs() {
|
|
this.loadingHeirs = true;
|
|
try {
|
|
const response = await apiClient.get('/api/falukant/heirs/potential');
|
|
this.potentialHeirs = response.data || [];
|
|
if (this.potentialHeirs.length === 0) {
|
|
console.warn('No potential heirs returned from API');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error fetching potential heirs:', error);
|
|
console.error('Error details:', error.response?.data || error.message);
|
|
this.potentialHeirs = [];
|
|
} finally {
|
|
this.loadingHeirs = false;
|
|
}
|
|
},
|
|
async selectHeir(heirId) {
|
|
try {
|
|
await apiClient.post('/api/falukant/heirs/select', { heirId });
|
|
await this.fetchFalukantUser();
|
|
if (this.falukantUser?.character) {
|
|
await this.fetchAllStock();
|
|
await this.fetchProductions();
|
|
}
|
|
showSuccess(this, 'Erbe wurde übernommen.');
|
|
} catch (error) {
|
|
console.error('Error selecting heir:', error);
|
|
showError(this, this.$t('falukant.overview.heirSelection.error'));
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.falukant-overview {
|
|
max-width: var(--content-max-width);
|
|
margin: 0 auto;
|
|
padding-bottom: 24px;
|
|
}
|
|
|
|
.falukant-hero {
|
|
padding: 24px 26px;
|
|
margin-bottom: 16px;
|
|
background:
|
|
radial-gradient(circle at top right, rgba(248, 162, 43, 0.16), transparent 28%),
|
|
linear-gradient(180deg, rgba(255, 250, 243, 0.98) 0%, rgba(247, 238, 224, 0.98) 100%);
|
|
}
|
|
|
|
.falukant-kicker {
|
|
display: inline-block;
|
|
margin-bottom: 10px;
|
|
padding: 4px 10px;
|
|
border-radius: 999px;
|
|
background: rgba(248, 162, 43, 0.14);
|
|
color: #8a5411;
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
}
|
|
|
|
.falukant-hero p {
|
|
margin: 0;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.falukant-summary-grid,
|
|
.falukant-routine-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 14px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.falukant-routine-grid {
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
}
|
|
|
|
.summary-card,
|
|
.routine-card {
|
|
padding: 18px;
|
|
}
|
|
|
|
.summary-card strong {
|
|
display: block;
|
|
margin: 6px 0 8px;
|
|
font-size: 1.8rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
.summary-card p,
|
|
.routine-card p {
|
|
margin: 0;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.summary-card__label,
|
|
.routine-card__eyebrow {
|
|
display: inline-flex;
|
|
margin-bottom: 4px;
|
|
color: var(--color-text-muted);
|
|
font-size: 0.76rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.routine-card h3 {
|
|
margin: 0 0 8px;
|
|
}
|
|
|
|
.routine-card button {
|
|
margin-top: 14px;
|
|
}
|
|
|
|
.overviewcontainer {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
.overview-panel {
|
|
padding: 18px;
|
|
}
|
|
|
|
.detail-list,
|
|
.overview-card-list {
|
|
display: grid;
|
|
gap: 12px;
|
|
}
|
|
|
|
.detail-list__item,
|
|
.overview-entry-card {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding: 14px 16px;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-lg);
|
|
background: rgba(255, 255, 255, 0.66);
|
|
}
|
|
|
|
.detail-list__item {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.detail-list__item span,
|
|
.overview-entry-card__meta {
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.overview-entry-card {
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.overview-entry-card__meta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px 16px;
|
|
margin-top: 6px;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.overview-entry-card--action {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.imagecontainer {
|
|
margin-top: 20px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 20px;
|
|
position: relative;
|
|
z-index: 0;
|
|
}
|
|
|
|
.avatar {
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-lg);
|
|
background-color: rgba(255,255,255,0.72);
|
|
background-repeat: no-repeat;
|
|
image-rendering: crisp-edges;
|
|
box-shadow: var(--shadow-soft);
|
|
}
|
|
|
|
.house-with-character {
|
|
position: relative;
|
|
width: 300px;
|
|
height: 300px;
|
|
}
|
|
|
|
.house {
|
|
position: absolute;
|
|
inset: 0;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-lg);
|
|
background-repeat: no-repeat;
|
|
image-rendering: crisp-edges;
|
|
z-index: 1;
|
|
}
|
|
|
|
.character-foreground {
|
|
position: absolute;
|
|
bottom: -15px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 55%;
|
|
height: 55%;
|
|
z-index: 2;
|
|
}
|
|
|
|
.heir-selection-container {
|
|
border: 1px solid rgba(177, 59, 53, 0.18);
|
|
border-radius: var(--radius-lg);
|
|
padding: 20px;
|
|
margin: 20px 0;
|
|
background-color: rgba(255, 243, 205, 0.92);
|
|
box-shadow: var(--shadow-soft);
|
|
}
|
|
|
|
.heir-selection-container h3 {
|
|
margin-top: 0;
|
|
color: #856404;
|
|
}
|
|
|
|
.heirs-list {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
gap: 15px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.heir-card {
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-lg);
|
|
padding: 15px;
|
|
background-color: rgba(255,255,255,0.86);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.heir-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.heir-name {
|
|
font-weight: bold;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.heir-age {
|
|
color: #666;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
@media (max-width: 1100px) {
|
|
.falukant-routine-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.falukant-summary-grid,
|
|
.falukant-routine-grid,
|
|
.overviewcontainer {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.select-heir-button {
|
|
background-color: #28a745;
|
|
color: white;
|
|
border: none;
|
|
padding: 8px 16px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.select-heir-button:hover {
|
|
background-color: #218838;
|
|
}
|
|
|
|
.loading, .no-heirs {
|
|
text-align: center;
|
|
padding: 20px;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
@media (max-width: 960px) {
|
|
.overviewcontainer {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.imagecontainer {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
</style>
|