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

Musikbuttons hinzugefügt

Browse Source
This commit is contained in:
silas
2018-09-26 14:01:33 +02:00
parent be130a99e8
commit c13dfc378f
16 changed files with 1229 additions and 527 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/js/init.js
View File

@@ -17,7 +17,7 @@ import "./lib/pwa-code-management"
import "./lib/pwa-user-management"
import {SynchronizeSite} from "../module/Application/pwa/js/site/SynchronizeSite";
import {SettingsSite} from "./lib/pwa-core";
import {SettingsManager, SettingsSite} from "./lib/pwa-core";
applyPolyfills();
import {WordRotatorSettingFragment} from "../module/Application/pwa/js/Fragment/WordRotatorSettingFragment";
@@ -58,8 +58,10 @@ LoginSite.addLoginAction = false;
InitPromise.resolve(app).then(function(){
SettingsSite.settingsAction.showFor = MenuAction.SHOW_ALWAYS;
let settingsManager = SettingsManager.getInstance();
let soundManager = SoundManager.getInstance();
soundManager.play(SoundManager.CHANNELS.MUSIC, {audio: "sound/brightAndBeautifull__.wav", loop: true, volume: 0.3});
soundManager.play(SoundManager.CHANNELS.MUSIC, {audio: "sound/brightAndBeautifull__.wav", loop: true, volume: 0.3, muted: !settingsManager.getSetting("play-music", true)});
app.start(SynchronizeSite);
Translator.setLanguage("de");

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

@@ -139,12 +139,16 @@ class SoundManager {
audioObject.volume = Helper.nonNull(options.volume, audioObject.volume, 1);
audioObject.loop = Helper.nonNull(options.loop, audioObject.loop, false);
audioObject.timeOffset = Helper.nonNull(options.timeOffset, audioObject.timeOffset, 0);
this.channels[channel] = audioObject;
console.log(options);
if (audioObject.muted){
this.stop(channel);
}
this.channels[channel] = audioObject;
else if (Helper.isNotNull(options.muted) && options.muted === false){
// this.play(channel);
}
return this.channels[channel];
}
@@ -163,13 +167,12 @@ class SoundManager {
this.stop(channel);
this.set(audioOrOptions, channel);
console.log(this.channels[channel]);
if (!this.channels[channel].muted) {
let buffer = await this.channels[channel].loadedPromise;
let source = this.context.createBufferSource();
source.buffer = buffer;
source.connect(this.context.destination);
// source.loopStart = 5;
// source.loopEnd = 5;
source.loop = this.channels[channel].loop;
source.start(0);
this.channels[channel].source = source;

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

@@ -16,87 +16,24 @@
<div class='height-60 max-width flex-center'>
<div id = 'level'></div>
<!--<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">O</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">R</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">R</div>-->
<!--</div>-->
<!--<div class="segment segment-leaf">-->
<!--<div class="leaf-element">&nbsp;</div>-->
<!--</div>-->
<!--<br>-->
<!--<div class="segment segment-leaf">-->
<!--<div class="leaf-element">D</div>-->
<!--</div>-->
<!--<div class="segment segment-leaf">-->
<!--<div class="leaf-element">R</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">O</div>-->
<!--</div>-->
<!--<br>-->
<!--<div class="segment segment-leaf">-->
<!--<div class="leaf-element">O</div>-->
<!--</div>-->
<!--<div class="segment segment-leaf">-->
<!--<div class="leaf-element">W</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<span id='level-number-container' class = 'visible in-main-menu'>
<span id='level-number'>1</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 class='height-30 flex-center fill-me'>
<button class='button grow text-center' id='play-button'><span data-translation="play"></span></button>
<div class = 'max-width'>
<label class="switch">
<img src = 'img/speaker.svg'>
<input type="checkbox" class = "setting" id = "play-sound">
<span class="slider"></span>
</label>
<label class="switch right">
<img src = 'img/music.svg'>
<input type="checkbox" class = "setting" id = "play-music">
<span class="slider"></span>
</label>
</div>
</div>
</div>

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

@@ -5,6 +5,7 @@ import {WordRotatorDb} from "../WordRotatorDb";
import {ScaleHelper, SoundManager} from "../../../../../js/lib/pwa-assets";
import {EndSite} from "./EndSite";
import {WordRotatorBaseSite} from "./WordRotatorBaseSite";
import {SettingsManager} from "../../../../../js/lib/pwa-core";
export class LevelSite extends WordRotatorBaseSite {
constructor(siteManager) {
@@ -33,8 +34,10 @@ export class LevelSite extends WordRotatorBaseSite {
coinCounterTimer: null,
};
let settingsManager = SettingsManager.getInstance();
let soundManager = SoundManager.getInstance();
soundManager.set("sound/single_coin_fall_on_concrete_.mp3", SoundManager.CHANNELS.SOUND);
soundManager.set({audio: "sound/single_coin_fall_on_concrete_.mp3", muted: !settingsManager.getSetting("play-sound")}, SoundManager.CHANNELS.SOUND);
return super.onConstruct(args);
}

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

@@ -1,9 +1,10 @@
import {WordRotatorBaseSite} from "./WordRotatorBaseSite";
import {LevelSite} from "./LevelSite";
import {ScaleHelper} from "../../../../../js/lib/pwa-assets";
import {ScaleHelper, SoundManager} from "../../../../../js/lib/pwa-assets";
import {TemplateContainer} from "../wordrotator/Segment/TemplateContainer";
import {MainMenuLevel} from "../wordrotator/Level/MainMenuLevel";
import {Helper, InitPromise} from "../../../../../js/lib/pwa-lib";
import {SettingsManager} from "../../../../../js/lib/pwa-core";
export class MenuSite extends WordRotatorBaseSite {
constructor(siteManager) {
@@ -115,6 +116,29 @@ export class MenuSite extends WordRotatorBaseSite {
}
});
}
let settingsManager = SettingsManager.getInstance();
let soundManager = SoundManager.getInstance();
let playMusicButton = this.findBy("#play-music");
playMusicButton.checked = settingsManager.getSetting("play-music", true);
playMusicButton.addEventListener("change", () => {
settingsManager.setSetting("play-music", playMusicButton.checked);
soundManager.set({muted: !playMusicButton.checked}, SoundManager.CHANNELS.MUSIC);
if (playMusicButton.checked){
soundManager.play(SoundManager.CHANNELS.MUSIC);
}
});
let playSoundButton = this.findBy("#play-sound");
playSoundButton.checked = settingsManager.getSetting("play-sound", true);
playSoundButton.addEventListener("change", () => {
settingsManager.setSetting("play-sound", playSoundButton.checked);
soundManager.set({muted: !playSoundButton.checked}, SoundManager.CHANNELS.SOUND);
// if (playSoundButton.checked){
// soundManager.play(SoundManager.CHANNELS.MUSIC);
// }
});
}
onPause(args) {

27
src/scss/wordRotator.scss
View File

@@ -35,7 +35,7 @@ nav.top-bar.title-bar {
&.visible {
visibility: visible;
}
&.in-main-menu{
&.in-main-menu {
background: white;
border-color: black;
@@ -43,8 +43,8 @@ nav.top-bar.title-bar {
width: 1em;
min-height: 1em;
min-width: 1em;
max-height:1em;
max-width:1em;
max-height: 1em;
max-width: 1em;
}
#level-number {
@@ -79,7 +79,7 @@ $coinTowerDimension: 28px;
margin-left: 3px;
margin-right: 3px;
//height: 30px;
max-width:30px;
max-width: 30px;
display: inline-block;
}
}
@@ -88,16 +88,6 @@ $coinTowerDimension: 28px;
$rotationDegrees: (90 180 270 360);
$animationDuration: .25s;
@for $i from 1 through 10 {
$value: percentage($i/10);
.height-#{$i}0 {
height: $value;
}
.width-#{$i}0 {
width: $value;
}
}
@for $i from 1 through length($rotationDegrees) {
$startDegree: ((nth($rotationDegrees, $i)+270)%360);
@@ -149,7 +139,7 @@ $animationDuration: .25s;
}
}
&.reverse{
&.reverse {
//animation-name: rotate-reverse-#{(nth($rotationDegrees, $i))%360+90};
animation-name: rotate-reverse-#{nth($rotationDegrees, $i)};
> .child-container {
@@ -198,7 +188,7 @@ $animationDuration: .25s;
animation-fill-mode: forwards;
animation-timing-function: linear;
&.reverse{
&.reverse {
animation-name: rotate-reverse-#{$animationName};
}
}
@@ -325,6 +315,7 @@ $animationDuration: .25s;
.text-right {
text-align: right;
}
#continue-button{
#continue-button {
margin-bottom: 2px;
}
}