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

übertrag zum PC

Browse Source
This commit is contained in:
silas
2018-09-30 16:11:06 +02:00
parent ad1064ffd3
commit ac32aa83dd
32 changed files with 830 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/module/Application/pwa/html/application/credits.html Normal file
View File

@@ -0,0 +1 @@
<div></div>

5
src/module/Application/pwa/html/application/dialog/chooseTheme.html Normal file
View File

@@ -0,0 +1,5 @@
<div id='theme-choose-container'>
<div id='choose-theme-template'>
<div class='name'></div>
</div>
</div>

186
src/module/Application/pwa/html/application/fragment/settings.html
View File

@@ -1,103 +1,137 @@
<div class='max-height fill-me'>
<div class='row max-width grow flex-center'>
<div class='columns small-centered small-12 smedium-9 medium-11 large-7'>
<div class='row'>
<div class='columns small-centered small-12 smedium-11 medium-9 large-7'>
<div class='row' id = "theme-chooser">
<span class='columns small-6' data-translation="theme"></span>
<span class='columns small-6'>
<label id = 'theme-radio-template'><input type="radio" class='setting' name='theme'></label>
<span class='columns small-6 text-right'>
<!--<label id='theme-radio-template'><input type="radio" class='setting' name='theme'></label>-->
<div id = 'theme-name'></div>
</span>
</div>
<div class='row'>
<span class='columns small-6' data-translation="sound"></span>
<span class='columns small-6 text-right'>
<label class="switch">
<!--<div data-view="img/speaker.svg"></div>-->
<input type="checkbox" class="setting" id="play-sound" name='play-sound' value="1" data-default="1">
<span class="slider"></span>
</label>
</span>
</div>
<!--<div class='row'>-->
<!--<span class='columns small-6' data-translation="language"></span>-->
<!--<span class='columns small-6'>-->
<!--<label id = 'language-radio-template'><input type="radio" class='setting' name='language'></label>-->
<!--</span>-->
<!--</div>-->
<button id = 'reset-levels' class = "button" data-translation="reset-levels"></button>
<div class='row'>
<span class='columns small-6' data-translation="music"></span>
<span class='columns small-6 text-right'>
<label class="switch">
<!--<div data-view="img/music.svg"></div>-->
<input type="checkbox" class="setting" id="play-music" name='play-music' value="1" data-default="1">
<span class="slider"></span>
</label>
</span>
</div>
<div class='row' id='credits-button'>
<span class='columns small-6' data-translation="credits"></span>
<span class='columns small-6 text-right' data-translation=">"></span>
</div>
<div class='row' id='privacy-policy-button'>
<span class='columns small-6' data-translation="privacy-policy"></span>
<span class='columns small-6 text-right' data-translation=">"></span>
</div>
<div class='row' id='impressum-button'>
<span class='columns small-6' data-translation="impressum"></span>
<span class='columns small-6 text-right' data-translation=">"></span>
</div>
<div class='row'>
<span class='columns small-6' data-translation="track"></span>
<span class='columns small-6 text-right'>
<label class="switch">
<!--<div data-view="img/music.svg"></div>-->
<input type="checkbox" class="setting" id="track-switch" name='matomoShouldTrack' value="1" data-default="1" data-raw="1">
<span class="slider"></span>
</label>
</span>
</div>
<!--<iframe-->
<!--style="border: 0; height: 200px; width: 600px;"-->
<!--src="https://matomo.silas.link/index.php?module=CoreAdminHome&action=optOut&language=de&backgroundColor=&fontColor=&fontSize=&fontFamily="-->
<!--&gt;</iframe>-->
<button id='reset-levels' class="button" data-translation="reset-levels"></button>
<!--<label class='row'>-->
<!--<span class='columns small-6' data-translation="ignore-card-always"></span>-->
<!--<span class='columns small-6'><input type="checkbox" class='setting' name='ignore-card-always'-->
<!--value='true'></span>-->
<!--<span class='columns small-6' data-translation="ignore-card-always"></span>-->
<!--<span class='columns small-6'><input type="checkbox" class='setting' name='ignore-card-always'-->
<!--value='true'></span>-->
<!--</label>-->
<!--<br/>-->
<!--<label class='row'>-->
<!--<span class='columns small-6' data-translation="use-included-latex"></span>-->
<!--<span class='columns small-6'><input type="checkbox" class='setting' name='use-included-latex' data-default="true" value="true"></span>-->
<!--<span class='columns small-6' data-translation="use-included-latex"></span>-->
<!--<span class='columns small-6'><input type="checkbox" class='setting' name='use-included-latex' data-default="true" value="true"></span>-->
<!--</label>-->
<!--<div class='row'>-->
<!--<div class="columns small-12 smedium-6">-->
<!--<label>-->
<!--<input type="text" class='setting' required name="ignore-button-1-text"-->
<!--data-default="ignore-card-1" data-default-translateable="1">-->
<!--<span data-translation="settings-ignore-button-1-text"></span>-->
<!--</label>-->
<!--</div>-->
<!--<div class="columns small-12 smedium-6">-->
<!--<label>-->
<!--<input type="number" class='setting' required name="ignore-button-1-time" data-default="120">-->
<!--<span data-translation="settings-ignore-button-1-time"></span>-->
<!--</label>-->
<!--</div>-->
<!--<div class="columns small-12 smedium-6">-->
<!--<label>-->
<!--<input type="text" class='setting' required name="ignore-button-1-text"-->
<!--data-default="ignore-card-1" data-default-translateable="1">-->
<!--<span data-translation="settings-ignore-button-1-text"></span>-->
<!--</label>-->
<!--</div>-->
<!--<div class="columns small-12 smedium-6">-->
<!--<label>-->
<!--<input type="number" class='setting' required name="ignore-button-1-time" data-default="120">-->
<!--<span data-translation="settings-ignore-button-1-time"></span>-->
<!--</label>-->
<!--</div>-->
<!--</div>-->
<!--<div class='row'>-->
<!--<div class="columns small-12 smedium-6">-->
<!--<label>-->
<!--<input type="text" class='setting' required name="ignore-button-2-text"-->
<!--data-default="ignore-card-2" data-default-translateable="1">-->
<!--<span data-translation="settings-ignore-button-2-text"></span>-->
<!--</label>-->
<!--</div>-->
<!--<div class="columns small-12 smedium-6">-->
<!--<label>-->
<!--<input type="number" class='setting' required name="ignore-button-2-time" data-default="1440">-->
<!--<span data-translation="settings-ignore-button-2-time"></span>-->
<!--</label>-->
<!--</div>-->
<!--<div class="columns small-12 smedium-6">-->
<!--<label>-->
<!--<input type="text" class='setting' required name="ignore-button-2-text"-->
<!--data-default="ignore-card-2" data-default-translateable="1">-->
<!--<span data-translation="settings-ignore-button-2-text"></span>-->
<!--</label>-->
<!--</div>-->
<!--<div class="columns small-12 smedium-6">-->
<!--<label>-->
<!--<input type="number" class='setting' required name="ignore-button-2-time" data-default="1440">-->
<!--<span data-translation="settings-ignore-button-2-time"></span>-->
<!--</label>-->
<!--</div>-->
<!--</div>-->
<!--<div class='row'>-->
<!--<div class="columns small-12 smedium-6">-->
<!--<label>-->
<!--<input type="text" class='setting' required name="ignore-button-3-text"-->
<!--data-default="ignore-card-3" data-default-translateable="1">-->
<!--<span data-translation="settings-ignore-button-3-text"></span>-->
<!--</label>-->
<!--</div>-->
<!--<div class="columns small-12 smedium-6">-->
<!--<label>-->
<!--<input type="number" class='setting' required name="ignore-button-3-time" data-default="7200">-->
<!--<span data-translation="settings-ignore-button-3-time"></span>-->
<!--</label>-->
<!--</div>-->
<!--<div class="columns small-12 smedium-6">-->
<!--<label>-->
<!--<input type="text" class='setting' required name="ignore-button-3-text"-->
<!--data-default="ignore-card-3" data-default-translateable="1">-->
<!--<span data-translation="settings-ignore-button-3-text"></span>-->
<!--</label>-->
<!--</div>-->
<!--<div class="columns small-12 smedium-6">-->
<!--<label>-->
<!--<input type="number" class='setting' required name="ignore-button-3-time" data-default="7200">-->
<!--<span data-translation="settings-ignore-button-3-time"></span>-->
<!--</label>-->
<!--</div>-->
<!--</div>-->
<!--<div class='row'>-->
<!--<div class="columns small-12 smedium-6">-->
<!--<label>-->
<!--<input type="text" class='setting' required name="ignore-button-4-text" data-default="ignore-card-4"-->
<!--data-default-translateable="1">-->
<!--<span data-translation="settings-ignore-button-4-text"></span>-->
<!--</label>-->
<!--</div>-->
<!--<div class="columns small-12 smedium-6">-->
<!--<label>-->
<!--<input type="number" class='setting' required name="ignore-button-4-time" data-default="525600">-->
<!--<span data-translation="settings-ignore-button-4-time"></span>-->
<!--</label>-->
<!--</div>-->
<!--<div class="columns small-12 smedium-6">-->
<!--<label>-->
<!--<input type="text" class='setting' required name="ignore-button-4-text" data-default="ignore-card-4"-->
<!--data-default-translateable="1">-->
<!--<span data-translation="settings-ignore-button-4-text"></span>-->
<!--</label>-->
<!--</div>-->
<!--<div class="columns small-12 smedium-6">-->
<!--<label>-->
<!--<input type="number" class='setting' required name="ignore-button-4-time" data-default="525600">-->
<!--<span data-translation="settings-ignore-button-4-time"></span>-->
<!--</label>-->
<!--</div>-->
<!--</div>-->

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

