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

Münzen und Hilfe hinzugefügt

Browse Source
This commit is contained in:
silas
2018-09-21 00:34:17 +02:00
parent 6a28266cd9
commit e83d0f8544
18 changed files with 351 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -14,6 +14,9 @@
</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>
<div class = 'show-when-won height-20 center flex-center'>
<b data-translation="won" id = "won-text"></b>
<div id = 'coin-container'>

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

@@ -1,4 +1,4 @@
import {Helper, Menu, MenuAction, SystemSettings} from "../../../../../js/lib/pwa-lib";
import {FlashMessenger, Helper, Menu, MenuAction, SystemSettings} from "../../../../../js/lib/pwa-lib";
import {ParentSegment} from "../wordrotator/Segment/ParentSegment";
import {LeafSegment} from "../wordrotator/Segment/LeafSegment";
import {TemplateContainer} from "../wordrotator/Segment/TemplateContainer";
@@ -19,7 +19,8 @@ export class LevelSite extends WordRotatorBaseSite {
createActionBarMenu(menu) {
menu = super.createActionBarMenu(menu);
let coinAction = new MenuAction(Helper.nonNull(localStorage.getItem("coins"), "0"), ()=>{}, MenuAction.SHOW_ALWAYS, 900);
let coinAction = new MenuAction(Helper.nonNull(localStorage.getItem("coins"), "0"), () => {
}, MenuAction.SHOW_ALWAYS, 900);
coinAction.setShouldTranslate(false);
coinAction._liClass = "coin-counter";
menu.addAction(coinAction);
@@ -60,8 +61,8 @@ export class LevelSite extends WordRotatorBaseSite {
let wonText = this.findBy("#won-text");
let scaleHelper = new ScaleHelper();
scaleHelper.scaleToFull(continueButton, continueButton.parentElement, false, true);
scaleHelper.scaleToFull(wonText, wonText.parentElement);
this.continueButtonScaler = scaleHelper.scaleToFull(continueButton, continueButton.parentElement, false, true);
this.wonTextScaler = scaleHelper.scaleToFull(wonText, wonText.parentElement);
//Benutze Document, da Element außerhalb von Seite (eigentlich unschön!)
this.levelCounterActionContainer = document.getElementById("level-number-container");
@@ -76,6 +77,10 @@ export class LevelSite extends WordRotatorBaseSite {
this.coinTemplate.id = null;
this.coinContainer.removeAllChildren();
this.findBy("#help-button").addEventListener("click", () => {
this.help();
});
this.loadLastLevel();
}
@@ -101,6 +106,7 @@ export class LevelSite extends WordRotatorBaseSite {
});
level.createSegments();
level.setLocks(currentLevelInfo["locks"]);
level.getRootSegment()._updateElement();
level.saveAsCurrentLevel();
@@ -190,7 +196,10 @@ export class LevelSite extends WordRotatorBaseSite {
let coinElem = Helper.cloneNode(this.coinTemplate);
this.coinContainer.appendChild(coinElem);
}
localStorage.setItem("coins", parseInt(Helper.nonNull(localStorage.getItem("coins"), "0"))+parseInt(coinsPerLevel));
localStorage.setItem("coins", parseInt(Helper.nonNull(localStorage.getItem("coins"), "0")) + parseInt(coinsPerLevel));
this.wonTextScaler();
this.continueButtonScaler();
await savePromise;
}
@@ -198,4 +207,30 @@ export class LevelSite extends WordRotatorBaseSite {
console.error(e);
}
}
help() {
let cost = SystemSettings.get("costForHelp", 25);
let currentCoins = parseInt(Helper.nonNull(localStorage.getItem("coins"), 0));
if (currentCoins >= cost) {
currentCoins -= cost;
localStorage.setItem("coins", currentCoins);
this.coinAction.title = currentCoins;
this.coinAction.redraw();
let rotatables = this.level.getRotatableSegments();
let index = Math.floor(Math.random() * rotatables.length);
console.log(rotatables, index);
let segmentToHelp = rotatables[index];
while (segmentToHelp.rotation !== 0) {
segmentToHelp.rotate();
}
segmentToHelp.setIsRotatable(false);
this.level.saveAsCurrentLevel();
}
else{
FlashMessenger.addMessage("not-enough-coins");
}
}
}

37
src/module/Application/pwa/js/wordrotator/Level/Level.js
View File

