Skip to content

feat: Add interactive language selector with improved localization support #65

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
AlirezaNikkhah1375 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

feat: Add interactive language selector with improved localization support #65

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
251 changes: 251 additions & 0 deletions js/scenes/Scene_Preloader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,251 @@ function Scene_Preloader(){
warningText.y = 422;
Game.stage.addChild(warningText);

// Language Selector (PIXI elements)
var languageContainer = new PIXI.Container();
languageContainer.x = Game.width - 20; // 20px from right edge
languageContainer.y = 20; // 20px from top
Game.stage.addChild(languageContainer);

// Available languages
var languages = [
{ code: 'auto', name: 'Auto-detect', flag: '🌐' },
{ code: 'en', name: 'English', flag: '🇺🇸' },
{ code: 'fr', name: 'Français', flag: '🇫🇷' },
{ code: 'de', name: 'Deutsch', flag: '🇩🇪' },
{ code: 'fa', name: 'فارسی', flag: '🇮🇷' },
{ code: 'pt', name: 'Português', flag: '🇵🇹' },
{ code: 'pt-BR', name: 'Português (BR)', flag: '🇧🇷' },
{ code: 'es', name: 'Español', flag: '🇪🇸' },
{ code: 'zh-TW', name: '繁體中文', flag: '🇹🇼' },
{ code: 'tr', name: 'Türkçe', flag: '🇹🇷' }
];

// Get current language
var currentLang = navigator.language || 'en';
var currentLangCode = currentLang.indexOf('-') > -1 ? currentLang : currentLang.split('-')[0];
var currentLanguage = languages.find(lang => lang.code === currentLangCode) || languages.find(lang => lang.code === 'auto');

var dropdownOpen = false;
var dropdownItems = [];
var selectorWidth = 140;
var selectorHeight = 40;
var itemHeight = 35;

// Drop shadow for main button
var shadowBg = new PIXI.Graphics();
shadowBg.beginFill(0x000000, 0.2);
shadowBg.drawRoundedRect(-selectorWidth + 2, 2, selectorWidth, selectorHeight, 8);
shadowBg.endFill();
languageContainer.addChild(shadowBg);

// Main selector button background with gradient effect
var selectorBg = new PIXI.Graphics();
selectorBg.beginFill(0xF8F8F8);
selectorBg.lineStyle(2, 0x888888, 1);
selectorBg.drawRoundedRect(-selectorWidth, 0, selectorWidth, selectorHeight, 8);
selectorBg.endFill();

// Add subtle inner gradient
var gradientOverlay = new PIXI.Graphics();
gradientOverlay.beginFill(0xFFFFFF, 0.3);
gradientOverlay.drawRoundedRect(-selectorWidth + 2, 2, selectorWidth - 4, selectorHeight/2 - 1, 6);
gradientOverlay.endFill();
selectorBg.addChild(gradientOverlay);

languageContainer.addChild(selectorBg);

// Selected language flag
var selectedFlag = new PIXI.Text(currentLanguage.flag, {
font: "18px Arial",
fill: "#333333"
});
selectedFlag.x = -selectorWidth + 12;
selectedFlag.y = selectorHeight/2;
selectedFlag.anchor.y = 0.5;
languageContainer.addChild(selectedFlag);

// Selected language text
var selectedLangText = new PIXI.Text(currentLanguage.name, {
font: "14px Cairo",
fill: "#333333",
align: "left"
});
selectedLangText.x = -selectorWidth + 35;
selectedLangText.y = selectorHeight/2;
selectedLangText.anchor.y = 0.5;
languageContainer.addChild(selectedLangText);

// Dropdown arrow with better styling
var dropdownArrow = new PIXI.Text("▼", {
font: "14px Arial",
fill: "#666666",
fontWeight: "bold"
});
dropdownArrow.x = -18;
dropdownArrow.y = selectorHeight/2;
dropdownArrow.anchor.x = 0.5;
dropdownArrow.anchor.y = 0.5;
languageContainer.addChild(dropdownArrow);

// Dropdown menu container with shadow
var dropdownShadow = new PIXI.Graphics();
dropdownShadow.y = selectorHeight + 7;
dropdownShadow.visible = false; // Hide by default
languageContainer.addChild(dropdownShadow);

var dropdownMenu = new PIXI.Container();
dropdownMenu.y = selectorHeight + 5;
dropdownMenu.visible = false;
languageContainer.addChild(dropdownMenu);

// Create dropdown background container
var dropdownBg = new PIXI.Graphics();
dropdownBg.beginFill(0xFFFFFF);
dropdownBg.lineStyle(2, 0x888888);
dropdownBg.drawRoundedRect(-selectorWidth, 0, selectorWidth, languages.length * itemHeight, 8);
dropdownBg.endFill();
dropdownMenu.addChild(dropdownBg);

// Create dropdown items with improved styling
languages.forEach(function(lang, index) {
var itemContainer = new PIXI.Container();
itemContainer.y = index * itemHeight;

// Item drop shadow
var itemShadow = new PIXI.Graphics();
itemShadow.beginFill(0x000000, 0.1);
itemShadow.drawRoundedRect(-selectorWidth + 2, 2, selectorWidth, itemHeight - 2, 4);
itemShadow.endFill();
dropdownShadow.addChild(itemShadow);

// Item background - no individual borders, just hover effect
var itemBg = new PIXI.Graphics();
itemBg.beginFill(0xFFFFFF, 0); // Transparent by default
if (index === 0) {
itemBg.drawRoundedRect(-selectorWidth + 2, 2, selectorWidth - 4, itemHeight - 2, 6, 6, 0, 0);
} else if (index === languages.length - 1) {
itemBg.drawRoundedRect(-selectorWidth + 2, 2, selectorWidth - 4, itemHeight - 2, 0, 0, 6, 6);
} else {
itemBg.drawRect(-selectorWidth + 2, 2, selectorWidth - 4, itemHeight - 2);
}
itemBg.endFill();
itemContainer.addChild(itemBg);

// Item separator line (except for last item)
if (index < languages.length - 1) {
var separator = new PIXI.Graphics();
separator.lineStyle(1, 0xE0E0E0);
separator.moveTo(-selectorWidth + 10, itemHeight - 1);
separator.lineTo(-10, itemHeight - 1);
itemContainer.addChild(separator);
}

// Item flag
var itemFlag = new PIXI.Text(lang.flag, {
font: "16px Arial",
fill: "#333333"
});
itemFlag.x = -selectorWidth + 12;
itemFlag.y = itemHeight/2;
itemFlag.anchor.y = 0.5;
itemContainer.addChild(itemFlag);

// Item text
var itemText = new PIXI.Text(lang.name, {
font: "13px Cairo",
fill: "#333333",
align: "left"
});
itemText.x = -selectorWidth + 35;
itemText.y = itemHeight/2;
itemText.anchor.y = 0.5;
itemContainer.addChild(itemText);

// Make interactive
itemContainer.interactive = true;
// itemContainer.buttonMode = true; // Removed to show only game cursor

// Hover effects with smooth gradient
itemContainer.mouseover = function() {
itemBg.clear();
itemBg.beginFill(0x777777, 0.1);
itemBg.drawRect(-selectorWidth + 2, 2, selectorWidth - 4, itemHeight - 2);
itemBg.endFill();
itemText.style.fill = "#555555";
};

itemContainer.mouseout = function() {
itemBg.clear();
itemBg.beginFill(0xFFFFFF, 0); // Back to transparent
itemBg.drawRect(-selectorWidth + 2, 2, selectorWidth - 4, itemHeight - 2);
itemBg.endFill();
itemText.style.fill = "#333333";
};

// Click handler with animation
itemContainer.mousedown = itemContainer.touchend = function() {
// Update selected language
currentLanguage = lang;
selectedFlag.text = lang.flag;
selectedLangText.text = lang.name;

// Change language
var selectedLang = lang.code === 'auto' ? null : lang.code;
initializeTextStrings(selectedLang);

// Update text elements
playingTimeText.text = textStrings["playingTime"] + "\n";
warningText.text = textStrings["warning"];

// Close dropdown with animation
dropdownOpen = false;
dropdownMenu.visible = false;
dropdownShadow.visible = false;
dropdownArrow.text = "▼";
dropdownArrow.style.fill = "#666666";

// Brief flash effect on main button
selectorBg.tint = 0xF0F0F0;
setTimeout(function() {
selectorBg.tint = 0xFFFFFF;
}, 150);
};

dropdownMenu.addChild(itemContainer);
dropdownItems.push(itemContainer);
});

// Main selector click handler with improved feedback
selectorBg.interactive = true;
// selectorBg.buttonMode = true; // Removed to show only game cursor

selectorBg.mouseover = function() {
if (!dropdownOpen) {
selectorBg.tint = 0xF0F0F0;
dropdownArrow.style.fill = "#444444";
}
};

selectorBg.mouseout = function() {
if (!dropdownOpen) {
selectorBg.tint = 0xFFFFFF;
dropdownArrow.style.fill = "#666666";
}
};

selectorBg.mousedown = selectorBg.touchend = function() {
dropdownOpen = !dropdownOpen;
dropdownMenu.visible = dropdownOpen;
dropdownShadow.visible = dropdownOpen;
dropdownArrow.text = dropdownOpen ? "▲" : "▼";
dropdownArrow.style.fill = dropdownOpen ? "#444444" : "#666666";
selectorBg.tint = dropdownOpen ? 0xF0F0F0 : 0xFFFFFF;
};

// Store references for cleanup
self.languageContainer = languageContainer;

// CURSOR
var cursor = new Cursor(self);
Game.stage.addChild(cursor.graphics);
Expand Down Expand Up @@ -112,4 +357,10 @@ function Scene_Preloader(){
text.text = "loading... "+percent+"%";
}, false);

