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

Animationen hinzugefügt

Browse Source
This commit is contained in:
silas
2018-09-21 17:09:02 +02:00
parent e83d0f8544
commit 2c3775308f
14 changed files with 630 additions and 664 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/js/lib/pwa-assets.js
View File

@@ -9,17 +9,55 @@ class DelayPromise extends Promise {
}
class ScaleHelper {
scaleTo(scale, fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight, addListener) {
async scaleTo(scale, fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight, animationDelay, addListener) {
addListener = Helper.nonNull(addListener, true);
animationDelay = Helper.nonNull(animationDelay, 0);
let newFontSize = await this._getNewFontSize(scale, fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight, animationDelay === 0);
if (animationDelay > 0) {
await new Promise(r => {
setTimeout(r, animationDelay);
fontElement.style.fontSize = newFontSize + "px";
});
}
let self = this;
let listener = function () {
let timeout = (typeof addListener === 'number')?addListener:255;
setTimeout(() => {
self.scaleTo(scale, fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight, animationDelay, false);
}, timeout);
};
if (addListener !== false) {
window.addEventListener("resize", listener);
}
return listener;
}
async scaleToFull(fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight, animDelay, addListener) {
return this.scaleTo(1, fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight, animDelay, addListener);
}
async _getNewFontSize(scale, fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight, setFontSize) {
margin = Helper.nonNull(margin, 10);
ignoreHeight = Helper.nonNull(ignoreHeight, false);
ignoreWidth = Helper.nonNull(ignoreWidth, false);
fontWeight = Helper.nonNull(fontWeight, fontElement.innerHTML.length);
addListener = Helper.nonNull(addListener, true);
setFontSize = Helper.nonNull(setFontSize, true);
let hasNoTransitionClass = container.classList.contains("no-transition");
container.classList.add("no-transition");
if (!hasNoTransitionClass) {
container.classList.add("no-transition");
}
// debugger;
let beforeFontSize = fontElement.style.fontSize;
let currentFontSize = 1;
let diff = 0;
let widthDiff = 0;
@@ -44,26 +82,20 @@ class ScaleHelper {
}
diff = newDiff;
} while ((widthDiff > (1 - scale) * containerWidth || ignoreWidth) && (heightDiff > (1 - scale) * containerHeight || ignoreHeight));
fontElement.style.fontSize = (currentFontSize - margin) + 'px';
console.log(setFontSize, currentFontSize, beforeFontSize, fontElement.style.fontSize, fontElement);
currentFontSize -= margin;
fontElement.style.fontSize = ((setFontSize) ? currentFontSize + "px" : beforeFontSize);
if (!hasNoTransitionClass) {
await new Promise((r) => {
setTimeout(r, 50);
});
container.classList.remove("no-transition");
}
let self = this;
let listener = function () {
setTimeout(() => {
self.scaleTo(scale, fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight, false);
}, 255);
};
if (addListener) {
window.addEventListener("resize", listener);
}
return listener;
}
scaleToFull(fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight) {
return this.scaleTo(1, fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight);
return currentFontSize;
}
}

18
src/module/Application/pwa/html/application/level.html
View File

@@ -14,18 +14,20 @@
</div>
<!-- Site Content -->
<div class='max-height'>
<div class = 'show-while-playing height-20 text-right'>
<button class="button" id = 'help-button' data-translation="help"></button>
<div class="text-right max-width">
<button class="button right show-while-playing" id='help-button' data-translation="help"></button>
</div>
<div class = 'show-when-won height-20 center flex-center'>
<b data-translation="won" id = "won-text"></b>
<div id = 'coin-container'>
<div id = 'coin-template' class='coin'>
<img src = 'img/coin.png'/>
<div class='height-20 show-when-won center flex-center fill-me'>
<div class = 'grow max-width'>
<b data-translation="won" id="won-text"></b>
</div>
<div id='coin-container'>
<div id='coin-template' class='coin' style="opacity: 0">
<img src='img/coin.png'/>
</div>
</div>
</div>
<div class="flex-center height-60">
<div class="flex-center level-container">
<div id='level'>
</div>
</div>

