Münzen und Hilfe hinzugefügt
This commit is contained in:
silas
parent
6a28266cd9
commit
e83d0f8544
2
.idea/watcherTasks.xml
generated
2
.idea/watcherTasks.xml
generated
@ -2,7 +2,7 @@
|
||||
<project version="4">
|
||||
<component name="ProjectTasksOptions">
|
||||
<TaskOptions isEnabled="true">
|
||||
<option name="arguments" value="--update --no-source-map $FileName$:$FileNameWithoutExtension$.css" />
|
||||
<option name="arguments" value="--update $FileName$:$FileNameWithoutExtension$.css" />
|
||||
<option name="checkSyntaxErrors" value="true" />
|
||||
<option name="description" />
|
||||
<option name="exitCodeBehavior" value="ERROR" />
|
||||
|
||||
1
.idea/wordRotator.iml
generated
1
.idea/wordRotator.iml
generated
@ -3,6 +3,7 @@
|
||||
<component name="NewModuleRootManager">
|
||||
<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$/vendor/doctrine/event-manager" />
|
||||
<excludeFolder url="file://$MODULE_DIR$/vendor/doctrine/persistence" />
|
||||
<excludeFolder url="file://$MODULE_DIR$/vendor/doctrine/reflection" />
|
||||
|
||||
@ -1,40 +1 @@
|
||||
2018-09-18T21:39:55+02:00 ERR (3):
|
||||
2018-09-18T22:19:51+02:00 ERR (3):
|
||||
2018-09-18T22:36:07+02:00 ERR (3):
|
||||
2018-09-18T22:37:14+02:00 ERR (3):
|
||||
2018-09-18T22:37:16+02:00 ERR (3):
|
||||
2018-09-18T23:03:24+02:00 ERR (3):
|
||||
2018-09-19T11:15:04+02:00 ERR (3):
|
||||
2018-09-19T11:15:57+02:00 ERR (3):
|
||||
2018-09-19T11:16:35+02:00 ERR (3):
|
||||
2018-09-19T11:25:57+02:00 ERR (3):
|
||||
2018-09-19T11:35:29+02:00 ERR (3):
|
||||
2018-09-19T11:37:15+02:00 ERR (3):
|
||||
2018-09-19T11:38:07+02:00 ERR (3):
|
||||
2018-09-19T11:38:16+02:00 ERR (3):
|
||||
2018-09-19T11:40:46+02:00 ERR (3):
|
||||
2018-09-19T11:42:24+02:00 ERR (3):
|
||||
2018-09-19T11:49:07+02:00 ERR (3):
|
||||
2018-09-19T11:53:54+02:00 ERR (3):
|
||||
2018-09-19T11:54:03+02:00 ERR (3):
|
||||
2018-09-19T11:54:27+02:00 ERR (3):
|
||||
2018-09-19T11:54:49+02:00 ERR (3):
|
||||
2018-09-19T11:57:42+02:00 ERR (3):
|
||||
2018-09-19T11:58:10+02:00 ERR (3):
|
||||
2018-09-19T12:01:11+02:00 ERR (3):
|
||||
2018-09-19T12:01:29+02:00 ERR (3):
|
||||
2018-09-19T12:03:50+02:00 ERR (3):
|
||||
2018-09-19T12:04:14+02:00 ERR (3):
|
||||
2018-09-19T12:04:36+02:00 ERR (3):
|
||||
2018-09-19T12:06:07+02:00 ERR (3):
|
||||
2018-09-19T12:06:42+02:00 ERR (3):
|
||||
2018-09-19T12:06:49+02:00 ERR (3):
|
||||
2018-09-19T12:21:19+02:00 ERR (3):
|
||||
2018-09-19T12:21:44+02:00 ERR (3):
|
||||
2018-09-19T12:21:59+02:00 ERR (3):
|
||||
2018-09-19T13:33:57+02:00 ERR (3):
|
||||
2018-09-19T13:34:11+02:00 ERR (3):
|
||||
2018-09-20T10:32:44+02:00 ERR (3):
|
||||
2018-09-20T15:48:57+02:00 ERR (3):
|
||||
2018-09-20T16:29:24+02:00 ERR (3):
|
||||
2018-09-20T16:49:49+02:00 ERR (3):
|
||||
2018-09-20T20:09:20+02:00 ERR (3):
|
||||
|
||||
41
log/log.log
41
log/log.log
@ -1,40 +1 @@
|
||||
2018-09-18T21:39:55+02:00 ERR (3):
|
||||
2018-09-18T22:19:51+02:00 ERR (3):
|
||||
2018-09-18T22:36:07+02:00 ERR (3):
|
||||
2018-09-18T22:37:14+02:00 ERR (3):
|
||||
2018-09-18T22:37:16+02:00 ERR (3):
|
||||
2018-09-18T23:03:24+02:00 ERR (3):
|
||||
2018-09-19T11:15:04+02:00 ERR (3):
|
||||
2018-09-19T11:15:57+02:00 ERR (3):
|
||||
2018-09-19T11:16:35+02:00 ERR (3):
|
||||
2018-09-19T11:25:57+02:00 ERR (3):
|
||||
2018-09-19T11:35:29+02:00 ERR (3):
|
||||
2018-09-19T11:37:15+02:00 ERR (3):
|
||||
2018-09-19T11:38:07+02:00 ERR (3):
|
||||
2018-09-19T11:38:16+02:00 ERR (3):
|
||||
2018-09-19T11:40:46+02:00 ERR (3):
|
||||
2018-09-19T11:42:24+02:00 ERR (3):
|
||||
2018-09-19T11:49:07+02:00 ERR (3):
|
||||
2018-09-19T11:53:54+02:00 ERR (3):
|
||||
2018-09-19T11:54:03+02:00 ERR (3):
|
||||
2018-09-19T11:54:27+02:00 ERR (3):
|
||||
2018-09-19T11:54:49+02:00 ERR (3):
|
||||
2018-09-19T11:57:42+02:00 ERR (3):
|
||||
2018-09-19T11:58:10+02:00 ERR (3):
|
||||
2018-09-19T12:01:11+02:00 ERR (3):
|
||||
2018-09-19T12:01:29+02:00 ERR (3):
|
||||
2018-09-19T12:03:50+02:00 ERR (3):
|
||||
2018-09-19T12:04:14+02:00 ERR (3):
|
||||
2018-09-19T12:04:36+02:00 ERR (3):
|
||||
2018-09-19T12:06:07+02:00 ERR (3):
|
||||
2018-09-19T12:06:42+02:00 ERR (3):
|
||||
2018-09-19T12:06:49+02:00 ERR (3):
|
||||
2018-09-19T12:21:19+02:00 ERR (3):
|
||||
2018-09-19T12:21:44+02:00 ERR (3):
|
||||
2018-09-19T12:21:59+02:00 ERR (3):
|
||||
2018-09-19T13:33:57+02:00 ERR (3):
|
||||
2018-09-19T13:34:11+02:00 ERR (3):
|
||||
2018-09-20T10:32:44+02:00 ERR (3):
|
||||
2018-09-20T15:48:57+02:00 ERR (3):
|
||||
2018-09-20T16:29:24+02:00 ERR (3):
|
||||
2018-09-20T16:49:49+02:00 ERR (3):
|
||||
2018-09-20T20:09:20+02:00 ERR (3):
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -1 +1 @@
|
||||
<div class="max-height overflow-hidden"><div id=segment-leaf-template class="segment segment-leaf"><div class=leaf-element></div></div><div id=segment-parent-template class="segment segment-parent"><div class=child-container></div></div><div id=segment-row-template class="segment segment-row"><div class=child-container></div></div><div id=segment-triangle-template class="segment segment-triangle"><div class=child-container></div></div><div class=max-height><div class="show-when-won height-20 center flex-center"><b data-translation=won id=won-text></b><div id=coin-container><div id=coin-template class=coin><img src=img/coin.png></div></div></div><div class="flex-center height-60"><div id=level></div></div><div class="show-when-won flex-center height-20"><button class="button max-width" id=continue-button data-translation=continue></button></div></div></div>
|
||||
<div class="max-height overflow-hidden"><div id=segment-leaf-template class="segment segment-leaf"><div class=leaf-element></div></div><div id=segment-parent-template class="segment segment-parent"><div class=child-container></div></div><div id=segment-row-template class="segment segment-row"><div class=child-container></div></div><div id=segment-triangle-template class="segment segment-triangle"><div class=child-container></div></div><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><div id=coin-template class=coin><img src=img/coin.png></div></div></div><div class="flex-center height-60"><div id=level></div></div><div class="show-when-won flex-center height-20"><button class="button max-width" id=continue-button data-translation=continue></button></div></div></div>
|
||||
191
public/js/app.js
191
public/js/app.js
@ -4793,6 +4793,10 @@ class Segment{
|
||||
}
|
||||
}
|
||||
|
||||
canRotate(){
|
||||
return false;
|
||||
}
|
||||
|
||||
isSolved(){
|
||||
return (this.rotation === 0);
|
||||
}
|
||||
@ -4807,6 +4811,15 @@ class Segment{
|
||||
return rotations;
|
||||
}
|
||||
|
||||
applyLocks(locks)
|
||||
{
|
||||
return locks;
|
||||
}
|
||||
|
||||
getCurrentLocked(lockedArray){
|
||||
return lockedArray;
|
||||
}
|
||||
|
||||
getElement()
|
||||
{
|
||||
return this.element;
|
||||
@ -4814,7 +4827,7 @@ class Segment{
|
||||
}
|
||||
|
||||
class ParentSegment extends Segment {
|
||||
static initListener(){
|
||||
static initListener() {
|
||||
window.addEventListener("mousedown", (e) => {
|
||||
ParentSegment.mouseDownTarget = e.target;
|
||||
// ParentSegment.mouseDownTarget = e.originalTarget;
|
||||
@ -4825,8 +4838,7 @@ 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;
|
||||
}
|
||||
});
|
||||
@ -4836,26 +4848,27 @@ 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();
|
||||
@ -4863,10 +4876,13 @@ 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;
|
||||
|
||||
@ -4909,8 +4925,17 @@ 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);
|
||||
@ -4918,6 +4943,14 @@ 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()) {
|
||||
@ -4953,11 +4986,13 @@ 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");
|
||||
@ -4965,14 +5000,8 @@ 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);
|
||||
@ -4986,14 +5015,14 @@ 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();
|
||||
|
||||
class LeafSegment extends Segment {
|
||||
@ -5070,7 +5099,16 @@ 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(){
|
||||
@ -5081,6 +5119,13 @@ class Level {
|
||||
return [];
|
||||
}
|
||||
|
||||
setLocks(locks)
|
||||
{
|
||||
if (this.rootSegment !== null){
|
||||
this.rootSegment.applyLocks(locks);
|
||||
}
|
||||
}
|
||||
|
||||
setId(id)
|
||||
{
|
||||
this.id = id;
|
||||
@ -5156,6 +5201,24 @@ 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 = [];
|
||||
@ -5167,7 +5230,10 @@ class Level {
|
||||
}
|
||||
|
||||
class RowSegment extends ParentSegment{
|
||||
rotate() {}
|
||||
constructor(element) {
|
||||
super(element);
|
||||
this.rotatable = false;
|
||||
}
|
||||
|
||||
applyRotations(rotations)
|
||||
{
|
||||
@ -5184,6 +5250,20 @@ 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();
|
||||
@ -5510,7 +5590,8 @@ 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);
|
||||
@ -5551,8 +5632,8 @@ 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");
|
||||
@ -5567,6 +5648,10 @@ class LevelSite extends WordRotatorBaseSite {
|
||||
this.coinTemplate.id = null;
|
||||
this.coinContainer.removeAllChildren();
|
||||
|
||||
this.findBy("#help-button").addEventListener("click", () => {
|
||||
this.help();
|
||||
});
|
||||
|
||||
this.loadLastLevel();
|
||||
}
|
||||
|
||||
@ -5592,6 +5677,7 @@ class LevelSite extends WordRotatorBaseSite {
|
||||
});
|
||||
|
||||
level.createSegments();
|
||||
level.setLocks(currentLevelInfo["locks"]);
|
||||
level.getRootSegment()._updateElement();
|
||||
|
||||
level.saveAsCurrentLevel();
|
||||
@ -5681,7 +5767,10 @@ 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;
|
||||
}
|
||||
@ -5689,6 +5778,32 @@ 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");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class SynchronizeSite extends WordRotatorBaseSite {
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -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'>
|
||||
|
||||
@ -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");
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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 = [];
|
||||
|
||||
@ -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();
|
||||
@ -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();
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
{
|
||||
"won":"Gewonnen!",
|
||||
"continue":"Weiter"
|
||||
"continue":"Weiter",
|
||||
|
||||
"help": "?",
|
||||
"not-enough-coins":"Du hast zu wenig Münzen!"
|
||||
}
|
||||
@ -1,4 +1,7 @@
|
||||
{
|
||||
"won":"Won!",
|
||||
"continue":"Continue"
|
||||
"continue":"Continue",
|
||||
|
||||
"help": "?",
|
||||
"not-enugh-coins":"You have to few coins!"
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user