torsten/yourpart3
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Spiel erweitert

Browse Source
This commit is contained in:
Torsten Schulz
2025-06-02 11:26:45 +02:00
parent a9e6c82275
commit 5029be81e9
56 changed files with 4549 additions and 436 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
frontend/src/components/falukant/StatusBar.vue
View File

@@ -1,9 +1,12 @@
<template>
<div class="statusbar">
<template v-for="item in statusItems" :key="item.key">
<div class="status-item" v-if="item.value !== null" :title="$t(`falukant.statusbar.${item.key}`)">
<div class="status-item" v-if="item.value !== null && item.image == null" :title="$t(`falukant.statusbar.${item.key}`)">
<span class="status-icon">{{ item.icon }}: {{ item.value }}</span>
</div>
<div class="status-item" v-else-if="item.image !== null" :title="$t(`falukant.statusbar.${item.key}`)">
<span class="status-icon">{{ item.icon }}:</span> <img :src="'/images/icons/falukant/relationship-' + item.image + '.png'" class="relationship-icon" />
</div>
</template>
<span v-if="statusItems.length > 0">
<template v-for="(menuItem, key) in menu.falukant.children" :key="menuItem.id" >
@@ -23,9 +26,10 @@ export default {
return {
statusItems: [
{ key: "age", icon: "👶", value: 0 },
{ key: "relationship", icon: "💑", image: null },
{ key: "wealth", icon: "💰", value: 0 },
{ key: "health", icon: "❤️", value: "Good" },
{ key: "events", icon: "📰", value: null },
{ key: "events", icon: "📰", value: null, image: null },
],
};
},
@@ -56,6 +60,9 @@ export default {
const response = await apiClient.get("/api/falukant/info");
const { money, character, events } = response.data;
const { age, health } = character;
const relationship = response.data.character.relationshipsAsCharacter1[0]?.relationshipType?.tr
|| response.data.character.relationshipsAsCharacter2[0]?.relationshipType?.tr
|| null;
let healthStatus = '';
if (health > 90) {
healthStatus = this.$t("falukant.health.amazing");
@@ -70,9 +77,10 @@ export default {
}
this.statusItems = [
{ key: "age", icon: "👶", value: age },
{ key: "relationship", icon: "💑", image: relationship },
{ key: "wealth", icon: "💰", value: Intl.NumberFormat(navigator.language, { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(money) },
{ key: "health", icon: "❤️", value: healthStatus },
{ key: "events", icon: "📰", value: events || null },
{ key: "events", icon: "📰", value: events || null, image: null },
];
} catch (error) {
console.error("Error fetching status:", error);
@@ -112,7 +120,7 @@ export default {
border: 1px solid #ccc;
border-radius: 4px;
width: calc(100% + 40px);
gap: 2em;
gap: 1.2em;
margin: -21px -20px 1.5em -20px;
position: fixed;
}
@@ -120,6 +128,8 @@ export default {
.status-item {
text-align: center;
cursor: pointer;
display: inline-flex;
align-items: center;
}
.status-icon {
@@ -132,4 +142,9 @@ export default {
cursor: pointer;
padding: 4px 2px 0 0;
}
.relationship-icon {
max-width: 24px;
max-height: 24px;
}
</style>