reptil1990/Ninjaserver
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add bilingual support (German/English) with language selector

Browse Source 
- Added language selector in top-left corner
- Implemented data attributes for all translatable text
- Created language management system with localStorage persistence
- Updated all JavaScript functions to support both languages
- Added translations for notifications, error messages, and UI elements
- Maintained existing functionality while adding language switching
This commit is contained in:
Carsten Graf
2025-09-10 18:42:56 +02:00
parent c84d38b48f
commit 936db67ba4
6 changed files with 239 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
public/css/generator.css
View File

@@ -21,7 +21,7 @@ body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
justify-content: flex-start;
padding: 20px;
background-image:
radial-gradient(circle at 20% 80%, #1a1a2e 0%, transparent 50%),
@@ -38,11 +38,10 @@ body {
max-width: 700px;
width: 100%;
position: relative;
overflow: hidden;
flex-grow: 1;
overflow: visible;
margin-bottom: 20px;
display: flex;
flex-direction: column;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.1);
}

32
public/css/leaderboard.css
View File

@@ -24,6 +24,38 @@ body {
min-height: 100vh;
}
/* Language Selector */
.language-selector {
position: fixed;
top: 2rem;
left: 2rem;
z-index: 1000;
}
.language-selector select {
padding: 0.5rem 1rem;
background: rgba(15, 23, 42, 0.9);
border: 1px solid #334155;
border-radius: 0.5rem;
color: #ffffff;
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
backdrop-filter: blur(10px);
}
.language-selector select:hover {
border-color: #00d4ff;
box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.1);
}
.language-selector select:focus {
outline: none;
border-color: #00d4ff;
box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.2);
}
.header-section {
text-align: center;
margin-bottom: 3rem;

14
public/generator.html
View File

@@ -67,5 +67,19 @@
<script src="/js/cookie-consent.js"></script>
<script src="/js/generator.js"></script>
<script>
// Verhindert Enter-Taste in Eingabefeldern
document.addEventListener('DOMContentLoaded', function() {
const inputs = document.querySelectorAll('input, textarea');
inputs.forEach(input => {
input.addEventListener('keydown', function(e) {
if (e.key === 'Enter') {
e.preventDefault();
return false;
}
});
});
});
</script>
</body>
</html>

58
public/index.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="de">
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -15,13 +15,21 @@
<div class="notification-content">
<div class="notification-icon">🏁</div>
<div class="notification-text">
<div class="notification-title" id="notificationTitle">Neue Zeit!</div>
<div class="notification-subtitle" id="notificationSubtitle">Ein neuer Rekord wurde erstellt</div>
<div class="notification-title" id="notificationTitle" data-de="Neue Zeit!" data-en="New Time!">New Time!</div>
<div class="notification-subtitle" id="notificationSubtitle" data-de="Ein neuer Rekord wurde erstellt" data-en="A new record has been created">A new record has been created</div>
</div>
</div>
</div>
<div class="main-container">
<!-- Language Selector -->
<div class="language-selector">
<select id="languageSelect" onchange="changeLanguage()">
<option value="de">🇩🇪 Deutsch</option>
<option value="en">🇺🇸 English</option>
</select>
</div>
<!-- Admin Login Button -->
<div class="mobile-nav-buttons">
<a href="/login" class="admin-login-btn" id="adminLoginBtn">🔐 Login</a>
@@ -31,47 +39,47 @@
<div class="header-section">
<h1 class="main-title">NINJACROSS LEADERBOARD</h1>
<p class="tagline">Die ultimative NinjaCross-Rangliste</p>
<p class="tagline" data-de="Die ultimative NinjaCross-Rangliste" data-en="The ultimate NinjaCross leaderboard">The ultimate NinjaCross leaderboard</p>
</div>
<div class="dashboard-grid">
<div class="control-panel">
<div class="control-group">
<label class="control-label">Standort</label>
<label class="control-label" data-de="Standort" data-en="Location">Location</label>
<div class="location-control">
<select class="custom-select location-select" id="locationSelect">
<option value="">📍 Bitte Standort auswählen</option>
<!-- Standorte werden dynamisch geladen -->
<option value="">📍 Please select location</option>
<!-- Locations are loaded dynamically -->
</select>
<button class="location-btn" id="findLocationBtn" onclick="findNearestLocation()" title="Nächstgelegenen Standort finden">
📍 Mein Standort
<button class="location-btn" id="findLocationBtn" onclick="findNearestLocation()" title="Find nearest location" data-de="📍 Mein Standort" data-en="📍 My Location">
📍 My Location
</button>
</div>
</div>
<div class="control-group">
<label class="control-label">Zeitraum</label>
<label class="control-label" data-de="Zeitraum" data-en="Time Period">Time Period</label>
<div class="time-tabs">
<button class="time-tab" data-period="today">
<span class="tab-icon">📅</span>
<span class="tab-text">Heute</span>
<span class="tab-text" data-de="Heute" data-en="Today">Today</span>
</button>
<button class="time-tab" data-period="week">
<span class="tab-icon">📊</span>
<span class="tab-text">Diese Woche</span>
<span class="tab-text" data-de="Diese Woche" data-en="This Week">This Week</span>
</button>
<button class="time-tab" data-period="month">
<span class="tab-icon">📈</span>
<span class="tab-text">Dieser Monat</span>
<span class="tab-text" data-de="Dieser Monat" data-en="This Month">This Month</span>
</button>
<button class="time-tab active" data-period="all">
<span class="tab-icon">♾️</span>
<span class="tab-text">Alle Zeiten</span>
<span class="tab-text" data-de="Alle Zeiten" data-en="All Times">All Times</span>
</button>
</div>
</div>
<button class="refresh-btn pulse-animation" onclick="loadData()">
<button class="refresh-btn pulse-animation" onclick="loadData()" data-de="⚡ Live Update" data-en="⚡ Live Update">
⚡ Live Update
</button>
</div>
@@ -80,15 +88,15 @@
<div class="stats-grid">
<div class="stat-card">
<div class="stat-value" id="totalPlayers">0</div>
<div class="stat-label">Teilnehmer</div>
<div class="stat-label" data-de="Teilnehmer" data-en="Participants">Participants</div>
</div>
<div class="stat-card">
<div class="stat-value" id="bestTime">--:--</div>
<div class="stat-label">Rekordzeit</div>
<div class="stat-label" data-de="Rekordzeit" data-en="Record Time">Record Time</div>
</div>
<div class="stat-card">
<div class="stat-value" id="totalRecords">0</div>
<div class="stat-label">Läufe</div>
<div class="stat-label" data-de="Läufe" data-en="Runs">Runs</div>
</div>
</div>
</div>
@@ -97,15 +105,15 @@
<div class="leaderboard-container">
<div class="leaderboard-header">
<div class="active-filters" id="currentSelection">
📍 Bitte Standort auswählen • ♾️ Alle Zeiten
📍 Please select location • ♾️ All Times
</div>
<div class="last-sync" id="lastUpdated">
Letzter Sync: Loading...
Last Sync: Loading...
</div>
</div>
<div class="rankings-list" id="rankingList">
<!-- Rankings werden hier eingefügt -->
<!-- Rankings will be inserted here -->
</div>
</div>
</div>
@@ -114,12 +122,12 @@
<footer class="footer">
<div class="footer-content">
<div class="footer-links">
<a href="/impressum.html" class="footer-link">Impressum</a>
<a href="/datenschutz.html" class="footer-link">Datenschutz</a>
<button id="cookie-settings-footer" class="footer-link cookie-settings-btn">Cookie-Einstellungen</button>
<a href="/impressum.html" class="footer-link" data-de="Impressum" data-en="Imprint">Imprint</a>
<a href="/datenschutz.html" class="footer-link" data-de="Datenschutz" data-en="Privacy">Privacy</a>
<button id="cookie-settings-footer" class="footer-link cookie-settings-btn" data-de="Cookie-Einstellungen" data-en="Cookie Settings">Cookie Settings</button>
</div>
<div class="footer-text">
<p>&copy; 2024 NinjaCross. Alle Rechte vorbehalten.</p>
<p data-de="&copy; 2024 NinjaCross. Alle Rechte vorbehalten." data-en="&copy; 2024 NinjaCross. All rights reserved.">&copy; 2024 NinjaCross. All rights reserved.</p>
</div>
</div>
</footer>

188
public/js/leaderboard.js
View File

@@ -65,15 +65,15 @@ function saveLocationSelection(locationId, locationName) {
// WebSocket Event Handlers
socket.on('connect', () => {
console.log('🔌 WebSocket verbunden');
console.log('🔌 WebSocket connected');
});
socket.on('disconnect', () => {
console.log('🔌 WebSocket getrennt');
console.log('🔌 WebSocket disconnected');
});
socket.on('newTime', (data) => {
console.log('🏁 Neue Zeit empfangen:', data);
console.log('🏁 New time received:', data);
showNotification(data);
// Reload data to show the new time
loadData();
@@ -86,12 +86,13 @@ function showNotification(timeData) {
const notificationSubtitle = document.getElementById('notificationSubtitle');
// Format the time data
const playerName = timeData.player_name || 'Unbekannter Spieler';
const locationName = timeData.location_name || 'Unbekannter Standort';
const playerName = timeData.player_name || (currentLanguage === 'de' ? 'Unbekannter Spieler' : 'Unknown Player');
const locationName = timeData.location_name || (currentLanguage === 'de' ? 'Unbekannter Standort' : 'Unknown Location');
const timeString = timeData.recorded_time || '--:--';
// Update notification content
notificationTitle.textContent = `🏁 Neue Zeit von ${playerName}!`;
const newTimeText = currentLanguage === 'de' ? 'Neue Zeit von' : 'New time from';
notificationTitle.textContent = `🏁 ${newTimeText} ${playerName}!`;
notificationSubtitle.textContent = `${timeString} • ${locationName}`;
// Show notification
@@ -171,7 +172,8 @@ async function loadLocations() {
locationsData = locations;
// Clear existing options and set default placeholder
locationSelect.innerHTML = '<option value="">📍 Bitte Standort auswählen</option>';
const placeholderText = currentLanguage === 'de' ? '📍 Bitte Standort auswählen' : '📍 Please select location';
locationSelect.innerHTML = `<option value="">${placeholderText}</option>`;
// Add locations from database
locations.forEach(location => {
@@ -230,14 +232,17 @@ async function findNearestLocation() {
// Check if geolocation is supported
if (!navigator.geolocation) {
showLocationError('Geolocation wird von diesem Browser nicht unterstützt.');
const errorMsg = currentLanguage === 'de' ?
'Geolocation wird von diesem Browser nicht unterstützt.' :
'Geolocation is not supported by this browser.';
showLocationError(errorMsg);
return;
}
// Update button state to loading
btn.disabled = true;
btn.classList.add('loading');
btn.textContent = '🔍 Suche...';
btn.textContent = currentLanguage === 'de' ? '🔍 Suche...' : '🔍 Searching...';
try {
// Get user's current position
@@ -283,18 +288,24 @@ async function findNearestLocation() {
} catch (error) {
console.error('Error getting location:', error);
let errorMessage = 'Standort konnte nicht ermittelt werden.';
let errorMessage = currentLanguage === 'de' ? 'Standort konnte nicht ermittelt werden.' : 'Location could not be determined.';
if (error.code) {
switch(error.code) {
case error.PERMISSION_DENIED:
errorMessage = 'Standortzugriff wurde verweigert. Bitte erlaube den Standortzugriff in den Browser-Einstellungen.';
errorMessage = currentLanguage === 'de' ?
'Standortzugriff wurde verweigert. Bitte erlaube den Standortzugriff in den Browser-Einstellungen.' :
'Location access was denied. Please allow location access in browser settings.';
break;
case error.POSITION_UNAVAILABLE:
errorMessage = 'Standortinformationen sind nicht verfügbar.';
errorMessage = currentLanguage === 'de' ?
'Standortinformationen sind nicht verfügbar.' :
'Location information is not available.';
break;
case error.TIMEOUT:
errorMessage = 'Zeitüberschreitung beim Abrufen des Standorts.';
errorMessage = currentLanguage === 'de' ?
'Zeitüberschreitung beim Abrufen des Standorts.' :
'Timeout while retrieving location.';
break;
}
}
@@ -304,7 +315,7 @@ async function findNearestLocation() {
// Reset button state
btn.disabled = false;
btn.classList.remove('loading');
btn.textContent = '📍 Mein Standort';
btn.textContent = currentLanguage === 'de' ? '📍 Mein Standort' : '📍 My Location';
}
}
@@ -315,8 +326,10 @@ function showLocationSuccess(locationName, distance) {
const notificationSubtitle = document.getElementById('notificationSubtitle');
// Update notification content
notificationTitle.textContent = `📍 Standort gefunden!`;
notificationSubtitle.textContent = `${locationName} (${distance.toFixed(1)} km entfernt)`;
const locationFoundText = currentLanguage === 'de' ? 'Standort gefunden!' : 'Location found!';
const distanceText = currentLanguage === 'de' ? 'km entfernt' : 'km away';
notificationTitle.textContent = `📍 ${locationFoundText}`;
notificationSubtitle.textContent = `${locationName} (${distance.toFixed(1)} ${distanceText})`;
// Show notification
notificationBubble.classList.remove('hide');
@@ -338,7 +351,8 @@ function showLocationError(message) {
notificationBubble.style.background = 'linear-gradient(135deg, #dc3545, #c82333)';
// Update notification content
notificationTitle.textContent = '❌ Fehler';
const errorText = currentLanguage === 'de' ? 'Fehler' : 'Error';
notificationTitle.textContent = `❌ ${errorText}`;
notificationSubtitle.textContent = message;
// Show notification
@@ -356,15 +370,16 @@ function showLocationError(message) {
// Show prompt when no location is selected
function showLocationSelectionPrompt() {
const rankingList = document.getElementById('rankingList');
const emptyTitle = currentLanguage === 'de' ? 'Standort auswählen' : 'Select Location';
const emptyDescription = currentLanguage === 'de' ?
'Bitte wähle einen Standort aus dem Dropdown-Menü aus<br>oder nutze den "📍 Mein Standort" Button, um automatisch<br>den nächstgelegenen Standort zu finden.' :
'Please select a location from the dropdown menu<br>or use the "📍 My Location" button to automatically<br>find the nearest location.';
rankingList.innerHTML = `
<div class="empty-state">
<div class="empty-icon">📍</div>
<div class="empty-title">Standort auswählen</div>
<div class="empty-description">
Bitte wähle einen Standort aus dem Dropdown-Menü aus<br>
oder nutze den "📍 Mein Standort" Button, um automatisch<br>
den nächstgelegenen Standort zu finden.
</div>
<div class="empty-title">${emptyTitle}</div>
<div class="empty-description">${emptyDescription}</div>
</div>
`;
@@ -410,10 +425,11 @@ async function loadData() {
const leaderboardData = times.map(time => {
const { minutes, seconds, milliseconds } = time.recorded_time;
const timeString = `${minutes}:${seconds.toString().padStart(2, '0')}.${milliseconds}`;
const playerName = time.player ?
`${time.player.firstname} ${time.player.lastname}` :
'Unknown Player';
const locationName = time.location ? time.location.name : 'Unknown Location';
const playerName = time.player ?
`${time.player.firstname} ${time.player.lastname}` :
(currentLanguage === 'de' ? 'Unbekannter Spieler' : 'Unknown Player');
const locationName = time.location ? time.location.name :
(currentLanguage === 'de' ? 'Unbekannter Standort' : 'Unknown Location');
const date = new Date(time.created_at).toISOString().split('T')[0];
return {
@@ -482,34 +498,43 @@ function updateCurrentSelection() {
// Get the display text from the selected option
const locationSelect = document.getElementById('locationSelect');
const selectedLocationOption = locationSelect.options[locationSelect.selectedIndex];
const locationDisplay = selectedLocationOption ? selectedLocationOption.textContent : '📍 Bitte Standort auswählen';
const locationDisplay = selectedLocationOption ? selectedLocationOption.textContent :
(currentLanguage === 'de' ? '📍 Bitte Standort auswählen' : '📍 Please select location');
const periodIcons = {
const periodIcons = currentLanguage === 'de' ? {
'today': '📅 Heute',
'week': '📊 Diese Woche',
'month': '📈 Dieser Monat',
'all': '♾️ Alle Zeiten'
} : {
'today': '📅 Today',
'week': '📊 This Week',
'month': '📈 This Month',
'all': '♾️ All Times'
};
document.getElementById('currentSelection').textContent =
`${locationDisplay} • ${periodIcons[period]}`;
const lastSyncText = currentLanguage === 'de' ? 'Letzter Sync' : 'Last Sync';
document.getElementById('lastUpdated').textContent =
`Letzter Sync: ${new Date().toLocaleTimeString('de-DE')}`;
`${lastSyncText}: ${new Date().toLocaleTimeString(currentLanguage === 'de' ? 'de-DE' : 'en-US')}`;
}
function updateLeaderboard(data) {
const rankingList = document.getElementById('rankingList');
if (data.length === 0) {
const emptyTitle = currentLanguage === 'de' ? 'Keine Rekorde gefunden' : 'No records found';
const emptyDescription = currentLanguage === 'de' ?
'Für diese Filtereinstellungen liegen noch keine Zeiten vor.<br>Versuche es mit einem anderen Zeitraum oder Standort.' :
'No times available for these filter settings.<br>Try a different time period or location.';
rankingList.innerHTML = `
<div class="empty-state">
<div class="empty-icon">🏁</div>
<div class="empty-title">Keine Rekorde gefunden</div>
<div class="empty-description">
Für diese Filtereinstellungen liegen noch keine Zeiten vor.<br>
Versuche es mit einem anderen Zeitraum oder Standort.
</div>
<div class="empty-title">${emptyTitle}</div>
<div class="empty-description">${emptyDescription}</div>
</div>
`;
return;
@@ -533,7 +558,7 @@ function updateLeaderboard(data) {
trophy = '⭐';
}
const formatDate = new Date(player.date).toLocaleDateString('de-DE', {
const formatDate = new Date(player.date).toLocaleDateString(currentLanguage === 'de' ? 'de-DE' : 'en-US', {
day: '2-digit',
month: 'short'
});
@@ -600,8 +625,99 @@ function startAutoRefresh() {
setInterval(loadData, 45000);
}
// Language Management
let currentLanguage = 'en'; // Default to English
// Translation function
function translateElement(element, language) {
if (element.dataset[language]) {
element.textContent = element.dataset[language];
}
}
// Change language function
function changeLanguage() {
const languageSelect = document.getElementById('languageSelect');
currentLanguage = languageSelect.value;
// Save language preference
localStorage.setItem('ninjacross_language', currentLanguage);
// Translate all elements with data attributes
const elementsToTranslate = document.querySelectorAll('[data-de][data-en]');
elementsToTranslate.forEach(element => {
translateElement(element, currentLanguage);
});
// Update dynamic content
updateDynamicContent();
console.log(`🌐 Language changed to: ${currentLanguage}`);
}
// Update dynamic content that's not in HTML
function updateDynamicContent() {
// Update location select placeholder
const locationSelect = document.getElementById('locationSelect');
if (locationSelect && locationSelect.options[0]) {
locationSelect.options[0].textContent = currentLanguage === 'de' ?
'📍 Bitte Standort auswählen' : '📍 Please select location';
}
// Update find location button
const findLocationBtn = document.getElementById('findLocationBtn');
if (findLocationBtn) {
findLocationBtn.textContent = currentLanguage === 'de' ?
'📍 Mein Standort' : '📍 My Location';
findLocationBtn.title = currentLanguage === 'de' ?
'Nächstgelegenen Standort finden' : 'Find nearest location';
}
// Update refresh button
const refreshBtn = document.querySelector('.refresh-btn');
if (refreshBtn) {
refreshBtn.textContent = currentLanguage === 'de' ?
'⚡ Live Update' : '⚡ Live Update';
}
// Update notification elements
const notificationTitle = document.getElementById('notificationTitle');
const notificationSubtitle = document.getElementById('notificationSubtitle');
if (notificationTitle) {
notificationTitle.textContent = currentLanguage === 'de' ? 'Neue Zeit!' : 'New Time!';
}
if (notificationSubtitle) {
notificationSubtitle.textContent = currentLanguage === 'de' ?
'Ein neuer Rekord wurde erstellt' : 'A new record has been created';
}
// Update current selection display
updateCurrentSelection();
// Reload data to update any dynamic content
if (document.getElementById('locationSelect').value) {
loadData();
} else {
showLocationSelectionPrompt();
}
}
// Load saved language preference
function loadLanguagePreference() {
const savedLanguage = localStorage.getItem('ninjacross_language');
if (savedLanguage && (savedLanguage === 'de' || savedLanguage === 'en')) {
currentLanguage = savedLanguage;
const languageSelect = document.getElementById('languageSelect');
if (languageSelect) {
languageSelect.value = currentLanguage;
}
}
}
// Start the application when DOM is loaded
document.addEventListener('DOMContentLoaded', function() {
loadLanguagePreference();
changeLanguage(); // Apply saved language
init();
startAutoRefresh();

6
public/js/login.js
View File

@@ -9,7 +9,11 @@ const supabase = window.supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
async function checkAuth() {
const { data: { session } } = await supabase.auth.getSession();
if (session) {
window.location.href = '/';
// Show a message that user is already logged in
showMessage('Sie sind bereits eingeloggt! Weiterleitung zum Dashboard...', 'success');
setTimeout(() => {
window.location.href = '/';
}, 2000);
}
}