42349e46c8
Änderungen: - Implementierung des neuen Routers für TaxiHighscore zur Verwaltung von Highscore-Daten. - Anpassung der Datenbankmodelle zur Unterstützung von TaxiHighscore-Associations. - Erweiterung der Vue-Komponenten zur Anzeige und Speicherung von Highscores im Taxi-Spiel. - Verbesserung der Statusanzeige im AppHeader zur besseren Benutzerinteraktion. Diese Anpassungen erweitern die Spielmechanik und Benutzererfahrung, indem sie die Verwaltung von Highscores integrieren und die Benutzeroberfläche optimieren.
128 lines
2.7 KiB
Vue
128 lines
2.7 KiB
Vue
<template>
|
|
<header>
|
|
<div class="logo"><img src="/images/logos/logo.png" /></div>
|
|
<div class="advertisement">Advertisement</div>
|
|
<div class="connection-status" v-if="isLoggedIn">
|
|
<div class="status-indicator" :class="backendStatusClass">
|
|
<span class="status-dot"></span>
|
|
<span class="status-text">B</span>
|
|
</div>
|
|
<div class="status-indicator" :class="daemonStatusClass">
|
|
<span class="status-dot"></span>
|
|
<span class="status-text">D</span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from 'vuex';
|
|
|
|
export default {
|
|
name: 'AppHeader',
|
|
computed: {
|
|
...mapGetters(['isLoggedIn', 'connectionStatus', 'daemonConnectionStatus']),
|
|
backendStatusClass() {
|
|
return {
|
|
'status-connected': this.connectionStatus === 'connected',
|
|
'status-connecting': this.connectionStatus === 'connecting',
|
|
'status-disconnected': this.connectionStatus === 'disconnected',
|
|
'status-error': this.connectionStatus === 'error'
|
|
};
|
|
},
|
|
daemonStatusClass() {
|
|
return {
|
|
'status-connected': this.daemonConnectionStatus === 'connected',
|
|
'status-connecting': this.daemonConnectionStatus === 'connecting',
|
|
'status-disconnected': this.daemonConnectionStatus === 'disconnected',
|
|
'status-error': this.daemonConnectionStatus === 'error'
|
|
};
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 10px;
|
|
background-color: #f8a22b;
|
|
}
|
|
.logo, .title, .advertisement {
|
|
text-align: center;
|
|
}
|
|
.advertisement {
|
|
flex: 1;
|
|
}
|
|
.logo > img {
|
|
max-height: 50px;
|
|
}
|
|
|
|
.connection-status {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: 10px;
|
|
gap: 5px;
|
|
}
|
|
|
|
.status-indicator {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
font-size: 6pt;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.status-dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
margin-right: 4px;
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
.status-connected .status-dot {
|
|
background-color: #4caf50;
|
|
}
|
|
|
|
.status-connecting .status-dot {
|
|
background-color: #ff9800;
|
|
}
|
|
|
|
.status-disconnected .status-dot {
|
|
background-color: #f44336;
|
|
}
|
|
|
|
.status-error .status-dot {
|
|
background-color: #f44336;
|
|
}
|
|
|
|
.status-connected {
|
|
background-color: rgba(76, 175, 80, 0.1);
|
|
color: #2e7d32;
|
|
}
|
|
|
|
.status-connecting {
|
|
background-color: rgba(255, 152, 0, 0.1);
|
|
color: #f57c00;
|
|
}
|
|
|
|
.status-disconnected {
|
|
background-color: rgba(244, 67, 54, 0.1);
|
|
color: #d32f2f;
|
|
}
|
|
|
|
.status-error {
|
|
background-color: rgba(244, 67, 54, 0.1);
|
|
color: #d32f2f;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% { opacity: 1; }
|
|
50% { opacity: 0.5; }
|
|
100% { opacity: 1; }
|
|
}
|
|
</style>
|