upadate locale

public/index.html

@@ -25,11 +25,30 @@
     gtag('config', 'UA-11815598-9');
 
   </script>
-  <!-- <script src="./web/lib/polyglot/polyglot.min.js"></script> -->
+ <script src="./web/lib/polyglot/polyglot.min.js"></script>
   <script type="module">
-    import {getAppDetails} from '/web/lib/app.js';
+    //import {getAppDetails} from '/web/lib/app.js';
+    import * as app from "/web/lib/app.js";
+
+    const initApp = () => {
+      app.getAppDetails('webapps.json');
+      app.initLocale();
+      app.generateFrontPage();
+
+      document.querySelector('#ruLang').addEventListener('click', function(e){
+        app.setLanguage('ru');
+        window.location.reload(true);
+      });
+
+      document.querySelector('#enLang').addEventListener('click', function(e){
+        app.setLanguage('en');
+        window.location.reload(true);
+      });
+
+    }
+
     //var socket = initWebSocket();
-    window.onload = getAppDetails('webapps.json');
+    window.onload = initApp();
   </script>
 
 </head>
@@ -44,61 +63,31 @@
   <div id="header" class="mdc-layout-grid mdc-layout-grid--align-left">
     <div class="mdc-layout-grid__inner">
       <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-10">
-        <h1 class="mdc-typography--display3 mdc-theme--text-secondary-on-background mdc-typography">
-            <a class="mdc-typography link-in-text" style="cursor: pointer;" onclick="window.location.reload(true)"><strong>LiveCoding</strong>.space</a>
-          <!--<strong>LiveCoding</strong>.space -->
-        </h1>
+          <div id="titleText">
+            </div>
+        
       </div>
       <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-2">
           <span class="mdc-typography--subheading2 mdc-theme--text-secondary-on-background mdc-typography">
-              <a class="mdc-typography link-in-text mdc-theme--text-hint-on-background" href="#">RU</a>
+              <a id="ruLang" class="mdc-typography link-in-text mdc-theme--text-hint-on-background" style="cursor:pointer">RU</a>
             <!--<strong>LiveCoding</strong>.space -->
           </span>
           <span class="mdc-typography--subheading2 mdc-theme--text-secondary-on-background mdc-typography">
-              <a class="mdc-typography link-in-text mdc-theme--text-hint-on-background" href="#">EN</a>
+              <a id="enLang" class="mdc-typography link-in-text mdc-theme--text-hint-on-background" style="cursor:pointer">EN</a>
             <!--<strong>LiveCoding</strong>.space -->
           </span>
         </div>
       <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-12">
-        <h1 class="mdc-typography mdc-typography--headline mdc-typography--adjust-margin mdc-theme--text-hint-on-background">
-          Collaborative Live Coding Space with support of user-defined languages and WebVR ready 3D graphics.
-          <br> Based on:
-          <strong>Virtual World Framework | A-Frame | Ohm language | OSC.js | and more... </strong> by
-          <a class="mdc-typography link-in-text mdc-theme--text-hint-on-background"
-            href="https://www.krestianstvo.org"><strong>Krestianstvo.org</strong></a>
-        </h1>
+        <div id="headerText">
+      </div>
       </div>
     </div>
   </div>
   <div id="about" class="mdc-layout-grid">
     <div class="mdc-layout-grid__inner">
       <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6">
