import { Lang } from '/web/lib/polyglot-lang.js';
var options = {
query: 'pathname=' + window.location.pathname.slice(1,
window.location.pathname.lastIndexOf("/")),
secure: window.location.protocol === "https:",
reconnection: false,
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": '',
"ru":''
},
"headerText": {
'en': 'Collaborative Live Coding Space with support of user-defined languages and WebVR ready 3D graphics.
Based on: Virtual World Framework | A-Frame | Ohm language | OSC.js | and more... by Krestianstvo.org
',
"ru":'Виртуальное обучающее пространство в веб-браузере с функциями живого кодирования, возможностью создания собственных языков программирования, технологий виртуальной/дополненной/смешанной реальности WebVR.
На основе: Virtual World Framework | A-Frame | Ohm language | OSC.js | ... проект Krestianstvo.org
'
},
"featuresText": {
"en": 'Features
- Decentralized network model for A-Frame components and entities based on VWF replicated computation architecture
- Ohm language driver for sharing user-defined grammars, parsers, tokenisers inside virtual space
- In browser Code and Properties editor based on Cell.js
- OSC messaging through OSC relay on the client
- Avatars (Simple and GLTF models with animation)
- Multi-window or multi-monitor/multi-machine setups with view offset cameras
- WebRTC for video/audio streaming,3D positional audio support
- GearVR, Windows MixedReality motion controllers
',
"ru": 'О программе
- Децентрализованная модель приложения на основе A-Frame компонентов и VWF архитектуры распределенных вычислений (репликация и виртуальное время) в сети.
- Ohm драйвер для совместного создания пользовательских языков программирования, грамматик, парсеров, токенайзеров внутри виртуального пространства
- Редактор кода и параметров объектов прямо в веб-браузере на основе Cell.js
- Работа с OSC сообщениями через OSC relay
- Аватары (простые или GLTF модели с анимацией)
- Мульти-оконные и мульти-мониторные/компьютерные/телефонные проекции с применением виртуальных камер со смещением вида
- WebRTC для видео/аудио потоковой передачи данных P2P, с функциями звукового 3D позиционирования в виртуальном пространстве
- GearVR, Windows MixedReality контроллеры движения
'
},
"worldInfo":{
"en": 'Virtual Worlds
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 Start new button.
',
"ru":'Виртуальные миры
Чтобы начать работу в виртуальном обучающем пространстве, выберите один из прототипов миров и запустите его нажав на кнопку Создать. Для вновь созданного мира сгенерируется уникальная ссылка, которая отобразиться под его описанием. Для совместной работы, войдите с помощью этой ссылки с другого компьютера или окна браузера. Из прототипа можно создавать неограниченное количество миров. Рядом с ссылками так же указывается количество пользователей, находящихся онлайн в указанном мире.
'
},
"demoText":{
"en": 'Demo videos
',
"ru": 'Видео демонстрации
'
}
}
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);
socket.on('getWebAppUpdate', function (msg) {
parseAppInstancesData(msg)
//console.log(msg);
});
function parseAppInstancesData(data) {
var needToUpdate = true;
if (data == "{}") {
var el = document.querySelector(".instance");
if (el) {
var topEl = el.parentNode;
topEl.removeChild(el);
}
// let removeElements = elms => Array.from(elms).forEach(el => el.remove());
}
let jsonObj = JSON.parse(data);
var parsed = {};
for (var prop in jsonObj) {
var name = prop.split('/')[1];
if (parsed[name]) {
parsed[name][prop] = jsonObj[prop];
} else {
parsed[name] = {};
parsed[name][prop] = jsonObj[prop];
}
}
//console.log(parsed);
document.querySelector("#main")._emptyLists();
for (var prop in parsed) {
var name = prop;
let element = document.getElementById(name + 'List');
if (element) {
element._setListData(parsed[prop]);
}
//needToUpdate = true
}
// console.log(data)
}
function getAllAppInstances() {
let allInatances = httpGetJson('allinstances.json')
.then(res => {
parseAppInstancesData(res);
});
}
function getSiteHeader(){
return {
$type: "div",
class: "mdc-layout-grid",
$components: [
{
$type: "div",
class: "mdc-layout-grid__inner",
$components: [
{
$cell: true,
$type: "div",
class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
$components: [
{
$cell: true,
$type: "h1",
class: "mdc-typography--display1 mdc-theme--text-hint-on-background",
$text: "Virtual Worlds"
}
]
}
]
}
]
}
}
function parseWebAppDataForCell(data) {
document.querySelector("#main").$cell({
$cell: true,
$type: "div",
id: "main",
_jsonData: {},
_emptyLists: function () {
Object.entries(this._jsonData).forEach(function (element) {
//console.log(element);
document.getElementById(element[0] + 'List')._setListData({});
});
},
$init: function () {
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(appInfo)
]
}
},
$update: function () {
this.$components = [
//getSiteHeader(),// siteHeader,
{
$type: "div",
class: "mdc-layout-grid",
$components: [
{
$type: "div",
class: "mdc-layout-grid__inner",
$components: Object.entries(this._jsonData).map(this._makeWorldCard)
}
]
},
]
},
_worldCardDef: function (desc) {
return {
$cell: true,
$type: "div",
class: "mdc-card world-card",
$components: [
{
$type: "section",
class: "mdc-card__media world-card__16-9-media",
$init: function () {
if (desc[1].imgUrl !== "") {
this.style.backgroundImage = 'linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) ), url(' + desc[1].imgUrl + ')';
}
}
},
{
$type: "section",
class: "mdc-card__primary",
$components: [
{
$type: "h1",
class: "mdc-card__title mdc-card__title--large",
$text: desc[1].title
},
{
$type: "h2",
class: "mdc-card__subtitle mdc-theme--text-secondary-on-background",
$text: desc[1].text
}
]
},
{
$type: "section",
class: "mdc-card__actions",
$components: [
{
$type: "a",
class: "mdc-button mdc-button--compact mdc-card__action mdc-button--stroked",
$text: language.t('start'),//"Start new",
target: "_blank",
href: "/" + desc[0],
onclick: function (e) {
refresh();
}
}
]
},
{
$type: "section",
class: "mdc-card__actions",
$components: [
{
$type: "ul",
_listData: {},
_setListData: function (data) {
this._listData = data;
},
class: "mdc-list mdc-list--two-line",
id: desc[0] + 'List',
$update: function () {
var connectText = {}
if (Object.entries(this._listData).length !== 0) {
connectText = {
// $type: "span",
// class: "mdc-theme--text-secondary",
// $text: "...or connect to:"
}
}
this.$components = [
{
$type: "hr",
class: "mdc-list-divider"
}
].concat(Object.entries(this._listData).map(this._worldListItem))
// [connectText]
// }].concat(Object.entries(this._listData).map(this._worldListItem))
},
_worldListItem: function (m) {
return {
$type: "li",
class: "mdc-list-item",
$components: [
{
$type: "span",
class: "world-link mdc-list-item__text",
$components: [
{
$type: "a",
$text: m[1].instance,
target: "_blank",
href: window.location.protocol + "//" + m[1].instance,
onclick: function (e) {
refresh();
}
},
{
$type: "span",
class: "mdc-list-item__text__secondary",
$text: language.t('users') + m[1].clients
}
]
}
]
}
}
}
]
}
]
}
}
})
}
function getAppDetails(val) {
let appDetails = httpGetJson(val)
.then(res => {
parseWebAppDataForCell(res)
})
.then(res => refresh());
}
function refresh() {
// socket.emit('getWebAppUpdate', "");
}
function httpGet(url) {
return new Promise(function (resolve, reject) {
// do the usual Http request
let request = new XMLHttpRequest();
request.open('GET', url);
request.onload = function () {
if (request.status == 200) {
resolve(request.response);
} else {
reject(Error(request.statusText));
}
};
request.onerror = function () {
reject(Error('Network Error'));
};
request.send();
});
}
async function httpGetJson(url) {
// check if the URL looks like a JSON file and call httpGet.
let regex = /\.(json)$/i;
if (regex.test(url)) {
// call the async function, wait for the result
return await httpGet(url);
} else {
throw Error('Bad Url Format');
}
}
export {getAppDetails, generateFrontPage, setLanguage, initLocale};