Added StartSite
This commit is contained in:
silas
parent
86197afe5d
commit
3247c7e9fc
1
.idea/wordRotator.iml
generated
1
.idea/wordRotator.iml
generated
@ -4,6 +4,7 @@
|
||||
<content url="file://$MODULE_DIR$">
|
||||
<sourceFolder url="file://$MODULE_DIR$/src/module/Application/src" isTestSource="false" packagePrefix="Application\" />
|
||||
<sourceFolder url="file://$MODULE_DIR$/src/module/Application/pwa/html" isTestSource="false" />
|
||||
<excludeFolder url="file://$MODULE_DIR$/public/js" />
|
||||
<excludeFolder url="file://$MODULE_DIR$/vendor/doctrine/event-manager" />
|
||||
<excludeFolder url="file://$MODULE_DIR$/vendor/doctrine/persistence" />
|
||||
<excludeFolder url="file://$MODULE_DIR$/vendor/doctrine/reflection" />
|
||||
|
||||
@ -66,7 +66,7 @@ async function build() {
|
||||
if (shouldMangleAndTranspile) {
|
||||
const uglifyRes = uglifyJs.minify(code, uglifyOptions);
|
||||
code = uglifyRes.code;
|
||||
fs.writeFileSync('transpiled.js', code);
|
||||
// fs.writeFileSync('transpiled.js', code);
|
||||
const babelRes = babel.transform(code, babelOptions);
|
||||
code = babelRes.code;
|
||||
code = regenerator.compile(code, regeneratorOptions).code;
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -1 +1 @@
|
||||
<div class="max-height flex-center"><b>WordRotator</b><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><button class=button data-translation=play id=play-button></button></div>
|
||||
<div class="max-height flex-center"><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><span id=level-number-container class="visible in-main-menu"><span id=level-number style="font-size: 1em;">999</span></span></div><div class="height-20 max-width flex-center"><button class="button max-height text-center" id=play-button><span data-translation=play></span></button></div></div>
|
||||
6086
public/js/app.js
6086
public/js/app.js
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,77 +1,86 @@
|
||||
<div class='max-height flex-center'>
|
||||
<b>WordRotator</b>
|
||||
<div class="segment segment-parent layer-2 rotate-360">
|
||||
<div class="child-container">
|
||||
<div class="segment segment-parent rotate-360">
|
||||
<!--<b>WordRotator</b>-->
|
||||
<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-leaf">
|
||||
<div class="leaf-element">W</div>
|
||||
<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-leaf">
|
||||
<div class="leaf-element">O</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-leaf">
|
||||
<div class="leaf-element">R</div>
|
||||
<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-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 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>
|
||||
<span id='level-number-container' class = 'visible in-main-menu'>
|
||||
<span id='level-number' style="font-size: 1em;">999</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class='height-20 max-width flex-center'>
|
||||
<button class='button max-height text-center' id='play-button'><span data-translation="play"></span></button>
|
||||
</div>
|
||||
<button class='button' data-translation="play" id='play-button'></button>
|
||||
</div>
|
||||
@ -1,15 +1,45 @@
|
||||
import {WordRotatorBaseSite} from "./WordRotatorBaseSite";
|
||||
import {LevelSite} from "./LevelSite";
|
||||
import {ScaleHelper} from "../../../../../js/lib/pwa-assets";
|
||||
import {Helper} from "../../../../../js/lib/pwa-lib";
|
||||
|
||||
export class MenuSite extends WordRotatorBaseSite{
|
||||
export class MenuSite extends WordRotatorBaseSite {
|
||||
constructor(siteManager) {
|
||||
super(siteManager, "html/application/menu.html");
|
||||
|
||||
this.listener = null;
|
||||
}
|
||||
|
||||
onFirstStart() {
|
||||
async onFirstStart() {
|
||||
super.onFirstStart();
|
||||
this.findBy("#play-button").addEventListener("click", () => {
|
||||
|
||||
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);
|
||||
|
||||
let levelStyle = getComputedStyle(levelSegment);
|
||||
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);
|
||||
scaleHelper.scaleToFull(levelNumber, levelNumber.parentElement, false, false, 8, null, null, false);
|
||||
};
|
||||
|
||||
this.listener();
|
||||
window.addEventListener("resize", this.listener);
|
||||
}
|
||||
|
||||
onDestroy() {
|
||||
window.removeEventListener("resize", this.listener);
|
||||
super.onDestroy();
|
||||
}
|
||||
}
|
||||
@ -6,5 +6,7 @@
|
||||
"not-enough-coins":"Du hast zu wenig Münzen!",
|
||||
|
||||
"sync-error":"Es gab einen Fehler beim Aktualisieren der Level. Bitte stelle sicher, dass du eine aktive Internetverbindung hast und versuche es später erneut.",
|
||||
"game-ended":"<b>Oh nein!</b> <br/>Es sieht so aus, als ob du schon alle Level gespielt hast... <br/>Schau später noch einmal rein, evtl gibt es dann neue Level."
|
||||
"game-ended":"<b>Oh nein!</b> <br/>Es sieht so aus, als ob du schon alle Level gespielt hast... <br/>Schau später noch einmal rein, evtl gibt es dann neue Level.",
|
||||
|
||||
"play":"Spielen!"
|
||||
}
|
||||
@ -17,6 +17,7 @@ nav.top-bar.title-bar {
|
||||
}
|
||||
|
||||
#level-number-container {
|
||||
z-index: 1;
|
||||
transition: none;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
@ -34,6 +35,17 @@ nav.top-bar.title-bar {
|
||||
&.visible {
|
||||
visibility: visible;
|
||||
}
|
||||
&.in-main-menu{
|
||||
background: white;
|
||||
border-color: black;
|
||||
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
min-height: 1em;
|
||||
min-width: 1em;
|
||||
max-height:1em;
|
||||
max-width:1em;
|
||||
}
|
||||
|
||||
#level-number {
|
||||
transition: none;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user