-        <h1 class="mdc-typography--display1 mdc-theme--text-hint-on-background">Features</h1>
-
-        <ul class="featureList mdc-typography mdc-typography--title mdc-theme--text-hint-on-background">
-          <li>
-            <strong>Decentralized network model</strong> for
-            <strong>A-Frame</strong> components and entities based on
-            <strong>VWF</strong> replicated computation architecture</li>
-          <li>
-            <strong>Ohm</strong> language driver for sharing user-defined grammars, parsers, tokenisers inside virtual space</li>
-          <li>In browser
-            <strong>Code and Properties editor</strong> based on Cell.js</li>
-          <li>
-            <strong>OSC </strong>messaging through
-            <a class="mdc-typography link-in-text mdc-theme--text-hint-on-background" href="https://github.com/NikolaySuslov/osc-relay-lcs">OSC relay</a> on the client</li>
-          <li>
-            <strong>Avatars</strong> (Simple and GLTF models with animation)</li>
-          <li>
-            <strong>Multi-window</strong> or multi-monitor/multi-machine setups with view
-            <strong>offset cameras</strong>
-          </li>
-          <li>
-            <strong>WebRTC</strong> for video/audio streaming,
-            <strong>3D positional audio</strong> support</li>
-          <li>
-            <strong>GearVR, Windows MixedReality</strong> motion controllers</li>
-        </ul>
+          <div id="featuresText">
+            </div>
       </div>
 
       <div class="mdc-layout-grid__cell mdc-layout-grid__cell">
@@ -114,12 +103,8 @@
   <div id="info" class="mdc-layout-grid">
     <div class="mdc-layout-grid__inner">
       <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-12">
-        <h1 class="mdc-typography--display1 mdc-theme--text-hint-on-background">Virtual Worlds</h1>
-        <h1 class="mdc-typography mdc-typography--headline mdc-theme--text-hint-on-background">
-          To begin collaborative coding in virtual space, just start one of the listed prototypes and connect to it from another browser
-          window using the generated link. The link will apper near the
-          <strong>Start new</strong> button.
-        </h1>
+          <div id="worldInfo">
+            </div>
       </div>
     </div>
   </div>
@@ -132,7 +117,10 @@
     <div id="about" class="mdc-layout-grid">
       <div class="mdc-layout-grid__inner">
         <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-12">
-          <h1 class="mdc-typography--display1 mdc-theme--text-hint-on-background">Demo videos</h1>
+            <div id="demoText">
+              </div>
+
+         
 
           <iframe src="https://player.vimeo.com/video/243291223?title=0&byline=0&portrait=0" width="600" height="337" frameborder="0"
             webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

public/web/lib/app.js

@@ -9,6 +9,91 @@ var options = {
         transports: ['websocket']
     
     };
