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

Added simpleLevel

Browse Source
This commit is contained in:
silas
2018-05-18 21:06:10 +02:00
parent 1efcd2526b
commit cae3ef29ea
42 changed files with 907 additions and 661 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/js/init.js
View File

@@ -9,7 +9,8 @@ import {
WhatsappShareButton
} from "./lib/pwa-lib";
import './settings'
import {ClockSite} from "../module/Application/pwa/js/site/ClockSite";
// import {ClockSite} from "../module/Application/pwa/js/site/ClockSite";
import {LevelSite} from "../module/Application/pwa/js/site/LevelSite";
applyPolyfills();
@@ -27,7 +28,7 @@ ShareManager.addShareButton(new TelegramShareButton('img/telegram.svg'));
let app = new App();
// app.addDeepLink("policy", PrivatePolicySite.name);
app.setAddThemeAction(true);
// app.addDefaultAction(Translator.generateChangeLanguageMenuAction());
app.addDefaultAction(Translator.generateChangeLanguageMenuAction());
//bridge für Android
// window["ThemeManager"] = ThemeManager;
@@ -38,7 +39,7 @@ app.setAddThemeAction(true);
// window["Translator"]["setLanguage"] = Translator.setLanguage;
InitPromise.resolve(app).then(function(){
app.start(ClockSite);
app.start(LevelSite);
Translator.setLanguage("de");
});

2
src/js/settings.js
View File

@@ -1,6 +1,6 @@
import {SystemSettings, Translator} from "./lib/pwa-lib";
SystemSettings.setBasePath("/pwa/stories/public/");
SystemSettings.setBasePath("/pwa/wordRotator/public/");
Translator.supportedLanguages = ["de", "en"];
Translator.markTranslations = false;

35
src/module/Application/pwa/html/application/chat.html
View File

@@ -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>

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

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

10
src/module/Application/pwa/html/application/fragment/authorOverviewFragment.html
View File

@@ -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>

3
src/module/Application/pwa/html/application/fragment/chatOverviewFragment.html
View File

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

76
src/module/Application/pwa/html/application/fragment/settingsFragment.html
View File

@@ -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>

14
src/module/Application/pwa/html/application/level.html Normal file
View File

@@ -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>

17
src/module/Application/pwa/html/application/storyOverview.html
View File

@@ -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>

46
src/module/Application/pwa/js/site/LevelSite.js Normal file
View File

@@ -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());
}
}

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

@@ -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;
}
}

40
src/module/Application/pwa/js/wordrotator/Level/SimpleLevel.js Normal file
View File

@@ -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);
}
}
}

23
src/module/Application/pwa/js/wordrotator/Segment/LeafSegment.js Normal file
View File

@@ -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));
}
}

71
src/module/Application/pwa/js/wordrotator/Segment/ParentSegment.js Normal file
View File

@@ -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());
}
}
}

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

@@ -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;
}
}

25
src/module/Application/pwa/js/wordrotator/Segment/Segment.js Normal file
View File

@@ -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;
}
}

24
src/module/Application/pwa/js/wordrotator/Segment/TemplateContainer.js Normal file
View File

@@ -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);
}
}

94
src/scss/stories.css
View File