@@ -1,5 +1,6 @@
import {LeafSegment} from "../Segment/LeafSegment";
import {Helper} from "../../../../../../js/lib/pwa-lib";
import {ParentSegment} from "../Segment/ParentSegment";
export class Level {
constructor(templateContainer) {
@@ -23,7 +24,16 @@ export class Level {
saveAsCurrentLevel(){
let rotations = this.getCurrentRotations();
localStorage.setItem("currentLevel", JSON.stringify({"id": this.id, "rotations": rotations}));
let locked = this.getCurrentLocked();
localStorage.setItem("currentLevel", JSON.stringify({"id": this.id, "rotations": rotations, "locks":locked}));
}
getCurrentLocked(){
if (this.rootSegment !== null)
{
return this.rootSegment.getCurrentLocked([]);
}
return [];
}
getCurrentRotations(){
@@ -34,6 +44,13 @@ export class Level {
return [];
}
setLocks(locks)
{
if (this.rootSegment !== null){
this.rootSegment.applyLocks(locks);
}
}
setId(id)
{
this.id = id;
@@ -109,6 +126,24 @@ export class Level {
createSegments() {};
getRotatableSegments(){
return Level._getRotatableSegmentsFrom(this.rootSegment);
}
static _getRotatableSegmentsFrom(segment){
let rotatable = [];
if (segment.canRotate())
{
rotatable.push(segment);
}
if (segment instanceof ParentSegment){
for (let i = 0; i < segment.children.length; i++) {
rotatable.push.apply(rotatable, Level._getRotatableSegmentsFrom(segment.children[i]));
}
}
return rotatable;
}
static _createLeafsForWord(word, leafSegmentTemplate)
{
let leafSegments = [];

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

@@ -1,7 +1,7 @@
import {Segment} from "./Segment";
export class ParentSegment extends Segment {
static initListener(){
static initListener() {
window.addEventListener("mousedown", (e) => {
ParentSegment.mouseDownTarget = e.target;
// ParentSegment.mouseDownTarget = e.originalTarget;
@@ -12,8 +12,7 @@ export class ParentSegment extends Segment {
window.addEventListener("touchstart", (e) => {
console.log("start", e);
if (e.targetTouches.length === 1)
{
if (e.targetTouches.length === 1) {
ParentSegment.mouseDownTarget = e.targetTouches[0].target;
}
});
@@ -23,26 +22,27 @@ export class ParentSegment extends Segment {
});
}
setIsRotatable(rotatable){
this.rotatable = rotatable;
this._updateElement();
}
constructor(element) {
super(element);
this.children = [];
this.class = "rotate-0";
this.rotatable = true;
let self = this;
this.touchendListener = function(e){
if (e.targetTouches.length === 0 && e.changedTouches.length === 1 && self.element.contains(ParentSegment.mouseDownTarget) && self.element.contains(document.elementFromPoint(e.changedTouches[0].pageX, e.changedTouches[0].pageY)))
{
console.log(e);
this.touchendListener = function (e) {
if (e.targetTouches.length === 0 && e.changedTouches.length === 1 && self.element.contains(ParentSegment.mouseDownTarget) && self.element.contains(document.elementFromPoint(e.changedTouches[0].pageX, e.changedTouches[0].pageY))) {
self.rotate();
e.stopPropagation();
e.preventDefault();
}
};
this.mouseupListener = function(e){
console.log("mouseup", e);
// if (ParentSegment.mouseDownTarget !== null && self.element.contains(ParentSegment.mouseDownTarget) && self.element.contains(e.originalTarget))
if (ParentSegment.mouseDownTarget !== null && self.element.contains(ParentSegment.mouseDownTarget) && self.element.contains(e.target))
{
this.mouseupListener = function (e) {
if (ParentSegment.mouseDownTarget !== null && self.element.contains(ParentSegment.mouseDownTarget) && self.element.contains(e.target)) {
self.rotate();
e.stopPropagation();
e.preventDefault();
@@ -50,10 +50,13 @@ export class ParentSegment extends Segment {
};
}
canRotate() {
return (this.rotatable && !this.getLevel().getHasWon());
}
async rotate() {
let timeout = 250;
if (!this.getLevel().getHasWon()) {
if (this.canRotate()) {
this.rotation += 90;
this.rotation %= 360;
@@ -96,8 +99,17 @@ export class ParentSegment extends Segment {
return rotations;
}
getCurrentRotations(rotations)
{
applyLocks(locks) {
console.log(locks);
this.rotatable = locks[0];
locks.splice(0, 1);
for (let i = 0, n = this.children.length; i < n; i++) {
locks = this.children[i].applyLocks(locks);
}
return locks;
}
getCurrentRotations(rotations) {
rotations.push(this.rotation);
for (let i = 0, n = this.children.length; i < n; i++) {
rotations = this.children[i].getCurrentRotations(rotations);
@@ -105,6 +117,14 @@ export class ParentSegment extends Segment {
return rotations;
}
getCurrentLocked(locked) {
locked.push(this.rotatable);
for (let i = 0, n = this.children.length; i < n; i++) {
locked = this.children[i].getCurrentLocked(locked);
}
return locked;
}
isSolved() {
for (let i = 0, n = this.children.length; i < n; i++) {
if (!this.children[i].isSolved()) {
@@ -140,11 +160,13 @@ export class ParentSegment extends Segment {
}
_updateElement() {
let layer = this._getLayer();
if (layer >= 2)
{
this.element.classList.add("layer-"+layer);
if (layer >= 2) {
this.element.classList.add("layer-" + layer);
}
if (!this.rotatable){
this.element.classList.add("locked");
}
const childContainer = this.element.querySelector(".child-container");
@@ -152,14 +174,8 @@ export class ParentSegment extends Segment {
this._updateRotationClass();
// const self = this;
// this.element.onclick = function (e) {
// self.rotate();
// e.stopPropagation();
// };
this.element.removeEventListener("mouseup",this.mouseupListener);
this.element.removeEventListener("touchend",this.touchendListener);
this.element.removeEventListener("mouseup", this.mouseupListener);
this.element.removeEventListener("touchend", this.touchendListener);
this.element.addEventListener("mouseup", this.mouseupListener);
this.element.addEventListener("touchend", this.touchendListener);
@@ -173,12 +189,12 @@ export class ParentSegment extends Segment {
}
}
_getLayer(){
if (this.children.length >= 1 && this.children[0] && this.children[0] instanceof ParentSegment)
{
return this.children[0]._getLayer()+1;
_getLayer() {
if (this.children.length >= 1 && this.children[0] && this.children[0] instanceof ParentSegment) {
return this.children[0]._getLayer() + 1;
}
return 1;
}
}
ParentSegment.initListener();

19
src/module/Application/pwa/js/wordrotator/Segment/RowSegment.js
View File

@@ -1,7 +1,10 @@
import {ParentSegment} from "./ParentSegment";
export class RowSegment extends ParentSegment{
rotate() {}
constructor(element) {
super(element);
this.rotatable = false;
}
applyRotations(rotations)
{
@@ -18,6 +21,20 @@ export class RowSegment extends ParentSegment{
return rotations;
}
getCurrentLocked(locked) {
for (let i = 0, n = this.children.length; i < n; i++) {
locked = this.children[i].getCurrentLocked(locked);
}
return locked;
}
applyLocks(locks) {
for (let i = 0, n = this.children.length; i < n; i++) {
locks = this.children[i].applyLocks(locks);
}
return locks;
}
_updateElement() {
const childContainer = this.element.querySelector(".child-container");
childContainer.removeAllChildren();

13
src/module/Application/pwa/js/wordrotator/Segment/Segment.js
View File

@@ -28,6 +28,10 @@ export class Segment{
}
}
canRotate(){
return false;
}
isSolved(){
return (this.rotation === 0);
}
@@ -42,6 +46,15 @@ export class Segment{
return rotations;
}
applyLocks(locks)
{
return locks;
}
getCurrentLocked(lockedArray){
return lockedArray;
}
getElement()
{
return this.element;

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

@@ -1,4 +1,7 @@
{
"won":"Gewonnen!",
"continue":"Weiter"
"continue":"Weiter",
"help": "?",
"not-enough-coins":"Du hast zu wenig Münzen!"
}

5
src/module/Application/pwa/translations/en.json
View File

@@ -1,4 +1,7 @@
{
"won":"Won!",
"continue":"Continue"
"continue":"Continue",
"help": "?",
"not-enugh-coins":"You have to few coins!"
}

26
src/scss/wordRotator.scss
View File

@@ -68,7 +68,6 @@ $coinTowerDimension: 28px;
}
//Segments
$rotationDegrees: (90 180 270 360);
$animationDuration: 0.25s;
@@ -138,6 +137,7 @@ $animationDuration: 0.25s;
transform: rotate(#{360- nth($rotationDegrees, $i)}deg);
background-color: white;
z-index: 1;
@for $j from 1 through length($rotationDegrees) {
$animationName: ((nth($rotationDegrees, $j)- nth($rotationDegrees, $i)+360)%360);
@if $animationName==0 {
@@ -148,6 +148,7 @@ $animationDuration: 0.25s;
transform: rotate(#{$animationName}deg);
background-color: white;
z-index: 1;
&.rotating {
animation-name: rotate-#{$animationName};
animation-duration: $animationDuration;
@@ -220,6 +221,7 @@ $animationDuration: 0.25s;
border: solid 1px #a9a9a9;
border-radius: 3px;
padding: 1px;
&.layer-2 {
border: solid 3px #000000;
}
@@ -235,9 +237,19 @@ $animationDuration: 0.25s;
}
}
#site-content > :not(.won) .segment.locked {
border-color: #3adb76;
background-color: #9ffbb5 !important;
> .child-container > .segment-leaf {
border-color: #3adb76;
background-color: #9ffbb5 !important;
}
}
//Won-screen
.show-when-won {
visibility: hidden;
//visibility: hidden;
display: none;
transition: none;
* {
transition: none;
@@ -246,6 +258,14 @@ $animationDuration: 0.25s;
.won {
.show-when-won {
visibility: initial;
display: flex;
}
.show-while-playing {
display: none;
}
}
.text-right {
text-align: right;
}