Merge pull request #38 from technix/master

Localization + configurable options

Author: technix

src/app/game.js

@@ -3,9 +3,12 @@ var Storage = require('./storage');
 var Game = {
     id: null,
     name: 'Default Game',
-    mute: true,
-    preload: true,
-    autosave_on_click: false,
+    // === configurable options ===
+    mute: true,     // Mute all sounds
+    preload: true,  // Preload all images while game is starting
+    autosave_on_click: false,   // Autosave after each click
+    log: false,     // Enable logging
+    // === end of configurable options ===
     autosaveID: 9,
     importID: 10,
     saveSlots: 5,
@@ -22,6 +25,11 @@ var Game = {
     },
     saveExists: function saveExists(id) {
         return Storage.exists(this.getSaveName(id));
+    },
+    loadConfig: function loadConfig(cfg) {
+        Object.keys(cfg).forEach(function applyConfig(key) {
+            Game[key] = cfg[key];
+        });
     }
 };
 

src/app/i18n.js

@@ -0,0 +1,30 @@
+var i18n = {
+    dict: {
+        loading: 'Loading...',
+        preload: 'Preloading images',
+        empty: 'empty',
+        menu_back: 'Return to game',
+        menu_save: 'Save',
+        menu_load: 'Load',
+        menu_reset: 'Reset',
+        menu_mute: 'Mute',
+        menu_unmute: 'Unmute',
+        menu_savegame: 'Save game',
+        menu_loadgame: 'Load game',
+        menu_import: 'Import',
+        menu_export: 'Export saved game',
+        menu_autosave: 'Autosave',
+        menu_cancel: 'Cancel'
+    },
+    load: function init(d) {
+        this.dict = d;
+    },
+    t: function translate(phrase) {
+        if (phrase in this.dict) {
+            return this.dict[phrase];
+        }
+        return phrase;
+    }
+};
+
+module.exports = i18n;

src/app/log.js

@@ -1,7 +1,11 @@
 var $ = require('jquery');
