design ready

This commit is contained in:
silas 2021-04-24 10:01:39 +02:00
parent 09dc13b4f8
commit 7a092da1d2
6 changed files with 44 additions and 31 deletions

View File

@ -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;
}

View File

@ -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();

View File

@ -0,0 +1,5 @@
import {MenuSite} from "cordova-sites/dist/client";
export class TutorialSite extends MenuSite {
}

View File

@ -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;
}
}
}

View File

@ -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;

View File

@ -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 {