Added simpleLevel

src/module/Application/pwa/html/application/chat.html

@@ -1,35 +0,0 @@
-<div class='max-height'>
-    <span id='chat-title' class='chat'>
-        <span class='chat-img-container'><img class='chat-img'></span>
-        <span class='chat-name'></span>
-    </span>
-    <div id='date-template'>
-        <div class='date'></div>
-    </div>
-
-    <div id='message-template' class='fill-me vertical message'>
-        <div class='author-image-container'><img class='author-image'></div>
-        <div class='grow'>
-            <div class='bubble'>
-                <div class='author'></div>
-                <div class='message-text'></div>
-                <div class='time'></div>
-            </div>
-        </div>
-    </div>
-
-    <div class='fill-me max-height'>
-        <div class='grow' id='message-container'></div>
-        <div>
-            <div id='send-container' class='fill-me vertical'>
-                <div class = 'answer-button-container'>
-                    <button id='previous-button' class='answer-button'>&lt;</button>
-                </div>
-                <div class='grow' id='answer'></div>
-                <div class = 'answer-button-container'>
-                    <button id='next-button' class='answer-button'>&gt;</button>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>

src/module/Application/pwa/html/application/editStory.html

@@ -1,3 +0,0 @@
-<div>
-    <div id = 'tabs'></div>
-</div>

src/module/Application/pwa/html/application/fragment/authorOverviewFragment.html

@@ -1,10 +0,0 @@
-<div>
-    <div id='author-template' class='author-entry fill-me vertical'>
-        <div class='author-image-container'><img class='author-image'></div>
-        <div class='author-name grow'></div>
-        <!--<div>-->
-            <div class='user-flag'>1</div>
-        <!--</div>-->
-    </div>
-    <div id='author-list'></div>
-</div>

src/module/Application/pwa/html/application/fragment/chatOverviewFragment.html

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

src/module/Application/pwa/html/application/fragment/settingsFragment.html

@@ -1,76 +0,0 @@
-<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'>
-            <h3 data-translation="ask-settings"></h3>
-            <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>
-            </label>
-
-            <h5 data-translation="settings-ignore-buttons-heading"></h5>
-            <p data-translation="settings-ignore-buttons-explanation"></p>
-
-            <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>
-            <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>
-            <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>
-            <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>
-        </div>
-    </div>
-</div>

src/module/Application/pwa/html/application/level.html

@@ -0,0 +1,14 @@
+<div>
+    <div id = 'segment-leaf-template' class = 'segment'>
+        <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 = 'level'>
+    </div>
+</div>

src/module/Application/pwa/html/application/storyOverview.html

@@ -1,17 +0,0 @@
-<div>
-    <div id='chat-template' class='chat overview fill-me vertical'>
-        <div class = 'chat-img-container'><img class='chat-img'></div>
-        <div class='grow'>
-            <div class = 'fill-me vertical'>
-                <div class='chat-name grow'></div>
-                <div class = 'unread-message-counter'></div>
-            </div>
-            <div class = 'fill-me vertical'>
-                <div class='chat-last-message grow'></div>
-                <div class = 'chat-last-message-timestamp'></div>
-            </div>
-        </div>
-    </div>
-    <div id='chat-container'>
-    </div>
-</div>

src/module/Application/pwa/js/site/LevelSite.js

@@ -0,0 +1,46 @@
+import {AbstractSite, Helper} from "../../../../../js/lib/pwa-lib";
+import {ParentSegment} from "../wordrotator/Segment/ParentSegment";
+import {LeafSegment} from "../wordrotator/Segment/LeafSegment";
+import {TemplateContainer} from "../wordrotator/Segment/TemplateContainer";
+import {SimpleLevel} from "../wordrotator/Level/SimpleLevel";
+
+export class LevelSite extends AbstractSite{
+    constructor(siteManager) {
+        super(siteManager, "html/application/level.html", "level");
+    }
+
+    onConstruct(args) {
+        this.setTitle("Level");
+        return super.onConstruct(args);
+    }
+
+    onFirstStart() {
+        super.onFirstStart();
+
+        let leafSegmentTemplate = this.findBy("#segment-leaf-template");
+        let parentSegmentTemplate = this.findBy("#segment-parent-template");
+        let rowSegmentTemplate = this.findBy("#segment-row-template");
+
+        leafSegmentTemplate.id = null;
+        parentSegmentTemplate.id = null;
+        rowSegmentTemplate.id = null;
+
+        leafSegmentTemplate.remove();
+        parentSegmentTemplate.remove();
+        rowSegmentTemplate.remove();
+
+        let templateContainer = new TemplateContainer(leafSegmentTemplate, parentSegmentTemplate, rowSegmentTemplate);
+
+
+        let level = new SimpleLevel(templateContainer);
+        level.setWords([
+            "Dynamo",
+            "Abhang"
+        ]);
+        level.setStartRotations([0,90,180]);
+
+        level.createSegments();
+        level.getRootSegment()._updateElement();
+        this.findBy("#level").appendChild(level.getRootSegment().getElement());
+    }
+}

