Spiel erweitert

frontend/src/views/falukant/NobilityView.vue

@@ -0,0 +1,130 @@
+<template>
+    <div class="contenthidden">
+      <StatusBar />
+      <div class="contentscroll">
+        <h2>{{ $t('falukant.nobility.title') }}</h2>
+        <SimpleTabs v-model="activeTab" :tabs="tabs" />
+  
+        <!-- OVERVIEW -->
+        <div v-if="activeTab === 'overview'">
+          <div class="nobility-section">
+            <p>
+              <strong>
+                {{ $t(`falukant.titles.${gender}.${current.labelTr}`) }}
+              </strong>
+            </p>
+          </div>
+        </div>
+  
+        <!-- ADVANCE -->
+        <div v-else-if="activeTab === 'advance'">
+          <div class="advance-section">
+            <p>
+              {{ $t('falukant.nobility.nextTitle') }}:
+              <strong>{{ $t(`falukant.titles.${gender}.${next.labelTr}`) }}</strong>
+            </p>
+            <ul class="prerequisites">
+              <li v-for="req in next.requirements" :key="req.titleId">
+                  {{ $t(`falukant.nobility.requirement.${req.requirementType}`, { amount: formatCost(req.requirementValue) }) }}
+              </li>
+            </ul>
+            <button @click="applyAdvance" class="button" :disabled="!canAdvance || isAdvancing">
+              <span v-if="!isAdvancing">{{ $t('falukant.nobility.advance.confirm') }}</span>
+              <span v-else>{{ $t('falukant.nobility.advance.processing') }}</span>
+            </button>
+            <span>-&gt;{{ canAdvance }}, {{ isAdvancing }}&lt;-</span>
+          </div>
+        </div>
+  
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  import StatusBar from '@/components/falukant/StatusBar.vue';
+  import SimpleTabs from '@/components/SimpleTabs.vue';
+  import apiClient from '@/utils/axios.js';
+  import { mapState } from 'vuex';
+  
+  export default {
+    name: 'NobilityView',
+    components: { StatusBar, SimpleTabs },
+    data() {
+      return {
+        activeTab: 'overview',
+        tabs: [
+          { value: 'overview', label: 'falukant.nobility.tabs.overview' },
+          { value: 'advance', label: 'falukant.nobility.tabs.advance' }
+        ],
+        current: { labelTr: '', requirements: [], charactersWithNobleTitle: [] },
+        next: { labelTr: '', requirements: [] },
+        isAdvancing: false
+      };
+    },
+    computed: {
+      ...mapState(['daemonSocket', 'falukantData']),
+      gender() {
+        return this.current.charactersWithNobleTitle[0]?.gender || 'male';
+      },
+      canAdvance() {
+        return true;
+      }
+    },
+    async mounted() {
+      await this.loadNobility();
+      if (this.daemonSocket) this.daemonSocket.addEventListener('message', this.handleDaemonMessage);
+    },
+    beforeUnmount() {
+      if (this.daemonSocket) this.daemonSocket.removeEventListener('message', this.handleDaemonMessage);
+    },
+    methods: {
+      async loadNobility() {
+        try {
+          const { data } = await apiClient.get('/api/falukant/nobility');
+          this.current = data.current;
+          this.next = data.next;
+        } catch (err) {
+          console.error('Error loading nobility:', err);
+        }
+      },
+      async applyAdvance() {
+        if (!this.canAdvance || this.isAdvancing) return;
+        this.isAdvancing = true;
+        try {
+          await apiClient.post('/api/falukant/nobility/advance');
+          await this.loadNobility();
+        } catch (err) {
+          console.error('Error advancing nobility:', err);
+        } finally {
+          this.isAdvancing = false;
+        }
+      },
+      handleDaemonMessage(evt) {
+        if (evt.data === 'ping') return;
+        const msg = JSON.parse(evt.data);
+        if (['nobilityChange', 'moneyChange'].includes(msg.event)) this.loadNobility();
+      },
+      formatCost(val) {
+        return new Intl.NumberFormat(navigator.language, { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(val);
+      },
+      async applyAdvance() {
+        await apiClient.post('/api/falukant/nobility');
+      }
+    }
+  };
+  </script>
+  
+  <style scoped lang="scss">
+  h2 { padding-top: 20px; }
+  .nobility-section,
+  .advance-section {
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    margin: 10px 0;
+    padding: 10px;
+  }
+  .prerequisites {
+    list-style: disc inside;
+    margin-bottom: 1rem;
+  }
+  </style>