Added StartSite
This commit is contained in:
silas
@@ -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