src/module/Application/pwa/js/wordrotator/Level/Level.js

@@ -0,0 +1,40 @@
+import {LeafSegment} from "../Segment/LeafSegment";
+import {Helper} from "../../../../../../js/lib/pwa-lib";
+
+export class Level {
+    constructor(templateContainer) {
+        this.rootSegment = null;
+        this.words = [];
+        this.startRotations = [];
+        this.templateContainer = templateContainer;
+    }
+
+    setWords(words)
+    {
+        this.words = words;
+    }
+
+    setStartRotations(rotations)
+    {
+        this.startRotations = rotations;
+    }
+
+    hasWon() {
+        return this.rootSegment.isSolved();
+    }
+
+    getRootSegment(){
+        return this.rootSegment;
+    }
+
+    createSegments() {};
+
+    static _createLeafsForWord(word, leafSegmentTemplate)
+    {
+        let leafSegments = [];
+        for (let i = 0, n = word.length; i < n; i++) {
+            leafSegments.push(new LeafSegment(Helper.cloneNode(leafSegmentTemplate), word.charAt(i)));
+        }
+        return leafSegments;
+    }
+}

src/module/Application/pwa/js/wordrotator/Level/SimpleLevel.js

@@ -0,0 +1,40 @@
+import {Level} from "./Level";
+import {ParentSegment} from "../Segment/ParentSegment";
+import {RowSegment} from "../Segment/RowSegment";
+
+export class SimpleLevel extends Level{
+
+    createSegments() {
+        if (this.words.length >= 2 && this.words[0].length >= 6 &&this.words[1].length >= 6){
+
+            let leafsWordOne = Level._createLeafsForWord(this.words[0], this.templateContainer.copyLeafTemplate());
+            let leafsWordTwo = Level._createLeafsForWord(this.words[1], this.templateContainer.copyLeafTemplate());
+
+            let segmentOne = new ParentSegment(this.templateContainer.copyParentTemplate());
+            let segmentTwo = new ParentSegment(this.templateContainer.copyParentTemplate());
+            let segmentThree = new ParentSegment(this.templateContainer.copyParentTemplate());
+
+            segmentOne.addChild(leafsWordOne[0]);
+            segmentOne.addChild(leafsWordOne[1]);
+            segmentOne.addChild(leafsWordTwo[0]);
+            segmentOne.addChild(leafsWordTwo[1]);
+
+            segmentTwo.addChild(leafsWordOne[2]);
+            segmentTwo.addChild(leafsWordOne[3]);
+            segmentTwo.addChild(leafsWordTwo[2]);
+            segmentTwo.addChild(leafsWordTwo[3]);
+
+            segmentThree.addChild(leafsWordOne[4]);
+            segmentThree.addChild(leafsWordOne[5]);
+            segmentThree.addChild(leafsWordTwo[4]);
+            segmentThree.addChild(leafsWordTwo[5]);
+
+            this.rootSegment = new RowSegment(this.templateContainer.copyRowTemplate());
+            this.rootSegment.addChild(segmentOne);
+            this.rootSegment.addChild(segmentTwo);
+            this.rootSegment.addChild(segmentThree);
+
+            this.rootSegment.applyRotations(this.startRotations);
+        }
+    }
+}

src/module/Application/pwa/js/wordrotator/Segment/LeafSegment.js

