Spiel erweitert

frontend/src/components/SimpleTabs.vue

@@ -0,0 +1,56 @@
+<template>
+    <div class="simple-tabs">
+      <button
+        v-for="tab in tabs"
+        :key="tab.value"
+        :class="['simple-tab', { active: internalValue === tab.value }]"
+        @click="$emit('update:modelValue', tab.value)"
+      >
+        <slot name="label" :tab="tab">
+          {{ $t(tab.label) }}
+        </slot>
+      </button>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    name: 'SimpleTabs',
+    props: {
+      tabs: {
+        type: Array,
+        required: true,
+      },
+      modelValue: {
+        type: [String, Number],
+        required: true,
+      },
+    },
+    computed: {
+      internalValue() {
+        return this.modelValue;
+      }
+    }
+  };
+  </script>
+  
+  <style scoped>
+  .simple-tabs {
+    display: flex;
+    margin-top: 1rem;
+  }
+  
+  .simple-tab {
+    padding: 0.5rem 1rem;
+    background: #fff;
+    border: none;
+    cursor: pointer;
+    transition: background 0.2s;
+  }
+  
+  .simple-tab.active {
+    background: #F9A22C;
+    color: #000;
+  }
+  </style>
+  

frontend/src/components/falukant/StatusBar.vue

@@ -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>