@@ -1,94 +0,0 @@
.author {
color: #979797; }
.author:after {
content: ':';
padding-right: 2px; }
.chat-img-container, .author-image-container {
width: 2.4rem;
position: relative; }
.chat-img-container .chat-img, .chat-img-container .author-image, .author-image-container .chat-img, .author-image-container .author-image {
position: absolute;
margin: 0.2em;
border-radius: 50%;
width: 1.8em; }
.chat {
border-bottom: 1px solid #ececec; }
.chat.overview {
cursor: pointer; }
.chat .chat-name {
font-weight: bold; }
.chat .chat-last-message {
color: #555555;
overflow: hidden;
white-space: nowrap; }
.chat .chat-last-message .isWriting {
color: #aa1c1d; }
.chat .chat-last-message-timestamp {
font-size: 0.8rem; }
.chat .unread-message-counter {
background-color: red;
border-radius: 50%;
color: white;
font-size: 0.7rem;
border: 1px solid #9b0000;
width: 1.2rem;
height: 1.2rem;
line-height: 1.2rem;
text-align: center;
vertical-align: middle; }
.chat .unread-message-counter:empty {
display: none; }
#chat-title {
border-bottom: none; }
#chat-title .chat-img {
width: 1.4em;
position: relative; }
.message {
margin-bottom: 0.1rem; }
.message.my-message {
text-align: right; }
.message.my-message .author-image-container, .message.my-message .author {
display: none; }
.message.my-message .bubble {
background-color: rgba(255, 0, 0, 0.5);
border-radius: 5px 5px 0 5px; }
.message .author-image {
bottom: 0; }
.message .bubble {
display: inline-block;
padding: 0.2rem;
border: 1px solid #646464;
border-radius: 5px 5px 5px 0;
max-width: 80%;
text-align: left; }
.message .bubble .author {
font-size: 0.7rem;
text-align: left;
line-height: 0.9; }
.message .bubble .message-text {
line-height: 1; }
.message .bubble .time {
line-height: 0.9;
font-size: 0.5rem;
text-align: right; }
#answer {
text-align: center;
height: 100%;
min-height: 50px; }
.answer-button-container .answer-button {
overflow: hidden;
margin-top: -0.1em;
margin-right: 0;
margin-left: 0;
margin-bottom: 0;
font-size: 3rem;
line-height: 1;
padding: 0 0.1em 0.1em;
text-align: center;
vertical-align: middle; }

137
src/scss/stories.scss
View File

@@ -1,137 +0,0 @@
$borderColor: #ececec;
//Allgemein
.author {
color: #979797;
&:after {
content: ':';
padding-right: 2px;
}
}
.chat-img-container, .author-image-container {
width: 2.4rem;
position: relative;
.chat-img, .author-image {
position: absolute;
margin: 0.2em;
border-radius: 50%;
width: 1.8em;
}
}
//Overview
.chat {
border-bottom: 1px solid $borderColor;
&.overview {
cursor: pointer;
}
.chat-name {
font-weight: bold;
}
.chat-last-message {
color: #555555;
overflow: hidden;
white-space: nowrap;
.isWriting {
color: #aa1c1d;
}
}
.chat-last-message-timestamp {
font-size: 0.8rem;
}
.unread-message-counter {
background-color: red;
border-radius: 50%;
color: white;
font-size: 0.7rem;
border: 1px solid #9b0000;
width: 1.2rem;
height: 1.2rem;
line-height: 1.2rem;
text-align: center;
vertical-align: middle;
&:empty {
display: none;
}
}
}
//------------Chat
#chat-title {
border-bottom: none;
.chat-img {
width: 1.4em;
position: relative;
}
}
.message {
margin-bottom: 0.1rem;
&.my-message {
text-align: right;
.author-image-container, .author {
display: none;
}
.bubble {
background-color: rgba(255, 0, 0, 0.5);
border-radius: 5px 5px 0 5px;
}
}
.author-image {
bottom: 0;
}
.bubble {
display: inline-block;
padding: 0.2rem;
border: 1px solid #646464;
border-radius: 5px 5px 5px 0;
max-width: 80%;
text-align: left;
.author {
font-size: 0.7rem;
text-align: left;
line-height: 0.9;
}
.message-text {
line-height: 1;
}
.time {
line-height: 0.9;
font-size: 0.5rem;
text-align: right;
}
}
}
#answer {
text-align: center;
height: 100%;
min-height: 50px;
}
.answer-button-container {
.answer-button {
overflow: hidden;
margin-top: -0.1em;
margin-right: 0;
margin-left: 0;
margin-bottom: 0;
font-size: 3rem;
line-height: 1;
padding: 0 0.1em 0.1em;
text-align: center;
vertical-align: middle;
}
}
@import "editStory";

36
src/scss/wordRotator.scss Normal file
View File

@@ -0,0 +1,36 @@
.segment
{
cursor: pointer;
display: inline-block;
text-align: center;
&.segment-parent{
border: solid 1px #a9a9a9;
border-radius: 3px;
.segment{
width: 50%;
}
}
&.rotate-90
{
transform: rotate(90deg);
.segment{
transform: rotate(-90deg);
}
}
&.rotate-180
{
transform: rotate(180deg);
.segment{
transform: rotate(-180deg);
}
}
&.rotate-270
{
transform: rotate(270deg);
.segment{
transform: rotate(-270deg);
}
}
}