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

Added StartSite

Browse Source
This commit is contained in:
silas 2018-09-23 16:48:52 +02:00
parent 86197afe5d
commit 3247c7e9fc
10 changed files with 6213 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.idea/wordRotator.iml generated
View File

@ -4,6 +4,7 @@
<content url="file://$MODULE_DIR$"> <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/src" isTestSource="false" packagePrefix="Application\" />
<sourceFolder url="file://$MODULE_DIR$/src/module/Application/pwa/html" isTestSource="false" /> <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/event-manager" />
<excludeFolder url="file://$MODULE_DIR$/vendor/doctrine/persistence" /> <excludeFolder url="file://$MODULE_DIR$/vendor/doctrine/persistence" />
<excludeFolder url="file://$MODULE_DIR$/vendor/doctrine/reflection" /> <excludeFolder url="file://$MODULE_DIR$/vendor/doctrine/reflection" />

2
bin/build.js
View File

@ -66,7 +66,7 @@ async function build() {
if (shouldMangleAndTranspile) { if (shouldMangleAndTranspile) {
const uglifyRes = uglifyJs.minify(code, uglifyOptions); const uglifyRes = uglifyJs.minify(code, uglifyOptions);
code = uglifyRes.code; code = uglifyRes.code;
fs.writeFileSync('transpiled.js', code); // fs.writeFileSync('transpiled.js', code);
const babelRes = babel.transform(code, babelOptions); const babelRes = babel.transform(code, babelOptions);
code = babelRes.code; code = babelRes.code;
code = regenerator.compile(code, regeneratorOptions).code; code = regenerator.compile(code, regeneratorOptions).code;

2
public/css/wordRotator.css
View File

File diff suppressed because one or more lines are too long

2
public/html/application/menu.html
View File

@ -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>&nbsp;</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>&nbsp;</div></div><div class="segment segment-leaf"><div class=leaf-element>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</div></div><div class="segment segment-leaf"><div class=leaf-element>&nbsp;</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>&nbsp;</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>&nbsp;</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
View File

File diff suppressed because one or more lines are too long

2
public/js/lang/de.json
View File

File diff suppressed because one or more lines are too long

139
src/module/Application/pwa/html/application/menu.html
View File

@ -1,77 +1,86 @@
<div class='max-height flex-center'> <div class='max-height flex-center'>
<b>WordRotator</b> <!--<b>WordRotator</b>-->
<div class="segment segment-parent layer-2 rotate-360"> <div class='height-60 max-width flex-center'>
<div class="child-container"> <div id='level'>
<div class="segment segment-parent rotate-360"> <div class="segment segment-parent layer-2 rotate-360">
<div class="child-container"> <div class="child-container">
<div class="segment segment-leaf"> <div class="segment segment-parent rotate-360">
<div class="leaf-element">W</div> <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">&nbsp;</div>
</div>
</div>
</div> </div>
<div class="segment segment-leaf"> <div class="segment segment-parent rotate-360">
<div class="leaf-element">O</div> <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">&nbsp;</div>
</div>
<div class="segment segment-leaf">
<div class="leaf-element">&nbsp;</div>
</div>
</div>
</div> </div>
<br> <br>
<div class="segment segment-leaf"> <div class="segment segment-parent rotate-360">
<div class="leaf-element">R</div> <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">&nbsp;</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>
<div class="segment segment-leaf"> <div class="segment segment-parent rotate-360">
<div class="leaf-element">&nbsp;</div> <div class="child-container">
</div> <div class="segment segment-leaf">
</div> <div class="leaf-element">&nbsp;</div>
</div> </div>
<div class="segment segment-parent rotate-360"> <div class="segment segment-leaf">
<div class="child-container"> <div class="leaf-element">R</div>
<div class="segment segment-leaf"> </div>
<div class="leaf-element">R</div> <br>
</div> <div class="segment segment-leaf">
<div class="segment segment-leaf"> <div class="leaf-element">T</div>
<div class="leaf-element">D</div> </div>
</div> <div class="segment segment-leaf">
<br> <div class="leaf-element">O</div>
<div class="segment segment-leaf"> </div>
<div class="leaf-element">&nbsp;</div> </div>
</div>
<div class="segment segment-leaf">
<div class="leaf-element">&nbsp;</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">&nbsp;</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">&nbsp;</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>
</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>
<button class='button' data-translation="play" id='play-button'></button>
</div> </div>

38
src/module/Application/pwa/js/site/MenuSite.js
View File

@ -1,15 +1,45 @@
import {WordRotatorBaseSite} from "./WordRotatorBaseSite"; import {WordRotatorBaseSite} from "./WordRotatorBaseSite";
import {LevelSite} from "./LevelSite"; 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) { constructor(siteManager) {
super(siteManager, "html/application/menu.html"); super(siteManager, "html/application/menu.html");
this.listener = null;
} }
onFirstStart() { async onFirstStart() {
super.onFirstStart(); super.onFirstStart();
this.findBy("#play-button").addEventListener("click", () => {
let playButton = this.findBy("#play-button");
playButton.addEventListener("click", () => {
this.startSite(LevelSite); 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();
} }
} }

4
src/module/Application/pwa/translations/de.json
View File

@ -6,5 +6,7 @@
"not-enough-coins":"Du hast zu wenig Münzen!", "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.", "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!"
} }

12
src/scss/wordRotator.scss
View File

@ -17,6 +17,7 @@ nav.top-bar.title-bar {
} }
#level-number-container { #level-number-container {
z-index: 1;
transition: none; transition: none;
position: absolute; position: absolute;
left: 50%; left: 50%;
@ -34,6 +35,17 @@ nav.top-bar.title-bar {
&.visible { &.visible {
visibility: 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 { #level-number {
transition: none; transition: none;