Ainias/wordRotator
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update to pc

Browse Source
This commit is contained in:
silas 2018-06-17 20:05:09 +02:00
parent ac0363f28b
commit f4ce1d54ee
25 changed files with 467 additions and 223 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.idea/php.xml generated
View File

@ -73,6 +73,7 @@
<path value="$PROJECT_DIR$/vendor/zendframework/zend-di" />
<path value="$PROJECT_DIR$/vendor/zendframework/zend-mvc-plugin-prg" />
<path value="$PROJECT_DIR$/vendor/zendframework/zend-permissions-acl" />
<path value="$PROJECT_DIR$/vendor/true/punycode" />
</include_path>
</component>
</project>

2
.idea/watcherTasks.xml generated
View File

@ -78,7 +78,7 @@
<option name="runOnExternalChanges" value="true" />
<option name="scopeName" value="translator" />
<option name="trackOnlyRoot" value="false" />
<option name="workingDir" value="$PROJECT_DIR$/../stories" />
<option name="workingDir" value="$PROJECT_DIR$" />
<envs />
</TaskOptions>
<TaskOptions isEnabled="false">

2
.idea/wordRotator.iml generated
View File

@ -3,6 +3,8 @@
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$">
<sourceFolder url="file://$MODULE_DIR$/src/module/Application/src" isTestSource="false" packagePrefix="Application\" />
<sourceFolder url="file://$MODULE_DIR$/src/module/Application/pwa/html" isTestSource="false" />
<excludeFolder url="file://$MODULE_DIR$/vendor/true/punycode" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />

4
bin/afterUpdate.sh
View File

@ -15,4 +15,6 @@ for d in "vendor/ainias/pwa"*/; do
done
#bin/jsConcat.sh src/js public/js/app 1
node bin/concatTranslator.js
node bin/concatTranslator.js
bin/build.sh

1
bin/concatTranslator.js
View File

