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

Alle Levelarten implementiert

Browse Source
This commit is contained in:
silas 2018-07-06 20:51:37 +02:00
parent eea36bb922
commit 9862131e77
15 changed files with 347 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.idea/wordRotator.iml generated
View File

@ -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/true/punycode" />
</content>
<orderEntry type="inheritedJdk" />

2
public/css/wordRotator.css
View File

File diff suppressed because one or more lines are too long

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

@ -1 +1 @@
<div class=max-height><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><div class="flex-center height-60 overflow-hidden"><div id=level></div></div><div class="show-when-won flex-center height-20"><button class=button id=continue-button data-translation=continue></button></div></div></div>
<div class=max-height><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><div class="flex-center height-60"><div id=level></div></div><div class="show-when-won flex-center height-20"><button class=button id=continue-button data-translation=continue></button></div></div></div>

175
public/js/app.js
View File

@ -3004,6 +3004,10 @@ class Segment{
this.parent = null;
}
getCurrentRotations(rotations){
return rotations;
}
sameAs(otherSegment){
return false;
}
@ -3106,14 +3110,18 @@ class ParentSegment extends Segment {
this.rotation += 90;
this.rotation %= 360;
let currentRotation = this.rotation;
this._updateRotationClass();
this.element.classList.add("rotating");
let self = this;
let delayPromise = new Promise(function (resolve) {
setTimeout(resolve, 250);
}).then(()=>{
self.element.classList.remove("rotating");
}).then(() => {
if (self.rotation === currentRotation) {
self.element.classList.remove("rotating");
}
});
this.getLevel().checkHasWon(delayPromise);
return delayPromise;
@ -3133,7 +3141,6 @@ class ParentSegment extends Segment {
}
applyRotations(rotations) {
// debugger;
this.rotation = rotations[0];
rotations.splice(0, 1);
for (let i = 0, n = this.children.length; i < n; i++) {
@ -3142,6 +3149,15 @@ class ParentSegment extends Segment {
return rotations;
}
getCurrentRotations(rotations)
{
rotations.push(this.rotation);
for (let i = 0, n = this.children.length; i < n; i++) {
rotations = this.children[i].getCurrentRotations(rotations);
}
return rotations;
}
isSolved() {
for (let i = 0, n = this.children.length; i < n; i++) {
if (!this.children[i].isSolved()) {
@ -3150,7 +3166,7 @@ class ParentSegment extends Segment {
}
return (this.rotation === 0 || (
this.children[0].sameAs(this.children[2]) && this.children[1].sameAs(this.children[3]) && (
this.rotation === 2 || this.children[0].sameAs(this.children[1]))))
this.rotation === 2 || this.children[0].sameAs(this.children[1]))))
}
setChildren(children) {
@ -3191,8 +3207,7 @@ class ParentSegment extends Segment {
for (let i = 0, n = this.children.length; i < n; i++) {
this.children[i]._updateElement();
childContainer.appendChild(this.children[i].getElement());
if (i%2 === 1 && this.children.length-1 !== i)
{
if (i % 2 === 1 && this.children.length - 1 !== i) {
childContainer.appendChild(document.createElement("br"));
}
}
@ -3271,6 +3286,19 @@ class Level {
});
}
saveAsCurrentLevel(){
let rotations = this.getCurrentRotations();
localStorage.setItem("currentLevel", JSON.stringify({"id": this.id, "rotations": rotations}));
}
getCurrentRotations(){
if (this.rootSegment !== null)
{
return this.rootSegment.getCurrentRotations([]);
}
return [];
}
setId(id)
{
this.id = id;
@ -3332,6 +3360,7 @@ class Level {
});
return true;
}
this.saveAsCurrentLevel();
return false;
}
@ -3366,6 +3395,13 @@ class RowSegment extends ParentSegment{
return rotations;
}
getCurrentRotations(rotations){
for (let i = 0, n = this.children.length; i < n; i++) {
rotations = this.children[i].getCurrentRotations(rotations);
}
return rotations;
}
_updateElement() {
const childContainer = this.element.querySelector(".child-container");
childContainer.removeAllChildren();
@ -3553,6 +3589,80 @@ class SixWordsRowLevel12 extends SixWordsRowLevel {
}
}
class FourWordsLevel extends Level {
constructor(templateContainer, wordLength) {
super(templateContainer);
this.wordLength = wordLength;
}
createSegments() {
if (this.words.length >= 4 &&
this.words[0].length >= this.wordLength &&
this.words[1].length >= this.wordLength &&
this.words[2].length >= this.wordLength &&
this.words[3].length >= this.wordLength
) {
let leafsWords = [];
leafsWords[0] = Level._createLeafsForWord(this.words[0], this.templateContainer.copyLeafTemplate());
leafsWords[1] = Level._createLeafsForWord(this.words[1], this.templateContainer.copyLeafTemplate());
leafsWords[2] = Level._createLeafsForWord(this.words[2], this.templateContainer.copyLeafTemplate());
leafsWords[3] = Level._createLeafsForWord(this.words[3], this.templateContainer.copyLeafTemplate());
let rootSegment = new RowSegment(this.templateContainer.copyRowTemplate());
for (let i = 0, n = this.wordLength / 4; i < n; i++) {
let parents = [];
parents[0] = new ParentSegment(this.templateContainer.copyParentTemplate());
parents[1] = new ParentSegment(this.templateContainer.copyParentTemplate());
parents[2] = new ParentSegment(this.templateContainer.copyParentTemplate());
parents[3] = new ParentSegment(this.templateContainer.copyParentTemplate());
parents[0].addChild(leafsWords[0][4 * i]);
parents[0].addChild(leafsWords[0][4 * i + 1]);
parents[0].addChild(leafsWords[1][4 * i]);
parents[0].addChild(leafsWords[1][4 * i + 1]);
parents[1].addChild(leafsWords[0][4 * i + 2]);
parents[1].addChild(leafsWords[0][4 * i + 3]);
parents[1].addChild(leafsWords[1][4 * i + 2]);
parents[1].addChild(leafsWords[1][4 * i + 3]);
parents[2].addChild(leafsWords[2][4 * i]);
parents[2].addChild(leafsWords[2][4 * i + 1]);
parents[2].addChild(leafsWords[3][4 * i]);
parents[2].addChild(leafsWords[3][4 * i + 1]);
parents[3].addChild(leafsWords[2][4 * i + 2]);
parents[3].addChild(leafsWords[2][4 * i + 3]);
parents[3].addChild(leafsWords[3][4 * i + 2]);
parents[3].addChild(leafsWords[3][4 * i + 3]);
let parent = new ParentSegment(this.templateContainer.copyParentTemplate());
parent.addChild(parents[0]);
parent.addChild(parents[1]);
parent.addChild(parents[2]);
parent.addChild(parents[3]);
rootSegment.addChild(parent);
}
this.setRootSegment(rootSegment);
}
}
}
class FourWordsLevel8 extends FourWordsLevel{
constructor(templateContainer) {
super(templateContainer, 8);
}
}
class FourWordsLevel12 extends FourWordsLevel{
constructor(templateContainer) {
super(templateContainer, 12);
}
}
class LevelHelper {
static setLevelType(typeId, level) {
LevelHelper.types[typeId] = level;
@ -3583,7 +3693,9 @@ LevelHelper.types = {
40: RowLevel8,
60: RowLevel10,
100: SixWordsRowLevel8,
120: FourWordsLevel8,
140: SixWordsRowLevel12,
160: FourWordsLevel12,
};
class WordRotatorDb extends MyDb {
@ -3715,7 +3827,48 @@ class LevelSite extends AbstractSite$1 {
this.levelCounterAction.setTitle(this.levelCounter);
this.templateContainer = new TemplateContainer(leafSegmentTemplate, parentSegmentTemplate, rowSegmentTemplate, triangleTemplate);
this.nextLevel();
this.loadLastLevel();
}
async loadLastLevel() {
try {
let currentLevelInfo = localStorage.getItem("currentLevel");
if (currentLevelInfo !== null) {
currentLevelInfo = JSON.parse(currentLevelInfo);
const db = WordRotatorDb.getInstance();
const levelJson = await db.loadLevel(currentLevelInfo["id"]);
if (levelJson === null) {
return this.nextLevel();
}
const level = LevelHelper.inflateLevel(levelJson, this.templateContainer);
level.setStartRotations(currentLevelInfo["rotations"]);
const self = this;
level.getWonPromise().then(() => {
self.levelWon(level);
});
level.createSegments();
level.getRootSegment()._updateElement();
level.saveAsCurrentLevel();
let levelSegment = this.findBy("#level");
levelSegment.removeAllChildren().appendChild(level.getRootSegment().getElement());
let scaleHelper = new ScaleHelper();
scaleHelper.scaleToFull(levelSegment, levelSegment.parentElement, false, false, 2, level.words[0].length * 2);
this.level = level;
return;
}
}
catch (e) {
console.error(e);
}
return this.nextLevel();
}
async nextLevel() {
@ -3723,14 +3876,13 @@ class LevelSite extends AbstractSite$1 {
this._siteContent.classList.remove('won');
const db = WordRotatorDb.getInstance();
// const nextLevelJson = await db.loadNextLevel([20,40,60, 100]);
const nextLevelJson = await db.loadNextLevel([140]);
const nextLevelJson = await db.loadNextLevel([20, 40, 60, 100, 120, 140, 160]);
// const nextLevelJson = await db.loadNextLevel([120]);
if (nextLevelJson === null) {
this.startSite(EndSite);
return;
}
const level = LevelHelper.inflateLevel(nextLevelJson, this.templateContainer);
const self = this;
level.getWonPromise().then(() => {
self.levelWon(level);
@ -3739,6 +3891,8 @@ class LevelSite extends AbstractSite$1 {
level.createSegments();
level.getRootSegment()._updateElement();
level.saveAsCurrentLevel();
let levelSegment = this.findBy("#level");
levelSegment.removeAllChildren().appendChild(level.getRootSegment().getElement());
let scaleHelper = new ScaleHelper();
@ -3762,6 +3916,7 @@ class LevelSite extends AbstractSite$1 {
this.levelCounterAction.redraw();
this._siteContent.classList.add('won');
localStorage.removeItem("currentLevel");
await savePromise;
}
catch (e) {

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

@ -17,7 +17,7 @@
<div class = 'show-when-won height-20 center flex-center'>
<b data-translation="won" id = "won-text"></b>
</div>
<div class="flex-center height-60 overflow-hidden">
<div class="flex-center height-60">
<div id='level'>
</div>
</div>

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

@ -61,7 +61,48 @@ export class LevelSite extends AbstractSite {
this.levelCounterAction.setTitle(this.levelCounter);
this.templateContainer = new TemplateContainer(leafSegmentTemplate, parentSegmentTemplate, rowSegmentTemplate, triangleTemplate);
this.nextLevel();
this.loadLastLevel();
}
async loadLastLevel() {
try {
let currentLevelInfo = localStorage.getItem("currentLevel");
if (currentLevelInfo !== null) {
currentLevelInfo = JSON.parse(currentLevelInfo);
const db = WordRotatorDb.getInstance();
const levelJson = await db.loadLevel(currentLevelInfo["id"]);
if (levelJson === null) {
return this.nextLevel();
}
const level = LevelHelper.inflateLevel(levelJson, this.templateContainer);
level.setStartRotations(currentLevelInfo["rotations"]);
const self = this;
level.getWonPromise().then(() => {
self.levelWon(level);
});
level.createSegments();
level.getRootSegment()._updateElement();
level.saveAsCurrentLevel();
let levelSegment = this.findBy("#level");
levelSegment.removeAllChildren().appendChild(level.getRootSegment().getElement());
let scaleHelper = new ScaleHelper();
scaleHelper.scaleToFull(levelSegment, levelSegment.parentElement, false, false, 2, level.words[0].length * 2);
this.level = level;
return;
}
}
catch (e) {
console.error(e);
}
return this.nextLevel();
}
async nextLevel() {
@ -69,14 +110,13 @@ export class LevelSite extends AbstractSite {
this._siteContent.classList.remove('won');
const db = WordRotatorDb.getInstance();
// const nextLevelJson = await db.loadNextLevel([20,40,60, 100]);
const nextLevelJson = await db.loadNextLevel([140]);
const nextLevelJson = await db.loadNextLevel([20, 40, 60, 100, 120, 140, 160]);
// const nextLevelJson = await db.loadNextLevel([120]);
if (nextLevelJson === null) {
this.startSite(EndSite);
return;
}
const level = LevelHelper.inflateLevel(nextLevelJson, this.templateContainer);
const self = this;
level.getWonPromise().then(() => {
self.levelWon(level);
@ -85,6 +125,8 @@ export class LevelSite extends AbstractSite {
level.createSegments();
level.getRootSegment()._updateElement();
level.saveAsCurrentLevel();
let levelSegment = this.findBy("#level");
levelSegment.removeAllChildren().appendChild(level.getRootSegment().getElement());
let scaleHelper = new ScaleHelper();
@ -108,6 +150,7 @@ export class LevelSite extends AbstractSite {
this.levelCounterAction.redraw();
this._siteContent.classList.add('won');
localStorage.removeItem("currentLevel");
await savePromise;
}
catch (e) {

66
src/module/Application/pwa/js/wordrotator/Level/FourWordsLevel.js Normal file
View File

@ -0,0 +1,66 @@
import {Level} from "./Level";
import {RowSegment} from "../Segment/RowSegment";
import {TriangleSegment} from "../Segment/TriangleSegment";
import {ParentSegment} from "../Segment/ParentSegment";
export class FourWordsLevel extends Level {
constructor(templateContainer, wordLength) {
super(templateContainer);
this.wordLength = wordLength;
}
createSegments() {
if (this.words.length >= 4 &&
this.words[0].length >= this.wordLength &&
this.words[1].length >= this.wordLength &&
this.words[2].length >= this.wordLength &&
this.words[3].length >= this.wordLength
) {
let leafsWords = [];
leafsWords[0] = Level._createLeafsForWord(this.words[0], this.templateContainer.copyLeafTemplate());
leafsWords[1] = Level._createLeafsForWord(this.words[1], this.templateContainer.copyLeafTemplate());
leafsWords[2] = Level._createLeafsForWord(this.words[2], this.templateContainer.copyLeafTemplate());
leafsWords[3] = Level._createLeafsForWord(this.words[3], this.templateContainer.copyLeafTemplate());
let rootSegment = new RowSegment(this.templateContainer.copyRowTemplate());
for (let i = 0, n = this.wordLength / 4; i < n; i++) {
let parents = [];
parents[0] = new ParentSegment(this.templateContainer.copyParentTemplate());
parents[1] = new ParentSegment(this.templateContainer.copyParentTemplate());
parents[2] = new ParentSegment(this.templateContainer.copyParentTemplate());
parents[3] = new ParentSegment(this.templateContainer.copyParentTemplate());
parents[0].addChild(leafsWords[0][4 * i]);
parents[0].addChild(leafsWords[0][4 * i + 1]);
parents[0].addChild(leafsWords[1][4 * i]);
parents[0].addChild(leafsWords[1][4 * i + 1]);
parents[1].addChild(leafsWords[0][4 * i + 2]);
parents[1].addChild(leafsWords[0][4 * i + 3]);
parents[1].addChild(leafsWords[1][4 * i + 2]);
parents[1].addChild(leafsWords[1][4 * i + 3]);
parents[2].addChild(leafsWords[2][4 * i]);
parents[2].addChild(leafsWords[2][4 * i + 1]);
parents[2].addChild(leafsWords[3][4 * i]);
parents[2].addChild(leafsWords[3][4 * i + 1]);
parents[3].addChild(leafsWords[2][4 * i + 2]);
parents[3].addChild(leafsWords[2][4 * i + 3]);
parents[3].addChild(leafsWords[3][4 * i + 2]);
parents[3].addChild(leafsWords[3][4 * i + 3]);
let parent = new ParentSegment(this.templateContainer.copyParentTemplate());
parent.addChild(parents[0]);
parent.addChild(parents[1]);
parent.addChild(parents[2]);
parent.addChild(parents[3]);
rootSegment.addChild(parent);
}
this.setRootSegment(rootSegment)
}
}
}

7
src/module/Application/pwa/js/wordrotator/Level/FourWordsLevel12.js Normal file
View File

@ -0,0 +1,7 @@
import {FourWordsLevel} from "./FourWordsLevel";
export class FourWordsLevel12 extends FourWordsLevel{
constructor(templateContainer) {
super(templateContainer, 12);
}
}

7
src/module/Application/pwa/js/wordrotator/Level/FourWordsLevel8.js Normal file
View File

@ -0,0 +1,7 @@
import {FourWordsLevel} from "./FourWordsLevel";
export class FourWordsLevel8 extends FourWordsLevel{
constructor(templateContainer) {
super(templateContainer, 8);
}
}

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

@ -21,6 +21,19 @@ export class Level {
});
}
saveAsCurrentLevel(){
let rotations = this.getCurrentRotations();
localStorage.setItem("currentLevel", JSON.stringify({"id": this.id, "rotations": rotations}));
}
getCurrentRotations(){
if (this.rootSegment !== null)
{
return this.rootSegment.getCurrentRotations([]);
}
return [];
}
setId(id)
{
this.id = id;
@ -82,6 +95,7 @@ export class Level {
});
return true;
}
this.saveAsCurrentLevel();
return false;
}

4
src/module/Application/pwa/js/wordrotator/Level/LevelHelper.js
View File

@ -3,6 +3,8 @@ import {RowLevel8} from "./RowLevel8";
import {RowLevel10} from "./RowLevel10";
import {SixWordsRowLevel8} from "./SixWordsRowLevel8";
import {SixWordsRowLevel12} from "./SixWordsRowLevel12";
import {FourWordsLevel8} from "./FourWordsLevel8";
import {FourWordsLevel12} from "./FourWordsLevel12";
export class LevelHelper {
static setLevelType(typeId, level) {
@ -34,5 +36,7 @@ LevelHelper.types = {
40: RowLevel8,
60: RowLevel10,
100: SixWordsRowLevel8,
120: FourWordsLevel8,
140: SixWordsRowLevel12,
160: FourWordsLevel12,
};

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

@ -13,14 +13,18 @@ export class ParentSegment extends Segment {
this.rotation += 90;
this.rotation %= 360;
let currentRotation = this.rotation;
this._updateRotationClass();
this.element.classList.add("rotating");
let self = this;
let delayPromise = new Promise(function (resolve) {
setTimeout(resolve, 250);
}).then(()=>{
self.element.classList.remove("rotating");
}).then(() => {
if (self.rotation === currentRotation) {
self.element.classList.remove("rotating");
}
});
this.getLevel().checkHasWon(delayPromise);
return delayPromise;
@ -40,7 +44,6 @@ export class ParentSegment extends Segment {
}
applyRotations(rotations) {
// debugger;
this.rotation = rotations[0];
rotations.splice(0, 1);
for (let i = 0, n = this.children.length; i < n; i++) {
@ -49,6 +52,15 @@ export class ParentSegment extends Segment {
return rotations;
}
getCurrentRotations(rotations)
{
rotations.push(this.rotation);
for (let i = 0, n = this.children.length; i < n; i++) {
rotations = this.children[i].getCurrentRotations(rotations);
}
return rotations;
}
isSolved() {
for (let i = 0, n = this.children.length; i < n; i++) {
if (!this.children[i].isSolved()) {
@ -57,7 +69,7 @@ export class ParentSegment extends Segment {
}
return (this.rotation === 0 || (
this.children[0].sameAs(this.children[2]) && this.children[1].sameAs(this.children[3]) && (
this.rotation === 2 || this.children[0].sameAs(this.children[1]))))
this.rotation === 2 || this.children[0].sameAs(this.children[1]))))
}
setChildren(children) {
@ -98,8 +110,7 @@ export class ParentSegment extends Segment {
for (let i = 0, n = this.children.length; i < n; i++) {
this.children[i]._updateElement();
childContainer.appendChild(this.children[i].getElement());
if (i%2 === 1 && this.children.length-1 !== i)
{
if (i % 2 === 1 && this.children.length - 1 !== i) {
childContainer.appendChild(document.createElement("br"));
}
}

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

@ -11,6 +11,13 @@ export class RowSegment extends ParentSegment{
return rotations;
}
getCurrentRotations(rotations){
for (let i = 0, n = this.children.length; i < n; i++) {
rotations = this.children[i].getCurrentRotations(rotations);
}
return rotations;
}
_updateElement() {
const childContainer = this.element.querySelector(".child-container");
childContainer.removeAllChildren();

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

@ -7,6 +7,10 @@ export class Segment{
this.parent = null;
}
getCurrentRotations(rotations){
return rotations;
}
sameAs(otherSegment){
return false;
}

32
src/scss/wordRotator.scss
View File

@ -17,24 +17,16 @@ $animationDuration: 0.25s;
@keyframes rotate-#{nth($rotationDegrees, $i)} {
0% {
transform: rotate(#{$startDegree}deg);
background-color: transparent;
z-index: 0;
}
99% {
transform: rotate(#{nth($rotationDegrees, $i)}deg);
background-color: transparent;
z-index: 0;
}
100% {
transform: rotate(#{nth($rotationDegrees, $i)}deg);
background-color: white;
z-index: 1;
}
}
}
.segment:not(.segment-row):not(.segment-triangle) {
&.rotating {
z-index: 10 !important;
overflow: hidden;
@for $i from 1 through length($rotationDegrees) {
@ -56,7 +48,6 @@ $animationDuration: 0.25s;
$animationName: ((nth($rotationDegrees, $j)- nth($rotationDegrees, $i)+360)%360)+90;
&.rotate-#{nth($rotationDegrees, $j)} {
animation-name: rotate-#{$animationName};
}
}
}
@ -91,20 +82,6 @@ $animationDuration: 0.25s;
animation-duration: $animationDuration;
animation-fill-mode: forwards;
animation-timing-function: linear;
> .child-container {
> .segment {
@if $animationName==360 {
$animationName: 0;
}
//animation-name: rotate-#{90+ $animationName};
//animation-duration: 2.5s;
//animation-fill-mode: forwards;
//animation-direction: reverse;
//animation-timing-function: linear;
}
}
}
}
}
@ -147,6 +124,7 @@ $animationDuration: 0.25s;
}
&.segment-leaf {
background-color: transparent;
min-width: 1em;
padding: 0.8em;
&:before {
@ -156,11 +134,11 @@ $animationDuration: 0.25s;
}
.leaf-element {
position: absolute;
width: 100%;
height: 100%;
line-height: 1.5em;
top: 0;
left: 0;
right: 0;
bottom: 0;
transform: translateY(50%);
}
}