// Cleanup function for when scene changes
self.kill = function() {
// PIXI elements are automatically cleaned up when the stage is cleared
// No manual DOM cleanup needed
};

}
46 changes: 46 additions & 0 deletions js/textStrings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -208,6 +208,7 @@ var textStrings_DE = {
"misatrributed": "(falsch zugeschrieben)",
};


// Persian translation. همرنگ جماعت شو
//
// by Ali FZL https://twitter.com/ali_fzl95
Expand Down Expand Up @@ -822,3 +823,48 @@ var textStrings_TR = {
// (quote0004.png)
"misatrributed": "(yanlış bir şekilde ona atfedilir)",
};

// Function to initialize textStrings based on browser language, fallback to English
function initializeTextStrings(forcedLanguage) {
// Get browser language or use forced language
var browserLang = forcedLanguage || navigator.language || navigator.userLanguage || 'en';

// Map browser language codes to available text string objects
var langMap = {
'en': textStrings_EN,
'en-US': textStrings_EN,
'en-GB': textStrings_EN,
'de': textStrings_DE,
'de-DE': textStrings_DE,
'de-AT': textStrings_DE,
'de-CH': textStrings_DE,
'fa': textStrings_FA,
'fa-IR': textStrings_FA,
'pt': textStrings_PT,
'pt-PT': textStrings_PT,
'pt-BR': textStrings_PT_BR,
'es': textStrings_ES,
'es-ES': textStrings_ES,
'es-MX': textStrings_ES,
'es-AR': textStrings_ES,
'zh-TW': textStrings_ZH_TW,
'zh-Hant': textStrings_ZH_TW,
'tr': textStrings_TR,
'tr-TR': textStrings_TR
};

// Try exact match first, then try language code without region
var selectedLang = langMap[browserLang];
if (!selectedLang && browserLang.indexOf('-') > -1) {
var langCode = browserLang.split('-')[0];
selectedLang = langMap[langCode];
}

// Set the global textStrings variable (fallback to English if language not supported)
window.textStrings = selectedLang || textStrings_EN;

return window.textStrings;
}

// Initialize textStrings automatically on page load
initializeTextStrings();