design ready
This commit is contained in:
parent
09dc13b4f8
commit
7a092da1d2
@ -82,7 +82,7 @@ export class LevelSite extends MenuSite {
|
||||
|
||||
async onConstruct(args) {
|
||||
this.levelCounter = Helper.nonNull(await NativeStoragePromise.getItem("levelCounter"), 1);
|
||||
// this.levelCounter = 987;
|
||||
// this.levelCounter = 9999;
|
||||
this.levelScaler = () => {
|
||||
};
|
||||
this.wonParams = {
|
||||
@ -180,7 +180,7 @@ export class LevelSite extends MenuSite {
|
||||
let levelSegment = this.findBy("#level");
|
||||
ViewHelper.removeAllChildren(levelSegment).appendChild(level.getRootSegment().getElement());
|
||||
let scaleHelper = new ScaleHelper();
|
||||
this.levelScaler = await scaleHelper.scaleToFull(levelSegment, levelSegment.parentElement, false, false, 1, level.words[0].length * 1.5, null, 0);
|
||||
this.levelScaler = await scaleHelper.scaleTo(1, levelSegment, levelSegment.parentElement, false, false, 1, level.words[0].length * 1.5, null, 0);
|
||||
|
||||
this.level = level;
|
||||
Matomo.push(["trackEvent", "LevelSite", "LoadLastLevel"]);
|
||||
@ -380,7 +380,7 @@ export class LevelSite extends MenuSite {
|
||||
let leafs = level.getLeafSegments();
|
||||
leafs.forEach((leaf, i) => {
|
||||
let elem = leaf.getElement();
|
||||
elem.style.animationDelay = i*50+"ms";
|
||||
elem.style.animationDelay = i * 50 + "ms";
|
||||
elem.classList.add("jump-animation");
|
||||
})
|
||||
|
||||
@ -421,6 +421,8 @@ export class LevelSite extends MenuSite {
|
||||
}
|
||||
|
||||
async tutorial() {
|
||||
const tutorialScale = 0.01;
|
||||
|
||||
if (this.level.id === LevelSite.TUTORIAL.FIRST_LEVEL) {
|
||||
let currentStep = Helper.nonNull(await NativeStoragePromise.getItem("tutorial-step"), "1");
|
||||
|
||||
@ -436,10 +438,10 @@ export class LevelSite extends MenuSite {
|
||||
this.tutorial();
|
||||
});
|
||||
|
||||
let textElem = this.findBy(".tutorial-text .step-1");
|
||||
// let textElem = this.findBy(".tutorial-text .step-1");
|
||||
|
||||
await this.levelScaler();
|
||||
scaleHelper.scaleTo(0.4, textElem, textElem.parentElement, null, true, 2, 2);
|
||||
// scaleHelper.scaleTo(tutorialScale, textElem, textElem.parentElement, null, true, 2, 2);
|
||||
|
||||
break;
|
||||
}
|
||||
@ -456,13 +458,12 @@ export class LevelSite extends MenuSite {
|
||||
this.coinAction.setName(Helper.nonNull(await NativeStoragePromise.getItem("coins"), "0"));
|
||||
// this.coinAction.redraw();
|
||||
});
|
||||
// this.levelScaler();
|
||||
});
|
||||
|
||||
let textElem = this.findBy(".tutorial-text .step-2");
|
||||
// let textElem = this.findBy(".tutorial-text .step-2");
|
||||
|
||||
await this.levelScaler();
|
||||
scaleHelper.scaleToFull(textElem, textElem.parentElement, null, true, 1, 2);
|
||||
// scaleHelper.scaleTo(tutorialScale, textElem, textElem.parentElement, null, true, 1, 2);
|
||||
|
||||
break;
|
||||
}
|
||||
@ -489,10 +490,10 @@ export class LevelSite extends MenuSite {
|
||||
};
|
||||
this.findBy(".help-action").addEventListener("click", eventListener);
|
||||
|
||||
let textElem = this.findBy(".tutorial-text .step-3");
|
||||
// let textElem = this.findBy(".tutorial-text .step-3");
|
||||
|
||||
await this.levelScaler();
|
||||
scaleHelper.scaleToFull(textElem, textElem.parentElement, null, true, 1, 2);
|
||||
// scaleHelper.scaleTo(tutorialScale, textElem, textElem.parentElement, null, true, 1, 2);
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
@ -525,10 +526,11 @@ export class LevelSite extends MenuSite {
|
||||
}
|
||||
});
|
||||
|
||||
let textElem = this.findBy(".tutorial-text .step-4");
|
||||
// let textElem = this.findBy(".tutorial-text .step-4");
|
||||
|
||||
await this.levelScaler();
|
||||
scaleHelper.scaleToFull(textElem, textElem.parentElement, null, true, 1, 2);
|
||||
// debugger;
|
||||
// scaleHelper.scaleTo(tutorialScale, textElem, textElem.parentElement, null, true, 1, 2);
|
||||
|
||||
break;
|
||||
}
|
||||
|
||||
@ -170,10 +170,10 @@ export class MainMenuSite extends MenuSite {
|
||||
|
||||
let levelStyle = getComputedStyle(levelSegment);
|
||||
playButton.style.width = levelStyle.getPropertyValue("width");
|
||||
scaleHelper.scaleToFull(playButton.children[0], playButton, null, null, null, 4, null, false);
|
||||
scaleHelper.scaleTo(0.65, 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);
|
||||
await scaleHelper.scaleTo(0.1, levelNumber.parentElement, levelNumber.parentElement.parentElement, null, null, null, 10, null, false);
|
||||
scaleHelper.scaleTo(1, levelNumber, levelNumber.parentElement, false, false, 5, null, null, false);
|
||||
};
|
||||
|
||||
// this.listener();
|
||||
|
||||
5
src/client/js/Sites/TutorialSite.ts
Normal file
5
src/client/js/Sites/TutorialSite.ts
Normal file
@ -0,0 +1,5 @@
|
||||
import {MenuSite} from "cordova-sites/dist/client";
|
||||
|
||||
export class TutorialSite extends MenuSite {
|
||||
|
||||
}
|
||||
@ -24,11 +24,18 @@ nav.top-bar {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
//padding-right: 0;
|
||||
|
||||
> .grid-padding-x {
|
||||
display: block;
|
||||
padding: 0.5rem;
|
||||
margin: 0;
|
||||
padding-right: 0;
|
||||
|
||||
> .small-12{
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -6,12 +6,12 @@
|
||||
//$textColor: white;
|
||||
//$svgColor: black;
|
||||
|
||||
// Blue different Accent
|
||||
//$primaryColor: #427081;
|
||||
//$secondaryColor: #4d575a;
|
||||
//$accentColor: #d3e7eb;
|
||||
//$textColor: white;
|
||||
//$svgColor: black;
|
||||
//Blue different Accent
|
||||
$primaryColor: #427081;
|
||||
$secondaryColor: #4d575a;
|
||||
$accentColor: #d3e7eb;
|
||||
$textColor: white;
|
||||
$svgColor: black;
|
||||
|
||||
// Blau Invers
|
||||
//$primaryColor: #4d575a;
|
||||
@ -21,11 +21,11 @@
|
||||
//$svgColor: black;
|
||||
|
||||
// Grün
|
||||
$primaryColor: #6b8778;
|
||||
$secondaryColor: #012f25;
|
||||
$accentColor: #b8acaa;
|
||||
$textColor: white;
|
||||
$svgColor: black;
|
||||
//$primaryColor: #6b8778;
|
||||
//$secondaryColor: #012f25;
|
||||
//$accentColor: #c2ceca;
|
||||
//$textColor: white;
|
||||
//$svgColor: black;
|
||||
|
||||
// Grün 2
|
||||
//$primaryColor: #234c42;
|
||||
|
||||
@ -81,20 +81,19 @@ nav.top-bar.title-bar {
|
||||
|
||||
&.level-counter {
|
||||
position: fixed !important;
|
||||
font-size: 2rem;
|
||||
font-size: 1.8rem;
|
||||
|
||||
&.num-10 {
|
||||
font-size: 1.4rem;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
&.num-100 {
|
||||
font-size: 1rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
&.num-1000 {
|
||||
font-size: 0.7rem;
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.in-main-menu {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user