Added simpleLevel
This commit is contained in:
silas
362
public/js/app.js
362
public/js/app.js
@@ -2755,173 +2755,273 @@ function applyPolyfills(){
|
||||
});
|
||||
}
|
||||
|
||||
SystemSettings.setBasePath("/pwa/stories/public/");
|
||||
SystemSettings.setBasePath("/pwa/wordRotator/public/");
|
||||
Translator.supportedLanguages = ["de", "en"];
|
||||
Translator.markTranslations = false;
|
||||
|
||||
class DataManager {
|
||||
static load(url, isCachable, raw) {
|
||||
isCachable = Helper.nonNull(isCachable, false);
|
||||
raw = Helper.nonNull(raw, false);
|
||||
let fullUrl = (isCachable) ? Helper.basePath(DataManager.cachePath + url) : Helper.basePath(DataManager.dataPath + url);
|
||||
return fetch(fullUrl, {"credentials": "same-origin"}).then(function (res) {
|
||||
if (raw) {
|
||||
return res.text();
|
||||
}
|
||||
return res.json();
|
||||
}).catch(function (e) {
|
||||
console.error("error", e);
|
||||
if (!raw) {
|
||||
return {
|
||||
"success": false,
|
||||
"errors": [
|
||||
"not-online"
|
||||
]
|
||||
}
|
||||
}
|
||||
});
|
||||
class Segment{
|
||||
constructor(element){
|
||||
this.rotation = 0;
|
||||
this.element = element;
|
||||
}
|
||||
|
||||
static send(url, params) {
|
||||
let fullUrl = Helper.basePath(DataManager.dataPath + url);
|
||||
isSolved(){
|
||||
return this.rotation === 0;
|
||||
}
|
||||
|
||||
rotate(){};
|
||||
|
||||
if (!(params instanceof FormData)) {
|
||||
let newParams = new FormData();
|
||||
for (let k in params) {
|
||||
newParams.append(k, params[k]);
|
||||
}
|
||||
params = newParams;
|
||||
}
|
||||
_updateElement(){};
|
||||
|
||||
return fetch(fullUrl, {
|
||||
"credentials": "same-origin",
|
||||
"method": "POST",
|
||||
"body": params
|
||||
}).then(function (res) {
|
||||
return res.json();
|
||||
}).catch(function (e) {
|
||||
console.error("error", e);
|
||||
return {
|
||||
"success": false,
|
||||
"errors": [
|
||||
"not-online"
|
||||
]
|
||||
}
|
||||
});
|
||||
applyRotations(rotations){
|
||||
return rotations;
|
||||
}
|
||||
|
||||
static buildQuery(values) {
|
||||
return Helper.buildQuery(values);
|
||||
getElement()
|
||||
{
|
||||
return this.element;
|
||||
}
|
||||
}
|
||||
|
||||
DataManager.dataPath = "data/";
|
||||
DataManager.cachePath = "cached/";
|
||||
|
||||
class SettingsSite extends AbstractSite$1 {
|
||||
constructor(siteManager) {
|
||||
super(siteManager, 'public/html/settings.html', "settings");
|
||||
for (let k in SettingsSite.settingsFragments) {
|
||||
this.addSettingsFragment(k, new SettingsSite.settingsFragments[k](this));
|
||||
}
|
||||
this.active = null;
|
||||
class ParentSegment extends Segment {
|
||||
constructor(element) {
|
||||
super(element);
|
||||
this.children = [];
|
||||
this.class = "rotate-0";
|
||||
}
|
||||
|
||||
addSettingsFragment(name, settingsFragment) {
|
||||
this.addFragment("#settings-fragments", settingsFragment);
|
||||
delete this.fragments["#settings-fragments"];
|
||||
this.fragments[name] = settingsFragment;
|
||||
rotate() {
|
||||
this.rotation += 90;
|
||||
this.rotation %= 360;
|
||||
|
||||
this._updateRotationClass();
|
||||
}
|
||||
|
||||
onStart() {
|
||||
let res = super.onStart();
|
||||
if (Helper.isNotNull(this.active) && !this.fragments[this.active].isActive()) {
|
||||
this.setActive(null);
|
||||
applyRotations(rotations)
|
||||
{
|
||||
// debugger;
|
||||
this.rotation = rotations[0];
|
||||
rotations.splice(0,1);
|
||||
for (let i = 0, n = this.children.length; i < n; i++) {
|
||||
rotations = this.children[i].applyRotations(rotations);
|
||||
}
|
||||
|
||||
this.buildList();
|
||||
return res;
|
||||
return rotations;
|
||||
}
|
||||
|
||||
setActive(name) {
|
||||
if (Helper.isNotNull(this.active)) {
|
||||
this.fragments[this.active].inflatePromise.then(function (view) {
|
||||
view.classList.remove("active");
|
||||
});
|
||||
this.findBy("#show-fragment-" + this.active).classList.remove("active");
|
||||
}
|
||||
this.active = name;
|
||||
if (Helper.isNotNull(this.active)) {
|
||||
this.fragments[this.active].inflatePromise.then(function (view) {
|
||||
view.classList.add("active");
|
||||
});
|
||||
this.findBy("#show-fragment-" + this.active).classList.add("active");
|
||||
}
|
||||
}
|
||||
|
||||
buildList() {
|
||||
let listNameElem = this.findBy("#settings-fragment-list");
|
||||
listNameElem.removeAllChildren();
|
||||
|
||||
let self = this;
|
||||
for (let k in this.fragments) {
|
||||
if (this.fragments[k].isActive()) {
|
||||
|
||||
let liElement = document.createElement("li");
|
||||
liElement.id = "show-fragment-" + k;
|
||||
liElement.appendChild(Translator.makePersistentTranslation(k, null, "a"));
|
||||
liElement.addEventListener("click", function () {
|
||||
self.setActive(k);
|
||||
});
|
||||
listNameElem.appendChild(liElement);
|
||||
|
||||
if (Helper.isNull(this.active)) {
|
||||
this.setActive(k);
|
||||
}
|
||||
isSolved() {
|
||||
for (let i = 0, n = this.children.length; i < n; i++) {
|
||||
if (!this.children[i].isSolved()) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return super.isSolved();
|
||||
}
|
||||
|
||||
static addSettingsFragment(name, settingsFragment) {
|
||||
SettingsSite.settingsFragments[name] = settingsFragment;
|
||||
setChildren(children) {
|
||||
this.children = [];
|
||||
for (let i = 0, n = children.length; i < n; i++) {
|
||||
this.addChild(children[i]);
|
||||
}
|
||||
}
|
||||
|
||||
static setAddSettingsSite(addLink) {
|
||||
SettingsSite.shouldAddSettingsSite = addLink;
|
||||
addChild(child) {
|
||||
this.children.push(child);
|
||||
this._updateElement();
|
||||
}
|
||||
|
||||
_updateRotationClass(){
|
||||
this.element.classList.remove(this.class);
|
||||
this.class = "rotate-" + this.rotation;
|
||||
this.element.classList.add(this.class);
|
||||
}
|
||||
|
||||
_updateElement() {
|
||||
const childContainer = this.element.querySelector(".child-container");
|
||||
childContainer.removeAllChildren();
|
||||
|
||||
this._updateRotationClass();
|
||||
|
||||
const self = this;
|
||||
this.element.onclick = function () {
|
||||
self.rotate();
|
||||
};
|
||||
|
||||
for (let i = 0, n = this.children.length; i < n; i++) {
|
||||
this.children[i]._updateElement();
|
||||
childContainer.appendChild(this.children[i].getElement());
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
SettingsSite.settingsFragments = {};
|
||||
SettingsSite.shouldAddSettingsSite = true;
|
||||
class LeafSegment extends Segment{
|
||||
|
||||
InitPromise.addPromise(function (app) {
|
||||
if (SettingsSite.shouldAddSettingsSite) {
|
||||
app.addDeepLink("settings", SettingsSite.name);
|
||||
|
||||
let settingsAction = new MenuAction("settings", function () {
|
||||
app.startSite(SettingsSite.name);
|
||||
}, MenuAction.SHOW_FOR_LARGE, 10000);
|
||||
settingsAction.setIcon("img/settings.png");
|
||||
app.addDefaultAction(settingsAction);
|
||||
constructor(element, leaf) {
|
||||
super(element);
|
||||
this.leaf = 'A';
|
||||
if (Helper.isNotNull(leaf))
|
||||
{
|
||||
this.setLeaf(leaf);
|
||||
}
|
||||
}
|
||||
|
||||
setLeaf(leaf)
|
||||
{
|
||||
this.leaf = leaf;
|
||||
}
|
||||
});
|
||||
|
||||
class ClockSite extends AbstractSite$1
|
||||
{
|
||||
_updateElement() {
|
||||
this.element.querySelector(".leaf-element").removeAllChildren().appendChild(document.createTextNode(this.leaf));
|
||||
}
|
||||
}
|
||||
|
||||
class TemplateContainer{
|
||||
constructor(leafTemplate, parentTemplate, rowTemplate){
|
||||
this.leafTemplate = leafTemplate;
|
||||
this.parentTemplate = parentTemplate;
|
||||
this.rowTemplate = rowTemplate;
|
||||
}
|
||||
|
||||
copyLeafTemplate()
|
||||
{
|
||||
return Helper.cloneNode(this.leafTemplate);
|
||||
}
|
||||
|
||||
copyParentTemplate()
|
||||
{
|
||||
return Helper.cloneNode(this.parentTemplate);
|
||||
}
|
||||
|
||||
copyRowTemplate()
|
||||
{
|
||||
return Helper.cloneNode(this.rowTemplate);
|
||||
}
|
||||
}
|
||||
|
||||
class Level {
|
||||
constructor(templateContainer) {
|
||||
this.rootSegment = null;
|
||||
this.words = [];
|
||||
this.startRotations = [];
|
||||
this.templateContainer = templateContainer;
|
||||
}
|
||||
|
||||
setWords(words)
|
||||
{
|
||||
this.words = words;
|
||||
}
|
||||
|
||||
setStartRotations(rotations)
|
||||
{
|
||||
this.startRotations = rotations;
|
||||
}
|
||||
|
||||
hasWon() {
|
||||
return this.rootSegment.isSolved();
|
||||
}
|
||||
|
||||
getRootSegment(){
|
||||
return this.rootSegment;
|
||||
}
|
||||
|
||||
createSegments() {};
|
||||
|
||||
static _createLeafsForWord(word, leafSegmentTemplate)
|
||||
{
|
||||
let leafSegments = [];
|
||||
for (let i = 0, n = word.length; i < n; i++) {
|
||||
leafSegments.push(new LeafSegment(Helper.cloneNode(leafSegmentTemplate), word.charAt(i)));
|
||||
}
|
||||
return leafSegments;
|
||||
}
|
||||
}
|
||||
|
||||
class RowSegment extends ParentSegment{
|
||||
rotate() {}
|
||||
|
||||
applyRotations(rotations)
|
||||
{
|
||||
for (let i = 0, n = this.children.length; i < n; i++) {
|
||||
rotations = this.children[i].applyRotations(rotations);
|
||||
}
|
||||
return rotations;
|
||||
}
|
||||
}
|
||||
|
||||
class SimpleLevel extends Level{
|
||||
|
||||
createSegments() {
|
||||
if (this.words.length >= 2 && this.words[0].length >= 6 &&this.words[1].length >= 6){
|
||||
|
||||
let leafsWordOne = Level._createLeafsForWord(this.words[0], this.templateContainer.copyLeafTemplate());
|
||||
let leafsWordTwo = Level._createLeafsForWord(this.words[1], this.templateContainer.copyLeafTemplate());
|
||||
|
||||
let segmentOne = new ParentSegment(this.templateContainer.copyParentTemplate());
|
||||
let segmentTwo = new ParentSegment(this.templateContainer.copyParentTemplate());
|
||||
let segmentThree = new ParentSegment(this.templateContainer.copyParentTemplate());
|
||||
|
||||
segmentOne.addChild(leafsWordOne[0]);
|
||||
segmentOne.addChild(leafsWordOne[1]);
|
||||
segmentOne.addChild(leafsWordTwo[0]);
|
||||
segmentOne.addChild(leafsWordTwo[1]);
|
||||
|
||||
segmentTwo.addChild(leafsWordOne[2]);
|
||||
segmentTwo.addChild(leafsWordOne[3]);
|
||||
segmentTwo.addChild(leafsWordTwo[2]);
|
||||
segmentTwo.addChild(leafsWordTwo[3]);
|
||||
|
||||
segmentThree.addChild(leafsWordOne[4]);
|
||||
segmentThree.addChild(leafsWordOne[5]);
|
||||
segmentThree.addChild(leafsWordTwo[4]);
|
||||
segmentThree.addChild(leafsWordTwo[5]);
|
||||
|
||||
this.rootSegment = new RowSegment(this.templateContainer.copyRowTemplate());
|
||||
this.rootSegment.addChild(segmentOne);
|
||||
this.rootSegment.addChild(segmentTwo);
|
||||
this.rootSegment.addChild(segmentThree);
|
||||
|
||||
this.rootSegment.applyRotations(this.startRotations);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class LevelSite extends AbstractSite$1{
|
||||
constructor(siteManager) {
|
||||
super(siteManager, "html/application/clock.html");
|
||||
super(siteManager, "html/application/level.html", "level");
|
||||
}
|
||||
|
||||
|
||||
onConstruct(args) {
|
||||
this.setTitle("clock");
|
||||
this.setTitle("Level");
|
||||
return super.onConstruct(args);
|
||||
}
|
||||
|
||||
onFirstStart(){
|
||||
DataManager.load("clock").then(function(data){
|
||||
document.getElementById("current-time").innerText = data.result.date;
|
||||
});
|
||||
onFirstStart() {
|
||||
super.onFirstStart();
|
||||
|
||||
let leafSegmentTemplate = this.findBy("#segment-leaf-template");
|
||||
let parentSegmentTemplate = this.findBy("#segment-parent-template");
|
||||
let rowSegmentTemplate = this.findBy("#segment-row-template");
|
||||
|
||||
leafSegmentTemplate.id = null;
|
||||
parentSegmentTemplate.id = null;
|
||||
rowSegmentTemplate.id = null;
|
||||
|
||||
leafSegmentTemplate.remove();
|
||||
parentSegmentTemplate.remove();
|
||||
rowSegmentTemplate.remove();
|
||||
|
||||
let templateContainer = new TemplateContainer(leafSegmentTemplate, parentSegmentTemplate, rowSegmentTemplate);
|
||||
|
||||
|
||||
let level = new SimpleLevel(templateContainer);
|
||||
level.setWords([
|
||||
"Dynamo",
|
||||
"Abhang"
|
||||
]);
|
||||
level.setStartRotations([0,90,180]);
|
||||
|
||||
level.createSegments();
|
||||
level.getRootSegment()._updateElement();
|
||||
this.findBy("#level").appendChild(level.getRootSegment().getElement());
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2941,7 +3041,7 @@ ShareManager.addShareButton(new TelegramShareButton('img/telegram.svg'));
|
||||
let app = new App();
|
||||
// app.addDeepLink("policy", PrivatePolicySite.name);
|
||||
app.setAddThemeAction(true);
|
||||
// app.addDefaultAction(Translator.generateChangeLanguageMenuAction());
|
||||
app.addDefaultAction(Translator.generateChangeLanguageMenuAction());
|
||||
|
||||
//bridge für Android
|
||||
// window["ThemeManager"] = ThemeManager;
|
||||
@@ -2952,6 +3052,6 @@ app.setAddThemeAction(true);
|
||||
// window["Translator"]["setLanguage"] = Translator.setLanguage;
|
||||
|
||||
InitPromise.resolve(app).then(function(){
|
||||
app.start(ClockSite);
|
||||
app.start(LevelSite);
|
||||
Translator.setLanguage("de");
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user