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

design ready

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/client/js/Sites/LevelSite.ts
View File

@ -82,7 +82,7 @@ export class LevelSite extends MenuSite {
async onConstruct(args) { async onConstruct(args) {
this.levelCounter = Helper.nonNull(await NativeStoragePromise.getItem("levelCounter"), 1); this.levelCounter = Helper.nonNull(await NativeStoragePromise.getItem("levelCounter"), 1);
// this.levelCounter = 987; // this.levelCounter = 9999;
this.levelScaler = () => { this.levelScaler = () => {
}; };
this.wonParams = { this.wonParams = {
@ -180,7 +180,7 @@ export class LevelSite extends MenuSite {
let levelSegment = this.findBy("#level"); let levelSegment = this.findBy("#level");
ViewHelper.removeAllChildren(levelSegment).appendChild(level.getRootSegment().getElement()); ViewHelper.removeAllChildren(levelSegment).appendChild(level.getRootSegment().getElement());
let scaleHelper = new ScaleHelper(); 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; this.level = level;
Matomo.push(["trackEvent", "LevelSite", "LoadLastLevel"]); Matomo.push(["trackEvent", "LevelSite", "LoadLastLevel"]);
@ -380,7 +380,7 @@ export class LevelSite extends MenuSite {
let leafs = level.getLeafSegments(); let leafs = level.getLeafSegments();
leafs.forEach((leaf, i) => { leafs.forEach((leaf, i) => {
let elem = leaf.getElement(); let elem = leaf.getElement();
elem.style.animationDelay = i*50+"ms"; elem.style.animationDelay = i * 50 + "ms";
elem.classList.add("jump-animation"); elem.classList.add("jump-animation");
}) })
@ -421,6 +421,8 @@ export class LevelSite extends MenuSite {
} }
async tutorial() { async tutorial() {
const tutorialScale = 0.01;
if (this.level.id === LevelSite.TUTORIAL.FIRST_LEVEL) { if (this.level.id === LevelSite.TUTORIAL.FIRST_LEVEL) {
let currentStep = Helper.nonNull(await NativeStoragePromise.getItem("tutorial-step"), "1"); let currentStep = Helper.nonNull(await NativeStoragePromise.getItem("tutorial-step"), "1");
@ -436,10 +438,10 @@ export class LevelSite extends MenuSite {
this.tutorial(); this.tutorial();
}); });
let textElem = this.findBy(".tutorial-text .step-1"); // let textElem = this.findBy(".tutorial-text .step-1");
await this.levelScaler(); 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; break;
} }
@ -456,13 +458,12 @@ export class LevelSite extends MenuSite {
this.coinAction.setName(Helper.nonNull(await NativeStoragePromise.getItem("coins"), "0")); this.coinAction.setName(Helper.nonNull(await NativeStoragePromise.getItem("coins"), "0"));
// this.coinAction.redraw(); // this.coinAction.redraw();
}); });
// this.levelScaler();
}); });
let textElem = this.findBy(".tutorial-text .step-2"); // let textElem = this.findBy(".tutorial-text .step-2");
await this.levelScaler(); await this.levelScaler();
scaleHelper.scaleToFull(textElem, textElem.parentElement, null, true, 1, 2); // scaleHelper.scaleTo(tutorialScale, textElem, textElem.parentElement, null, true, 1, 2);
break; break;
} }
@ -489,10 +490,10 @@ export class LevelSite extends MenuSite {
}; };
this.findBy(".help-action").addEventListener("click", eventListener); 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(); await this.levelScaler();
scaleHelper.scaleToFull(textElem, textElem.parentElement, null, true, 1, 2); // scaleHelper.scaleTo(tutorialScale, textElem, textElem.parentElement, null, true, 1, 2);
break; break;
} }
default: { 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(); await this.levelScaler();
scaleHelper.scaleToFull(textElem, textElem.parentElement, null, true, 1, 2); // debugger;
// scaleHelper.scaleTo(tutorialScale, textElem, textElem.parentElement, null, true, 1, 2);
break; break;
} }

6
src/client/js/Sites/MainMenuSite.ts
View File

@ -170,10 +170,10 @@ export class MainMenuSite extends MenuSite {
let levelStyle = getComputedStyle(levelSegment); let levelStyle = getComputedStyle(levelSegment);
playButton.style.width = levelStyle.getPropertyValue("width"); 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); await scaleHelper.scaleTo(0.1, levelNumber.parentElement, levelNumber.parentElement.parentElement, null, null, null, 10, null, false);
scaleHelper.scaleToFull(levelNumber, levelNumber.parentElement, false, false, 8, null, null, false); scaleHelper.scaleTo(1, levelNumber, levelNumber.parentElement, false, false, 5, null, null, false);
}; };
// this.listener(); // this.listener();

5
src/client/js/Sites/TutorialSite.ts Normal file
View File

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

7
src/client/sass/_navbarOverride.scss
View File

@ -24,11 +24,18 @@ nav.top-bar {
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
//padding-right: 0;
> .grid-padding-x { > .grid-padding-x {
display: block; display: block;
padding: 0.5rem; padding: 0.5rem;
margin: 0; margin: 0;
padding-right: 0;
> .small-12{
padding: 0;
}
} }
} }

22
src/client/sass/_themeBlue.scss
View File

@ -6,12 +6,12 @@
//$textColor: white; //$textColor: white;
//$svgColor: black; //$svgColor: black;
// Blue different Accent //Blue different Accent
//$primaryColor: #427081; $primaryColor: #427081;
//$secondaryColor: #4d575a; $secondaryColor: #4d575a;
//$accentColor: #d3e7eb; $accentColor: #d3e7eb;
//$textColor: white; $textColor: white;
//$svgColor: black; $svgColor: black;
// Blau Invers // Blau Invers
//$primaryColor: #4d575a; //$primaryColor: #4d575a;
@ -21,11 +21,11 @@
//$svgColor: black; //$svgColor: black;
// Grün // Grün
$primaryColor: #6b8778; //$primaryColor: #6b8778;
$secondaryColor: #012f25; //$secondaryColor: #012f25;
$accentColor: #b8acaa; //$accentColor: #c2ceca;
$textColor: white; //$textColor: white;
$svgColor: black; //$svgColor: black;
// Grün 2 // Grün 2
//$primaryColor: #234c42; //$primaryColor: #234c42;

9
src/client/sass/wordRotator.scss
View File

@ -81,20 +81,19 @@ nav.top-bar.title-bar {
&.level-counter { &.level-counter {
position: fixed !important; position: fixed !important;
font-size: 2rem; font-size: 1.8rem;
&.num-10 { &.num-10 {
font-size: 1.4rem; font-size: 1.3rem;
} }
&.num-100 { &.num-100 {
font-size: 1rem; font-size: 0.9rem;
} }
&.num-1000 { &.num-1000 {
font-size: 0.7rem; font-size: 0.65rem;
} }
} }
&.in-main-menu { &.in-main-menu {