From cae3ef29ea79d215b281f6192e74a610e9cf0d2b Mon Sep 17 00:00:00 2001 From: silas Date: Fri, 18 May 2018 21:06:10 +0200 Subject: [PATCH] Added simpleLevel --- .idea/php.xml | 78 ++++ .idea/scopes/html.xml | 3 + .idea/scopes/js.xml | 3 + .idea/scopes/scss.xml | 3 + .idea/scopes/translator.xml | 3 + .idea/watcherTasks.xml | 105 +++++ bin/build.sh | 0 public/core/css/core.css | 2 + public/core/css/foundation.css | 280 +++++++------- public/html/application/chat.html | 1 - public/html/application/editStory.html | 1 - .../fragment/authorOverviewFragment.html | 1 - .../fragment/chatOverviewFragment.html | 1 - .../fragment/settingsFragment.html | 1 - public/html/application/level.html | 1 + public/html/application/storyOverview.html | 1 - public/html/authorOverviewFragment.html | 1 - public/html/chat.html | 1 - public/html/chatOverviewFragment.html | 1 - public/html/editStory.html | 1 - public/index.html | 2 +- public/js/app.js | 362 +++++++++++------- src/js/init.js | 7 +- src/js/settings.js | 2 +- .../pwa/html/application/chat.html | 35 -- .../pwa/html/application/editStory.html | 3 - .../fragment/authorOverviewFragment.html | 10 - .../fragment/chatOverviewFragment.html | 3 - .../fragment/settingsFragment.html | 76 ---- .../pwa/html/application/level.html | 14 + .../pwa/html/application/storyOverview.html | 17 - .../Application/pwa/js/site/LevelSite.js | 46 +++ .../pwa/js/wordrotator/Level/Level.js | 40 ++ .../pwa/js/wordrotator/Level/SimpleLevel.js | 40 ++ .../pwa/js/wordrotator/Segment/LeafSegment.js | 23 ++ .../js/wordrotator/Segment/ParentSegment.js | 71 ++++ .../pwa/js/wordrotator/Segment/RowSegment.js | 13 + .../pwa/js/wordrotator/Segment/Segment.js | 25 ++ .../wordrotator/Segment/TemplateContainer.js | 24 ++ src/scss/stories.css | 94 ----- src/scss/stories.scss | 137 ------- src/scss/wordRotator.scss | 36 ++ 42 files changed, 907 insertions(+), 661 deletions(-) create mode 100644 .idea/php.xml create mode 100644 .idea/scopes/html.xml create mode 100644 .idea/scopes/js.xml create mode 100644 .idea/scopes/scss.xml create mode 100644 .idea/scopes/translator.xml create mode 100644 .idea/watcherTasks.xml mode change 100644 => 100755 bin/build.sh delete mode 100644 public/html/application/chat.html delete mode 100644 public/html/application/editStory.html delete mode 100644 public/html/application/fragment/authorOverviewFragment.html delete mode 100644 public/html/application/fragment/chatOverviewFragment.html delete mode 100644 public/html/application/fragment/settingsFragment.html create mode 100644 public/html/application/level.html delete mode 100644 public/html/application/storyOverview.html delete mode 100644 public/html/authorOverviewFragment.html delete mode 100644 public/html/chat.html delete mode 100644 public/html/chatOverviewFragment.html delete mode 100644 public/html/editStory.html delete mode 100644 src/module/Application/pwa/html/application/chat.html delete mode 100644 src/module/Application/pwa/html/application/editStory.html delete mode 100644 src/module/Application/pwa/html/application/fragment/authorOverviewFragment.html delete mode 100644 src/module/Application/pwa/html/application/fragment/chatOverviewFragment.html delete mode 100644 src/module/Application/pwa/html/application/fragment/settingsFragment.html create mode 100644 src/module/Application/pwa/html/application/level.html delete mode 100644 src/module/Application/pwa/html/application/storyOverview.html create mode 100644 src/module/Application/pwa/js/site/LevelSite.js create mode 100644 src/module/Application/pwa/js/wordrotator/Level/Level.js create mode 100644 src/module/Application/pwa/js/wordrotator/Level/SimpleLevel.js create mode 100644 src/module/Application/pwa/js/wordrotator/Segment/LeafSegment.js create mode 100644 src/module/Application/pwa/js/wordrotator/Segment/ParentSegment.js create mode 100644 src/module/Application/pwa/js/wordrotator/Segment/RowSegment.js create mode 100644 src/module/Application/pwa/js/wordrotator/Segment/Segment.js create mode 100644 src/module/Application/pwa/js/wordrotator/Segment/TemplateContainer.js delete mode 100644 src/scss/stories.css delete mode 100644 src/scss/stories.scss create mode 100644 src/scss/wordRotator.scss diff --git a/.idea/php.xml b/.idea/php.xml new file mode 100644 index 0000000..247c14b --- /dev/null +++ b/.idea/php.xml @@ -0,0 +1,78 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/.idea/scopes/html.xml b/.idea/scopes/html.xml new file mode 100644 index 0000000..daf8c2f --- /dev/null +++ b/.idea/scopes/html.xml @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/.idea/scopes/js.xml b/.idea/scopes/js.xml new file mode 100644 index 0000000..9e9edcb --- /dev/null +++ b/.idea/scopes/js.xml @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/.idea/scopes/scss.xml b/.idea/scopes/scss.xml new file mode 100644 index 0000000..fb2927f --- /dev/null +++ b/.idea/scopes/scss.xml @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/.idea/scopes/translator.xml b/.idea/scopes/translator.xml new file mode 100644 index 0000000..a12e8d9 --- /dev/null +++ b/.idea/scopes/translator.xml @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/.idea/watcherTasks.xml b/.idea/watcherTasks.xml new file mode 100644 index 0000000..362cf38 --- /dev/null +++ b/.idea/watcherTasks.xml @@ -0,0 +1,105 @@ + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/bin/build.sh b/bin/build.sh old mode 100644 new mode 100755 diff --git a/public/core/css/core.css b/public/core/css/core.css index a0c5509..e0a6a6f 100644 --- a/public/core/css/core.css +++ b/public/core/css/core.css @@ -295,6 +295,8 @@ button.button, a.button { .fill-me { display: flex; flex-direction: column; } + .fill-me.vertical { + flex-direction: row; } .fill-me .grow { flex: 1; } diff --git a/public/core/css/foundation.css b/public/core/css/foundation.css index ab1cafd..e6fa267 100644 --- a/public/core/css/foundation.css +++ b/public/core/css/foundation.css @@ -671,32 +671,32 @@ textarea { padding-left: 0; } .small-1 { - width: 8.33333%; } + width: 8.3333333333%; } .small-push-1 { position: relative; - left: 8.33333%; } + left: 8.3333333333%; } .small-pull-1 { position: relative; - left: -8.33333%; } + left: -8.3333333333%; } .small-offset-0 { margin-left: 0%; } .small-2 { - width: 16.66667%; } + width: 16.6666666667%; } .small-push-2 { position: relative; - left: 16.66667%; } + left: 16.6666666667%; } .small-pull-2 { position: relative; - left: -16.66667%; } + left: -16.6666666667%; } .small-offset-1 { - margin-left: 8.33333%; } + margin-left: 8.3333333333%; } .small-3 { width: 25%; } @@ -710,35 +710,35 @@ textarea { left: -25%; } .small-offset-2 { - margin-left: 16.66667%; } + margin-left: 16.6666666667%; } .small-4 { - width: 33.33333%; } + width: 33.3333333333%; } .small-push-4 { position: relative; - left: 33.33333%; } + left: 33.3333333333%; } .small-pull-4 { position: relative; - left: -33.33333%; } + left: -33.3333333333%; } .small-offset-3 { margin-left: 25%; } .small-5 { - width: 41.66667%; } + width: 41.6666666667%; } .small-push-5 { position: relative; - left: 41.66667%; } + left: 41.6666666667%; } .small-pull-5 { position: relative; - left: -41.66667%; } + left: -41.6666666667%; } .small-offset-4 { - margin-left: 33.33333%; } + margin-left: 33.3333333333%; } .small-6 { width: 50%; } @@ -752,35 +752,35 @@ textarea { left: -50%; } .small-offset-5 { - margin-left: 41.66667%; } + margin-left: 41.6666666667%; } .small-7 { - width: 58.33333%; } + width: 58.3333333333%; } .small-push-7 { position: relative; - left: 58.33333%; } + left: 58.3333333333%; } .small-pull-7 { position: relative; - left: -58.33333%; } + left: -58.3333333333%; } .small-offset-6 { margin-left: 50%; } .small-8 { - width: 66.66667%; } + width: 66.6666666667%; } .small-push-8 { position: relative; - left: 66.66667%; } + left: 66.6666666667%; } .small-pull-8 { position: relative; - left: -66.66667%; } + left: -66.6666666667%; } .small-offset-7 { - margin-left: 58.33333%; } + margin-left: 58.3333333333%; } .small-9 { width: 75%; } @@ -794,41 +794,41 @@ textarea { left: -75%; } .small-offset-8 { - margin-left: 66.66667%; } + margin-left: 66.6666666667%; } .small-10 { - width: 83.33333%; } + width: 83.3333333333%; } .small-push-10 { position: relative; - left: 83.33333%; } + left: 83.3333333333%; } .small-pull-10 { position: relative; - left: -83.33333%; } + left: -83.3333333333%; } .small-offset-9 { margin-left: 75%; } .small-11 { - width: 91.66667%; } + width: 91.6666666667%; } .small-push-11 { position: relative; - left: 91.66667%; } + left: 91.6666666667%; } .small-pull-11 { position: relative; - left: -91.66667%; } + left: -91.6666666667%; } .small-offset-10 { - margin-left: 83.33333%; } + margin-left: 83.3333333333%; } .small-12 { width: 100%; } .small-offset-11 { - margin-left: 91.66667%; } + margin-left: 91.6666666667%; } .small-up-1 > .column, .small-up-1 > .columns { float: left; @@ -852,7 +852,7 @@ textarea { .small-up-3 > .column, .small-up-3 > .columns { float: left; - width: 33.33333%; } + width: 33.3333333333%; } .small-up-3 > .column:nth-of-type(1n), .small-up-3 > .columns:nth-of-type(1n) { clear: none; } .small-up-3 > .column:nth-of-type(3n+1), .small-up-3 > .columns:nth-of-type(3n+1) { @@ -882,7 +882,7 @@ textarea { .small-up-6 > .column, .small-up-6 > .columns { float: left; - width: 16.66667%; } + width: 16.6666666667%; } .small-up-6 > .column:nth-of-type(1n), .small-up-6 > .columns:nth-of-type(1n) { clear: none; } .small-up-6 > .column:nth-of-type(6n+1), .small-up-6 > .columns:nth-of-type(6n+1) { @@ -892,7 +892,7 @@ textarea { .small-up-7 > .column, .small-up-7 > .columns { float: left; - width: 14.28571%; } + width: 14.2857142857%; } .small-up-7 > .column:nth-of-type(1n), .small-up-7 > .columns:nth-of-type(1n) { clear: none; } .small-up-7 > .column:nth-of-type(7n+1), .small-up-7 > .columns:nth-of-type(7n+1) { @@ -942,32 +942,32 @@ textarea { @media screen and (min-width: 25em) { .smedium-1 { - width: 8.33333%; } + width: 8.3333333333%; } .smedium-push-1 { position: relative; - left: 8.33333%; } + left: 8.3333333333%; } .smedium-pull-1 { position: relative; - left: -8.33333%; } + left: -8.3333333333%; } .smedium-offset-0 { margin-left: 0%; } .smedium-2 { - width: 16.66667%; } + width: 16.6666666667%; } .smedium-push-2 { position: relative; - left: 16.66667%; } + left: 16.6666666667%; } .smedium-pull-2 { position: relative; - left: -16.66667%; } + left: -16.6666666667%; } .smedium-offset-1 { - margin-left: 8.33333%; } + margin-left: 8.3333333333%; } .smedium-3 { width: 25%; } @@ -981,35 +981,35 @@ textarea { left: -25%; } .smedium-offset-2 { - margin-left: 16.66667%; } + margin-left: 16.6666666667%; } .smedium-4 { - width: 33.33333%; } + width: 33.3333333333%; } .smedium-push-4 { position: relative; - left: 33.33333%; } + left: 33.3333333333%; } .smedium-pull-4 { position: relative; - left: -33.33333%; } + left: -33.3333333333%; } .smedium-offset-3 { margin-left: 25%; } .smedium-5 { - width: 41.66667%; } + width: 41.6666666667%; } .smedium-push-5 { position: relative; - left: 41.66667%; } + left: 41.6666666667%; } .smedium-pull-5 { position: relative; - left: -41.66667%; } + left: -41.6666666667%; } .smedium-offset-4 { - margin-left: 33.33333%; } + margin-left: 33.3333333333%; } .smedium-6 { width: 50%; } @@ -1023,35 +1023,35 @@ textarea { left: -50%; } .smedium-offset-5 { - margin-left: 41.66667%; } + margin-left: 41.6666666667%; } .smedium-7 { - width: 58.33333%; } + width: 58.3333333333%; } .smedium-push-7 { position: relative; - left: 58.33333%; } + left: 58.3333333333%; } .smedium-pull-7 { position: relative; - left: -58.33333%; } + left: -58.3333333333%; } .smedium-offset-6 { margin-left: 50%; } .smedium-8 { - width: 66.66667%; } + width: 66.6666666667%; } .smedium-push-8 { position: relative; - left: 66.66667%; } + left: 66.6666666667%; } .smedium-pull-8 { position: relative; - left: -66.66667%; } + left: -66.6666666667%; } .smedium-offset-7 { - margin-left: 58.33333%; } + margin-left: 58.3333333333%; } .smedium-9 { width: 75%; } @@ -1065,41 +1065,41 @@ textarea { left: -75%; } .smedium-offset-8 { - margin-left: 66.66667%; } + margin-left: 66.6666666667%; } .smedium-10 { - width: 83.33333%; } + width: 83.3333333333%; } .smedium-push-10 { position: relative; - left: 83.33333%; } + left: 83.3333333333%; } .smedium-pull-10 { position: relative; - left: -83.33333%; } + left: -83.3333333333%; } .smedium-offset-9 { margin-left: 75%; } .smedium-11 { - width: 91.66667%; } + width: 91.6666666667%; } .smedium-push-11 { position: relative; - left: 91.66667%; } + left: 91.6666666667%; } .smedium-pull-11 { position: relative; - left: -91.66667%; } + left: -91.6666666667%; } .smedium-offset-10 { - margin-left: 83.33333%; } + margin-left: 83.3333333333%; } .smedium-12 { width: 100%; } .smedium-offset-11 { - margin-left: 91.66667%; } + margin-left: 91.6666666667%; } .smedium-up-1 > .column, .smedium-up-1 > .columns { float: left; @@ -1123,7 +1123,7 @@ textarea { .smedium-up-3 > .column, .smedium-up-3 > .columns { float: left; - width: 33.33333%; } + width: 33.3333333333%; } .smedium-up-3 > .column:nth-of-type(1n), .smedium-up-3 > .columns:nth-of-type(1n) { clear: none; } .smedium-up-3 > .column:nth-of-type(3n+1), .smedium-up-3 > .columns:nth-of-type(3n+1) { @@ -1153,7 +1153,7 @@ textarea { .smedium-up-6 > .column, .smedium-up-6 > .columns { float: left; - width: 16.66667%; } + width: 16.6666666667%; } .smedium-up-6 > .column:nth-of-type(1n), .smedium-up-6 > .columns:nth-of-type(1n) { clear: none; } .smedium-up-6 > .column:nth-of-type(6n+1), .smedium-up-6 > .columns:nth-of-type(6n+1) { @@ -1163,7 +1163,7 @@ textarea { .smedium-up-7 > .column, .smedium-up-7 > .columns { float: left; - width: 14.28571%; } + width: 14.2857142857%; } .smedium-up-7 > .column:nth-of-type(1n), .smedium-up-7 > .columns:nth-of-type(1n) { clear: none; } .smedium-up-7 > .column:nth-of-type(7n+1), .smedium-up-7 > .columns:nth-of-type(7n+1) { @@ -1212,32 +1212,32 @@ textarea { margin-left: 0; } } @media print, screen and (min-width: 40em) { .medium-1 { - width: 8.33333%; } + width: 8.3333333333%; } .medium-push-1 { position: relative; - left: 8.33333%; } + left: 8.3333333333%; } .medium-pull-1 { position: relative; - left: -8.33333%; } + left: -8.3333333333%; } .medium-offset-0 { margin-left: 0%; } .medium-2 { - width: 16.66667%; } + width: 16.6666666667%; } .medium-push-2 { position: relative; - left: 16.66667%; } + left: 16.6666666667%; } .medium-pull-2 { position: relative; - left: -16.66667%; } + left: -16.6666666667%; } .medium-offset-1 { - margin-left: 8.33333%; } + margin-left: 8.3333333333%; } .medium-3 { width: 25%; } @@ -1251,35 +1251,35 @@ textarea { left: -25%; } .medium-offset-2 { - margin-left: 16.66667%; } + margin-left: 16.6666666667%; } .medium-4 { - width: 33.33333%; } + width: 33.3333333333%; } .medium-push-4 { position: relative; - left: 33.33333%; } + left: 33.3333333333%; } .medium-pull-4 { position: relative; - left: -33.33333%; } + left: -33.3333333333%; } .medium-offset-3 { margin-left: 25%; } .medium-5 { - width: 41.66667%; } + width: 41.6666666667%; } .medium-push-5 { position: relative; - left: 41.66667%; } + left: 41.6666666667%; } .medium-pull-5 { position: relative; - left: -41.66667%; } + left: -41.6666666667%; } .medium-offset-4 { - margin-left: 33.33333%; } + margin-left: 33.3333333333%; } .medium-6 { width: 50%; } @@ -1293,35 +1293,35 @@ textarea { left: -50%; } .medium-offset-5 { - margin-left: 41.66667%; } + margin-left: 41.6666666667%; } .medium-7 { - width: 58.33333%; } + width: 58.3333333333%; } .medium-push-7 { position: relative; - left: 58.33333%; } + left: 58.3333333333%; } .medium-pull-7 { position: relative; - left: -58.33333%; } + left: -58.3333333333%; } .medium-offset-6 { margin-left: 50%; } .medium-8 { - width: 66.66667%; } + width: 66.6666666667%; } .medium-push-8 { position: relative; - left: 66.66667%; } + left: 66.6666666667%; } .medium-pull-8 { position: relative; - left: -66.66667%; } + left: -66.6666666667%; } .medium-offset-7 { - margin-left: 58.33333%; } + margin-left: 58.3333333333%; } .medium-9 { width: 75%; } @@ -1335,41 +1335,41 @@ textarea { left: -75%; } .medium-offset-8 { - margin-left: 66.66667%; } + margin-left: 66.6666666667%; } .medium-10 { - width: 83.33333%; } + width: 83.3333333333%; } .medium-push-10 { position: relative; - left: 83.33333%; } + left: 83.3333333333%; } .medium-pull-10 { position: relative; - left: -83.33333%; } + left: -83.3333333333%; } .medium-offset-9 { margin-left: 75%; } .medium-11 { - width: 91.66667%; } + width: 91.6666666667%; } .medium-push-11 { position: relative; - left: 91.66667%; } + left: 91.6666666667%; } .medium-pull-11 { position: relative; - left: -91.66667%; } + left: -91.6666666667%; } .medium-offset-10 { - margin-left: 83.33333%; } + margin-left: 83.3333333333%; } .medium-12 { width: 100%; } .medium-offset-11 { - margin-left: 91.66667%; } + margin-left: 91.6666666667%; } .medium-up-1 > .column, .medium-up-1 > .columns { float: left; @@ -1393,7 +1393,7 @@ textarea { .medium-up-3 > .column, .medium-up-3 > .columns { float: left; - width: 33.33333%; } + width: 33.3333333333%; } .medium-up-3 > .column:nth-of-type(1n), .medium-up-3 > .columns:nth-of-type(1n) { clear: none; } .medium-up-3 > .column:nth-of-type(3n+1), .medium-up-3 > .columns:nth-of-type(3n+1) { @@ -1423,7 +1423,7 @@ textarea { .medium-up-6 > .column, .medium-up-6 > .columns { float: left; - width: 16.66667%; } + width: 16.6666666667%; } .medium-up-6 > .column:nth-of-type(1n), .medium-up-6 > .columns:nth-of-type(1n) { clear: none; } .medium-up-6 > .column:nth-of-type(6n+1), .medium-up-6 > .columns:nth-of-type(6n+1) { @@ -1433,7 +1433,7 @@ textarea { .medium-up-7 > .column, .medium-up-7 > .columns { float: left; - width: 14.28571%; } + width: 14.2857142857%; } .medium-up-7 > .column:nth-of-type(1n), .medium-up-7 > .columns:nth-of-type(1n) { clear: none; } .medium-up-7 > .column:nth-of-type(7n+1), .medium-up-7 > .columns:nth-of-type(7n+1) { @@ -1482,32 +1482,32 @@ textarea { margin-left: 0; } } @media print, screen and (min-width: 64em) { .large-1 { - width: 8.33333%; } + width: 8.3333333333%; } .large-push-1 { position: relative; - left: 8.33333%; } + left: 8.3333333333%; } .large-pull-1 { position: relative; - left: -8.33333%; } + left: -8.3333333333%; } .large-offset-0 { margin-left: 0%; } .large-2 { - width: 16.66667%; } + width: 16.6666666667%; } .large-push-2 { position: relative; - left: 16.66667%; } + left: 16.6666666667%; } .large-pull-2 { position: relative; - left: -16.66667%; } + left: -16.6666666667%; } .large-offset-1 { - margin-left: 8.33333%; } + margin-left: 8.3333333333%; } .large-3 { width: 25%; } @@ -1521,35 +1521,35 @@ textarea { left: -25%; } .large-offset-2 { - margin-left: 16.66667%; } + margin-left: 16.6666666667%; } .large-4 { - width: 33.33333%; } + width: 33.3333333333%; } .large-push-4 { position: relative; - left: 33.33333%; } + left: 33.3333333333%; } .large-pull-4 { position: relative; - left: -33.33333%; } + left: -33.3333333333%; } .large-offset-3 { margin-left: 25%; } .large-5 { - width: 41.66667%; } + width: 41.6666666667%; } .large-push-5 { position: relative; - left: 41.66667%; } + left: 41.6666666667%; } .large-pull-5 { position: relative; - left: -41.66667%; } + left: -41.6666666667%; } .large-offset-4 { - margin-left: 33.33333%; } + margin-left: 33.3333333333%; } .large-6 { width: 50%; } @@ -1563,35 +1563,35 @@ textarea { left: -50%; } .large-offset-5 { - margin-left: 41.66667%; } + margin-left: 41.6666666667%; } .large-7 { - width: 58.33333%; } + width: 58.3333333333%; } .large-push-7 { position: relative; - left: 58.33333%; } + left: 58.3333333333%; } .large-pull-7 { position: relative; - left: -58.33333%; } + left: -58.3333333333%; } .large-offset-6 { margin-left: 50%; } .large-8 { - width: 66.66667%; } + width: 66.6666666667%; } .large-push-8 { position: relative; - left: 66.66667%; } + left: 66.6666666667%; } .large-pull-8 { position: relative; - left: -66.66667%; } + left: -66.6666666667%; } .large-offset-7 { - margin-left: 58.33333%; } + margin-left: 58.3333333333%; } .large-9 { width: 75%; } @@ -1605,41 +1605,41 @@ textarea { left: -75%; } .large-offset-8 { - margin-left: 66.66667%; } + margin-left: 66.6666666667%; } .large-10 { - width: 83.33333%; } + width: 83.3333333333%; } .large-push-10 { position: relative; - left: 83.33333%; } + left: 83.3333333333%; } .large-pull-10 { position: relative; - left: -83.33333%; } + left: -83.3333333333%; } .large-offset-9 { margin-left: 75%; } .large-11 { - width: 91.66667%; } + width: 91.6666666667%; } .large-push-11 { position: relative; - left: 91.66667%; } + left: 91.6666666667%; } .large-pull-11 { position: relative; - left: -91.66667%; } + left: -91.6666666667%; } .large-offset-10 { - margin-left: 83.33333%; } + margin-left: 83.3333333333%; } .large-12 { width: 100%; } .large-offset-11 { - margin-left: 91.66667%; } + margin-left: 91.6666666667%; } .large-up-1 > .column, .large-up-1 > .columns { float: left; @@ -1663,7 +1663,7 @@ textarea { .large-up-3 > .column, .large-up-3 > .columns { float: left; - width: 33.33333%; } + width: 33.3333333333%; } .large-up-3 > .column:nth-of-type(1n), .large-up-3 > .columns:nth-of-type(1n) { clear: none; } .large-up-3 > .column:nth-of-type(3n+1), .large-up-3 > .columns:nth-of-type(3n+1) { @@ -1693,7 +1693,7 @@ textarea { .large-up-6 > .column, .large-up-6 > .columns { float: left; - width: 16.66667%; } + width: 16.6666666667%; } .large-up-6 > .column:nth-of-type(1n), .large-up-6 > .columns:nth-of-type(1n) { clear: none; } .large-up-6 > .column:nth-of-type(6n+1), .large-up-6 > .columns:nth-of-type(6n+1) { @@ -1703,7 +1703,7 @@ textarea { .large-up-7 > .column, .large-up-7 > .columns { float: left; - width: 14.28571%; } + width: 14.2857142857%; } .large-up-7 > .column:nth-of-type(1n), .large-up-7 > .columns:nth-of-type(1n) { clear: none; } .large-up-7 > .column:nth-of-type(7n+1), .large-up-7 > .columns:nth-of-type(7n+1) { diff --git a/public/html/application/chat.html b/public/html/application/chat.html deleted file mode 100644 index b640173..0000000 --- a/public/html/application/chat.html +++ /dev/null @@ -1 +0,0 @@ -
\ No newline at end of file diff --git a/public/html/application/editStory.html b/public/html/application/editStory.html deleted file mode 100644 index a75cbf7..0000000 --- a/public/html/application/editStory.html +++ /dev/null @@ -1 +0,0 @@ -
\ No newline at end of file diff --git a/public/html/application/fragment/authorOverviewFragment.html b/public/html/application/fragment/authorOverviewFragment.html deleted file mode 100644 index 614f2fa..0000000 --- a/public/html/application/fragment/authorOverviewFragment.html +++ /dev/null @@ -1 +0,0 @@ -
1
\ No newline at end of file diff --git a/public/html/application/fragment/chatOverviewFragment.html b/public/html/application/fragment/chatOverviewFragment.html deleted file mode 100644 index 0c7568c..0000000 --- a/public/html/application/fragment/chatOverviewFragment.html +++ /dev/null @@ -1 +0,0 @@ -
chats
\ No newline at end of file diff --git a/public/html/application/fragment/settingsFragment.html b/public/html/application/fragment/settingsFragment.html deleted file mode 100644 index e1b028b..0000000 --- a/public/html/application/fragment/settingsFragment.html +++ /dev/null @@ -1 +0,0 @@ -

\ No newline at end of file diff --git a/public/html/application/level.html b/public/html/application/level.html new file mode 100644 index 0000000..6d79f5a --- /dev/null +++ b/public/html/application/level.html @@ -0,0 +1 @@ +
\ No newline at end of file diff --git a/public/html/application/storyOverview.html b/public/html/application/storyOverview.html deleted file mode 100644 index 87a851a..0000000 --- a/public/html/application/storyOverview.html +++ /dev/null @@ -1 +0,0 @@ -
\ No newline at end of file diff --git a/public/html/authorOverviewFragment.html b/public/html/authorOverviewFragment.html deleted file mode 100644 index 614f2fa..0000000 --- a/public/html/authorOverviewFragment.html +++ /dev/null @@ -1 +0,0 @@ -
1
\ No newline at end of file diff --git a/public/html/chat.html b/public/html/chat.html deleted file mode 100644 index b640173..0000000 --- a/public/html/chat.html +++ /dev/null @@ -1 +0,0 @@ -
\ No newline at end of file diff --git a/public/html/chatOverviewFragment.html b/public/html/chatOverviewFragment.html deleted file mode 100644 index 0c7568c..0000000 --- a/public/html/chatOverviewFragment.html +++ /dev/null @@ -1 +0,0 @@ -
chats
\ No newline at end of file diff --git a/public/html/editStory.html b/public/html/editStory.html deleted file mode 100644 index a75cbf7..0000000 --- a/public/html/editStory.html +++ /dev/null @@ -1 +0,0 @@ -
\ No newline at end of file diff --git a/public/index.html b/public/index.html index 270d22c..595b3c6 100755 --- a/public/index.html +++ b/public/index.html @@ -39,7 +39,7 @@ - + diff --git a/public/js/app.js b/public/js/app.js index 833fa70..a93c2f0 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -2755,173 +2755,273 @@ function applyPolyfills(){ }); } -SystemSettings.setBasePath("/pwa/stories/public/"); +SystemSettings.setBasePath("/pwa/wordRotator/public/"); Translator.supportedLanguages = ["de", "en"]; Translator.markTranslations = false; -class DataManager { - static load(url, isCachable, raw) { - isCachable = Helper.nonNull(isCachable, false); - raw = Helper.nonNull(raw, false); - let fullUrl = (isCachable) ? Helper.basePath(DataManager.cachePath + url) : Helper.basePath(DataManager.dataPath + url); - return fetch(fullUrl, {"credentials": "same-origin"}).then(function (res) { - if (raw) { - return res.text(); - } - return res.json(); - }).catch(function (e) { - console.error("error", e); - if (!raw) { - return { - "success": false, - "errors": [ - "not-online" - ] - } - } - }); +class Segment{ + constructor(element){ + this.rotation = 0; + this.element = element; } - static send(url, params) { - let fullUrl = Helper.basePath(DataManager.dataPath + url); + isSolved(){ + return this.rotation === 0; + } + + rotate(){}; - if (!(params instanceof FormData)) { - let newParams = new FormData(); - for (let k in params) { - newParams.append(k, params[k]); - } - params = newParams; - } + _updateElement(){}; - return fetch(fullUrl, { - "credentials": "same-origin", - "method": "POST", - "body": params - }).then(function (res) { - return res.json(); - }).catch(function (e) { - console.error("error", e); - return { - "success": false, - "errors": [ - "not-online" - ] - } - }); + applyRotations(rotations){ + return rotations; } - static buildQuery(values) { - return Helper.buildQuery(values); + getElement() + { + return this.element; } } -DataManager.dataPath = "data/"; -DataManager.cachePath = "cached/"; - -class SettingsSite extends AbstractSite$1 { - constructor(siteManager) { - super(siteManager, 'public/html/settings.html', "settings"); - for (let k in SettingsSite.settingsFragments) { - this.addSettingsFragment(k, new SettingsSite.settingsFragments[k](this)); - } - this.active = null; +class ParentSegment extends Segment { + constructor(element) { + super(element); + this.children = []; + this.class = "rotate-0"; } - addSettingsFragment(name, settingsFragment) { - this.addFragment("#settings-fragments", settingsFragment); - delete this.fragments["#settings-fragments"]; - this.fragments[name] = settingsFragment; + rotate() { + this.rotation += 90; + this.rotation %= 360; + + this._updateRotationClass(); } - onStart() { - let res = super.onStart(); - if (Helper.isNotNull(this.active) && !this.fragments[this.active].isActive()) { - this.setActive(null); + 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); } - - this.buildList(); - return res; + return rotations; } - setActive(name) { - if (Helper.isNotNull(this.active)) { - this.fragments[this.active].inflatePromise.then(function (view) { - view.classList.remove("active"); - }); - this.findBy("#show-fragment-" + this.active).classList.remove("active"); - } - this.active = name; - if (Helper.isNotNull(this.active)) { - this.fragments[this.active].inflatePromise.then(function (view) { - view.classList.add("active"); - }); - this.findBy("#show-fragment-" + this.active).classList.add("active"); - } - } - - buildList() { - let listNameElem = this.findBy("#settings-fragment-list"); - listNameElem.removeAllChildren(); - - let self = this; - for (let k in this.fragments) { - if (this.fragments[k].isActive()) { - - let liElement = document.createElement("li"); - liElement.id = "show-fragment-" + k; - liElement.appendChild(Translator.makePersistentTranslation(k, null, "a")); - liElement.addEventListener("click", function () { - self.setActive(k); - }); - listNameElem.appendChild(liElement); - - if (Helper.isNull(this.active)) { - this.setActive(k); - } + isSolved() { + for (let i = 0, n = this.children.length; i < n; i++) { + if (!this.children[i].isSolved()) { + return false; } } + return super.isSolved(); } - static addSettingsFragment(name, settingsFragment) { - SettingsSite.settingsFragments[name] = settingsFragment; + setChildren(children) { + this.children = []; + for (let i = 0, n = children.length; i < n; i++) { + this.addChild(children[i]); + } } - static setAddSettingsSite(addLink) { - SettingsSite.shouldAddSettingsSite = addLink; + 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()); + } } } -SettingsSite.settingsFragments = {}; -SettingsSite.shouldAddSettingsSite = true; +class LeafSegment extends Segment{ -InitPromise.addPromise(function (app) { - if (SettingsSite.shouldAddSettingsSite) { - app.addDeepLink("settings", SettingsSite.name); - - let settingsAction = new MenuAction("settings", function () { - app.startSite(SettingsSite.name); - }, MenuAction.SHOW_FOR_LARGE, 10000); - settingsAction.setIcon("img/settings.png"); - app.addDefaultAction(settingsAction); + constructor(element, leaf) { + super(element); + this.leaf = 'A'; + if (Helper.isNotNull(leaf)) + { + this.setLeaf(leaf); + } + } + + setLeaf(leaf) + { + this.leaf = leaf; } -}); -class ClockSite extends AbstractSite$1 -{ + _updateElement() { + this.element.querySelector(".leaf-element").removeAllChildren().appendChild(document.createTextNode(this.leaf)); + } +} + +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); + } +} + +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; + } +} + +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; + } +} + +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); + } + } +} + +class LevelSite extends AbstractSite$1{ constructor(siteManager) { - super(siteManager, "html/application/clock.html"); + super(siteManager, "html/application/level.html", "level"); } - onConstruct(args) { - this.setTitle("clock"); + this.setTitle("Level"); return super.onConstruct(args); } - onFirstStart(){ - DataManager.load("clock").then(function(data){ - document.getElementById("current-time").innerText = data.result.date; - }); + 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()); } } @@ -2941,7 +3041,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; @@ -2952,6 +3052,6 @@ app.setAddThemeAction(true); // window["Translator"]["setLanguage"] = Translator.setLanguage; InitPromise.resolve(app).then(function(){ - app.start(ClockSite); + app.start(LevelSite); Translator.setLanguage("de"); }); diff --git a/src/js/init.js b/src/js/init.js index fd832a1..1981bb7 100644 --- a/src/js/init.js +++ b/src/js/init.js @@ -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"); }); \ No newline at end of file diff --git a/src/js/settings.js b/src/js/settings.js index ceaef28..9b95678 100755 --- a/src/js/settings.js +++ b/src/js/settings.js @@ -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; diff --git a/src/module/Application/pwa/html/application/chat.html b/src/module/Application/pwa/html/application/chat.html deleted file mode 100644 index ded6e42..0000000 --- a/src/module/Application/pwa/html/application/chat.html +++ /dev/null @@ -1,35 +0,0 @@ -
- - - - -
-
-
- -
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
- -
-
-
- -
-
-
-
-
\ No newline at end of file diff --git a/src/module/Application/pwa/html/application/editStory.html b/src/module/Application/pwa/html/application/editStory.html deleted file mode 100644 index d9da71e..0000000 --- a/src/module/Application/pwa/html/application/editStory.html +++ /dev/null @@ -1,3 +0,0 @@ -
-
-
\ No newline at end of file diff --git a/src/module/Application/pwa/html/application/fragment/authorOverviewFragment.html b/src/module/Application/pwa/html/application/fragment/authorOverviewFragment.html deleted file mode 100644 index 336f8b6..0000000 --- a/src/module/Application/pwa/html/application/fragment/authorOverviewFragment.html +++ /dev/null @@ -1,10 +0,0 @@ -
-
-
-
- -
1
- -
-
-
\ No newline at end of file diff --git a/src/module/Application/pwa/html/application/fragment/chatOverviewFragment.html b/src/module/Application/pwa/html/application/fragment/chatOverviewFragment.html deleted file mode 100644 index 48330c9..0000000 --- a/src/module/Application/pwa/html/application/fragment/chatOverviewFragment.html +++ /dev/null @@ -1,3 +0,0 @@ -
- chats -
\ No newline at end of file diff --git a/src/module/Application/pwa/html/application/fragment/settingsFragment.html b/src/module/Application/pwa/html/application/fragment/settingsFragment.html deleted file mode 100644 index 1d84ce9..0000000 --- a/src/module/Application/pwa/html/application/fragment/settingsFragment.html +++ /dev/null @@ -1,76 +0,0 @@ -
-
-
-