+
+    const langPhrases = {
+        "en":{
+            "start": "Start new",
+            "users": "Users online: "
+
+        },
+        "ru": {
+            "start": "Создать",
+            "users": "Пользователей онлайн: "
+        }
+    }
+
+
+
+    const prepareLang = () => {
+        let langID = localStorage.getItem('krestianstvo_locale');
+        let phrases = langPhrases[langID];
+        let lang = new Lang;
+        return new lang.polyglot({ phrases });
+    }
+
+    const language = prepareLang();
+
+    const translations = {
+        "titleText":{
+            "en": '<h1 class="mdc-typography--display3 mdc-theme--text-secondary-on-background mdc-typography"><a class="mdc-typography link-in-text" style="cursor: pointer;" onclick="window.location.reload(true)"><strong>LiveCoding</strong>.space</a><!--<strong>LiveCoding</strong>.space --></h1>',
+
+            "ru":'<h1 class="mdc-typography--display3 mdc-theme--text-secondary-on-background mdc-typography"><a class="mdc-typography link-in-text" style="cursor: pointer;" onclick="window.location.reload(true)"><strong>LiveCoding</strong>.пространство</a><!--<strong>LiveCoding</strong>.space --></h1>'
+        },
+        "headerText": {
+          'en': '<h1 class="mdc-typography mdc-typography--headline mdc-typography--adjust-margin mdc-theme--text-hint-on-background">Collaborative Live Coding Space with support of user-defined languages and WebVR ready 3D graphics.<br> Based on: <strong>Virtual World Framework | A-Frame | Ohm language | OSC.js | and more... </strong> by <a class="mdc-typography link-in-text mdc-theme--text-hint-on-background" href="https://www.krestianstvo.org"><strong>Krestianstvo.org</strong></a> </h1>',
+
+          "ru":'<h1 class="mdc-typography mdc-typography--headline mdc-typography--adjust-margin mdc-theme--text-hint-on-background">Виртуальное обучающее пространство в веб-браузере с функциями живого кодирования,  возможностью создания собственных языков программирования, технологий виртуальной/дополненной/смешанной реальности WebVR.<br> На основе: <strong>Virtual World Framework | A-Frame | Ohm language | OSC.js | ... </strong> проект <a class="mdc-typography link-in-text mdc-theme--text-hint-on-background" href="https://www.krestianstvo.org"><strong>Krestianstvo.org</strong></a> </h1>'
+        },
+
+        "featuresText": {
+            "en": '<h1 class="mdc-typography--display1 mdc-theme--text-hint-on-background">Features</h1> <ul class="featureList mdc-typography mdc-typography--title mdc-theme--text-hint-on-background"> <li><strong>Decentralized network model</strong> for <strong>A-Frame</strong> components and entities based on <strong>VWF</strong> replicated computation architecture</li> <li><strong>Ohm</strong> language driver for sharing user-defined grammars, parsers, tokenisers inside virtual space</li><li>In browser <strong>Code and Properties editor</strong> based on Cell.js</li><li><strong>OSC </strong>messaging through <a class="mdc-typography link-in-text mdc-theme--text-hint-on-background" href="https://github.com/NikolaySuslov/osc-relay-lcs">OSC relay</a> on the client</li><li><strong>Avatars</strong> (Simple and GLTF models with animation)</li><li><strong>Multi-window</strong> or multi-monitor/multi-machine setups with view <strong>offset cameras</strong></li><li><strong>WebRTC</strong> for video/audio streaming,<strong>3D positional audio</strong> support</li><li><strong>GearVR, Windows MixedReality</strong> motion controllers</li> </ul>',
+
+            "ru": '<h1 class="mdc-typography--display1 mdc-theme--text-hint-on-background">О программе</h1> <ul class="featureList mdc-typography mdc-typography--title mdc-theme--text-hint-on-background"> <li><strong> Децентрализованная модель приложения </strong> на основе <strong>A-Frame</strong> компонентов и <strong>VWF</strong> архитектуры распределенных вычислений (репликация и виртуальное время) в сети.  </li> <li><strong>Ohm</strong> драйвер для совместного создания пользовательских языков программирования, грамматик, парсеров, токенайзеров внутри виртуального пространства</li><li><strong>Редактор кода и параметров объектов</strong> прямо в веб-браузере на основе Cell.js</li><li>Работа с <strong>OSC </strong>сообщениями через <a class="mdc-typography link-in-text mdc-theme--text-hint-on-background" href="https://github.com/NikolaySuslov/osc-relay-lcs">OSC relay</a></li><li><strong>Аватары</strong> (простые или GLTF модели с анимацией)</li><li><strong>Мульти-оконные</strong> и мульти-мониторные/компьютерные/телефонные проекции с применением виртуальных камер со <strong>смещением вида</strong></li><li><strong>WebRTC</strong> для видео/аудио потоковой передачи данных P2P, с функциями <strong>звукового 3D позиционирования</strong> в виртуальном пространстве</li><li><strong>GearVR, Windows MixedReality</strong> контроллеры движения</li> </ul>'
+        },
+        "worldInfo":{
+            "en": '<h1 class="mdc-typography--display1 mdc-theme--text-hint-on-background">Virtual Worlds</h1><h1 class="mdc-typography mdc-typography--headline mdc-theme--text-hint-on-background">To begin collaborative coding in virtual space, just start one of the listed prototypes and connect to it from another browser window using the generated link. The link will apper near the <strong>Start new</strong> button.</h1>',
+            
+            "ru":'<h1 class="mdc-typography--display1 mdc-theme--text-hint-on-background">Виртуальные миры</h1><h1 class="mdc-typography mdc-typography--headline mdc-theme--text-hint-on-background">Чтобы начать работу в виртуальном обучающем пространстве, выберите один из прототипов миров и запустите его нажав на кнопку <strong>Создать</strong>. Для вновь созданного мира сгенерируется уникальная ссылка, которая отобразиться под его описанием. Для совместной работы, войдите с помощью этой ссылки с другого компьютера или окна браузера. Из прототипа можно создавать неограниченное количество миров. Рядом с ссылками так же указывается количество пользователей, находящихся онлайн в указанном мире.</h1>'
+        },
+        "demoText":{
+            "en":  '<h1 class="mdc-typography--display1 mdc-theme--text-hint-on-background">Demo videos</h1>',
+            "ru": '<h1 class="mdc-typography--display1 mdc-theme--text-hint-on-background">Видео демонстрации</h1>'
+        }
+
+
+      }
+  
+      const initLocale = () => {
+
+        if (!localStorage.getItem('krestianstvo_locale'))
+            localStorage.setItem('krestianstvo_locale', 'en');
+      }
+
+      const setLocale = (langID) => {
+        localStorage.setItem('krestianstvo_locale', langID);
+      }
+  
+      const getTranslationFor = (aString) => {
+        let locale = localStorage.getItem('krestianstvo_locale');
+        return translations[aString][locale]
+      }
+
+      const setLanguage = (langID) => { 
+            setLocale(langID);
+            generateFrontPage();
+      }
+
+    function generateFrontPage(){
+
+        let allTextEl = ["titleText", "headerText", "featuresText", "worldInfo", "demoText"];
+
+        allTextEl.forEach(el => {
+            let textEl = document.querySelector("#" + el);
+            textEl.innerHTML = getTranslationFor(el);
+        })
+
+    }
+
     
     var socket = io.connect(window.location.protocol + "//" + window.location.host, options);
     
