Translation System

Overview

Murphy Craft now includes a complete translation system for the user interface, supporting both French and English languages with easy extension for additional languages.

Features

• Automatic Language Detection: The UI automatically receives the language setting from the server configuration
• Fallback System: If translations are missing, the system falls back to English or the original text
• Dynamic Updates: Language can be changed without restarting the interface
• Extensible: Easy to add new languages and translation keys

Configuration

Server-Side Configuration

The language is set in shared/config.lua:

Config.Locale = "fr"  -- Options: "fr", "en"

This setting is automatically sent to the UI when players open the crafting interface.

Client-Side Translation Files

The translations are stored in ui/translations.js:

const Translations = {
    fr: {
        'craft': 'Craft',
        'specialisation': 'Spécialisation',
        // ... more translations
    },
    en: {
        'craft': 'Craft',
        'specialisation': 'Specialisation',
        // ... more translations
    }
};

Usage

Automatic Translation

Elements with the data-translate attribute are automatically translated:

<h2 data-translate="categories">Catégories</h2>
<button data-translate="craft_item">Craft</button>

JavaScript Translation

Use the global T object to get translations in JavaScript:

// Simple translation
const text = T.t('craft_item');
 
// Translation with parameters
const text = T.t('time_remaining', { time: '5 minutes' });
 
// Format time durations
const timeText = T.formatTime(300); // "5 minutes"

Available Functions

T.setLanguage(language)

Change the current language:

T.setLanguage('en'); // Switch to English

T.t(key, params)

Get translated text:

T.t('craft_success'); // Returns translated text
T.t('xp_gained', { amount: 10 }); // With parameters

T.getCurrentLanguage()

Get current language code:

const lang = T.getCurrentLanguage(); // Returns 'fr' or 'en'

T.updateUI()

Manually update all translated elements:

T.updateUI(); // Re-translates all elements with data-translate

T.formatTime(seconds)

Format time duration:

T.formatTime(30);   // "30 seconds"
T.formatTime(120);  // "2 minutes"  
T.formatTime(3600); // "1 hour"

Available Translation Keys

Main Navigation

• craft - Craft button
• specialisation - Specialisation button
• recipes - Recipes title
• categories - Categories title

Buttons & Actions

• close - Close button
• craft_item - Craft button
• unlock - Unlock button
• unlock_recipe - Unlock recipe button
• reset - Reset button
• confirm - Confirm button
• cancel - Cancel button
• retrieve - Retrieve button

Crafting Interface

• available_items - Available items
• required_resources - Required resources
• crafting_time - Crafting time
• quantity - Quantity
• duration - Duration
• amount - Amount
• item_description - Item description
• insufficient_resources - Insufficient resources message
• crafting_in_progress - Crafting in progress message
• craft_completed - Craft completed message

Specialisation Interface

• specialisation_points - Specialisation points
• available_points - Available points
• specialisation_tree - Specialisation tree
• level - Level
• experience - Experience
• progress - Progress

Time Units

• second / seconds - Time units
• minute / minutes - Time units
• hour / hours - Time units

Status Messages

• loading - Loading message
• error - Error message
• success - Success message
• warning - Warning message

Adding New Languages

1. Add translations to ui/translations.js:

const Translations = {
    fr: { /* French translations */ },
    en: { /* English translations */ },
    es: { // New Spanish translations
        'craft': 'Craftar',
        'specialisation': 'Especialización',
        // ... more translations
    }
};

2. Update the language detection:

// In TranslationManager.setLanguage()
if (this.translations[language]) {
    this.currentLanguage = language;
    this.updateUI();
} else {
    console.warn(`Language '${language}' not found, falling back to French`);
    this.currentLanguage = 'fr';
}

3. Update server configuration:

Config.Locale = "es"  -- Add support for new language code

Technical Implementation

File Structure

ui/
├── translations.js     # Translation system and data
├── index.html         # HTML with data-translate attributes  
├── script.js          # JavaScript with translation integration
└── ...

Integration Points

1. HTML Elements: Use data-translate attributes
2. JavaScript Functions: Use T.t() for dynamic content
3. Server Communication: Language sent via NUI messages
4. Automatic Updates: DOM is updated when language changes

Performance Notes

• Translations are cached in memory
• DOM updates are batched for efficiency
• Fallback system prevents missing text errors
• Lightweight implementation with minimal overhead

Best Practices

1. Always use translation keys instead of hardcoded text
2. Keep keys descriptive and organized by feature
3. Test both languages to ensure proper functionality
4. Use fallbacks for missing translations
5. Update both language files when adding new features

Migration Guide

For Existing HTML

Replace hardcoded text with data-translate attributes:

Before:

<button>Craft</button>

After:

<button data-translate="craft_item">Craft</button>

For Existing JavaScript

Replace hardcoded strings with translation calls:

Before:

element.textContent = "Crafting completed!";

After:

element.textContent = T.t('craft_completed');