- - -
-

- -
-
- -
-
- -
-
-
-
- -
-
- -
-
-
-
- -
-
- -
-
-
-
- -
-
- -
-
-
-
-
diff --git a/src/module/Application/pwa/html/application/level.html b/src/module/Application/pwa/html/application/level.html new file mode 100644 index 0000000..6cdd2ec --- /dev/null +++ b/src/module/Application/pwa/html/application/level.html @@ -0,0 +1,14 @@ +
+
+
+
+
+
+
+
+
+
+ +
+
+
\ No newline at end of file diff --git a/src/module/Application/pwa/html/application/storyOverview.html b/src/module/Application/pwa/html/application/storyOverview.html deleted file mode 100644 index 5ef3425..0000000 --- a/src/module/Application/pwa/html/application/storyOverview.html +++ /dev/null @@ -1,17 +0,0 @@ -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file diff --git a/src/module/Application/pwa/js/site/LevelSite.js b/src/module/Application/pwa/js/site/LevelSite.js new file mode 100644 index 0000000..95caafb --- /dev/null +++ b/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()); + } +} \ No newline at end of file diff --git a/src/module/Application/pwa/js/wordrotator/Level/Level.js b/src/module/Application/pwa/js/wordrotator/Level/Level.js new file mode 100644 index 0000000..1618bf2 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/src/module/Application/pwa/js/wordrotator/Level/SimpleLevel.js b/src/module/Application/pwa/js/wordrotator/Level/SimpleLevel.js new file mode 100644 index 0000000..37ca84f --- /dev/null +++ b/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); + } + } +} \ No newline at end of file diff --git a/src/module/Application/pwa/js/wordrotator/Segment/LeafSegment.js b/src/module/Application/pwa/js/wordrotator/Segment/LeafSegment.js new file mode 100644 index 0000000..8e4a60f --- /dev/null +++ b/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)); + } +} \ No newline at end of file diff --git a/src/module/Application/pwa/js/wordrotator/Segment/ParentSegment.js b/src/module/Application/pwa/js/wordrotator/Segment/ParentSegment.js new file mode 100644 index 0000000..f8cb72e --- /dev/null +++ b/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()); + } + } +} \ No newline at end of file diff --git a/src/module/Application/pwa/js/wordrotator/Segment/RowSegment.js b/src/module/Application/pwa/js/wordrotator/Segment/RowSegment.js new file mode 100644 index 0000000..036c362 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/src/module/Application/pwa/js/wordrotator/Segment/Segment.js b/src/module/Application/pwa/js/wordrotator/Segment/Segment.js new file mode 100644 index 0000000..6c6e619 --- /dev/null +++ b/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; + } +} diff --git a/src/module/Application/pwa/js/wordrotator/Segment/TemplateContainer.js b/src/module/Application/pwa/js/wordrotator/Segment/TemplateContainer.js new file mode 100644 index 0000000..fb33660 --- /dev/null +++ b/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); + } +} \ No newline at end of file diff --git a/src/scss/stories.css b/src/scss/stories.css deleted file mode 100644 index 5a551c5..0000000 --- a/src/scss/stories.css +++ /dev/null @@ -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; } diff --git a/src/scss/stories.scss b/src/scss/stories.scss deleted file mode 100644 index fd156f8..0000000 --- a/src/scss/stories.scss +++ /dev/null @@ -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"; \ No newline at end of file diff --git a/src/scss/wordRotator.scss b/src/scss/wordRotator.scss new file mode 100644 index 0000000..da1c90d --- /dev/null +++ b/src/scss/wordRotator.scss @@ -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); + } + } +} \ No newline at end of file