implemented translation feature

css/global.css

@@ -356,6 +356,18 @@ body {
   margin-bottom: 3px;
 }
 
+#settings .setting .flag-icon {
+  width: 32px;
+  height: 32px;
+  border-width: medium;
+  border-style: solid;
+  border-color: transparent;
+}
+
+#settings .setting .flag-icon-selected {
+  border-color: #ffa500;
+}
+
 strong {
   font-weight: bold;
 }

index.html

@@ -7,6 +7,8 @@
   <link rel="stylesheet" href="./css/global.css">
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate/2.15.1/angular-translate.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate/2.15.1/angular-translate-loader-static-files/angular-translate-loader-static-files.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
   <script src="./js/app.js"></script>

js/app.js

@@ -1,11 +1,21 @@
-var OWI = angular.module('OWI', ['ui.router', 'ui.bootstrap', 'ngAnimate']);
+var OWI = angular.module('OWI', ['ui.router', 'ui.bootstrap', 'ngAnimate', 'pascalprecht.translate']);
 
 // Setup some angular config stuff
-OWI.config(['$compileProvider', '$urlMatcherFactoryProvider', '$animateProvider', '$locationProvider', function($compileProvider, $urlMatcherFactoryProvider, $animateProvider, $locationProvider) {
+OWI.config(['$compileProvider', '$urlMatcherFactoryProvider', '$animateProvider', '$locationProvider', '$translateProvider', function($compileProvider, $urlMatcherFactoryProvider, $animateProvider, $locationProvider, $translateProvider) {
   $locationProvider.hashPrefix(""); // defaults to #! which is annoying
   $compileProvider.debugInfoEnabled(false); // more perf
   $urlMatcherFactoryProvider.strictMode(false); // I dunno
   $animateProvider.classNameFilter(/angular-animate/); // prevent angular-animate animating all the things
+  $translateProvider.useStaticFilesLoader({prefix: '/locales/', suffix: '.json'});
+  var settings = localStorage.getItem('settings');
+  if (settings) {
+    console.log('Seleced language from localStorage');
+    $translateProvider.preferredLanguage(JSON.parse(settings).langKey);
+  } else {
+    console.log('Seleced default language');
+    $translateProvider.preferredLanguage('en_US');
+  }
+  $translateProvider.fallbackLanguage('en_US');
 }]);
 
 // Run migrations to convert data and stuff

js/controllers.js

@@ -1,11 +1,12 @@
-OWI.controller('MainCtrl', ["$rootScope", "$q", "$document", "$uibModal", "DataService", "CompatibilityService", "CostAndTotalService", function($rootScope, $q, $document, $uibModal, DataService, CompatibilityService, CostAndTotalService) {
+OWI.controller('MainCtrl', ["$rootScope", "$q", "$document", "$uibModal", "DataService", "CompatibilityService", "CostAndTotalService", "StorageService", function($rootScope, $q, $document, $uibModal, DataService, CompatibilityService, CostAndTotalService, StorageService) {
   var vm = this;
   this.preview = false;
   this.currentDate = Date.now();
   this.showSidebar = false;
   this.showNav = false;
-  this.noSupportMsg = CompatibilityService.noSupportMsg;
+  this.noSupportMsg = CompatibilityService.noSupportMsg
   this.totals = CostAndTotalService;
+  this.langKey = StorageService.getSetting('langKey');
 
   DataService.waitForInitialization().then(function(data) {
     vm.events = data.events;
@@ -217,7 +218,7 @@ OWI.controller('HeroesCtrl', ["$scope", "$rootScope", "$uibModal", "DataService"
       vm.clearFilters();
       return;
     }
-    
+
     this.filteredItems = filterItems(hero.items, eventFilters, groupFilter);
     updateCosts();
 
@@ -265,7 +266,7 @@ OWI.controller('HeroesCtrl', ["$scope", "$rootScope", "$uibModal", "DataService"
     CostAndTotalService.recalculate();
     resetCosts();
   });
-  
+
   this.clearFilters = function() {
     this.filters = {
       selected: false,
@@ -417,8 +418,14 @@ OWI.controller("UpdateCtrl", ["$scope", "$rootScope", "DataService", "StorageSer
 
 OWI.controller('SettingsCtrl', ["$rootScope", "$uibModalInstance", "StorageService", "DataService", function($rootScope, $uibModalInstance, StorageService, DataService) {
   var vm = this;
+  $rootScope.languages = [
+      { id: 'en_US', label: 'English US', img: '../resources/heroes/all/icons/united-states-of-america.png' },
+      { id: 'de_DE', label: 'German', img: '../resources/heroes/all/icons/germany.png' },
+      { id: 'fr_FR', label: 'French', img: '../resources/heroes/all/icons/france.png' }
+  ];
   var settings = StorageService.settings;
   this.particles = settings['particles'];
+  $rootScope.langKey = $rootScope.languages.find(function(lang) { return lang.id === StorageService.getSetting('langKey'); });
   this.hdVideos = settings['hdVideos'];
   this.currentTheme = settings['currentTheme'];
   this.showPreviews = settings['showPreviews'];
@@ -531,4 +538,10 @@ OWI.controller('SettingsCtrl', ["$rootScope", "$uibModalInstance", "StorageServi
     StorageService.setData(DataService.checked);
     $rootScope.$emit('selectAll');
   };
+
+  this.changeLanguage = function(langKey) {
+    this.langKey = langKey;
+    StorageService.setSetting('langKey', langKey);
+    location.reload();
+  };
 }]);

js/services.js

@@ -4,6 +4,7 @@ OWI.factory("StorageService", function() {
     settings: {},
     defaultSettings: {
       particles: true,
+      langKey: 'en_US',
       showPreviews: true,
       hdVideos: false,
       currentTheme: 'standard',
@@ -56,6 +57,28 @@ OWI.factory("DataService", ["$http", "$q", "StorageService", function($http, $q,
       out.checked[hero] = {"skins":{},"emotes":{},"intros":{},"sprays":{},"voicelines":{},"poses":{},"icons":{}};
     }
 
+    // Use itemnames as translation key
+    Object.keys(data.events).forEach(function(event) {
+      var items = data.events[event].items;
+      Object.keys(items).forEach(function(type) {
+        items[type].forEach(function(item) {
+          var langKey = event + '.' + type + '.' + item.id;
+          item.name = langKey;
+          //item.langKey = langKey; //TODO: later use this?
+        });
+      });
+    });
+    Object.keys(data.heroes).forEach(function(hero) {
+      var items = data.heroes[hero].items;
+      Object.keys(items).forEach(function(type) {
+        items[type].forEach(function(item) {
+          var langKey = hero + '.' + type + '.' + item.id;
+          item.name = langKey;
+          //item.langKey = langKey; //TODO: later use this?
+        });
+      });
+    });
+
     Object.assign(out.checked, storedData);
     Object.assign(service, out, data);
     setTimeout(function() {
@@ -299,7 +322,7 @@ OWI.factory("ImageLoader", ["$q", "$document", function($q, $document) {
         }, 75);
         return;
       }
-      
+
       var nextImage = service.images.shift();
       if (nextImage) {
         service.requests++;