@@ -115,12 +200,19 @@ var options = {
                 this._jsonData = JSON.parse(data);
             },
             _makeWorldCard: function (m) {
+                let langID = localStorage.getItem('krestianstvo_locale');
+                var appInfo = m
+                if(langID) {
+                    if(m[1][langID]){
+                        appInfo = [m[0], m[1][langID]]
+                    }
+                }
                 return {
                     $cell: true,
                     $type: "div",
                     class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-4",
                     $components: [
-                        this._worldCardDef(m)
+                        this._worldCardDef(appInfo)
                     ]
                 }
     
@@ -183,7 +275,7 @@ var options = {
                                 {
                                     $type: "a",
                                     class: "mdc-button mdc-button--compact mdc-card__action mdc-button--stroked",
-                                    $text: "Start new",
+                                    $text: language.t('start'),//"Start new",
                                     target: "_blank",
                                     href: "/" + desc[0],
                                     onclick: function (e) {
@@ -250,7 +342,7 @@ var options = {
                                                         {
                                                             $type: "span",
                                                             class: "mdc-list-item__text__secondary",
-                                                            $text: "Users online: " + m[1].clients
+                                                            $text: language.t('users') + m[1].clients
                                                         }
                                                     ]
                                                 }
@@ -323,4 +415,4 @@ var options = {
         }
     }
     
-    export {getAppDetails};
+    export {getAppDetails, generateFrontPage, setLanguage, initLocale};

public/webapps.json

@@ -1,51 +1,100 @@
 {
-    "aframe":{
-        "title":"Simple VWF & A-Frame app",
-        "imgUrl": "./aframe/webimg.jpg",
-        "text": "Example application showing Virtual World Framework & A-Frame integration",
-        "featured": false
+    "aframe": {
+        "en": {
+            "title": "Simple VWF & A-Frame app",
+            "imgUrl": "./aframe/webimg.jpg",
+            "text": "Example application showing Virtual World Framework & A-Frame integration",
+            "featured": false
+        },
+        "ru": {
+            "title": " Мир VWF & A-Frame",
+            "imgUrl": "./aframe/webimg.jpg",
+            "text": "Пример распределенного приложения, показывающего возможности интеграции Virtual World Framework & A-Frame",
+            "featured": false
+        }
     },
-
-    "aframe2":{
-        "title":"Textures and Models in VWF & A-Frame",
-        "imgUrl": "./aframe2/webimg.jpg",
-        "text": "Example app with loaded textures and models",
-        "featured": true
+    "aframe2": {
+        "en": {
+            "title": "Textures and Models in VWF & A-Frame",
+            "imgUrl": "./aframe2/webimg.jpg",
+            "text": "Example app with loaded textures and models",
+            "featured": true
+        },
+        "ru": {
+            "title": "Текстуры и модели в VWF & A-Frame",
+            "imgUrl": "./aframe2/webimg.jpg",
+            "text": "Пример мира с текстурами и моделями",
+            "featured": true
+        }
     },
-      "ohmlang-calc":{
-        "title":"Calculator in Ohm and VWF",
-        "imgUrl": "./ohmlang-calc/webimg.jpg",
-        "text": "Example calc app with simple Ohm grammar",
-        "featured": true
+    "ohmlang-calc": {
+        "en": {
+            "title": "Calculator in Ohm & VWF",
+            "imgUrl": "./ohmlang-calc/webimg.jpg",
+            "text": "Example calc app with simple Ohm grammar",
+            "featured": true
+        },
+        "ru": {
+            "title": "Калькулятор на Ohm & VWF",
+            "imgUrl": "./ohmlang-calc/webimg.jpg",
+            "text": "Пример создания децентрализованной грамматики калькулятора",
+            "featured": true
+        }
     },
-     "ohmlang-lsys":{
-        "title":"L-System parser example in Ohm and VWF",
-        "imgUrl": "./ohmlang-lsys/webimg.jpg",
-        "text": "Example app with L-System grammar",
-        "featured": true
+    "ohmlang-lsys": {
+        "en": {
+            "title": "L-System parser example in Ohm & VWF",
+            "imgUrl": "./ohmlang-lsys/webimg.jpg",
+            "text": "Example app with L-System grammar",
+            "featured": true
+        },
+        "ru": {
+            "title": "L-система и черепашка в Ohm & VWF",
+            "imgUrl": "./ohmlang-lsys/webimg.jpg",
+            "text": "Пример грамматики/парсера для генератора L-систем и языка черепашки",
+            "featured": true
+        }
+       
     },
 
-    "osc-example":{
-        "title":"Simple app with Ohm & OSC control",
-        "imgUrl": "./osc-example/webimg.jpg",
-        "text": "Example app with OSC control",
-        "featured": false
+    "osc-example": {
+        "en":{
+            "title": "Simple app with Ohm & OSC control",
+            "imgUrl": "./osc-example/webimg.jpg",
+            "text": "Example app with OSC control",
+            "featured": false
+        },
+        "ru":{
+            "title": "Протокол OSC сообщений и Ohm",
+            "imgUrl": "./osc-example/webimg.jpg",
+            "text": "Пример приложения, демонстрирующего работу с сообщениями OSC",
+            "featured": false
+        }
+       
     },
-
-    "webrtc":{
-        "title":" WebRTC app",
-        "imgUrl": "./webrtc/webimg.jpg",
-        "text": "Audio and video streaming for Avatars",
-        "featured": false
+    "webrtc": {
+        "en":{
+            "title": " WebRTC app",
+            "imgUrl": "./webrtc/webimg.jpg",
+            "text": "Audio and video streaming for Avatars",
+            "featured": false
+        }, 
+          "ru":{
+            "title": " WebRTC приложение",
+            "imgUrl": "./webrtc/webimg.jpg",
+            "text": "Пример приложения с использованием WebRTC потокового аудио и видео",
+            "featured": false
+           
+        }     
     },
-    "gearvr":{
-        "title":"Control in VR app",
+    "gearvr": {
+        "title": "Control in VR app",
         "imgUrl": "./gearvr/webimg.jpg",
         "text": "VR controler example",
         "featured": false
     },
-    "multipixel":{
-        "title":"Multi-Pixel",
+    "multipixel": {
+        "title": "Multi-Pixel",
         "imgUrl": "./multipixel/webimg.jpg",
         "text": "Multi offset view camera example",
         "featured": false