@@ -0,0 +1,23 @@
+import {Segment} from "./Segment";
+import {Helper} from "../../../../../../js/lib/pwa-lib";
+
+export class LeafSegment extends Segment{
+
+    constructor(element, leaf) {
+        super(element);
+        this.leaf = 'A';
+        if (Helper.isNotNull(leaf))
+        {
+            this.setLeaf(leaf);
+        }
+    }
+    
+    setLeaf(leaf)
+    {
+        this.leaf = leaf;
+    }
+
+    _updateElement() {
+        this.element.querySelector(".leaf-element").removeAllChildren().appendChild(document.createTextNode(this.leaf));
+    }
+}

src/module/Application/pwa/js/wordrotator/Segment/ParentSegment.js

@@ -0,0 +1,71 @@
+import {Segment} from "./Segment";
+
+export class ParentSegment extends Segment {
+    constructor(element) {
+        super(element);
+        this.children = [];
+        this.class = "rotate-0";
+    }
+
+    rotate() {
+        this.rotation += 90;
+        this.rotation %= 360;
+        
+        this._updateRotationClass()
+    }
+
+    applyRotations(rotations)
+    {
+        // debugger;
+        this.rotation = rotations[0];
+        rotations.splice(0,1);
+        for (let i = 0, n = this.children.length; i < n; i++) {
+            rotations = this.children[i].applyRotations(rotations);
+        }
+        return rotations;
+    }
+
+    isSolved() {
+        for (let i = 0, n = this.children.length; i < n; i++) {
+            if (!this.children[i].isSolved()) {
+                return false;
+            }
+        }
+        return super.isSolved();
+    }
+
+    setChildren(children) {
+        this.children = [];
+        for (let i = 0, n = children.length; i < n; i++) {
+            this.addChild(children[i]);
+        }
+    }
+
+    addChild(child) {
+        this.children.push(child);
+        this._updateElement();
+    }
+
+    _updateRotationClass(){
+        this.element.classList.remove(this.class);
+        this.class = "rotate-" + this.rotation;
+        this.element.classList.add(this.class);
+    }
+
+    _updateElement() {
+        const childContainer = this.element.querySelector(".child-container");
+        childContainer.removeAllChildren();
+
+        this._updateRotationClass()
+
+        const self = this;
+        this.element.onclick = function () {
+            self.rotate();
+        }
+
+        for (let i = 0, n = this.children.length; i < n; i++) {
+            this.children[i]._updateElement();
+            childContainer.appendChild(this.children[i].getElement());
+        }
+    }
+}

src/module/Application/pwa/js/wordrotator/Segment/RowSegment.js

@@ -0,0 +1,13 @@
+import {ParentSegment} from "./ParentSegment";
+
+export class RowSegment extends ParentSegment{
+    rotate() {}
+
+    applyRotations(rotations)
+    {
+        for (let i = 0, n = this.children.length; i < n; i++) {
+            rotations = this.children[i].applyRotations(rotations);
+        }
+        return rotations;
+    }
+}

src/module/Application/pwa/js/wordrotator/Segment/Segment.js

@@ -0,0 +1,25 @@
+
+
+export class Segment{
+    constructor(element){
+        this.rotation = 0;
+        this.element = element;
+    }
+
+    isSolved(){
+        return this.rotation === 0;
+    }
+    
+    rotate(){};
+
+    _updateElement(){};
+
+    applyRotations(rotations){
+        return rotations;
+    }
+
+    getElement()
+    {
+        return this.element;
+    }
+}

src/module/Application/pwa/js/wordrotator/Segment/TemplateContainer.js

@@ -0,0 +1,24 @@
+import {Helper} from "../../../../../../js/lib/pwa-lib";
+
+export class TemplateContainer{
+    constructor(leafTemplate, parentTemplate, rowTemplate){
+        this.leafTemplate = leafTemplate;
+        this.parentTemplate = parentTemplate;
+        this.rowTemplate = rowTemplate;
+    }
+
+    copyLeafTemplate()
+    {
+        return Helper.cloneNode(this.leafTemplate);
+    }
+
+    copyParentTemplate()
+    {
+        return Helper.cloneNode(this.parentTemplate);
+    }
+
+    copyRowTemplate()
+    {
+        return Helper.cloneNode(this.rowTemplate);
+    }
+}