@ -37,6 +37,7 @@ for (var i = 0, n = moduleDirs.length; i < n; i++) {
for (var lang in translations)
{
console.log(translations[lang]);
var langTranslations = JSON.stringify(translations[lang]);
fs.writeFile(outputDir+"/"+lang+".json", langTranslations, err => {
if (err){

4
bin/localLink.sh
View File

@ -1,3 +1,3 @@
#!/usr/bin/env bash
rm -rf /var/www/pwa/stories/vendor/ainias/$2
ln -s $1 /var/www/pwa/stories/vendor/ainias/$2
rm -rf /var/www/pwa/wordRotator/vendor/ainias/$2
ln -s $1 /var/www/pwa/wordRotator/vendor/ainias/$2

2
public/css/wordRotator.css
View File

File diff suppressed because one or more lines are too long

1
public/html/application/clock.html
View File

@ -1 +0,0 @@
<div class=row><div class="small-12 smedium-6 columns" data-translation=current-time>Current time:</div><div class="small-12 smedium-6 columns" id=current-time>???</div></div>

2
public/html/application/level.html
View File

@ -1 +1 @@
<div><div id=segment-leaf-template class="segment segment-leaf"><div class=leaf-element></div></div><div id=segment-parent-template class="segment segment-parent"><div class=child-container></div></div><div id=segment-row-template class="segment segment-row"><div class=child-container></div></div><div id=level></div></div>
<div class=max-height><div id=segment-leaf-template class="segment segment-leaf"><div class=leaf-element></div></div><div id=segment-parent-template class="segment segment-parent"><div class=child-container></div></div><div id=segment-row-template class="segment segment-row"><div class=child-container></div></div><div class=max-height><div class="show-when-won height-20 center flex-center"><b data-translation=won id=won-text></b></div><div class="flex-center height-60 overflow-hidden"><div id=level></div></div><div class="show-when-won flex-center height-20"><button class=button id=continue-button data-translation=continue></button></div></div></div>

6
public/index.html
View File

@ -86,13 +86,11 @@
<div class="mainContainer">
<div class="row">
<div class="columns small-12" id="main-content">
<div id="site-content" role="main">
<div class='loader'>
<div id="site-content" role="main"><div class='loader'>
<svg viewBox="0 0 32 32" width="32" height="32">
<circle r="14" id="spinner" cx="16" cy="16" fill="none"></circle>
</svg>
</div>
</div>
</div></div>
<div id="flashMessageContainerAbsoulte">
<div id="flashMessageContainer"></div>
</div>

166
public/js/app.js
View File

@ -3037,12 +3037,57 @@ class Segment{
}
}
class DelayPromise extends Promise{
constructor(delay) {
super((resolve) => {
setTimeout(resolve, delay);
class ScaleHelper {
scaleTo(scale, fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight) {
margin = Helper.nonNull(margin, 10);
ignoreHeight = Helper.nonNull(ignoreHeight, false);
ignoreWidth = Helper.nonNull(ignoreWidth, false);
fontWeight = Helper.nonNull(fontWeight, fontElement.innerHTML.length);
let hasNoTransitionClass = container.classList.contains("no-transition");
container.classList.add("no-transition");
let currentFontSize = 1;
let diff = 0;
let widthDiff = 0;
let heightDiff = 0;
let containerWidth = 0;
let containerHeight = 0;
do {
currentFontSize += diff / (fontWeight + 1);
fontElement.style.fontSize = currentFontSize + 'px';
let containerStyle = window.getComputedStyle(container);
containerWidth = containerStyle.getPropertyValue("width").replace('px', '');
containerHeight = containerStyle.getPropertyValue("height").replace('px', '');
widthDiff = containerWidth - fontElement.offsetWidth;
heightDiff = containerHeight - fontElement.offsetHeight;
let newDiff = (ignoreWidth ? heightDiff : (ignoreHeight ? widthDiff : Math.min(widthDiff, heightDiff)));
if (newDiff === diff) {
break;
}
diff = newDiff;
} while ((widthDiff > (1 - scale) * containerWidth || ignoreWidth) && (heightDiff > (1 - scale) * containerHeight || ignoreHeight));
fontElement.style.fontSize = (currentFontSize - margin) + 'px';
if (!hasNoTransitionClass) {
container.classList.remove("no-transition");
}
let self = this;
window.addEventListener("resize", function () {
setTimeout(() => {
self.scaleTo(scale, fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight);
}, 255);
});
}
scaleToFull(fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight) {
return this.scaleTo(1, fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight);
}
}
class ParentSegment extends Segment {
@ -3061,7 +3106,10 @@ class ParentSegment extends Segment {
this.getLevel().checkHasWon(new Promise((resolve, reject)=>{
this.element.addEventListener("animationend", resolve);
}));
return new DelayPromise(250);
// return new DelayPromise(250);
return new Promise(function(resolve) {
setTimeout(resolve, 250);
});
}
}
@ -3177,6 +3225,7 @@ class Level {
this.templateContainer = templateContainer;
this.hasWon = false;
this.id = null;
this.wonResolver = null;
this.giveUpResolver = null;
@ -3188,6 +3237,16 @@ class Level {
});
}
setId(id)
{
this.id = id;
}
getId()
{
return this.id;
}
getLevel()
{
return this;
@ -3197,6 +3256,10 @@ class Level {
{
this.rootSegment = rootSegment;
this.rootSegment.setParent(this);
if (this.startRotations)
{
this.applyRotations();
}
}
setWords(words)
@ -3212,6 +3275,15 @@ class Level {
this.startRotations = rotations;
}
applyRotations(rotations)
{
if (this.rootSegment)
{
rotations = Helper.nonNull(rotations, this.startRotations);
this.rootSegment.applyRotations(rotations);
}
}
getHasWon()
{
return this.hasWon;
@ -3281,29 +3353,32 @@ class RowLevel extends Level {
parent.addChild(leafsWordTwo[2 * i + 1]);
rootSegment.addChild(parent);
}
rootSegment.applyRotations(this.startRotations);
// rootSegment.applyRotations(this.startRotations);
this.setRootSegment(rootSegment);
}
}
}
class LevelHelper{
static setLevelType(typeId, level)
{
class LevelHelper {
static setLevelType(typeId, level) {
LevelHelper.types[typeId] = level;
}
static getLevelClass(type)
{
static getLevelClass(type) {
return LevelHelper.types[type];
}
static inflateLevel(jsonLevel, templateContainer)
{
static inflateLevel(jsonLevel, templateContainer) {
let level = new (LevelHelper.types[jsonLevel["rendererType"]])(templateContainer);
level.setWords(jsonLevel["words"]);
level.setId(jsonLevel["id"]);
for (let i = 0, n = jsonLevel["rotations"].length; i < n; i++) {
if (jsonLevel["rotations"][i] <= 4) {
jsonLevel["rotations"][i] = 90 * jsonLevel["rotations"][i];
}
}
level.setStartRotations(jsonLevel["rotations"]);
return level;
}
@ -3355,12 +3430,12 @@ class WordRotatorDb extends MyDb {
return this.load(levelId, WordRotatorDb.OBJECT_STORE.LEVEL);
}
async loadNextLevel() {
async loadNextLevel(rendererTypes) {
const levels = await this.loadMany("difficulty", IDBKeyRange.lowerBound(0), WordRotatorDb.OBJECT_STORE.LEVEL);
let newLevels = [];
for (let i = 0, n = levels.length; i < n; i++) {
if (!levels[i].deleted && !levels[i].played) {
if (!levels[i]["deleted"] && !levels[i]["played"] && rendererTypes.indexOf(levels[i]["rendererType"]) !== -1) {
newLevels.push(levels[i]);
}
}
@ -3371,6 +3446,13 @@ class WordRotatorDb extends MyDb {
return newLevels[Math.round(Math.random() * newLevels.length) % newLevels.length];
}
async saveLevelPlayed(levelId)
{
const level = await this.loadLevel(levelId);
level.played = true;
return await this.saveObj(level, WordRotatorDb.OBJECT_STORE.LEVEL);
}
}
WordRotatorDb.OBJECT_STORE = {
@ -3383,8 +3465,21 @@ class LevelSite extends AbstractSite$1 {
super(siteManager, "html/application/level.html", "level");
}
createActionBarMenu(menu) {
menu = super.createActionBarMenu(menu);
this.levelCounterAction = new MenuAction("", function(){}, Menu.SHOW_ALWAYS, 0);
this.levelCounterAction.setShouldTranslate(false);
menu.addAction(this.levelCounterAction);
return menu;
}
onConstruct(args) {
this.setTitle("Level");
this.levelCounter = Helper.nonNull(localStorage.getItem("levelCounter"), 1);
return super.onConstruct(args);
}
@ -3403,24 +3498,43 @@ class LevelSite extends AbstractSite$1 {
parentSegmentTemplate.remove();
rowSegmentTemplate.remove();
let self = this;
let continueButton = this.findBy("#continue-button");
continueButton.addEventListener("click", ()=> {
self.nextLevel();
});
let wonText = this.findBy("#won-text");
let scaleHelper = new ScaleHelper();
scaleHelper.scaleToFull(continueButton, continueButton.parentElement);
scaleHelper.scaleToFull(wonText, wonText.parentElement);
this.levelCounterAction.setTitle(this.levelCounter);
this.templateContainer = new TemplateContainer(leafSegmentTemplate, parentSegmentTemplate, rowSegmentTemplate);
this.nextLevel();
}
async nextLevel() {
try {
this._siteContent.classList.remove('won');
const db = WordRotatorDb.getInstance();
const nextLevelJson = await db.loadNextLevel();
const nextLevelJson = await db.loadNextLevel([20]);
const level = LevelHelper.inflateLevel(nextLevelJson, this.templateContainer);
const self = this;
level.getWonPromise().then(() => {
self.nextLevel();
self.levelWon(level);
});
level.createSegments();
level.getRootSegment()._updateElement();
this.findBy("#level").appendChild(level.getRootSegment().getElement());
let levelSegment = this.findBy("#level");
levelSegment.removeAllChildren().appendChild(level.getRootSegment().getElement());
let scaleHelper = new ScaleHelper();
scaleHelper.scaleToFull(levelSegment, levelSegment.parentElement, false, false, 2,level.words[0].length * 2);
this.level = level;
}
@ -3428,6 +3542,18 @@ class LevelSite extends AbstractSite$1 {
console.error(e);
}
}
async levelWon(level){
const db = WordRotatorDb.getInstance();
// db.saveLevelPlayed(level);
this.levelCounter++;
localStorage.setItem("levelCounter", this.levelCounter);
this.levelCounterAction.setTitle(this.levelCounter);
this.levelCounterAction.redraw();
this._siteContent.classList.add('won');
}
}
class DataManager {

2
public/js/lang/de.json
View File

File diff suppressed because one or more lines are too long

2
public/js/lang/en.json
View File

File diff suppressed because one or more lines are too long

63
src/js/lib/pwa-assets.js
View File

@ -1,13 +1,66 @@
import { Fragment, Helper, Translator } from './pwa-lib.js';
import { Helper, Fragment, Translator } from './pwa-lib.js';
class DelayPromise extends Promise{
constructor(delay) {
super((resolve) => {
class DelayPromise extends Promise {
static async delay(delay) {
return new Promise((resolve) => {
setTimeout(resolve, delay);
});
}
}
class ScaleHelper {
scaleTo(scale, fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight) {
margin = Helper.nonNull(margin, 10);
ignoreHeight = Helper.nonNull(ignoreHeight, false);
ignoreWidth = Helper.nonNull(ignoreWidth, false);
fontWeight = Helper.nonNull(fontWeight, fontElement.innerHTML.length);
let hasNoTransitionClass = container.classList.contains("no-transition");
container.classList.add("no-transition");
let currentFontSize = 1;
let diff = 0;
let widthDiff = 0;
let heightDiff = 0;
let containerWidth = 0;
let containerHeight = 0;
do {
currentFontSize += diff / (fontWeight + 1);
fontElement.style.fontSize = currentFontSize + 'px';
let containerStyle = window.getComputedStyle(container);
containerWidth = containerStyle.getPropertyValue("width").replace('px', '');
containerHeight = containerStyle.getPropertyValue("height").replace('px', '');
widthDiff = containerWidth - fontElement.offsetWidth;
heightDiff = containerHeight - fontElement.offsetHeight;
let newDiff = (ignoreWidth ? heightDiff : (ignoreHeight ? widthDiff : Math.min(widthDiff, heightDiff)));
if (newDiff === diff) {
break;
}
diff = newDiff;
} while ((widthDiff > (1 - scale) * containerWidth || ignoreWidth) && (heightDiff > (1 - scale) * containerHeight || ignoreHeight));
fontElement.style.fontSize = (currentFontSize - margin) + 'px';
if (!hasNoTransitionClass) {
container.classList.remove("no-transition");
}
let self = this;
window.addEventListener("resize", function () {
setTimeout(() => {
self.scaleTo(scale, fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight);
}, 255);
});
}
scaleToFull(fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight) {
return this.scaleTo(1, fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight);
}
}
class TabbedFragment extends Fragment {
constructor(site) {
super(site, 'pwaAssets/html/fragment/tabbedFragment.html');
@ -73,4 +126,4 @@ class TabbedFragment extends Fragment {
}
}
export { DelayPromise, TabbedFragment };
export { DelayPromise, ScaleHelper, TabbedFragment };

161
src/js/lib/pwa-lib.js
View File

@ -2419,8 +2419,9 @@ class Dialog {
return this;
}
setContent(content) {
this.content = content;
async setContent(content) {
this.contentPromise = Promise.resolve(content);
this.content = await this.contentPromise;
return this;
}
@ -2465,70 +2466,71 @@ class Dialog {
this.buttons.push(button);
}
show() {
async show() {
let titleElement = document.createElement("span");
titleElement.classList.add("title");
if (this.translatable && this.title !== "") {
titleElement.appendChild(Translator.makePersistentTranslation(this.title));
}
else {
titleElement.innerHTML = this.title;
}
let titleBar = document.createElement("div");
titleBar.appendChild(titleElement);
let contentContainer = document.createElement("div");
contentContainer.classList.add("content-container");
let modalDialog = document.createElement("div");
modalDialog.className = this.additionalClasses;
modalDialog.classList.add("modal");
modalDialog.appendChild(titleBar);
modalDialog.appendChild(contentContainer);
let buttonBar = document.createElement("div");
buttonBar.classList.add("modal-button-container");
for (let i = 0, n = this.buttons.length; i < n; i++) {
buttonBar.appendChild(this.buttons[i]);
}
await this.contentPromise;
if (!(this.content instanceof Node)) {
this.content = (this.translatable) ? Translator.makePersistentTranslation(this.content) : document.createTextNode(this.content);
}
contentContainer.appendChild(this.content);
this.backgroundElement = document.createElement("div");
this.backgroundElement.classList.add("background");
this.backgroundElement.appendChild(modalDialog);
this.backgroundElement.querySelector(".modal").appendChild(buttonBar);
this.backgroundElement.style.display = "block";
let self = this;
return new Promise(function (resolve) {
if (!(self.content instanceof Node)) {
self.content = (self.translatable) ? Translator.makePersistentTranslation(self.content) : document.createTextNode(self.content);
}
if (this.cancelable) {
let closeButton = document.createElement("span");
closeButton.classList.add("close");
closeButton.innerHTML = "&times;";
let titleElement = document.createElement("span");
titleElement.classList.add("title");
if (self.translatable && self.title !== "") {
titleElement.appendChild(Translator.makePersistentTranslation(self.title));
}
else {
titleElement.innerHTML = self.title;
}
let titlteBar = document.createElement("div");
titlteBar.appendChild(titleElement);
let contentContainer = document.createElement("div");
contentContainer.classList.add("content-container");
contentContainer.appendChild(self.content);
let modalDialog = document.createElement("div");
modalDialog.className = self.additionalClasses;
modalDialog.classList.add("modal");
modalDialog.appendChild(titlteBar);
modalDialog.appendChild(contentContainer);
self.backgroundElement = document.createElement("div");
self.backgroundElement.classList.add("background");
self.backgroundElement.appendChild(modalDialog);
if (self.cancelable) {
titlteBar.appendChild(closeButton);
closeButton.addEventListener("click", function () {
titleBar.appendChild(closeButton);
closeButton.addEventListener("click", function () {
self.close();
});
window.addEventListener("click", function (e) {
if (e.target === self.backgroundElement) {
self.close();
});
window.addEventListener("click", function (e) {
if (e.target === self.backgroundElement) {
self.close();
}
});
}
}
});
}
let buttonBar = document.createElement("div");
buttonBar.classList.add("modal-button-container");
document.body.appendChild(this.backgroundElement);
Translator.getInstance().updateTranslations();
for (let i = 0, n = self.buttons.length; i < n; i++) {
buttonBar.appendChild(self.buttons[i]);
}
self.backgroundElement.querySelector(".modal").appendChild(buttonBar);
self.backgroundElement.style.display = "block";
document.body.appendChild(self.backgroundElement);
return new Promise(function (resolve) {
self.resolver = resolve;
Translator.getInstance().updateTranslations();
});
}
@ -2539,7 +2541,7 @@ class Dialog {
this.backgroundElement = null;
}
if (Helper.isNotNull(this.resolver)) {
this.resolver();
this.resolver(this.result);
}
}
@ -2551,52 +2553,13 @@ class Dialog {
class ConfirmDialog extends Dialog {
constructor(content, title) {
super(content, title);
this.result = null;
}
show() {
async show() {
this.addButton("confirm-button", true);
this.addButton("cancel-button", false);
let showPromise = super.show();
let self = this;
//Sorgt dafür, dass eine mögliche Exception im Promise geworfen wird
return new Promise(function (resolve) {
// let confirmButton = document.createElement("button");
// confirmButton.classList.add("button");
// confirmButton.classList.add("right");
// confirmButton.appendChild(Translator.makePersistentTranslation("confirm-button"));
// let cancelButton = document.createElement("button");
// cancelButton.classList.add("button");
// cancelButton.classList.add("right");
// cancelButton.appendChild(Translator.makePersistentTranslation("cancel-button"));
// let buttonBar = document.createElement("div");
// buttonBar.classList.add("modal-button-container");
// buttonBar.appendChild(confirmButton);
// buttonBar.appendChild(cancelButton);
// confirmButton.addEventListener("click", function(){
// self.result = true;
// self.close();
// });
// cancelButton.addEventListener("click", function(){
// self.result = false;
// self.close();
// });
// self.backgroundElement.querySelector(".modal").appendChild(buttonBar);
resolve(showPromise.then(function(){
return self.result;
}));
});
return super.show();
}

29
src/module/Application/pwa/html/application/level.html
View File

@ -1,14 +1,25 @@
<div>
<div id = 'segment-leaf-template' class = 'segment segment-leaf'>
<div class = 'leaf-element'></div>
<div class='max-height'>
<!-- Templates for segments-->
<div id='segment-leaf-template' class='segment segment-leaf'>
<div class='leaf-element'></div>
</div>
<div id = 'segment-parent-template' class = 'segment segment-parent'>
<div class = 'child-container'></div>
<div id='segment-parent-template' class='segment segment-parent'>
<div class='child-container'></div>
</div>
<div id = 'segment-row-template' class = 'segment segment-row'>
<div class = 'child-container'></div>
<div id='segment-row-template' class='segment segment-row'>
<div class='child-container'></div>
</div>
<div id = 'level'>
<!-- Site Content -->
<div class='max-height'>
<div class = 'show-when-won height-20 center flex-center'>
<b data-translation="won" id = "won-text"></b>
</div>
<div class="flex-center height-60 overflow-hidden">
<div id='level'>
</div>
</div>
<div class='show-when-won flex-center height-20'>
<button class='button' id='continue-button' data-translation="continue"></button>
</div>
</div>
</div>

11
src/module/Application/pwa/js/WordRotatorDb.js
View File

@ -35,12 +35,12 @@ export class WordRotatorDb extends MyDb {
return this.load(levelId, WordRotatorDb.OBJECT_STORE.LEVEL);
}
async loadNextLevel() {
async loadNextLevel(rendererTypes) {
const levels = await this.loadMany("difficulty", IDBKeyRange.lowerBound(0), WordRotatorDb.OBJECT_STORE.LEVEL);
let newLevels = [];
for (let i = 0, n = levels.length; i < n; i++) {
if (!levels[i].deleted && !levels[i].played) {
if (!levels[i]["deleted"] && !levels[i]["played"] && rendererTypes.indexOf(levels[i]["rendererType"]) !== -1) {
newLevels.push(levels[i]);
}
}
@ -51,6 +51,13 @@ export class WordRotatorDb extends MyDb {
return newLevels[Math.round(Math.random() * newLevels.length) % newLevels.length];
}
async saveLevelPlayed(levelId)
{
const level = await this.loadLevel(levelId);
level.played = true;
return await this.saveObj(level, WordRotatorDb.OBJECT_STORE.LEVEL);
}
}
WordRotatorDb.OBJECT_STORE = {

53
src/module/Application/pwa/js/site/LevelSite.js
View File

@ -1,18 +1,32 @@
import {AbstractSite, Helper} from "../../../../../js/lib/pwa-lib";
import {AbstractSite, Helper, Menu, MenuAction} from "../../../../../js/lib/pwa-lib";
import {ParentSegment} from "../wordrotator/Segment/ParentSegment";
import {LeafSegment} from "../wordrotator/Segment/LeafSegment";
import {TemplateContainer} from "../wordrotator/Segment/TemplateContainer";
import {SimpleLevel} from "../wordrotator/Level/SimpleLevel";
import {LevelHelper} from "../wordrotator/Level/LevelHelper";
import {WordRotatorDb} from "../WordRotatorDb";
import {ScaleHelper} from "../../../../../js/lib/pwa-assets";
export class LevelSite extends AbstractSite {
constructor(siteManager) {
super(siteManager, "html/application/level.html", "level");
}
createActionBarMenu(menu) {
menu = super.createActionBarMenu(menu);
this.levelCounterAction = new MenuAction("", function(){}, Menu.SHOW_ALWAYS, 0);
this.levelCounterAction.setShouldTranslate(false);
menu.addAction(this.levelCounterAction);
return menu;
}
onConstruct(args) {
this.setTitle("Level");
this.levelCounter = Helper.nonNull(localStorage.getItem("levelCounter"), 1);
return super.onConstruct(args);
}
@ -31,24 +45,43 @@ export class LevelSite extends AbstractSite {
parentSegmentTemplate.remove();
rowSegmentTemplate.remove();
let self = this;
let continueButton = this.findBy("#continue-button");
continueButton.addEventListener("click", ()=> {
self.nextLevel();
});
let wonText = this.findBy("#won-text");
let scaleHelper = new ScaleHelper();
scaleHelper.scaleToFull(continueButton, continueButton.parentElement);
scaleHelper.scaleToFull(wonText, wonText.parentElement);
this.levelCounterAction.setTitle(this.levelCounter);
this.templateContainer = new TemplateContainer(leafSegmentTemplate, parentSegmentTemplate, rowSegmentTemplate);
this.nextLevel();
}
async nextLevel() {
try {
this._siteContent.classList.remove('won');
const db = WordRotatorDb.getInstance();
const nextLevelJson = await db.loadNextLevel();
const nextLevelJson = await db.loadNextLevel([20]);
const level = LevelHelper.inflateLevel(nextLevelJson, this.templateContainer);
const self = this;
level.getWonPromise().then(() => {
self.nextLevel();
self.levelWon(level);
});
level.createSegments();
level.getRootSegment()._updateElement();
this.findBy("#level").appendChild(level.getRootSegment().getElement());
let levelSegment = this.findBy("#level");
levelSegment.removeAllChildren().appendChild(level.getRootSegment().getElement());
let scaleHelper = new ScaleHelper();
scaleHelper.scaleToFull(levelSegment, levelSegment.parentElement, false, false, 2,level.words[0].length * 2);
this.level = level;
}
@ -56,4 +89,16 @@ export class LevelSite extends AbstractSite {
console.error(e);
}
}
async levelWon(level){
const db = WordRotatorDb.getInstance();
// db.saveLevelPlayed(level);
this.levelCounter++;
localStorage.setItem("levelCounter", this.levelCounter);
this.levelCounterAction.setTitle(this.levelCounter);
this.levelCounterAction.redraw();
this._siteContent.classList.add('won');
}
}

24
src/module/Application/pwa/js/wordrotator/Level/Level.js
View File

@ -9,6 +9,7 @@ export class Level {
this.templateContainer = templateContainer;
this.hasWon = false;
this.id = null;
this.wonResolver = null;
this.giveUpResolver = null;
@ -20,6 +21,16 @@ export class Level {
});
}
setId(id)
{
this.id = id;
}
getId()
{
return this.id;
}
getLevel()
{
return this;
@ -29,6 +40,10 @@ export class Level {
{
this.rootSegment = rootSegment;
this.rootSegment.setParent(this);
if (this.startRotations)
{
this.applyRotations();
}
}
setWords(words)
@ -44,6 +59,15 @@ export class Level {
this.startRotations = rotations;
}
applyRotations(rotations)
{
if (this.rootSegment)
{
rotations = Helper.nonNull(rotations, this.startRotations);
this.rootSegment.applyRotations(rotations);
}
}
getHasWon()
{
return this.hasWon;

19
src/module/Application/pwa/js/wordrotator/Level/LevelHelper.js
View File

@ -1,18 +1,23 @@
export class LevelHelper{
static setLevelType(typeId, level)
{
export class LevelHelper {
static setLevelType(typeId, level) {
LevelHelper.types[typeId] = level;
}
static getLevelClass(type)
{
static getLevelClass(type) {
return LevelHelper.types[type];
}
static inflateLevel(jsonLevel, templateContainer)
{
static inflateLevel(jsonLevel, templateContainer) {
let level = new (LevelHelper.types[jsonLevel["rendererType"]])(templateContainer);
level.setWords(jsonLevel["words"]);
level.setId(jsonLevel["id"]);
for (let i = 0, n = jsonLevel["rotations"].length; i < n; i++) {
if (jsonLevel["rotations"][i] <= 4) {
jsonLevel["rotations"][i] = 90 * jsonLevel["rotations"][i];
}
}
level.setStartRotations(jsonLevel["rotations"]);
return level;
}

4
src/module/Application/pwa/js/wordrotator/Level/RowLevel.js
View File

@ -22,9 +22,7 @@ export class RowLevel extends Level {
parent.addChild(leafsWordTwo[2 * i + 1]);
rootSegment.addChild(parent);
}
rootSegment.applyRotations(this.startRotations);
// rootSegment.applyRotations(this.startRotations);
this.setRootSegment(rootSegment)
}
}

5
src/module/Application/pwa/js/wordrotator/Segment/ParentSegment.js
View File

@ -17,7 +17,10 @@ export class ParentSegment extends Segment {
this.getLevel().checkHasWon(new Promise((resolve, reject)=>{
this.element.addEventListener("animationend", resolve);
}));
return new DelayPromise(250);
// return new DelayPromise(250);
return new Promise(function(resolve) {
setTimeout(resolve, 250);
});
}
}

6
src/module/Application/pwa/translations/de.json
View File

@ -1,6 +1,4 @@
{
"is-writing":"{0} schreibt...",
"restart":"Story neustarten...",
"should-restart-title":"Wirklich neustarten?",
"should-restart-question":"Willst du wirklich neu starten? Dein bisheriger Fortschritt geht dabei verloren!"
"won":"Gewonnen!",
"continue":"Weiter"
}

3
src/module/Application/pwa/translations/en.json
View File

@ -1,3 +1,4 @@
{
"is-writing":"{0} is writing..."
"won":"Won!",
"continue":"Continue"
}

117
src/scss/wordRotator.scss
View File

@ -1,25 +1,35 @@
$rotationDegrees: (90 180 270 360);
@for $i from 1 through 10 {
$value: percentage($i/10);
.height-#{$i}0 {
height: $value;
}
.width-#{$i}0 {
width: $value;
}
}
@for $i from 1 through length($rotationDegrees) {
$startDegree: ((nth($rotationDegrees, $i)+270)%360);
@keyframes rotate-#{nth($rotationDegrees, $i)} {
0% {
transform: rotate(#{$startDegree}deg)
transform: rotate(#{$startDegree}deg);
background-color: transparent;
z-index: 0;
}
99% {
transform: rotate(#{nth($rotationDegrees, $i)}deg);
background-color: transparent;
z-index: 0;
}
100% {
transform: rotate(#{nth($rotationDegrees, $i)}deg)
transform: rotate(#{nth($rotationDegrees, $i)}deg);
background-color: white;
z-index: 1;
}
}
//@keyframes rotate-minus-#{nth($rotationDegrees, $i)} {
// 0% {
// transform: rotate(#{nth($rotationDegrees, $i)}deg)
// }
// 100% {
// transform: rotate(calc(90 - #{nth($rotationDegrees, $i)}) deg)
// }
//}
}
.segment:not(.segment-row) {
@ -52,24 +62,39 @@ $rotationDegrees: (90 180 270 360);
}
}
#level {
white-space: nowrap;
transition: none;
max-width: 100%;
* {
transition: none;
}
overflow-y: visible;
}
.segment {
white-space: initial;
cursor: pointer;
display: inline-block;
text-align: center;
position: relative;
transition: .0s;
transition: none;
user-select: none;
z-index: 1;
background-color: white;
&.segment-row {
display: block;
width: 100%;
animation: none !important;
white-space: nowrap;
}
&.segment-leaf {
min-width: 17px;
height: 34px;
line-height: 34px;
min-width: 1em;
height: 2em;
line-height: 2em;
}
&.segment-parent {
@ -79,44 +104,26 @@ $rotationDegrees: (90 180 270 360);
width: 50%;
}
}
}
//&.rotate-0 {
// animation-name: rotate-360;
// animation-duration: 0.25s;
// animation-fill-mode: forwards;
// //transform: rotate(360deg);
// .segment {
// transform: rotate(-360deg);
// }
//}
//
//&.rotate-90 {
// animation-name: rotate-90;
// animation-duration: 0.25s;
// animation-fill-mode: forwards;
// //transform: rotate(90deg);
// .segment {
// transform: rotate(-90deg);
// }
//}
//
//&.rotate-180 {
// animation-name: rotate-180;
// animation-duration: 0.25s;
// animation-fill-mode: forwards;
// //transform: rotate(180deg);
// .segment {
// transform: rotate(-180deg);
// }
//}
//
//&.rotate-270 {
// animation-name: rotate-270;
// animation-duration: 0.25s;
// animation-fill-mode: forwards;
// //transform: rotate(270deg);
// .segment {
// transform: rotate(-270deg);
// }
//}
}
//Won-screen
.show-when-won {
visibility: hidden;
transition: none;
* {
transition: none;
}
}
.won {
.show-when-won {
visibility: initial;
}
}
#continue-button {
//width: 80%;
//margin-left: 10%;
//margin-right: 10%;
//margin-bottom: 20%
}