@@ -17,7 +17,9 @@
<!-- Site Content -->
<div class='max-height fill-me'>
<div class="text-right max-width">
<button class="button show-while-playing" id='help-button' data-translation="help"></button>
<button class="button show-while-playing" id='help-button'>
<img src = "img/help.png"/>
</button>
</div>
<div class = 'height-20 no-transition tutorial-text center flex-center hidden'>
<div class = 'step-1 hidden' data-translation="tutorial-step-1"></div>

1
src/module/Application/pwa/html/application/privacyPolicy.html Normal file
View File

@@ -0,0 +1 @@
<div></div>

2
src/module/Application/pwa/html/application/setting-template.html
View File

@@ -1,4 +1,4 @@
<div class="max-height fill-me">
<div class="max-height fill-me overflow-y-scroll">
<ul class="menu vertical plain dropdown hidden" id="settings-fragment-list"></ul>
<h2 data-translation="settings"></h2>
<div id="settings-fragments"></div>

78
src/module/Application/pwa/js/Fragment/WordRotatorSettingFragment.js
View File

@@ -1,6 +1,10 @@
import {LocalStorageSettingsFragment, SettingsManager, SettingsSite} from "../../../../../js/lib/pwa-core";
import {Helper, InitPromise, ThemeManager, Translator} from "../../../../../js/lib/pwa-lib";
import {WordRotatorDb} from "../WordRotatorDb";
import {Matomo, SoundManager} from "../../../../../js/lib/pwa-assets";
import {CreditsSite} from "../site/CreditsSite";
import {PrivacyPolicySite} from "../site/PrivacyPolicySite";
import {ChooseThemeDialog} from "../dialog/ChooseThemeDialog";
export class WordRotatorSettingFragment extends LocalStorageSettingsFragment {
constructor(site) {
@@ -8,28 +12,42 @@ export class WordRotatorSettingFragment extends LocalStorageSettingsFragment {
}
onFirstStart() {
let themeTemplate = this.findBy("#theme-radio-template");
delete themeTemplate["id"];
let themeTemplateContainer = themeTemplate.parentNode;
themeTemplateContainer.removeAllChildren();
// let themeTemplate = this.findBy("#theme-radio-template");
// delete themeTemplate["id"];
// let themeTemplateContainer = themeTemplate.parentNode;
// themeTemplateContainer.removeAllChildren();
//
// for (let i = 0; i < ThemeManager.themes.length; i++) {
// let themeElem = Helper.cloneNode(themeTemplate);
// let theme = ThemeManager.themes[i];
// themeElem.appendChild(Translator.makePersistentTranslation(theme._name));
//
// let inputElem = themeElem.querySelector("input");
// inputElem.value = theme._className;
//
// inputElem.addEventListener("change", function() {
// if (this.checked){
// ThemeManager.changeCurrentTheme(theme)
// }
// });
// themeTemplateContainer.appendChild(themeElem);
// }
for (let i = 0; i < ThemeManager.themes.length; i++) {
let themeElem = Helper.cloneNode(themeTemplate);
let theme = ThemeManager.themes[i];
themeElem.appendChild(Translator.makePersistentTranslation(theme._name));
let currentThemeName = ThemeManager.currentTheme._name;
SettingsManager.getInstance().setSetting("theme", currentThemeName);
let inputElem = themeElem.querySelector("input");
inputElem.value = theme._className;
let themeNameElem = this.findBy("#theme-name");
themeNameElem.removeAllChildren().appendChild(Translator.makePersistentTranslation(currentThemeName));
this.findBy("#theme-chooser").addEventListener("click", async () => {
console.log("clicked");
let newTheme = (new ChooseThemeDialog()).show();
if (Helper.isNotNull(newTheme)){
SettingsManager.getInstance().setSetting("theme", newTheme);
ThemeManager.changeCurrentTheme(newTheme);
themeNameElem.removeAllChildren().appendChild(Translator.makePersistentTranslation(newTheme));
}
});
inputElem.addEventListener("change", function() {
if (this.checked){
ThemeManager.changeCurrentTheme(theme)
}
});
themeTemplateContainer.appendChild(themeElem);
}
SettingsManager.getInstance().setSetting("theme", ThemeManager.currentTheme._name);
this.findBy("#reset-levels").addEventListener("click", () => {
localStorage.removeItem("currentLevel");
@@ -39,6 +57,28 @@ export class WordRotatorSettingFragment extends LocalStorageSettingsFragment {
WordRotatorDb.getInstance().removeAll(WordRotatorDb.OBJECT_STORE.LEVEL);
});
let playMusicButton = this.findBy("#play-music");
playMusicButton.addEventListener("change", () => {
let soundManager = SoundManager.getInstance();
soundManager.set({muted: !playMusicButton.checked}, SoundManager.CHANNELS.MUSIC);
if (playMusicButton.checked){
soundManager.play(SoundManager.CHANNELS.MUSIC);
}
});
this.findBy("#track-switch").addEventListener("change", function(e) {
Matomo.setTrack(this.checked === true);
e.stopPropagation();
e.preventDefault();
});
this.findBy("#credits-button").addEventListener("click", () => {
this.getSite().startSite(CreditsSite);
});
this.findBy("#privacy-policy-button").addEventListener("click", () => {
this.getSite().startSite(PrivacyPolicySite);
});
return super.onFirstStart();
}
}

31
src/module/Application/pwa/js/dialog/ChooseThemeDialog.js Normal file
View File

@@ -0,0 +1,31 @@
import {Dialog, Helper, ThemeManager, Translator, ViewInflater} from "../../../../../js/lib/pwa-lib";
export class ChooseThemeDialog extends Dialog {
constructor() {
let viewPromise = ViewInflater.inflate("html/application/dialog/chooseTheme.html").then(view => {
let template = view.querySelector("#choose-theme-template");
template.remove();
template.id = null;
let themeTemplateContainer = template.querySelector("#theme-choose-container");
for (let i = 0; i < ThemeManager.themes.length; i++) {
let themeElem = Helper.cloneNode(template);
let theme = ThemeManager.themes[i];
themeElem.querySelector(".name").appendChild(Translator.makePersistentTranslation(theme._name));
themeElem["dataset"]["theme"] = theme._name;
themeElem.addEventListener("click", () => {
this.result = themeElem["dataset"]["theme"];
this.close()
});
themeTemplateContainer.appendChild(themeElem);
}
return view;
});
super(viewPromise, "choose-theme-dialog-title");
}
}

13
src/module/Application/pwa/js/site/CreditsSite.js Normal file
View File

@@ -0,0 +1,13 @@
import {WordRotatorBaseSite} from "./WordRotatorBaseSite";
import {InitPromise} from "../../../../../js/lib/pwa-lib";
import {PrivacyPolicySite} from "./PrivacyPolicySite";
export class CreditsSite extends WordRotatorBaseSite{
constructor(siteManager) {
super(siteManager, "html/application/credits.html", "credits");
}
}
InitPromise.addPromise(app => {
app.addDeepLink("credits", PrivacyPolicySite);
});

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

@@ -130,7 +130,7 @@ export class LevelSite extends WordRotatorBaseSite {
let levelSegment = this.findBy("#level");
levelSegment.removeAllChildren().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.scaleToFull(levelSegment, levelSegment.parentElement, false, false, 1, level.words[0].length * 1.5, null, 0);
this.level = level;
return this.tutorial();
@@ -234,14 +234,9 @@ export class LevelSite extends WordRotatorBaseSite {
}).then(() => {
return Promise.all([new Promise((r) => {
setTimeout(() => {
console.log("fadeIn");
r(continueButton.fadeIn().then(() => {
console.log("fade in ended!")
}));
r(continueButton.fadeIn());
}, 500)
}), audioOptions.loadedPromise.then(() => {
console.log("audio loaded")
}).catch(e => {
}), audioOptions.loadedPromise.catch(e => {
console.error(e)
})]);
});

12
src/module/Application/pwa/js/site/PrivacyPolicySite.js Normal file
View File

@@ -0,0 +1,12 @@
import {WordRotatorBaseSite} from "./WordRotatorBaseSite";
import {InitPromise} from "../../../../../js/lib/pwa-lib";
export class PrivacyPolicySite extends WordRotatorBaseSite {
constructor(siteManager) {
super(siteManager, "html/application/privacyPolicy.html", "privacyPolicy");
}
}
InitPromise.addPromise(app => {
app.addDeepLink("privacyPolicy", PrivacyPolicySite);
});

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

@@ -16,5 +16,13 @@
"tutorial-step-4": "Große Segmente drehst du, indem du diese ziehst.",
"extra-coins-after-first-level":"Für das erste Level gibt es 50 extra Münzen!",
"dark":"Dunkel"
"dark":"Dunkel",
"theme":"Theme:",
"sound":"Sound",
"music":"Musik",
"credits":"Credits",
"privacy-policy":"Datenschutzbestimmungen",
"impressum":"Impressum",
"track":"Anonymisierte Nutzungsdaten senden",
">":">"
}