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

feat(StatusBar, falukantService): enhance character information display and UI structure

Browse Source 
- Updated falukantService to include predefined first and last names in character data retrieval.
- Refactored StatusBar component layout to improve organization and visual clarity, introducing sections for identity and stats.
- Enhanced character name handling to prioritize display names, ensuring a more dynamic user experience.
This commit is contained in:
Torsten Schulz (local)
2026-03-30 10:31:59 +02:00
parent 028da5a9f0
commit c531ae2caf
2 changed files with 127 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,44 +1,54 @@
<template>
<div class="statusbar">
<div class="status-item messages" @click="openMessages" :title="$t('falukant.messages.tooltip')">
<span class="badge" v-if="unreadCount > 0">{{ unreadCount }}</span>
<img src="/images/icons/falukant/messages24.png" class="menu-icon" />
</div>
<div v-if="characterName" class="status-identity" :title="characterName">
<span class="status-identity__label">{{ $t('falukant.overview.metadata.name') }}</span>
<strong class="status-identity__name">{{ characterName }}</strong>
</div>
<template v-for="item in statusItems" :key="item.key">
<div class="status-item" v-if="item.value !== null && item.image == null">
<span class="status-icon-wrapper">
<template v-if="item.iconImage">
<img :src="'/images/icons/' + item.iconImage" class="inline-icon" width="16" height="16" :title="String(item.value)" />
</template>
<template v-else>
<span class="status-icon-symbol" :title="String(item.value)">{{ item.icon }}</span>
</template>
</span>
<span class="status-label" :title="$t(`falukant.statusbar.${item.key}`)">{{ item.value }}</span>
<div class="statusbar-main">
<div class="statusbar-section statusbar-section--identity">
<div class="status-item messages" @click="openMessages" :title="$t('falukant.messages.tooltip')">
<span class="badge" v-if="unreadCount > 0">{{ unreadCount }}</span>
<img src="/images/icons/falukant/messages24.png" class="menu-icon" />
</div>
<div v-if="characterName" class="status-identity" :title="characterName">
<span class="status-identity__label">{{ $t('falukant.overview.metadata.name') }}</span>
<strong class="status-identity__name">{{ characterName }}</strong>
</div>
</div>
<div class="status-item" v-else-if="item.image !== null">
<span class="status-icon-wrapper">
<span class="status-icon-symbol" :title="$t(`falukant.statusbar.${item.key}`)">{{ item.icon }}</span>
</span>
<img :src="'/images/icons/falukant/relationship-' + item.image + '.png'" class="relationship-icon" :title="$t(`falukant.statusbar.${item.key}`)" />
<div class="statusbar-section statusbar-section--stats">
<template v-for="item in statusItems" :key="item.key">
<div class="status-item" v-if="item.value !== null && item.image == null">
<span class="status-icon-wrapper">
<template v-if="item.iconImage">
<img :src="'/images/icons/' + item.iconImage" class="inline-icon" width="16" height="16" :title="String(item.value)" />
</template>
<template v-else>
<span class="status-icon-symbol" :title="String(item.value)">{{ item.icon }}</span>
</template>
</span>
<span class="status-label" :title="$t(`falukant.statusbar.${item.key}`)">{{ item.value }}</span>
</div>
<div class="status-item" v-else-if="item.image !== null">
<span class="status-icon-wrapper">
<span class="status-icon-symbol" :title="$t(`falukant.statusbar.${item.key}`)">{{ item.icon }}</span>
</span>
<img :src="'/images/icons/falukant/relationship-' + item.image + '.png'" class="relationship-icon" :title="$t(`falukant.statusbar.${item.key}`)" />
</div>
</template>
</div>
<div
v-if="statusItems.length > 0 && menu.falukant && menu.falukant.children"
class="statusbar-section statusbar-section--nav"
>
<div class="quick-access">
<template v-for="(menuItem, key) in menu.falukant.children" :key="menuItem.id" >
<img
:src="'/images/icons/falukant/shortmap/' + key + '.png'"
class="menu-icon"
@click="openPage(menuItem)"
:title="$t(`navigation.m-falukant.${key}`)"
/>
</template>
</div>
</div>
</template>
<div
v-if="statusItems.length > 0 && menu.falukant && menu.falukant.children"
class="quick-access"
>
<template v-for="(menuItem, key) in menu.falukant.children" :key="menuItem.id" >
<img
:src="'/images/icons/falukant/shortmap/' + key + '.png'"
class="menu-icon"
@click="openPage(menuItem)"
:title="$t(`navigation.m-falukant.${key}`)"
/>
</template>
</div>
<div v-if="debtorsPrison.active" class="statusbar-warning" :class="{ 'is-prison': debtorsPrison.inDebtorsPrison }">
<strong>
@@ -160,9 +170,10 @@ export default {
const response = await apiClient.get("/api/falukant/info");
const { money, character, events } = response.data;
const { age, health } = character;
const firstName = character?.definedFirstName?.name || '';
const lastName = character?.definedLastName?.name || '';
this.characterName = [firstName, lastName].filter(Boolean).join(' ');
const firstName = character?.definedFirstName?.name || character?.firstName || '';
const lastName = character?.definedLastName?.name || character?.lastName || '';
const explicitName = character?.displayName || character?.name || '';
this.characterName = explicitName || [firstName, lastName].filter(Boolean).join(' ');
const relationship = response.data.character.relationshipsAsCharacter1[0]?.relationshipType?.tr
|| response.data.character.relationshipsAsCharacter2[0]?.relationshipType?.tr
|| null;
@@ -306,10 +317,6 @@ export default {
<style scoped>
.statusbar {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
background:
linear-gradient(180deg, rgba(255, 251, 246, 0.96) 0%, rgba(247, 238, 224, 0.98) 100%);
border: 1px solid var(--color-border);
@@ -317,7 +324,6 @@ export default {
box-sizing: border-box;
width: 100%;
max-width: 100%;
gap: 1.2em;
padding: 0.55rem 0.9rem;
margin: 0 0 1.5em 0;
position: sticky;
@@ -326,8 +332,41 @@ export default {
box-shadow: var(--shadow-soft);
}
.statusbar-main {
display: grid;
grid-template-columns: minmax(15rem, 1.1fr) minmax(0, 1.5fr) minmax(14rem, 1fr);
align-items: center;
gap: 0.85rem 1rem;
width: 100%;
}
.statusbar-section {
min-width: 0;
}
.statusbar-section--identity {
display: flex;
align-items: center;
gap: 0.7rem;
min-width: 0;
}
.statusbar-section--stats {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 0.55rem;
min-width: 0;
}
.statusbar-section--nav {
display: flex;
justify-content: flex-end;
min-width: 0;
}
.statusbar-warning {
flex: 1 1 100%;
display: flex;
align-items: center;
gap: 10px;
@@ -347,7 +386,6 @@ export default {
.status-item {
text-align: center;
cursor: pointer;
display: inline-flex;
align-items: center;
min-height: 34px;
@@ -357,17 +395,24 @@ export default {
border: 1px solid rgba(93, 64, 55, 0.08);
}
.status-item.messages {
cursor: pointer;
flex: 0 0 auto;
}
.status-identity {
display: inline-flex;
align-items: baseline;
gap: 0.5rem;
min-height: 34px;
padding: 0.2rem 0.95rem;
border-radius: 999px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.15rem;
min-height: 50px;
padding: 0.45rem 1rem;
border-radius: var(--radius-md);
background: linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(248, 241, 231, 0.98) 100%);
border: 1px solid rgba(126, 71, 27, 0.16);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.65);
max-width: min(100%, 26rem);
min-width: 0;
flex: 1 1 auto;
}
.status-identity__label {
@@ -379,7 +424,8 @@ export default {
}
.status-identity__name {
font-size: 0.98rem;
font-size: 1rem;
line-height: 1.2;
color: #5f3617;
white-space: nowrap;
overflow: hidden;
@@ -387,11 +433,12 @@ export default {
}
.quick-access {
display: inline-flex;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.2rem;
justify-content: flex-end;
gap: 0.15rem;
min-width: 0;
}
.status-icon-wrapper {
@@ -443,4 +490,22 @@ export default {
vertical-align: middle;
margin-right: 4px;
}
@media (max-width: 1180px) {
.statusbar-main {
grid-template-columns: 1fr;
}
.statusbar-section--stats {
justify-content: flex-start;
}
.statusbar-section--nav {
justify-content: flex-start;
}
.quick-access {
justify-content: flex-start;
}
}
</style>