+var Game = require('./game');
 
 var Logger = {
     log: function showLog() {
+        if (!Game.log) {
+            return; // if log is disabled
+        }
         var message = Array.prototype.join.call(arguments, ', ');
         var style = '';
         if (message.indexOf('>') === 0) {
@@ -16,6 +20,7 @@ var Logger = {
         var el = $('#log');
         el.append('<span ' + style + '>' + message + '<br/></span>');
         el.scrollTop(function h() { return this.scrollHeight; });
+        return;
     }
 };
 

src/app/manager.js

@@ -1,5 +1,6 @@
 var $ = require('jquery');
 
+var i18n = require('./i18n');
 var Game = require('./game');
 var Instead = require('./instead');
 var UI = require('./ui');
@@ -13,7 +14,7 @@ var Manager = {
     init: function init() {
         this.el = $('#manager');
         this.el.perfectScrollbar({wheelSpeed: 1});
-        this.el.append('<a href="" id="loading">Loading...</a>');
+        this.el.append('<a href="" id="loading">' + i18n.t('loading') + '</a>');
 
         var self = this;
         this.el.on('click', 'a', function selectGame(e) {
@@ -69,7 +70,7 @@ var Manager = {
         Preloader.load(
             allGames[gameid].preload,
             function preloadProgress(percent) {
-                $('#stead-toolbar-info').html('Preloading images: ' + percent + '%');
+                $('#stead-toolbar-info').html(i18n.t('preload') + ': ' + percent + '%');
             },
             function preloadSuccess() {
                 $('#stead-toolbar-info').html('<b>' + Game.name + '</b>');

src/app/menu.js

@@ -1,6 +1,7 @@
 var $ = require('jquery');
 var Game = require('./game');
 var Storage = require('./storage');
+var i18n = require('./i18n');
 
 var UTFsymbol = {
     mute: '<div style="position:absolute; color: #CC0000; text-shadow: 0px 0px 2px #000000">&#10006;</div>&#128266;',
@@ -13,17 +14,25 @@ var Menu = {
         this.element = ui;
         var self = this;
 
+        // apply menu translations
+        $('#menu-back').text(i18n.t('menu_back'));
+        $('#menu-save').text(i18n.t('menu_save'));
+        $('#menu-load').text(i18n.t('menu_load'));
+        $('#menu-reset').text(i18n.t('menu_reset'));
+        $('#menu-export').text(i18n.t('menu_export'));
+
         function toggleMute() {
             if (Game.mute) {
                 steadHandler.mute(false);
-                ui.$menu_mute.text('Mute');
+                ui.$menu_mute.text(i18n.t('menu_mute'));
                 ui.$toolbar_mute.html(UTFsymbol.sound);
             } else {
                 steadHandler.mute(true);
-                ui.$menu_mute.text('Unmute');
+                ui.$menu_mute.text(i18n.t('menu_unmute'));
                 ui.$toolbar_mute.html(UTFsymbol.mute);
             }
         }
+        Game.mute = !Game.mute; // set correct mute state before switching
         toggleMute();
 
         ui.$menuButton.on('click', this.toggleMenu.bind(this));
@@ -69,10 +78,14 @@ var Menu = {
             }
         });
 
-        ui.$toolbar_log.on('click', function toggleLog(e) {
-            e.preventDefault();
-            $('#log').toggle().scrollTop(function sh() { return this.scrollHeight; });
-        });
+        if (Game.log) {
+            ui.$toolbar_log.on('click', function toggleLog(e) {
+                e.preventDefault();
+                $('#log').toggle().scrollTop(function sh() { return this.scrollHeight; });
+            });
+        } else {
+            ui.$toolbar_log.hide();
+        }
         ui.$toolbar_mute.on('click', function toggleLog(e) {
             e.preventDefault();
             toggleMute();
@@ -125,48 +138,48 @@ var Menu = {
             });
             var i;
             if (action === 'save') {
-                html += '<h3>Save game</h3>';
+                html += '<h3>' + i18n.t('menu_savegame') + '</h3>';
                 for (i = 1; i <= Game.saveSlots; i++) {
                     html += '<a href="" data-action="save" data-id="' + i + '" class="slot-selector">';
                     if (slots[i]) {
                         html += i + ' - ' + slots[i];
                     } else {
-                        html += i + ' - empty';
+                        html += i + ' - ' + i18n.t('empty');
                     }
                     html += '</a>';
                 }
             } else if (action === 'load') {
-                html += '<h3>Load game</h3>';
+                html += '<h3>' + i18n.t('menu_loadgame') + '</h3>';
                 html += '<a href="" data-action="load" data-id="' + Game.autosaveID +
-                        '" class="slot-selector">0 - Autosave</a>';
+                        '" class="slot-selector">0 - ' + i18n.t('menu_autosave') + '</a>';
                 for (i = 1; i <= Game.saveSlots; i++) {
                     if (slots[i]) {
                         html += '<a href="" data-action="load" data-id="' + i + '" class="slot-selector">';
                         html += i + ' - ' + slots[i];
                         html += '</a>';
                     } else {
-                        html += '<div class="slot-selector">' + i + ' - empty</div>';
+                        html += '<div class="slot-selector">' + i + ' - ' + i18n.t('empty') + '</div>';
                     }
                 }
-                html += '<h3>Import</h3>';
+                html += '<h3>' + i18n.t('menu_import') + '</h3>';
                 html += '<input type="file" id="load-import" style="font-size: 0.8em"/>';
                 html += '<br><br>';
             } else {
-                html += '<h3>Export saved game</h3>';
+                html += '<h3>' + i18n.t('menu_export') + '</h3>';
                 html += '<a href="" data-action="export" data-id="' + Game.autosaveID +
-                        '" class="slot-selector">0 - Autosave</a>';
+                        '" class="slot-selector">0 - ' + i18n.t('menu_autosave') + '</a>';
                 for (i = 1; i <= Game.saveSlots; i++) {
                     if (slots[i]) {
                         html += '<a href="" data-action="export" data-id="' + i + '" class="slot-selector">';
                         html += i + ' - ' + slots[i];
                         html += '</a>';
                     } else {
-                        html += '<div class="slot-selector">' + i + ' - empty</div>';
+                        html += '<div class="slot-selector">' + i + ' - ' + i18n.t('empty') + '</div>';
                     }
                 }
             }
 
-            html += '<a href="" data-action="cancel">Cancel</a>';
+            html += '<a href="" data-action="cancel">' + i18n.t('menu_cancel') + '</a>';
             ui.$menu_saveload.html(html);
             ui.$menu_saveload.show();
         } else {

src/index.en.html

@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>INSTEAD.js</title>
+    <script type="text/javascript">
+        var INSTEADjs = {
+            mute: true,     // Mute all sounds
+            preload: true,  // Preload all images while game is starting
+            autosave_on_click: false, // Autosave after each click
+            log: false      // Enable logging
+        };
+    </script>
+    <style id="theme_css"></style>
+</head>
+<body>
+    <div id="manager">
+        <h1><img src="./instead.png"> INSTEAD.js</h1>
+    </div>
+    <div id="stead-container">
+        <div id="menu">
+            <div id="menu-content">
+            <a href="" id="menu-back" data-action="back"></a>
+            <a href="" id="menu-save" data-action="menu-save"></a>
+            <a href="" id="menu-load" data-action="menu-load"></a>
+            <a href="" id="menu-reset" data-action="reset"></a>
+            <a href="" id="menu-mute" data-action="mute"></a>
+            <a href="" id="menu-export" data-action="menu-export"></a>
+            </div>
+            <div id="menu-saveload">
+            </div>
+        </div>
+        <div id="stead-toolbar">
+            <div id="stead-toolbar-info"></div>
+            <div id="stead-toolbar-buttons">
+                <button id="toolbar-mute"></button>
+                <button id="toolbar-log">&#128196;</button>
+            </div>
+        </div>
+        <div id="stead">
+            <div id="win">
+                <div id="title"></div>
+                <div id="picture"></div>
+                <div id="ways-top"></div>
+                <div class="wordwrap" id="text"></div>
+                <div id="ways-bottom"></div>
+            </div>
+            <div id="inventory"></div>
+            <div id="menu_button"><img id="menu_image"></img></div>
+        </div>
+        <div id="log"></div>
+    </div>
+
+</body>
+</html>

src/index.html

@@ -1,7 +1,35 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<!DOCTYPE html>
 <html>
 <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta charset="utf-8">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>INSTEAD.js</title>
+    <script type="text/javascript">
+        var INSTEADjs = {
+            mute: true,     // Mute all sounds
+            preload: true,  // Preload all images while game is starting
+            autosave_on_click: false, // Autosave after each click
+            log: false,      // Enable logging
+            translation: {
+                loading: 'Загрузка...',
+                preload: 'Кэширование картинок',
+                empty: 'пусто',
+                menu_back: 'Вернуться в игру',
+                menu_save: 'Сохранить',
+                menu_load: 'Загрузить',
+                menu_reset: 'Начать заново',
+                menu_mute: 'Выключить звук',
+                menu_unmute: 'Включить звук',
+                menu_savegame: 'Сохранить игру',
+                menu_loadgame: 'Загрузить игру',
+                menu_import: 'Импорт',
+                menu_export: 'Экспорт сохранения',
+                menu_autosave: 'Автосохранение',
+                menu_cancel: 'Отмена'
+            }
+        };
+    </script>
     <style id="theme_css"></style>
 </head>
 <body>
@@ -11,12 +39,12 @@ <h1><img src="./instead.png"> INSTEAD.js</h1>
     <div id="stead-container">
         <div id="menu">
             <div id="menu-content">
-            <a href="" data-action="back">Return to game</a>
-            <a href="" data-action="menu-save">Save</a>
-            <a href="" data-action="menu-load">Load</a>
-            <a href="" data-action="reset">Reset</a>
-            <a href="" id="menu-mute" data-action="mute">Mute</a>
-            <a href="" data-action="menu-export">Export saved game</a>
+            <a href="" id="menu-back" data-action="back"></a>
+            <a href="" id="menu-save" data-action="menu-save"></a>
+            <a href="" id="menu-load" data-action="menu-load"></a>
+            <a href="" id="menu-reset" data-action="reset"></a>
+            <a href="" id="menu-mute" data-action="mute"></a>
+            <a href="" id="menu-export" data-action="menu-export"></a>
             </div>
             <div id="menu-saveload">
             </div>

src/index.js

@@ -7,13 +7,21 @@ require('perfect-scrollbar/jquery')($);
 
 var Manager = require('./app/manager');
 
+var i18n = require('./app/i18n');
+var Game = require('./app/game');
 var Instead = require('./app/instead');
 var UI = require('./app/ui');
 var Menu = require('./app/menu');
 
 document.addEventListener(
     'DOMContentLoaded',
     function onLoad() {
+        if ('INSTEADjs' in window) {
+            Game.loadConfig(window['INSTEADjs']); // eslint-disable-line dot-notation
+            if (window['INSTEADjs']['translation']) { // eslint-disable-line dot-notation
+                i18n.load(window['INSTEADjs']['translation']); // eslint-disable-line dot-notation
+            }
+        }
         Manager.init();
         // initialization of INSTEAD components
         Instead.init();