67
src/module/Application/pwa/js/site/LevelSite.js
View File

@@ -34,7 +34,7 @@ export class LevelSite extends WordRotatorBaseSite {
return super.onConstruct(args);
}
onFirstStart() {
async onFirstStart() {
super.onFirstStart();
let leafSegmentTemplate = this.findBy("#segment-leaf-template");
@@ -61,14 +61,17 @@ export class LevelSite extends WordRotatorBaseSite {
let wonText = this.findBy("#won-text");
let scaleHelper = new ScaleHelper();
this.continueButtonScaler = scaleHelper.scaleToFull(continueButton, continueButton.parentElement, false, true);
this.wonTextScaler = scaleHelper.scaleToFull(wonText, wonText.parentElement);
this.continueButtonScaler = await scaleHelper.scaleToFull(continueButton, continueButton.parentElement, false, true);
this.wonTextScaler = await scaleHelper.scaleToFull(wonText, wonText.parentElement, false, false, 10, null, 5);
this.wonText = wonText;
this.wonText.style.fontSize = "0";
//Benutze Document, da Element außerhalb von Seite (eigentlich unschön!)
this.levelCounterActionContainer = document.getElementById("level-number-container");
this.levelCounterAction = document.getElementById("level-number");
this.levelCounterAction.innerText = this.levelCounter;
this.levelNumberScaler = scaleHelper.scaleToFull(this.levelCounterAction, this.levelCounterActionContainer, false, false, 4);
this.levelNumberScaler = await scaleHelper.scaleToFull(this.levelCounterAction, this.levelCounterActionContainer, false, false, 4);
this.levelCounterActionContainer.classList.add("visible");
this.templateContainer = new TemplateContainer(leafSegmentTemplate, parentSegmentTemplate, rowSegmentTemplate, triangleTemplate);
this.coinTemplate = this.findBy("#coin-template");
@@ -114,7 +117,7 @@ export class LevelSite extends WordRotatorBaseSite {
let levelSegment = this.findBy("#level");
levelSegment.removeAllChildren().appendChild(level.getRootSegment().getElement());
let scaleHelper = new ScaleHelper();
this.levelScaler = scaleHelper.scaleToFull(levelSegment, levelSegment.parentElement, false, false, 2, level.words[0].length * 2);
this.levelScaler = await scaleHelper.scaleToFull(levelSegment, levelSegment.parentElement, false, false, 2, level.words[0].length * 2, null, 0);
this.level = level;
return;
@@ -129,6 +132,7 @@ export class LevelSite extends WordRotatorBaseSite {
async nextLevel() {
try {
this._siteContent.classList.remove('won');
this.wonText.style.fontSize = "0";
const db = WordRotatorDb.getInstance();
const nextLevelJson = await db.loadNextLevel([20, 40, 60, 100, 120, 140, 160]);
@@ -151,7 +155,7 @@ export class LevelSite extends WordRotatorBaseSite {
let levelSegment = this.findBy("#level");
levelSegment.removeAllChildren().appendChild(level.getRootSegment().getElement());
let scaleHelper = new ScaleHelper();
this.levelScaler = scaleHelper.scaleToFull(levelSegment, levelSegment.parentElement, false, false, 2, level.words[0].length * 2);
this.levelScaler = await scaleHelper.scaleToFull(levelSegment, levelSegment.parentElement, false, false, 2, level.words[0].length * 2, null, 0);
this.level = level;
this.levelCounterAction.innerText = this.levelCounter;
@@ -168,8 +172,11 @@ export class LevelSite extends WordRotatorBaseSite {
onStart(args) {
let res = super.onStart(args);
this.levelCounterAction.innerText = this.levelCounter;
this.levelCounterActionContainer.classList.add("visible");
if (this.levelCounterAction) {
this.levelCounterAction.innerText = this.levelCounter;
this.levelCounterActionContainer.classList.add("visible");
}
this.levelScaler();
return res;
}
@@ -190,17 +197,52 @@ export class LevelSite extends WordRotatorBaseSite {
this._siteContent.classList.add('won');
localStorage.removeItem("currentLevel");
let continueButton = this.findBy("#continue-button");
continueButton.style.transition = "none";
continueButton.style.opacity = 0;
this.coinContainer.removeAllChildren();
let coinsPerLevel = SystemSettings.get("coinsPerLevel", 5);
let coinsBefore = parseInt(Helper.nonNull(localStorage.getItem("coins"), "0"));
localStorage.setItem("coins", coinsBefore + parseInt(coinsPerLevel));
let audio = (new Audio(Helper.basePath("/sound/single_coin_fall_on_concrete_.mp3")));
let coinPromise = Promise.all([new Promise((r) => {
setTimeout(r, 500)
}),
new Promise(r => {
audio.addEventListener('loadeddata', r);
})
]);
for (let i = 0; i < coinsPerLevel; i++) {
let coinElem = Helper.cloneNode(this.coinTemplate);
this.coinContainer.appendChild(coinElem);
coinPromise = coinPromise.then(() => {
return new Promise(r => {
let timeout = 350;
coinElem.fadeIn(timeout / 1000);
if (audio !== null) {
audio.pause();
audio.currentTime = 0;
audio.play();
}
setTimeout(() => {
this.coinAction.setTitle(coinsBefore++);
this.coinAction.redraw();
}, timeout / 2);
setTimeout(r, timeout);
})
});
}
localStorage.setItem("coins", parseInt(Helper.nonNull(localStorage.getItem("coins"), "0")) + parseInt(coinsPerLevel));
this.wonTextScaler();
this.continueButtonScaler();
this.levelScaler();
coinPromise.then(() => {
continueButton.fadeIn();
});
await savePromise;
}
catch (e) {
@@ -219,8 +261,11 @@ export class LevelSite extends WordRotatorBaseSite {
this.coinAction.redraw();
let rotatables = this.level.getRotatableSegments();
rotatables = rotatables.filter((segment) => {
return (segment.rotation !== 0);
});
let index = Math.floor(Math.random() * rotatables.length);
console.log(rotatables, index);
let segmentToHelp = rotatables[index];
while (segmentToHelp.rotation !== 0) {
@@ -229,7 +274,7 @@ export class LevelSite extends WordRotatorBaseSite {
segmentToHelp.setIsRotatable(false);
this.level.saveAsCurrentLevel();
}
else{
else {
FlashMessenger.addMessage("not-enough-coins");
}
}

1
src/module/Application/pwa/js/wordrotator/Segment/ParentSegment.js
View File

@@ -100,7 +100,6 @@ export class ParentSegment extends Segment {
}
applyLocks(locks) {
console.log(locks);
this.rotatable = locks[0];
locks.splice(0, 1);
for (let i = 0, n = this.children.length; i < n; i++) {

19
src/scss/_editStory.scss
View File

@@ -1,19 +0,0 @@
#author-list {
.author-entry {
border-bottom: 1px solid $borderColor;
.author-image-container {
.author-image {
position: relative;
}
}
.user-flag{
display: none;
}
&.isUser{
.user-flag{
display: inherit;
}
}
}
}

38
src/scss/wordRotator.scss
View File

@@ -61,10 +61,15 @@ $coinTowerDimension: 28px;
}
}
#coin-container .coin {
margin: 3px;
max-width: 30px;
display: inline-block;
#coin-container {
height: 30px;
.coin {
margin-left: 3px;
margin-right: 3px;
//height: 30px;
max-width:30px;
display: inline-block;
}
}
//Segments
@@ -247,18 +252,28 @@ $animationDuration: 0.25s;
}
//Won-screen
.show-when-won {
//visibility: hidden;
display: none;
transition: none;
* {
transition: none;
#site-content > :not(.won) {
.show-when-won {
//visibility: hidden;
display: none;
//transition: none;
//* {
// transition: none;
//}
}
}
.level-container {
height: 100%;
transition: none;
}
.won {
.level-container {
height: 60%;
}
.show-when-won {
display: flex;
//visibility: initial;
}
.show-while-playing {
display: none;
@@ -268,4 +283,3 @@ $animationDuration: 0.25s;
.text-right {
text-align: right;
}