265 lines
11 KiB
TypeScript
265 lines
11 KiB
TypeScript
const settingsIcon = require("../../img/settings.png").default;
|
|
const view = require("../../html/sites/menu.html");
|
|
|
|
import {App, Toast, DataManager, ScaleHelper, MenuSite} from "cordova-sites/dist/client";
|
|
import {Helper} from "js-helper/dist/shared";
|
|
import {LevelSite} from "./LevelSite";
|
|
import {TemplateContainer} from "../wordrotator/Segment/TemplateContainer";
|
|
import {MainMenuLevel} from "../wordrotator/Level/MainMenuLevel";
|
|
import {NativeStoragePromise} from "cordova-sites/dist/client";
|
|
import {ViewHelper} from "js-helper/dist/client/ViewHelper";
|
|
import {LevelPlayed} from "../model/LevelPlayed";
|
|
import {SyncJob} from "cordova-sites-easy-sync/dist/client/SyncJob";
|
|
import {LevelData} from "../../../shared/model/LevelData";
|
|
import {ShareManager} from "cordova-sites/dist/client/js/ShareManager/ShareManager";
|
|
import {Translator} from "cordova-sites/dist/client/js/Translator";
|
|
import {SoundManager} from "cordova-sites/dist/client/js/Sound/SoundManager";
|
|
import {Matomo} from "cordova-sites/dist/client/js/Legacy/Matomo";
|
|
import {MenuAction} from "cordova-sites/dist/client/js/Context/Menu/MenuAction/MenuAction";
|
|
import {SettingsSite} from "./SettingsSite";
|
|
|
|
export class MainMenuSite extends MenuSite {
|
|
static app: App;
|
|
|
|
private loadLevelPromise: Promise<any>;
|
|
private listener: () => void;
|
|
private templateContainer: TemplateContainer;
|
|
private randomRotateTimeout;
|
|
|
|
constructor(siteManager) {
|
|
super(siteManager, view);
|
|
this.loadLevelPromise = new SyncJob().sync([LevelData]).catch(e => console.error(e));
|
|
this.listener = null;
|
|
this.getNavbarFragment().setCanGoBack(false);
|
|
}
|
|
|
|
onCreateMenu(navbar) {
|
|
super.onCreateMenu(navbar);
|
|
let settingsAction = new MenuAction("", () => {
|
|
this.startSite(SettingsSite);
|
|
}, MenuAction.SHOW_ALWAYS, null, settingsIcon);
|
|
navbar.addAction(settingsAction);
|
|
return navbar;
|
|
}
|
|
|
|
async onViewLoaded() {
|
|
const res = super.onViewLoaded();
|
|
|
|
let playButton = this.findBy("#play-button");
|
|
playButton.addEventListener("click", () => {
|
|
// Matomo.push(["trackEvent", "MainMenu", "startButton"]);
|
|
this.startLevelSite();
|
|
});
|
|
|
|
let leafSegmentTemplate = this.findBy("#segment-leaf-template");
|
|
let parentSegmentTemplate = this.findBy("#segment-parent-template");
|
|
let rowSegmentTemplate = this.findBy("#segment-row-template");
|
|
let triangleTemplate = this.findBy("#segment-triangle-template");
|
|
|
|
leafSegmentTemplate.id = null;
|
|
parentSegmentTemplate.id = null;
|
|
rowSegmentTemplate.id = null;
|
|
triangleTemplate.id = null;
|
|
|
|
leafSegmentTemplate.remove();
|
|
parentSegmentTemplate.remove();
|
|
rowSegmentTemplate.remove();
|
|
triangleTemplate.remove();
|
|
|
|
this.templateContainer = new TemplateContainer(leafSegmentTemplate, parentSegmentTemplate, rowSegmentTemplate, triangleTemplate);
|
|
|
|
//TODO?
|
|
// if (Helper.nonNull(MainMenuSite.app._cookieClosePromise)) {
|
|
// MainMenuSite.app._cookieClosePromise.then(() => {
|
|
// if (this.listener) {
|
|
// this.listener();
|
|
// }
|
|
// });
|
|
// }
|
|
|
|
let soundManager = SoundManager.getInstance();
|
|
|
|
let playMusicButton = this.findBy("#play-music");
|
|
playMusicButton.checked = (await NativeStoragePromise.getItem("play-music", "1") === "1");
|
|
playMusicButton.addEventListener("change", async () => {
|
|
await NativeStoragePromise.setItem("play-music", (playMusicButton.checked) ? "1" : "0");
|
|
soundManager.set({muted: !playMusicButton.checked}, SoundManager.CHANNELS.MUSIC);
|
|
if (playMusicButton.checked) {
|
|
await soundManager.play(SoundManager.CHANNELS.MUSIC);
|
|
}
|
|
|
|
//TODO [MIG] Matomo
|
|
Matomo.push(["trackEvent", "MainMenu", "PlayMusic", "Play Music", (playMusicButton.checked) ? 1 : 0]);
|
|
});
|
|
|
|
let playSoundButton = this.findBy("#play-sound");
|
|
playSoundButton.checked = (await NativeStoragePromise.getItem("play-sound", "1") === "1");
|
|
playSoundButton.addEventListener("change", async () => {
|
|
await NativeStoragePromise.setItem("play-sound", (playSoundButton.checked) ? "1" : "0");
|
|
soundManager.set({muted: !playSoundButton.checked}, SoundManager.CHANNELS.SOUND);
|
|
|
|
//TODO [MIG] Matomo
|
|
Matomo.push(["trackEvent", "MainMenu", "PlaySound", "Play Sound", (playSoundButton.checked) ? 1 : 0]);
|
|
});
|
|
|
|
this.findBy("#share-button").addEventListener("click", () => {
|
|
new ShareManager().share(Translator.getInstance().translate("share-text", [window.location]));
|
|
});
|
|
return res;
|
|
// this.findBy("#share-buttons").appendChild(ShareManager.generateDefaultShareElement("https://wordrotator.silas.link"));
|
|
}
|
|
|
|
async onStart(args) {
|
|
// Matomo.update("Menu Sites");
|
|
let res = super.onStart(args);
|
|
|
|
let level = new MainMenuLevel(this.templateContainer);
|
|
level.setWords(["WORD", "ROTA", "TORW", "ORDR"]);
|
|
level.createSegments();
|
|
|
|
level.getWonPromise().then(() => {
|
|
// Matomo.push(["trackEvent", "MainMenu", "levelSolved"]);
|
|
this.startLevelSite();
|
|
});
|
|
|
|
let segment = level.getRootSegment();
|
|
segment._updateElement();
|
|
|
|
let levelSegment = this.findBy("#level");
|
|
ViewHelper.removeAllChildren(levelSegment).appendChild(segment.getElement());
|
|
|
|
let rotationsSegments = level.getRotatableSegments();
|
|
|
|
let randomRotationFunction = () => {
|
|
let timeout = Math.random() * 4500 + 1500;
|
|
this.randomRotateTimeout = setTimeout(() => {
|
|
let indexBlocked = -1;
|
|
let indexesNotRight = [];
|
|
for (let i = 0; i < rotationsSegments.length; i++) {
|
|
if (rotationsSegments[i].rotation !== 0) {
|
|
indexesNotRight.push(i);
|
|
if (indexesNotRight.length >= 2) {
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
if (indexesNotRight.length === 1) {
|
|
indexBlocked = indexesNotRight[0];
|
|
}
|
|
|
|
let index = Math.floor(Math.random() * rotationsSegments.length);
|
|
if (index === indexBlocked) {
|
|
index = (index + 1) % rotationsSegments.length;
|
|
}
|
|
|
|
rotationsSegments[index].rotate();
|
|
randomRotationFunction();
|
|
}, timeout);
|
|
};
|
|
randomRotationFunction();
|
|
|
|
this.listener = async () => {
|
|
let playButton = this.findBy("#play-button");
|
|
let levelNumber = this.findBy("#level-number");
|
|
levelNumber.innerText = Helper.nonNull(await NativeStoragePromise.getItem("levelCounter"), 1);
|
|
|
|
let levelSegment = this.findBy("#level");
|
|
|
|
let scaleHelper = new ScaleHelper();
|
|
await scaleHelper.scaleToFull(levelSegment, levelSegment.parentElement, false, false, 2, 8, null, false);
|
|
|
|
let levelStyle = getComputedStyle(levelSegment);
|
|
playButton.style.width = levelStyle.getPropertyValue("width");
|
|
scaleHelper.scaleToFull(playButton.children[0], playButton, null, null, null, 4, null, false);
|
|
|
|
await scaleHelper.scaleTo(0.2, levelNumber.parentElement, levelNumber.parentElement.parentElement, null, null, null, 10, null, false);
|
|
scaleHelper.scaleToFull(levelNumber, levelNumber.parentElement, false, false, 8, null, null, false);
|
|
};
|
|
|
|
// this.listener();
|
|
window.addEventListener("resize", this.listener);
|
|
setTimeout(this.listener, 50);
|
|
|
|
//Musikbuttons update, falls in den Einstellungen umgestellt
|
|
// let settingsManager = SettingsManager.getInstance();
|
|
let playSoundButton = this.findBy("#play-sound");
|
|
playSoundButton.checked = (await NativeStoragePromise.getItem("play-sound", "1") === "1");
|
|
let playMusicButton = this.findBy("#play-music");
|
|
playMusicButton.checked = (await NativeStoragePromise.getItem("play-music", "1") === "1");
|
|
|
|
return res;
|
|
}
|
|
|
|
async startLevelSite() {
|
|
SoundManager.getInstance().resumeContext();
|
|
|
|
this.startSite(LevelSite, Promise.race([this.loadLevelPromise, new Promise<void>(async resolve => {
|
|
let levelData = await LevelPlayed.getNextLevelData(LevelSite.RENDERER_TYPES);
|
|
if (levelData !== null) {
|
|
resolve();
|
|
}
|
|
})]));
|
|
}
|
|
|
|
onPause() {
|
|
clearTimeout(this.randomRotateTimeout);
|
|
window.removeEventListener("resize", this.listener);
|
|
return super.onPause();
|
|
}
|
|
|
|
// async loadLevels() {
|
|
// try {
|
|
// const db = await WordRotatorDb.getInstance();
|
|
// const dateLastSync = Helper.nonNull(await db.loadDateLastSync(), 0);
|
|
// // const dateLastSync = Helper.nonNull(localStorage.getItem("date-last-sync"), 0);
|
|
//
|
|
// // let numberLevels = db.countLevels();
|
|
// let newLastSync = null;
|
|
// let maxRuns = 1;
|
|
// let levelPromises = [];
|
|
// for (let run = 0; run < maxRuns; run++) {
|
|
// let res = await DataManager.load("wordRotator/levels" + DataManager.buildQuery({
|
|
// "currentRun": run,
|
|
// "dateLastSync": dateLastSync
|
|
// }));
|
|
// if (!res["success"]) {
|
|
// if (await db.loadNextLevel(LevelSite.RENDERER_TYPES) === null) {
|
|
// new Toast("sync-error", 6000).show();
|
|
// }
|
|
// newLastSync = null;
|
|
// break;
|
|
// }
|
|
// res = res["result"];
|
|
// newLastSync = Helper.nonNull(newLastSync, res["currentSyncDate"]);
|
|
// maxRuns = res["maxRuns"];
|
|
//
|
|
// let levels = res["levels"];
|
|
// for (let i = 0; i < levels.length; i++) {
|
|
// let currentLevel = levels[i];
|
|
// levelPromises.push(db.loadLevel(levels[i]["id"]).then(level => {
|
|
// currentLevel["played"] = (Helper.nonNull(Helper.nonNull(level, {}).played, false));
|
|
// return currentLevel;
|
|
// }));
|
|
// }
|
|
// }
|
|
// let levels = await Promise.all(levelPromises);
|
|
// await db.saveManyLevels(levels);
|
|
//
|
|
// if (newLastSync != null && newLastSync !== "null") {
|
|
// await NativeStoragePromise.setItem("date-last-sync", newLastSync);
|
|
// db.saveDateLastSync(newLastSync);
|
|
// }
|
|
// }
|
|
// catch(e){
|
|
// // if (await db.loadNextLevel(LevelSite.RENDERER_TYPES) === null) {
|
|
// new Toast("sync-error", 6000);
|
|
// // }
|
|
// console.error(e);
|
|
// }
|
|
// }
|
|
}
|
|
|
|
App.addInitialization(app => {
|
|
MainMenuSite.app = app;
|
|
});
|