Added StartSite
This commit is contained in:
silas
@@ -8,6 +8,22 @@ class DelayPromise extends Promise {
|
||||
}
|
||||
}
|
||||
|
||||
class RotateHelper {
|
||||
rotate(element, degrees){
|
||||
let rotateText = element.innerText;
|
||||
element.removeAllChildren();
|
||||
|
||||
let partDegree = degrees/rotateText.length;
|
||||
for(let i = 0; i < rotateText.length; i++){
|
||||
let child = document.createElement("span");
|
||||
child.innerText = rotateText.charAt(i);
|
||||
child.style.transform ="rotate("+(partDegree*i)+"deg)";
|
||||
child.classList.add("rotated");
|
||||
element.appendChild(child);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class ScaleHelper {
|
||||
async scaleTo(scale, fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight, animationDelay, addListener) {
|
||||
|
||||
@@ -158,4 +174,4 @@ class TabbedFragment extends Fragment {
|
||||
}
|
||||
}
|
||||
|
||||
export { DelayPromise, ScaleHelper, TabbedFragment };
|
||||
export { DelayPromise, RotateHelper, ScaleHelper, TabbedFragment };
|
||||
|
||||
@@ -3308,7 +3308,7 @@ class MyDb {
|
||||
transactionMode = "read";
|
||||
}
|
||||
|
||||
this.queryPromise.then(function () {
|
||||
return this.queryPromise.then(function () {
|
||||
let res = null;
|
||||
try {
|
||||
res = myDb._conn.result.transaction(name, transactionMode);
|
||||
@@ -3326,7 +3326,7 @@ class MyDb {
|
||||
callback = transactionMode;
|
||||
transactionMode = "readonly";
|
||||
}
|
||||
this.openTransaction(name, transactionMode, function (t) {
|
||||
return this.openTransaction(name, transactionMode, function (t) {
|
||||
callback(t.objectStore(name));
|
||||
});
|
||||
}
|
||||
@@ -3371,7 +3371,7 @@ class MyDb {
|
||||
|
||||
load(key, objectStore) {
|
||||
let self = this;
|
||||
return new Promise(function (resolve) {
|
||||
return new Promise( (resolve, reject) => {
|
||||
self.openStore(objectStore, function (store) {
|
||||
let request = store.get(key);
|
||||
request.onsuccess = function (e) {
|
||||
@@ -3384,6 +3384,9 @@ class MyDb {
|
||||
"event": e
|
||||
}
|
||||
};
|
||||
}).catch(e => {
|
||||
console.warn(e);
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
}
|
||||
@@ -3391,7 +3394,7 @@ class MyDb {
|
||||
loadAll(objectStore, query, count)
|
||||
{
|
||||
let self = this;
|
||||
return new Promise(function (resolve) {
|
||||
return new Promise((resolve, reject) => {
|
||||
self.openStore(objectStore, function (store) {
|
||||
let request = store.getAll(query, count);
|
||||
request.onsuccess = function (e) {
|
||||
@@ -3404,6 +3407,9 @@ class MyDb {
|
||||
"event": e
|
||||
}
|
||||
};
|
||||
}).catch(e => {
|
||||
console.warn(e);
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1,83 +1,99 @@
|
||||
<div class='max-height flex-center'>
|
||||
<!--<b>WordRotator</b>-->
|
||||
|
||||
<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='segment-triangle-template' class='segment segment-triangle'>
|
||||
<div class='child-container'></div>
|
||||
</div>
|
||||
|
||||
<div class='height-60 max-width flex-center'>
|
||||
<div id='level'>
|
||||
<div class="segment segment-parent layer-2 rotate-360">
|
||||
<div class="child-container">
|
||||
<div class="segment segment-parent rotate-360">
|
||||
<div class="child-container">
|
||||
<div class="segment segment-leaf">
|
||||
<div class="leaf-element">W</div>
|
||||
</div>
|
||||
<div class="segment segment-leaf">
|
||||
<div class="leaf-element">O</div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="segment segment-leaf">
|
||||
<div class="leaf-element">R</div>
|
||||
</div>
|
||||
<div class="segment segment-leaf">
|
||||
<div class="leaf-element"> </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="segment segment-parent rotate-360">
|
||||
<div class="child-container">
|
||||
<div class="segment segment-leaf">
|
||||
<div class="leaf-element">R</div>
|
||||
</div>
|
||||
<div class="segment segment-leaf">
|
||||
<div class="leaf-element">D</div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="segment segment-leaf">
|
||||
<div class="leaf-element"> </div>
|
||||
</div>
|
||||
<div class="segment segment-leaf">
|
||||
<div class="leaf-element"> </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="segment segment-parent rotate-360">
|
||||
<div class="child-container">
|
||||
<div class="segment segment-leaf">
|
||||
<div class="leaf-element">O</div>
|
||||
</div>
|
||||
<div class="segment segment-leaf">
|
||||
<div class="leaf-element"> </div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="segment segment-leaf">
|
||||
<div class="leaf-element">T</div>
|
||||
</div>
|
||||
<div class="segment segment-leaf">
|
||||
<div class="leaf-element">A</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="segment segment-parent rotate-360">
|
||||
<div class="child-container">
|
||||
<div class="segment segment-leaf">
|
||||
<div class="leaf-element"> </div>
|
||||
</div>
|
||||
<div class="segment segment-leaf">
|
||||
<div class="leaf-element">R</div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="segment segment-leaf">
|
||||
<div class="leaf-element">T</div>
|
||||
</div>
|
||||
<div class="segment segment-leaf">
|
||||
<div class="leaf-element">O</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id = 'level'></div>
|
||||
|
||||
<!--<div id='level'>-->
|
||||
<!--<div class="segment segment-parent layer-2 rotate-360">-->
|
||||
<!--<div class="child-container">-->
|
||||
<!--<div class="segment segment-parent rotate-360">-->
|
||||
<!--<div class="child-container">-->
|
||||
<!--<div class="segment segment-leaf">-->
|
||||
<!--<div class="leaf-element">W</div>-->
|
||||
<!--</div>-->
|
||||
<!--<div class="segment segment-leaf">-->
|
||||
<!--<div class="leaf-element">O</div>-->
|
||||
<!--</div>-->
|
||||
<!--<br>-->
|
||||
<!--<div class="segment segment-leaf">-->
|
||||
<!--<div class="leaf-element">O</div>-->
|
||||
<!--</div>-->
|
||||
<!--<div class="segment segment-leaf">-->
|
||||
<!--<div class="leaf-element"> </div>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--<div class="segment segment-parent rotate-360">-->
|
||||
<!--<div class="child-container">-->
|
||||
<!--<div class="segment segment-leaf">-->
|
||||
<!--<div class="leaf-element">R</div>-->
|
||||
<!--</div>-->
|
||||
<!--<div class="segment segment-leaf">-->
|
||||
<!--<div class="leaf-element">D</div>-->
|
||||
<!--</div>-->
|
||||
<!--<br>-->
|
||||
<!--<div class="segment segment-leaf">-->
|
||||
<!--<div class="leaf-element"> </div>-->
|
||||
<!--</div>-->
|
||||
<!--<div class="segment segment-leaf">-->
|
||||
<!--<div class="leaf-element">R</div>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--<br>-->
|
||||
<!--<div class="segment segment-parent rotate-360">-->
|
||||
<!--<div class="child-container">-->
|
||||
<!--<div class="segment segment-leaf">-->
|
||||
<!--<div class="leaf-element">R</div>-->
|
||||
<!--</div>-->
|
||||
<!--<div class="segment segment-leaf">-->
|
||||
<!--<div class="leaf-element"> </div>-->
|
||||
<!--</div>-->
|
||||
<!--<br>-->
|
||||
<!--<div class="segment segment-leaf">-->
|
||||
<!--<div class="leaf-element">D</div>-->
|
||||
<!--</div>-->
|
||||
<!--<div class="segment segment-leaf">-->
|
||||
<!--<div class="leaf-element">R</div>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--<div class="segment segment-parent rotate-360">-->
|
||||
<!--<div class="child-container">-->
|
||||
<!--<div class="segment segment-leaf">-->
|
||||
<!--<div class="leaf-element"> </div>-->
|
||||
<!--</div>-->
|
||||
<!--<div class="segment segment-leaf">-->
|
||||
<!--<div class="leaf-element">O</div>-->
|
||||
<!--</div>-->
|
||||
<!--<br>-->
|
||||
<!--<div class="segment segment-leaf">-->
|
||||
<!--<div class="leaf-element">O</div>-->
|
||||
<!--</div>-->
|
||||
<!--<div class="segment segment-leaf">-->
|
||||
<!--<div class="leaf-element">W</div>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
<span id='level-number-container' class = 'visible in-main-menu'>
|
||||
<span id='level-number' style="font-size: 1em;">999</span>
|
||||
<span id='level-number'>1</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class='height-20 max-width flex-center'>
|
||||
|
||||
@@ -109,6 +109,7 @@ export class LevelSite extends WordRotatorBaseSite {
|
||||
|
||||
const db = WordRotatorDb.getInstance();
|
||||
const levelJson = await db.loadLevel(currentLevelInfo["id"]);
|
||||
|
||||
if (levelJson === null) {
|
||||
return this.nextLevel();
|
||||
}
|
||||
@@ -247,8 +248,10 @@ export class LevelSite extends WordRotatorBaseSite {
|
||||
}
|
||||
|
||||
this.wonParams.coinCounterTimer = setTimeout(() => {
|
||||
this.coinAction.setTitle(coinsBefore++);
|
||||
this.coinAction.redraw();
|
||||
if (!this.wonParams.aborted) {
|
||||
this.coinAction.setTitle(++coinsBefore);
|
||||
this.coinAction.redraw();
|
||||
}
|
||||
}, timeout / 2);
|
||||
}
|
||||
//Always do the next promise for garbage collection
|
||||
@@ -261,9 +264,6 @@ export class LevelSite extends WordRotatorBaseSite {
|
||||
this.continueButtonScaler();
|
||||
this.levelScaler();
|
||||
|
||||
// coinPromise.then(() => {
|
||||
// continueButton.fadeIn();
|
||||
// });
|
||||
await savePromise;
|
||||
}
|
||||
catch (e) {
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
import {WordRotatorBaseSite} from "./WordRotatorBaseSite";
|
||||
import {LevelSite} from "./LevelSite";
|
||||
import {ScaleHelper} from "../../../../../js/lib/pwa-assets";
|
||||
import {TemplateContainer} from "../wordrotator/Segment/TemplateContainer";
|
||||
import {MainMenuLevel} from "../wordrotator/Level/MainMenuLevel";
|
||||
import {Helper} from "../../../../../js/lib/pwa-lib";
|
||||
|
||||
export class MenuSite extends WordRotatorBaseSite {
|
||||
@@ -13,16 +15,46 @@ export class MenuSite extends WordRotatorBaseSite {
|
||||
async onFirstStart() {
|
||||
super.onFirstStart();
|
||||
|
||||
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();
|
||||
|
||||
let templateContainer = new TemplateContainer(leafSegmentTemplate, parentSegmentTemplate, rowSegmentTemplate, triangleTemplate);
|
||||
let level = new MainMenuLevel(templateContainer);
|
||||
level.setWords(["WORD", "ROTA", "TORW", "ORDR"]);
|
||||
level.createSegments();
|
||||
|
||||
level.getWonPromise().then(() => {
|
||||
console.log("won!");
|
||||
});
|
||||
|
||||
let segment = level.getRootSegment();
|
||||
segment._updateElement();
|
||||
|
||||
let levelSegment = this.findBy("#level");
|
||||
levelSegment.removeAllChildren().appendChild(segment.getElement());
|
||||
|
||||
let playButton = this.findBy("#play-button");
|
||||
playButton.addEventListener("click", () => {
|
||||
this.startSite(LevelSite);
|
||||
});
|
||||
|
||||
|
||||
this.listener = async () => {
|
||||
let levelNumber = this.findBy("#level-number");
|
||||
levelNumber.innerText = Helper.nonNull(localStorage.getItem("levelCounter"), 1);
|
||||
|
||||
let levelSegment = this.findBy("#level");
|
||||
let scaleHelper = new ScaleHelper();
|
||||
scaleHelper.scaleToFull(levelSegment, levelSegment.parentElement, false, false, 2, 8, null, false);
|
||||
|
||||
@@ -30,12 +62,24 @@ export class MenuSite extends WordRotatorBaseSite {
|
||||
playButton.style.width = levelStyle.getPropertyValue("width");
|
||||
scaleHelper.scaleToFull(playButton.children[0], playButton, null, null, null, null ,null ,false);
|
||||
|
||||
await scaleHelper.scaleTo(0.4, levelNumber.parentElement, levelNumber.parentElement.parentElement, null, null, null, 1 ,null ,false);
|
||||
await scaleHelper.scaleTo(0.15, 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);
|
||||
|
||||
let rotationsSegments = level.getRotatableSegments();
|
||||
|
||||
let randomRotationFunction = () => {
|
||||
let timeout = Math.random()*6000+1500;
|
||||
setTimeout(() => {
|
||||
let index = Math.floor(Math.random()*rotationsSegments.length);
|
||||
rotationsSegments[index].rotate();
|
||||
randomRotationFunction();
|
||||
},timeout);
|
||||
};
|
||||
randomRotationFunction();
|
||||
}
|
||||
|
||||
onDestroy() {
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
import {FourWordsLevel} from "./FourWordsLevel";
|
||||
|
||||
export class MainMenuLevel extends FourWordsLevel{
|
||||
|
||||
constructor(templateContainer) {
|
||||
super(templateContainer, 4);
|
||||
}
|
||||
|
||||
saveAsCurrentLevel() {
|
||||
}
|
||||
|
||||
checkHasWon(delayPromise) {
|
||||
}
|
||||
}
|
||||
@@ -92,6 +92,11 @@ export class ParentSegment extends Segment {
|
||||
|
||||
applyRotations(rotations) {
|
||||
this.rotation = rotations[0];
|
||||
|
||||
if (isNaN(this.rotation)){
|
||||
this.rotation = 0;
|
||||
}
|
||||
|
||||
rotations.splice(0, 1);
|
||||
for (let i = 0, n = this.children.length; i < n; i++) {
|
||||
rotations = this.children[i].applyRotations(rotations);
|
||||
|
||||
Reference in New Issue
Block a user